[React] 3: 속성과 JSX, 상태 다루기, 카운터 설정, 데이터 불러오기

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 ✔ 리액트 스타일링 ✔ 컴포넌트 복잡하게 다루기 ✔ 속성 전달 ✔ JSX 복잡하게 다루기 ✔ 상태 다루기, 카운터 설정 ✔ 데이터를 UI로 불러오기 이벤트 다루기 컴포넌트 생명주기 (생명주기 메소드) DOM 엘리먼트 접근하기 라우터를 통한 싱글 페이지 앱 구축 Todo list 앱 제작 리액트 개발 환경 구성 6. 속성다루기 6.1. 나쁜, 짜증나는 방법 하나 목적지로 향하는 경로에 있는 모든 컴포넌트들기 각 속성에 접근하고 재정의 해 전달하는 것. 6.2. 해결책: 스프레드 연산자 var items = ["1", "2", "3"]; // 배열 선언 및 초기화 ..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 6.
• textsms

[React] 2: 컴포넌트 스타일링, 컴포넌트를 보다 복잡하게 다루어보기

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 ✔ 리액트 스타일링 ✔ 컴포넌트 복잡하게 다루기 속성 전달 JSX 복잡하게 다루기 상태 다루기, 카운터 설정 데이터를 UI로 불러오기 이벤트 다루기 컴포넌트 생명주기 (생명주기 메소드) DOM 엘리먼트 접근하기 라우터를 통한 싱글 페이지 앱 구축 Todo list 앱 제작 리액트 개발 환경 구성 4. Rreact 스타일링 4.1. 개요 4.1.1. CSS(cascading Style Sheets)에 대하여 콘텐츠와 프레젠테이션 사이를 잘 분리할 수 있음 셀렉터(selector)문법을 통해 스타일 적용과 건너뛸 엘리먼트를 유연하게 선택하도록함 4.1.2. 리액트가..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 5.
• textsms

[React] 1: JSX, 리액트 컴포넌트

React에 대한 개인학습을 기록합니다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 ✔ 리액트 개요 확인 ✔ JSX다루기 ✔ 리액트 컴포넌트 리액트 스타일링 컴포넌트 복잡하게 다루기 속성 전달 JSX 복잡하게 다루기 상태 다루기, 카운터 설정 데이터를 UI로 불러오기 이벤트 다루기 컴포넌트 생명주기 (생명주기 메소드) DOM 엘리먼트 접근하기 라우터를 통한 싱글 페이지 앱 구축 Todo list 앱 제작 리액트 개발 환경 구성 1. 리액트 개요 1.1. React 등장 이전, UI 제작 경향 1.1.1. 기존의 멀티 페이지 앱- 여러 개의 개별 페이지로 구성됨 앱의 상태관리에 매우 좋음 쿠키를 통한 사용자 데이터 저장과 서버 측 매커니즘(그것도 약간)을 제외하면 신경 쓸 게 없음 1.1.2. 최근 싱..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 5.
• textsms

[React] 0: React 벽돌깨기 리스트

React에 대한 개인학습을 기록합니다. INTRO 내 블로그의 포스팅 양식을 한 번 뒤엎을 예정이다. 타이틀과 컨텐츠 둘 다 규격이 제멋대로이니 보기 좋지 않다. 템플릿도 나랑 안 맞는 것 같아서 티스토리보다 Velog나 Wordpress로 옮길까 싶기도 하지만 이에 대해선 설날 전에 결정할 것 같다. 이번에 빠르게 돌려 볼 컨텐츠는 React인데 하게 된 이유는 해야해서다. 해야 되는 걸 어케. 차례를 정하고 독파할 거다. 체크리스트 ☑ TITLE ✔ 연습용 레포 생성 리액트 개요 확인 JSX다루기 리액트 컴포넌트 리액트 스타일링 컴포넌트 복잡하게 다루기 속성 전달 JSX 복잡하게 다루기 상태 다루기, 카운터 설정 데이터를 UI로 불러오기 이벤트 다루기 컴포넌트 생명주기 (생명주기 메소드) DOM 엘..

• format_list_bulleted ✏️ 개발 공부/ETC
• · 2022. 1. 4.
• textsms

[3] StringBoot, 롬복 플러그인 적용하기

도서, 스프링 부트와 AWS로 혼자 구협하는 웹 서비스(2019)를 토대로 공부한 내용입니다. 1. 롬복 : 자바 개발시 자주 사용하는 코드 Getter, Setter, 기본생성자, toString등을 어노테이션으로 자동 생성해줌 1.1. 의존성 코드 작성 build.grade > 의존성에 다음 코드 작성 implementation('org.projectlombok:lombok') annotationProcessor('org.projectlombok:lombok') testImplementation('org.projectlombok:lombok') testAnnotationProcessor('org.projectlombok:lombok') 1.2. 롬복 플러그인 2021기준 최신판에서는 lombok이 이..

• format_list_bulleted ✏️ 개발 공부/SpringBoot
• · 2022. 1. 3.
• textsms

[2] Spring Boot에서 테스트 코드 작성하기

도서, 스프링 부트와 AWS로 혼자 구협하는 웹 서비스(2019)를 토대로 공부한 내용입니다. 1. 테스트 코드 관련 개념 1.1. TDD란 TDD: 테스트가 주도하는 개발 즉, 테스트 코드를 먼저 작성하는 것부터 시작 1.1.1. TDD-레드 그린 사이클 실패하는 테스트를 먼저 작성한다 (RED) 테스트가 통과하는 프로덕션 코드를 작성한다 (GREEN) 테스트 통과시 프로덕션 코드를 리팩토링한다 (Refactor) 1.2. 단위 테스트란 TDD의 첫 단계인 기능단위 테스트 코드 작성 테스트 코드를 굳이 먼저 작성하지 않아도 된다 리팩토링이 포함되지 않는다 테스트 코드만 작성하는 것을 이야기한다 1.2.1. 테스트 코드 작성 이유 단위 테스트는 개발단계 초기 문제를 발견하게 도움 단위 테스트는 개발자가 ..

• format_list_bulleted ✏️ 개발 공부/SpringBoot
• · 2022. 1. 2.
• textsms