2023/03/02 4

MAP()

JavaScript에서의 map() Array에서 map method는 array 요소만큼 반복하여 map method 영역에 기술된 callback 함수를 반복한다. map method 예제 let arrTest = [1, 2, 3]; let newValue = 4; // map은 arrTest 내용을 반복탐색하며 callback 함수를 호출한다. // parameter는 2개를 첫 번째 parameter는 arrTest의 값, 두 번째 parameter는 현재 반복문 실행 Index를 나타낸다. arrTest.map( (val, arrIdx) => { console.log(`value:${val}, Index:${arrIdx}`); // value:1, idx:0 // value:2, idx:1 //..

개발/React 학습 2023.03.02

동적 UI

동적 UI를 사용하기 위한 3-steps HTML/CSS를 사용하여 미리 디자인을 만든다 UI의 현재 상태를 state로 저장한다. 해당 state에 따라 UI가 어떻게 보일지 작성한다. HTML에서 조건문 사용하기 삼항연산자를 사용한다. { condition == true ? true_result : false_result } 글 제목을 클릭하면 특정 컴포넌트의 state가 변경되도록 구현하는 예제 function Component() { return( 세부 제목 상세 내용 ); } function App() { let [comp, setComp] = useState('closed'); function switchComp() { if (modal == 'closed') setModal('opened')..

개발/React 학습 2023.03.02

글쓰기 페이지

페이지 구성 (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") //..