쌩로그

목록 포스팅 개요 본론 2-1. 자바스크립트 배열의 map() 함수 2-2. 데이터 배열을 컴포넌트 배열로 변환하기 2-3. key 2-4. 응용 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 06장 컴포넌트 반복 을 학습하며 정리한 포스팅이다. 2. 본론 웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있다. import React from "react"; const IteratorSampleOfSample = () => { return ( 눈사람 얼음 눈 바람 ); }; export default IteratorSampleOfSample; 코드에서 다음 형태가 계속 반복되는 것을 볼 수 있다. ... 만약 코드가 좀 더 복잡하다면, 코드양이 늘어날 것이며, 파일 ..

목록 포스팅 개요 본론 2-1. ref는 어떤 상황에서 사용해야 할까? 2-2. ref 사용 2-3. 컴포넌트에 ref 달기 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 05장 ref: DOM에 이름 달기 을 학습하며 정리한 포스팅이다. 2. 본론 일반 HTML에서 DOM 요소에 이름을 달 때는 id를 사용한다. 특정 DOM 요소에 어떤 작업을 해야할 때 이렇게 요소에 id를 달면 CSS에서 특정 id에 특정 스타일을 적용하거나 자바스크립트에서 해당 id를 가지 요소를 찾아서 작업할 수 있다. src/index.js 파일 중에는 id가 root인 요소에 리액트 컴포넌트를 렌더링하라는 코드가 있다. const root = ReactDOM.createRoot(document.getElemen..

목록 포스팅 개요 본론 2-1. 리액트의 이벤트 시스템 2-2. 예제로 이벤트 핸들링 익히기 2-3.함수형 컴포넌트로 구현해보기 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 04장 이벤트 핸들링 을 학습하며 정리한 포스팅이다. 2. 본론 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예) 버튼에 마우스 커서를 올렸을 때는 onmouseover 마우스를 클릭했을 때는 onclick Form 요소의 값이 바뀔 때 onchange 2-1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 사용법은 HTML에서 이벤트를 작성하는 것과 비슷한데, 주의해야 할 몇 가지 사항..

목록 포스팅 개요 본론 2-1. 스프링 MVC 전체 구조 2-2. 핸들러 매핑과 핸들러 어댑터 2-3. 뷰 리졸버 2-4. 스프링 MVC - 시작하기 2-5. 스프링 MVC - 컨트롤러 통합 2-6. 스프링 MVC - 실용적인 방식 요약 1. 포스팅 개요 인프런에서 영한님의 스프링 MVC 1편 Section 05 스프링 MVC - 구조 이해를 학습하며 정리한 포스팅이다. 직접 MVC를 만든 것과 스프링 MVC의 구조를 비교해볼 것이다. 2. 본론 2-1. 스프링 MVC 전체 구조 다음은 직접 만든 MVC와 스프링 MVC의 구조다. 직접 만든 MVC 스프링 MVC 보면 그냥 똑같다. 이름에서 차이는 있겠지만, 구조는 똑같다. 직접 만든 MVC의 요소와 매핑되는 스프링 MVC의 요소는 다음과 같다. Fron..

목록 포스팅 개요 본론 2-1. 문제 인식 배경 &nbsp2-2. 문제 발생의 원인 2-3. 문제 발생을 일으키게 된 이유 요약 1. 포스팅 개요 해당 포스팅은 제목과 같이 JPA Entity에서 외래 키와 참조를 맺는 @JoinColumn 애너테이션에 대한 오개념을 바로잡기 위한 포스팅이다. 2. 본론 2-1. 문제 인식 배경 현재 회사에서 진행 중인 프로젝트는 여러 사용자가 하나의 데이터에 접근해서 수정할 수도 있고, 삭제할 수도 있다. 즉, A 사용자가 생성하고 B 사용자가 수정했다가 C 사용자가 삭제할 수도 있는 구조다. (사내 서비스라 요구사항이 이렇다.) 따라서 학습차원에서 했던 프로젝트처럼 어떤 게시물에 대해서 작성자만 접근할 수 있는 구조가 아니라서 생성날짜 및 수정날짜보단 누가 데이터를 ..

