2023.08.18(금) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Day 5 보고

• TO-DO LIST

- 18강 리액트 기본 - 2 - JSX ~ 23강 1주차 Wrap-up 수강하기

- 17:00 정기 팀 회의

​

• 배운 내용 요약 정리

JSX (JavaScript XML)

JavaScript 안에 있는 HTML 코드

​

하나의 컴포넌트에는 반드시 하나의 root element를 리턴해야 한다.

​

BEM 네이밍 규칙

CSS 클래스 명에 대한 네이밍 컨벤션

1. 소문자 숫자만 조합
2. 조합은 하이픈(-)으로 연결하여 작명
3. 네이밍 조합은 형태 > 의미 > 순서_상태를 기본 순서로 사용

(예) btn-cancel-01-off

4. 네이밍 조합의 _ 는 파일, 폴더, 이미지 등에 사용

https://getbem.com/naming/

 

BEM — Block Element Modifier

BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

getbem.com

rem

폰트 사이즈에 비례

​

space around

space between

space evenly

​

CSS 파일은 일반적으로 JS 파일과 같은 위치에 옆에 둔다.

​

- props

함수에 매개변수를 넣는 것처럼 컴포넌트에 전달하는 값(Properties)

​

js call back function

​

컴포넌트 쪼개기

-> 관심사 별로 분리해서 나눔

컴포넌트 합성

-> 유연하게 변화 대응

​

- 모듈 시스템

<Export를 하는 두 가지 방법>

하나의 파일은 하나의 default export만 가능하다.

​

<Import 안의 세부 로직>

1. Toast 라는 변수를 선언 -> 변수명은 다른 값으로 얼마든지 가능하다.
2. /components/Toast.js 에서 default export를 찾음
3. 2에서 찾은 default export를 Toast에 할당

​

Named export는 한 파일에 여러개도 가능하다.

단, 이름 변경 불가!

​

import 시에 경로에 ./이나 ../가 없으면 그건 라이브러리를 import 하는 것

(..은 하나 더 상위 경로)

설치된 라이브러리는 package.json 파일에서 확인 가능

​

• 부족한 점

개념들은 대충 머리에 남겨 뒀지만,

아직은 많이 부족하다. 복습을 통해 체득해야지!

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

모든 것이 새롭다 ㅎㅎ...

​

• 헷갈리거나 실수한 점

​

• 회고

이번주는 Daily Scrum, Check Up, Live Coding 모두 제대로 참여하지 못했다.

마음 먹었으면 제대로 공부해야지.. 뭐가 더 중요한지 우선순위를 스스로도 잘 알면서 마음을 못 잡았다.

학기 시작하면 더 따로 공부하기 어려울텐데, 그래도 최선을 다해보자.

노력한 만큼, 결과는 따라올 것이다 !