코드잇 스프린트 4기/위클리 페이퍼19 코드잇 스프린트 9주 차 위클리 페이퍼 코드잇 스프린트 4기 9주 차 위클리 페이퍼 1. 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요. 장점 className이 겹치는 것을 걱정할 필요가 없었다. props를 활용한 조건부 스타일링이 편했다. 단점 VSCode에서 컴포넌트 태그는 초록색으로 나타나는데 HTML 태그가 없이 전부 초록색 태그만 보이니까 가독성이 안좋다고 느껴졌다. 일반적인 컴포넌트로 HTML, CSS 작업 하다가 CSS-in-JS를 사용하니까 적응이 어려웠다. 2. Presentational & Container 디자인 패턴에 대해 설명해 주세요. 관심사의 분리(Soc; separation of concerns)를 하는 하나의 방법으로 하나의 컴포넌트에서 비지니스 로직과 뷰(UI)를 처리하던 것을 비지니스 로.. 2024. 2. 24. [WEB] CSR, SSR, SSG 코드잇 스프린트 4기 8주 차 위클리 페이퍼 CSR(Client-side Rendering) 렌더링의 주체가 클라이언트(웹 브라우저)이다. 웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링을 진행한다. 과정 1. 사용자가 방문하면, 브라우저가 서버로 요청을 보낸다. 2. 서버에서 HTML 뼈대와 자바스크립트, CSS 파일 등을 보내준다. 3. 브라우저가 다운로드하는 동안 사용자는 아무것도 볼 수 없다. 4. 다운로드 완료된 자바스크립트가 실행되어 페이지를 그린다. 장점 서버의 부하가 비교적 적다. 초기 로딩 이후에는 비교적 빠르다. 단점 모든 자원을 한번에 불러와서 첫 로딩이 비교적 느리다. 자바스크립트가 실행 되어야 메타데이터가 변경되어 SEO에 불리하다. SSR(Server-side Render.. 2024. 2. 17. [React] 생명주기(Life Cycle) 코드잇 스프린트 4기 8주 차 위클리 페이퍼 생명주기란? 컴포넌트에서 특정 시점(컴포넌트 생성, 변경, 제거)에 이벤트를 호출하는 것이다. 클래스형 컴포넌트와 함수형 컴포넌트는 라이프 사이클을 관리하는 방법이 다르다. 클래스형 컴포넌트 생성할 때(Mounting), 변경할 때(Updating), 제거할 때(Unmounting)의 메소드를 제공한다. 생성할 때 · constructor: 컴포넌트가 호출되어 렌더링되기 이전에 가장 먼저 호출되는 함수. · getDerivedStateFromProps: props로 받아온 것을 state에 설정. · render: 컴포넌트를 렌더링하는 함수. · componentDidMount: 첫 렌더링 이후에 마운트(DOM에 추가)되면 발생하는 함수. 변경할 때 · get.. 2024. 2. 17. [React] 리스트 렌더링 key 코드잇 스프린트 4기 7주 차 위클리 페이퍼 사용 key는 리액트에서 DOM 요소를 식별하는 유일한 수단이다. 리스트의 요소에서 변경이 있는 요소만 리렌더링을 수행한다. const arr = ['a', 'b', 'c', 'd']; {arr.map((item) => ( {item} ))} key를 등록하지 않으면 리스트의 요소가 추가, 수정, 삭제 되면 리액트는 정확히 어떤 반영이 되었는 지 알 수 없기 때문에 변경이 없는 요소까지 리렌더링이 수행된다. const arr = ['a', 'b', 'c', 'd']; {arr.map((item) => ( {item} ))} 각 요소를 식별할 수 있는 고유의 key를 부여하면 리액트는 효율적인 DOM 트리를 업데이트할 수 있다. 규칙 key는 리스트의 요소 안에.. 2024. 2. 11. 이전 1 2 3 4 5 다음
