전체 글
-
이상적인 코드 스플릿팅물망초. 2023. 11. 27. 11:03
이상적인 코드 스플리팅 전략 1. 크리티컬 경로 최적화 초기 로드 중요성: 사용자가 처음 사이트에 접근할 때 필요한 최소한의 코드만 로드합니다. 메인 라우트 분할: 가장 자주 방문되는 경로의 컴포넌트는 초기 번들에 포함시키고, 그 외 라우트는 지연 로딩합니다. 2. 사용자 상호작용 기반 로딩 동적 컴포넌트 로딩: 사용자 상호작용이 필요한 컴포넌트는 React.lazy를 사용하여 필요할 때만 로드합니다. 페이지 내 대형 컴포넌트 분리: 대형 컴포넌트나 복잡한 컴포넌트는 별도의 청크로 분리합니다. 3. 서드 파티 라이브러리 분리 헤비 라이브러리 분할: 크기가 큰 서드 파티 라이브러리는 별도의 청크로 분리합니다. 조건부 로딩: 특정 기능이나 사용자 그룹에만 필요한 라이브러리는 조건에 따라 로드합니다. 4. 라..
-
Volta???Eureka! 2023. 10. 5. 11:18
Volta는 JavaScript 명령줄 도구를 관리하는 번거로움 없는 방법입니다. 왜 Volta를 사용해야 하는가? 혹시 특정 버전의 node를 설치하고, 프로젝트를 진행하다가 다른 프로젝트로 넘어갔을 때, node 버전 불일치로 install 조차 되지 않았던 경험 있지 않으신가요? 아니면 node 버전이 낮아서 경고가 발생했던 적은요? 이런 연유로 프로젝트 자체 빌드 및 실행조차 해보지 못하신 적이 있으시다면, 우리는 Volta를 사용하는 것을 적극 고려해 보는 게 좋아요. 일반적으로 회사 프로젝트들은 각각의 고유한 node 및 yarn 버전을 사용하고 있습니다. (물론 잘 관리해서 일괄 관리되는 곳도 있을 수 있어요.) 작업 간의 node 버전을 바꾸기 위해서 재설치를 하거나 기존의 nvm을 활용하..
-
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부터 시작하는 숫자로 변환되..
-
[Testing-library] render.. ? append?Eureka! 2022. 3. 30. 22:33
오늘은 회사에서 테스트 관련해서 대화를 나누고 있었어요. 팀원: 저희 테스팅 라이브러리 제약사항 있나요? 저: 없는데요.. 만약 더 나은게 있으면 추가하면 됩니다. 왜용? 팀원: 아.. enzyme 쓰고 싶어지네요 저: ?? ?? 상황은 이러했다.. // 만약 jest + enzyme 조합이었다면? describe('SomeComponent test', () => { let component const setup = (val) => { component = mount // {value} } beforeEach(() => { setup() } afterEach(() => {component = null}) it('default', () => { expect(component.text()).toBe(expe..
-
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 저장소 상태에 액세스해야 하는 코드)와 간단한 비동..