물망초.
-
이상적인 코드 스플릿팅물망초. 2023. 11. 27. 11:03
이상적인 코드 스플리팅 전략 1. 크리티컬 경로 최적화 초기 로드 중요성: 사용자가 처음 사이트에 접근할 때 필요한 최소한의 코드만 로드합니다. 메인 라우트 분할: 가장 자주 방문되는 경로의 컴포넌트는 초기 번들에 포함시키고, 그 외 라우트는 지연 로딩합니다. 2. 사용자 상호작용 기반 로딩 동적 컴포넌트 로딩: 사용자 상호작용이 필요한 컴포넌트는 React.lazy를 사용하여 필요할 때만 로드합니다. 페이지 내 대형 컴포넌트 분리: 대형 컴포넌트나 복잡한 컴포넌트는 별도의 청크로 분리합니다. 3. 서드 파티 라이브러리 분리 헤비 라이브러리 분할: 크기가 큰 서드 파티 라이브러리는 별도의 청크로 분리합니다. 조건부 로딩: 특정 기능이나 사용자 그룹에만 필요한 라이브러리는 조건에 따라 로드합니다. 4. 라..
-
Reactjs hooks 를 통한 비교 이해물망초. 2022. 5. 30. 00:37
Reactjs 구현체에서 활용 중인 비교와 구현 코드 package/react-conciler/src/ReactFiberHooks.new.js/areHookInputsEqual ... 아래는 실질 비교부 for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) { if (is(nextDeps[i], prevDeps[i])) { continue; } return false; } return true; } is? Object.is // Object.is 폴리필 function is(x: any, y: any) { return ( (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) //..
-
Typescript - 기본타입물망초. 2022. 4. 24. 17:59
아래 내용은 강좌를 들으며 공부한 내용을 요약 정리한 자료입니다. Types number: 11, 11.23, -550 -> integer, float 을 포함 string: 'hi', "hi", `h` boolean: true, false -> 참과 거짓을 다룸 값이 두 개 뿐 object: { age: 30 } -> 모든 자바스크립트 객체는 모두 객체 타입이지만, 타입스크립트에서는 조금 더 구체적인 객체도 있음.리터럴 또는 생성자 필요 array: [1,2,3] -> 어떤 자바스크립트의 타입도 저장할 수 있는 구조 tuple: [1,2], [1, “admin”] -> 길이 및 타입이 고정 된 배열 enum: enum { NEW, OLD } -> 열거 목록 제공, 라벨들은 0부터 시작하는 숫자로 변환되..
-
Dockerfile 명령어물망초. 2022. 1. 17. 21:49
Dockerfile → 이미지를 만드는데 필요한 모든 단계가 기술 되어 있음. app의 소스코드 저장소의 루트 디렉토리에 포함되어야 함 // 아래 이어지는 명령어들은 순차적으로 수행된다. FROM node:12-alpine MAINTAINER Seonyeong Jang LABEL “group”=”FE” USER root ENV TZ=Asia/Seoul ENV CP=/data/app/linewalks RUN npm install —global pm2 RUN mkdir $CP ADD *.js* $CP/ WORKDIR $CP CMD pm2 start ecosystem.config.js && tail -f /dev/null CMD ["supervisord", "-n"] FROM 해당하는 node:12-alpin..
-
redux] async 를 어떻게 처리 하는게 좋을까?물망초. 2021. 11. 14. 16:31
async 를 처리하기 위한 다양한 것 중에 나는 무엇을 써야할까? thunks? saga? observables? Thunks are best for complex synchronous logic (especially code that needs access to the entire Redux store state), and simple async logic (like basic AJAX calls). With the use of async/await, it can be reasonable to use thunks for some more complex promise-based logic as well. (썽크는 복잡한 동기 논리(특히 전체 Redux 저장소 상태에 액세스해야 하는 코드)와 간단한 비동..
-
왜 text-overflow ellipsis 가 동작하지 않는거지??물망초. 2021. 8. 21. 02:46
가끔 그럴 때가 있습니다.. 잘 사용하던 친구가.. 동작하지 않을 때가.. 물론 제대로 알고 사용하던게 아니라서 그런 것이겠지요 이번도 그랬습니다. text-overflow: ellipsis; 가 동작을 하지 않는 문제였습니다. 처음에는 mdn text-overflow를 보며 작성합니다. .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 여기서 문제는 위 코드들이 문제가 아니였어요.. code-sandbox 위와 같은 문제와 넘치는데 ellipsis가 적용되지 않는 문제가 있었어요! 그래서 다시 mdn을 살펴봤습니다. The text-overflow property only affects content that is..