Rainyjune Blog

페이지 구성 (new.mustache) // 제목 Textbox 제목 // 내용 Textarea 내용 // Submit 버튼 Submit 위 form의 action은 submit 버튼을 누르면 /articles/create 를 post로 호출하도록 정의되었다. 제목 textbox의 내용은 title, 내용 textarea의 내용은 content로 전달된다. Controller의 Post 동작 수행 (ArticleController) Controller class는 @Controller annotation을 붙여준다. Controller 내용 정의는 아래와 같다. @Controller public class ArticleController { @PostMapping("/articles/create") //..

View Layout이란 웹 페이지의 화면 구성 대표적인 Layout 구성은 Header-Footer Layout Layout 파일은 자주 사용하는 화면 구성 등을 정의해두고 사용한다. Mustache에서 Layout을 불러올 때는 아래와 같이 적용한다. {{>layout_name}} View Layout의 위치 src > main > resources > templates > layouts

Component HTML 요소 집합을 특정 Function으로 정의하여 축약하는 방법. Function의 return() 구문 내에 HTML 요소 집합을 담는다. Function의 이름이 Component명이 된다. Component 문법을 사용하기 적절한 예 반복적인 HTML 요소들을 축약할 때 내용이 큰 페이지를 쓸 때 특정 HTML 요소들이 자주 변경될 때 Fragment 기법 Function에서 하나의 return 내에 동일한 태그를 병렬로 기입해야 하는 경우 해당 태그들을 또다른 태그로 묶어두거나 묶어두는 태그의 용도가 무의미하다고 느껴지면 형태로 묶어둘 수 있다.

setState state의 내용을 변경하는 함수 변경 시 변경 전 state와 변경될 state를 비교하고, 같으면 동작하지 않는다. Array/Object let [arr, setArr] = [1, 2, 3]; arr은 [1, 2, 3] 배열의 위치를 가리킨다. (c의 포인터처럼) arr의 내용을 바꾸려면? setArr( 변경될 state ) 만약 arr의 첫 번째 값인 1을 5로 바꾸고 싶다면? Array/Object의 값 변경 Array/Object는 값 변경시 원본은 유지하는 것이 좋다. 따라서 변경시 copy본을 만들고 새 state를 구성한다. let copy = arr; copy[0] = 5; setArr(copy); // => 변경되지 않는다. 위와 같이 코드를 작성하면 변경되지 않는다...

onClick html요소에 click시 이벤트 처리를 위한 event handler. // 사용법. // onClick={ function } 형태로 호출한다. // 1. function 정의 1 // 2. function 정의 2 { ... } }> // 3. 미리 정의된 function 호출 setState state는 일반 변수처럼 variable=... 형태로 사용하면 안된다. (html 재렌더링 등 state의 특성을 전혀 사용할 수 없음) state 정의시(useState) 사용한 state변경 함수를 호출하여 값을 변경하는데 이를 setState() 라고 함. // state 정의 let [state, setState] = useState(...);

State란? 자료의 상태를 저장해두는 일종의 변수. useState (https://ko.reactjs.org/docs/hooks-reference.html#usestate) 기본적으로 변수는 let, var, const 형태로 선언하고 자료를 저장해두는 역할을 한다. react는 변수를 state 형태로 저장해둘 수 있는데, 아래와 같이 사용한다. // import useState import { useState } from 'react'; // useState 변수 지정 let [state, setState] = useState(content); 더보기 Destructured 문법 // 일반적인 배열 선언 및 배열의 값을 변수로 할당하는 과정. let num[2] = [1, 2]; let a = n..

JSX? https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org JavaScript에서 HTML에서의 역할을 대신해준다. 기본 JSX 문법 css파일은 App.js 상단에 import 'css 경로'로 css를 import 해준다. class가 필요한 경우 element에 class="class_name"이 아니라 className="class_name"으로 지정한다. 변수를 사용할 때는 중괄호를 사용한다. { variable_name } style을 사용할 때는 style={ { style_name: 'value', ... } }..

필요 Tool (Windows 기준으로 설명하며, Mac도 크게 다르지 않음) Project 생성 작업대상 폴더에서 Terminal을 열고 npx create-react-app project_name 을 입력한다. html에 직접 react project를 구현할 수 있으나 너무 번거롭기 때문에 create-react-app 라이브러리를 사용한다. (https://create-react-app.dev/) 허가되지 않은 script... 에러가 발생하는 경우 관리자 권한으로 Powershell을 실행하고 Set-ExecutionPolicy Unrestricted를 실행하고 재시도. npx create-react-app project_name Project 열기 VS Code에서 폴더 열기를 통해 생성한 프..

HTML-CSS, JavaScript 강좌를 다 봤고.. React 공부를 시작한다. 코딩애플의 "React 리액트 기초부터 쇼핑몰 프로젝트까지!" 강좌를 들으며 기록한 내용을 블로그에 남겨둔다. Sourcecode는 Github (https://github.com/Rainyjune-Kr/ReactStudy)에 올려둔다.

View Template 웹페이지의 틀을 구성함. MVC Pattern View Template, Controller, Model을 사용해 각각의 역할을 별도로 수행함. 실습 내용 (FirstProject 실습파일 사용) View Template 구성 툴은 Mustache를 사용함. ViewTemplate 파일 위치 : src > resources > template Mustache의 변수 호출 방법 {{variable}} Controller 파일 위치 : src > main > java > mainpackage > controller package SpringBoot 2.7부터 한글 출력시 깨짐 현상 발생 시 application.properties에 server.servlet.encoding.forc..