목록 포스팅 개요 본론 2-1. 클래스형 컴포넌트 2-2. 첫 컴포넌트 생성 2-3. props 2-4. state 2-5. state를 사용할 때 주의 사항 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 03장 컴포넌트 를 학습하며 정리한 포스팅이다. 2. 본론 컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 준다. 라이프 사이클 API를 이용하여 컴포넌트가 화면에서 나타날 때, 사라질 때 등 변화가 일어날 때 주어진 작업들을 처리할 수 있다. 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다. 2-1. 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지이다. 함수형 컴포넌트. 클래스형 컴포넌트 import '../ClassInstea..

목록 포스팅 개요 본론 2-1. 프론트 컨트롤러 패턴 소개 2-2. 프론트 컨트롤러 도입 - v1 2-3. View 분리 - v2 2-4. Model 추가 - v3 2-5. 단순하고 실용적인 컨트롤러 - v4 2-6. 유연한 컨트롤러1 - V5 2-7. 유연한 컨트롤러2 - V5 요약 1. 포스팅 개요 인프런에서 영한님의 스프링 MVC 1편 Section 04 MVC 프레임워크 만들기를 학습하며 정리한 포스팅이다. 2. 본론 2-1. 프론트 컨트롤러 패턴 소개 프론트 컨트롤러 도입 전 프론트 컨트롤러 도입 전에는 다음과 같았다. 공통로직을 타고, 컨트롤러를 타게 했었다. 프론트 컨트롤러 도입 후 프론트 컨트롤러를 도입하면 다음과 같아진다. FrontController 패턴 특징 프론트 컨트롤러 서블릿 하..

목록 포스팅 개요 본론 2-1. 코드 이해하기 2-2. JSX란? 2-3. JSX의 장점 2-4. JSX 문법 2-5. ESLint와 Prettier 적용하기 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 02장 JSX 를 학습하며 정리한 포스팅이다. 2. 본론 2-1. 코드 이해하기 yarn $ yarn create react-app [프로젝트 이름] npm $ npx create react-app [프로젝트 이름 or $ npm init react-app [프로젝트 이름] 프로젝트 구동 프로젝트 디렉터리 이동 후, start // yarn$ yarn start // npm$ npm start import logo from './logo.svg'; import './..

목록 포스팅 개요 본론 2-1. 왜 리액트인가? 2-2. 리액트의 특징 2-3. 작업 환경 설정 요약 1. 포스팅 개요 해당 포스팅은 리액트를 다루는 기술의 01장 리액트 시작 을 학습하며 정리한 포스팅이다. 2. 본론 2-1. 왜 리액트인가? 리액트 최대한 성능을 아끼고 편안한 사용자 경험(user experience)을 제공하면서 구현하고자 개발한 것이 리액트(react)이다. 오직 View만 신경 쓰는 라이브러리이다. 렌더링 사용자 화면에 뷰를 보여주는 것 리액트를 사용하려면 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야한다. 컴포넌트는 데이터를 업데이트할 때 바로 DOM에 반영하지 않고, 이전에 ..

목록 포스팅 개요 본론 2-1. 회원 관리 웹 애플리케이션 요구사항 2-2. 서블릿으로 회원 관리 웹 애플리케이션 만들기 2-3. JSP로 회원 관리 웹 애플리케이션 만들기 2-4. MVC 패턴 - 개요 2-5. MVC 패턴 - 적용 2-6. MVC 패턴 한계 요약 1. 포스팅 개요 인프런에서 영한님의 스프링 MVC 1편 Section 03 서블릿, JSP, MVC 패턴을 학습하며 정리한 포스팅이다. 2. 본론 2-1. 회원 관리 웹 애플리케이션 요구사항 회원 정보 이름 : username 나이 : age 기능 요구사항 회원 저장 회원 목록 조회 회원 도메인 모델 package spring.servlet.domain.member; import lombok.Getter; import lombok.Sette..