Front-end (31) 썸네일형 리스트형 useLayoutEffect 컴포넌트 생명주기를 관리하기 위해 사용되는 Hook useEffect비동기적으로 실행이벤트 루프의 테스크 큐에 콜백이 쌓이는 방식으로 동작useEffect의 콜백이 task queue에 쌓여, DOM 업데이트 후 실행되기 때문비동기 작업이나 DOM업데이트 후에 실행되어야 하는 작업에 사용사용되는 케이스: 데이터 fetching, 이벤트 리스너 useLayoutEffect동기적으로 실행DOM이 업데이트 되기 전에 실행렌더링 후, 페인팅 전에 실행DOM 조작이나 레이아웃 측정과 같은 작업에 사용동기적 실행으로 인해 성능에 영향이 있을 수 있어 필요한 경우에만 사용사용되는 케이스: 툴팁, 모달, DOM 측정 ( DOM요소의 크기나 위치 측정이 필요한 경우 ) 서버 컴포넌트(RSC) react 18 이상 환경에서 사용가능기존 react component vs server component기존 react component server component모든 컴포넌트가 클라이언트(브라우저) 에서 렌더링컴포넌트를 서버에서 렌더링하고 결과만 클라이언트로 전송javascript 번들이 클라이언트로 전송되어 실행됨javascript 코드가 아닌 UI 표현만 전송됨초기 로드 시간이 느릴 수 있음 ( 큰 JS 번들 다운로드 )클라이언트 번들 사이즈 감소 및 초기 로드 시간 개선 주요 특징서버에서만 실행되어, useState, useEffect 등 ui 상태 관련 hook 사용불가브라우저 API 접근 불가서버 리소스 직접 접근 가능 ( ex - 해당 서버 내의 DB 직접 접근 가능 )서버 컴포넌트는.. turborepo Task 정의각 task object의 key들은 turbo run 으로 실행할수 있다turborepo는 task name과 동일한 script를 workspace의 package.json에서 찾음 task 를 정확한 순서로 동작시키기dependsOn^ prefix 가 붙은 것은 다른 package의 build가 우선되어야 하는경우 의존성 있는 package우선 빌드 이후 applicaton 이 빌드됨 동일한 package에서 두개의 task를 특정 순서에 따라 실행하고싶을때 prefix ^ 없이 추가package를 특정하고싶은경우 package#build 처럼 # 로 연결의존하는 작업이 없는경우 빈 배열을 할당output 특정하기task가 성공적으로 완료되었을때 캐싱되어야하는 file, director.. React 상호작용 추가하기 State: 컴포넌트의 메모리 상호작용으로 화면의 내용을 변경해야하는 경우가 많음 컴포넌트는 변경되는 내용을 "기억" 해야함 React 에서는 컴포넌트별 메모리를 state 라고 부름 Render and commit Step 1. trigger render: react가 손님의 주문을 주방으로 전달 컴포넌트 렌더링을 촉발시키는 원인은 두가지 컴포넌트의 첫 렌더링 컴포넌트의 state(또는 상위 요소중 하나) 가 업데이트된 경우 set 함수로 state 가 업데이트 되고 이것은 렌더링을 촉발시킴 컴포넌트의 state를 업데이트하면 자동으로 렌더링 대기열에 추가됨 (즉시 렌더링이 되는것이 아님) Step 2. React가 컴포넌트를 렌더링합니다 랜더링을 촉발시키면 React는 컴포넌트를 호출하여 화면에 표시.. React로 사고하기 컴포넌트라고 하는 조각으로 분해하고 서로 다른 시각적 상태를 기술 마지막으로 컴포넌트를 서로 연결해 데이터가 흐르도록 합니다. Step 1: UI 컴포넌트 계층 구조로 나누기 단일책임원칙에 따라 컴포넌트를 분해하고 이름을 지정 변하지 않는 것은 상위컴포넌트에 그대로 유지 (내가 고안한 방식) 변하는것들(재사용되는것)들은 하위 컴포넌트로 생성 (내가 고안한 방식) 상위 컴포넌트에서 하위컴포넌트로 내려가면서 필요에 따라 분해하는것이 효율적으로 보임(미리 작게 쪼개면 필요이상의 분해가될수있음) Step 2: 정적인 UI 만들기 상호작용을 추가하지 않고 정적 UI 구성 state없이 prop만을 이용하여 구성 간단한 ui의 경우 하향식으로 진행 대규모 프로젝트에서는 상향식으로 진행(최소 단위부터 구현) 데이터가.. Effective Javascript(5,6,7장) 5. 배열과 딕셔너리 item43. 직접적인 객체의 인스턴스로 가벼운 딕셔너리를 만들어라 객체는 문자열 프로퍼티의 이름을 값으로 매핑하기때문에 딕셔너리, 즉 문자열을 값으로 매핑하는 collections를 구현하는데 매우 간편하다. for...in 문을 통해 객체의 프로퍼티 명을 열거하기 쉬움 하지만, 모든 객체는 prototype객체의 프로퍼티를 상속하기때문에 인스턴스에서 관리하는 프로퍼티 외에 prototype에서 고정된 프로퍼티또한 포함하게 됨 배열을 생성하고 배열에 프로퍼티를 추가하는 방식은 프로토타입을 오염시킬수 있음 객체를 리터럴로 생성하고 프로퍼티를 추가하는 방식은 Object.prototype에 프로퍼티 추가가 가능하여 안전함이 보장되지 않음 객체리터럴을 사용해 가벼운 딕셔너리를 만들어 사.. Effective Javascript(3,4장) 3. 함수 사용하기 item18. 함수, 메서드, 생성자 호출의 차이를 이해하라 하나의 생성자 function을 사용하는 세가지 서로 다른 패턴 함수호출 (function hello(){}) this 사용이 가능하지만 함수로써 호출되면 수신자가 전역객체가 되어 유용하지 않음 메서드 -> 함수로 동작하는 객체의 프로퍼티 메서드 호출시 호출 표현식 스스로가 수신자 객체 this로의 바인딩을 결정함 보통 어떤 객체의 메서드를 호출함면 메서드를 찾고, 해당 객체를 수신자 객체로 사용 생성자(new 연산자로 실행) this값으로 새로운 객체를 전달하고, 암묵적으로 이 객체를 결과로 반환 객체를 초기화 하는게 주요 역할 ! strict mode에서 this의 기본바인딩이 undefined로 변경됨 item19. 고.. Effective Javascript(1,2장) 1. 자바스크립트에 익숙해지기 item1. 어떤 자바스크립트를 사용하고있는지 알아야한다 자바스크립트의 다양한 구현체들 때문에 어떤 기능이 어떤 플랫폼에서 사용가능한지 추적이 어려움 이유는 주요 생태계인 웹브라우저에서 개발자가 작성한 코드를 실행하기 위해 어떤 버전의 js를 사용할수 있는 제어할 방법이 없어서 따라서, 웹 프로그램은 모든 브라우저에서 지속적으로 동작할 수 있도록 주의 strict 모드 오류를 일으키기 쉽거나 문제를 일으킬만한 기능들을 사용할수 없게 만드는 방법 "use strict" 라는 고정문자열 추가로 활성화가 가능하므로 하위호환에도 문제가 없음 !스크립트 병합시 주의해야할 케이스 strict 모드는 스크립트 또는 함수 상단에 선언되었을 때만 인식 -> 병합 순서에 따라 전부 적용되지 .. 이전 1 2 3 4 다음 목록 더보기
