Sintory의 웹 개발 블로그

DB에 데이터를 기록하기 위해서는 자바언어로는 이해하지 못한다.DB는 SQL이라는 언어를 사용하기 때문이다. DB에 어떻게 자바 언어를 내릴 수 있나? 바로 JPA(JAVA PERSISTENCE API) - 자바언어로 DB명령을 내리는 도구가 필요하다.데이터를 객체 지향적으로 관리할 수 있게 해준다.JPA 의 핵심 도구는 Entity와 Repository가 있다.Entity는 자바객체를 DB가 이해할 수 있게 만든 것으로, 이를 기반으로 테이블이 만들어진다.Repository는 엔티티가 DB 속 테이블에 저장 및 관리될 수 있게 하는 인터페이스이다.그리하여, 과정을 얘기하자면 DTO를 Entity로 변환하고 이를 Repository를 이용해 Entity를 DB에 저장하게 하여야한다.항상 내 것으로 만들기..

컨트롤러에서 폼 데이터를 받기 위해서는 DTO(Data Transfer Object)에 담아 받는다. 웹페이지 만드는 순서에 대해서 얘기를 해보겠다. 1. 뷰 페이지를 만든다.- Form 태그의 action 속성으로 데이터를 어디보낼지 결정하고- method 설정으로 어떻게 보낼지 정의할 수 있다. (get or post)2. 컨트롤러를 만든다.- PostMapping 방식으로 URL 주소를 연결한다.3. 전송받은 데이터를 담아둘 객체인 DTO를 생성한다.4. 컨트롤러에서 폼 데이터를 전송받아서 해당 데이터를 DTO에 담는다.   1. 뷰페이지를 만든다.{{>layouts/header}} 제목 게시물 작성 submit {{>l..

뷰 템플릿과 MVC 패턴 뷰 템플릿은 여러사용자를 위해서 여러개의 View를 만드는 것이 아닌, View를 하나의 Template로 만들고 여기에 변수를 삽입하는 식으로 보여주기 위한 기술이다.즉, 웹페이지(View)를 하나의 틀(Templete)로 만들고 여기에 변수를 삽입해 서로 다른 페이지를 보여주기 위함이다.  Spirng Boot에서는 뷰 템플릿을 만드는 도구로 Mustache(머스테치)라는 도구가 있다.뷰 템플릿을 실행하기 위해서는 역할을 분담하기 위한 동작 기법인 MVC 패턴을 알아야한다.화면을 담당하는 View 에는 컨트롤러와 모델이라는 두 개념이 있다.Controller는 클라이언트의 요청에 따라 서버를 처리하는 역할.Model은 데이터를 관리하는 역할이다.화면을 보여주고(View) 클라..

이전 게시물에서 알려줬다시피,스프링 부트는 스프링스타터 라는 개념을 통하여 기본적인 의존성들을 미리 설정해 놓고, 선택만 하면 되게 만들어줌. 그리하여 Spring initializr 를 통해 웹 브라우저에서 쉽게 프로젝트가 생성 가능함. 1. Project- Maven project : Java 빌드 도구인 Maven을 사용하여 프로젝트 빌드 + Maven이란 의존성 관리와 빌드 자동화 도구- Gradle project: Java 빌드 도구인 Gradle 사용하여 프로젝트 빌드 + gradle은 더 유연하고 강력한 빌드 시스템 제공 2. Language - java: 기본적으로 지원하는 언어- kotlin: JVM 기반 언어, java와 호환됨. Spring이 코틀린 공식적으로 지원함- Groovy: ..

1) 스프링이란?- Spring Framework 는 자바에서 가장 많이 사용되는 프레임 워크이다.- 의존성 주입과 제어역전, 관점지향프로그래밍이 가장 중요한 요소위 요소들을 통해 느슨한 결합을 달성할 수 있음. Loose Coupling> 느슨한 결합으로 개발한 어플리케이션은 단위테스트를 수행하기 용이함. > 재사용을 위함.- Spring은 Java 기반의 애플리케이션 프레임워크- 엔터프라이즈 애플리케이션을 효율적으로 개발할 수 있도록 돕는 다양한 기능을 제공- 현재는 다양한 하위 프로젝트들이 존재하여, 웹 애플리케이션부터 배치 처리, 마이크로서비스, 클라우드 환경까지 지원하는 범용적인 프레임워크 (1) 주요 특징① Ioc Inversion of Control: - spring의 핵심 개념 중 하나는 ..

TypeScript 는 JavaScript의 확장 언어이다.JavaScript 의 기능은 그대로 가져가면서 "타입" 을 추가로 지원하는 언어이다.  1. 나오게된 배경JavaScript 는 브랜든 아이크가 10일만에 만든 언어이다.브라우저에 짧은 코드 작성을 위한 용도로 만들어져으나, JS가 점차 유명해지고 짧은 코드가 아닌 수많은 코드를 작성해야하는 상황이 생긴 것이다.짧은 코드를 위한 JS는 긴 코드로 작성시, 발생하는 오류가 있는데. 이는 JavaScript의 특징 때문이다. 바로 JS는 "동적 타입 언어" 라는 것. 여기서 동적 타입 언어는 어떠한 데이터 타입의 값도 자유롭게 변경할 수 있다는 것이다.JS에서 값을 할당하는 시점에 변수의 타입은 동적으로 결정되고, 자유롭게 변경 가능하다.변수에 저..

누적 방식 생략.1. appendChild- 가장 기본적인 방- 기존 내용은 유지, 새로운 요소 추가 가능- DOM 요소를 생성하고, 이를 부모 요소에 추가하는데 사용- Dom 요소만 추가 가능.function addtext(event) {  event.preventDefault();  // 새로운 텍스트 노드 생성  const newText = document.createElement("p");  newText.innerText = "Hello";  // 기존 내용에 추가  result.appendChild(newText);} 2. append- appendChild와 비슷하지만, 더 유연- 텍스트 노드와 DOM 요소 모두 추가 가능- 여러 요소를 한번에 추가 가능function addtext(even..

텍스트를 추가할 때 사용하는 코드로는 innerText와 appendChild 가 있다. 1. innerText 의 동작- 요소의 텍스트 내용을 덮어씌우는 방식으로 작동- 기존에 있는 내용을 지우고 새로운 텍스트로 대체매번 같은 text만 표시되고 이전에 추가된 텍스트는 사라지게 됨. 2. appendChild 의 동작- 기존의 내용은 유지되고, 새로운 요소를 추가- DOM 요소를 생성하고, 이를 부모 요소에 추가하는 데 사용> 그리하여 document.createElement("p") 로 새로운 요소 를 생성 후   result.append(text) 하여야 #result에 새로운 요소를 추가할 수 있다. 3. innerText에도 텍스트를 계속 추가하는 방법계속해서 텍스트를 추가할 수도 있다. 하지만..

JavaScript의 자료형은 크게 두 가지로 나눌 수 있다.[ 원시 자료형(7개) ] 과 [ 참조 자료형(1개) ] 로 나눌 수 있다. 원시 자료형이란 값이 직접 저장되며, 변경 불가능(immutable) 하다.참조 자료형이란 값이 메모리 주소를 통해 저장되며, 객체 기반으로 작동한다.하지만, 이렇게만 정리를 하면 이해하기 어려울 것이다. 값이 직접 저장된다는 건 이해가 된다해도 메모리 주소에 저장이된다? 이 부분은 이해하기 어려울 것이다. JavaScript 에서 변수와 메모리는 프로그램이 실행되면서 데이터를 관리하고 사용하는 방식의 핵심이다.이러한 모든 부분을 조금이라도 이해하기 위해서는 변수 선언과 메모리 할당, JS의 메모리 구조를 자세히 알 필요가 있다. 1. 변수와 메모리의 관계1) 변수의 ..

버튼을 클릭하여 onclick 이벤트를 작동하고 싶을 때, 활용할 수 있는 코드는 정말 많다.이번 시간에는 그러한 코드 유형들을 살펴보겠다. 1. HTML 내에서 직접 Onclick 사용- onclick 속성을 이용하여 인라인으로 이벤트 처리 가능button onclick="alert('Button clicked!')">Click Mebutton>> 버튼을 클릭시, alert() 안에 있는 텍스트를 화면에 띄운다. 2. JavaScript 에서 Dom 요소에 직접 onclick 할당const button = document.querySelector('button');button.onclick = function () {    console.log('Button clicked!');};> 익명 함수임 3...