IDE와 포매팅 도구의 다양성으로 인한 문제점들이 사내에서 발생하고 있었다. 서로 다른 IDE(WebStorm, VSCode 등)를 사용하는 환경에서 일관된 코드 스타일을 유지하기가 어려웠고, IDE별로 설정 파일을 따로 관리해야 하는 번거로움이 있었다. 또한 포매팅 차이로 인해 불필요한 코드 리뷰 지적이 발생하곤 했다. 이러한 상황에서 ESLint의 포매팅 규칙들이 Deprecated되면서, 새로운 대안이 필요하게 되어, 여러 대안들을 검토해보았다. Prettier + ESLint 조합은 기존 ESLint 규칙들의 마이그레이션 문제와 도구 간 충돌 방지를 위한 추가 설정이 필요함 @stylistic/eslint-plugin-ts는 아직 커뮤니티 초기 단계라 안정성 검증이 부족하고 별도 플러그인 관리에 대한 부담이 있음 이런 상황에서 Biome이라는 도구에 관심을 가지게 되었다. Biome은 웹 프로젝트를 위한 고성능 툴체인으로, JavaScript, TypeScript, JSX …

zustand의 immer 그리고 valtio에 대해 알아보기전에 불변성에 대해 간단히 알아보자. 불변성 불변성은 한번 생성된 데이터의 상태가 변경되지 않는다는 개념이다. 직접 수정을 금지하고, 변경이 필요할 때 새로운 객체를 생성해 원본 데이터의 무결성을 유지해야한다. 상태 변경이 직접적인 수정이 아닌 새로운 참조를 통해 이루어지므로, 상태 변화를 추적하고 예측하기 쉬워진다. React의 렌더링 최적화는 참조 비교에 기반한다. 불변성을 통해 객체 참조 변경을 빠르게 확인하기에, 불필요한 렌더링을 방지할 수 있다. 각 상태 변화에서 새로운 객체를 생성해 이전 상태를 보존할 수 있다. 이를 통해 상태 변화를 추적할 수 있다. 참조 비교 참조 비교는 메모리 관점에서 두 값이 동일한 메모리 주소를 가리키고 있는지를 확인하는 것을 의미한다. 원시값은 값 자체를 비교하고, 참조값은 메모리 주소를 비교한다. 얕은 비교는 객체의 최상위 레벨에서만 참조를 비교하고, 깊은 비교는 객체의 모든 중첩…

오늘은 프론트엔드 개발자로서 매일 마주하지만 깊이있게 들여다보지 않았던 package.json에 대해 이야기해볼 예정이다. 프로젝트를 다룰때마다 항상 핸들링하지만 그 이상으로 깊게 공부하지 않았기에 이번기회에 알아보려한다. package.json은 단순한 의존성 관리를 위한 파일을 넘어서 프로젝트의 전반적인 메타데이터와 설정을 관리하는 핵심 파일이다. 지금부터 package.json에 대해 깊이있게 알아보자 package.json의 생성 과정 package.json은 을 사용해서 생성하는 방법과 수동으로 프로젝트 루트 디렉토리에 직접 JSON 형식으로 생성하는 방법이 있다. JSON 문법에 에러 발생 가능성이 있기에 직접 생성보다는 패키지 라이브러리 init 명령어를 통해 생성하는 것을 추천한다. init을 이용해 package.json이 생성되는 과정을 살펴보자. (본론에서는 기본으로 많이 사용되는 npm을 예시로 설명하겠다.) 운영체제, 컴퓨터 시스템 등등 많은 조건에 따라 p…

useSyncExternalStore는 React 18에서 도입된 Hook으로, 외부 상태 관리 스토어와 React의 동시성 렌더링(Concurrent Rendering)을 안전하게 연동하기 위해 설계되었다. React 18의 동시성 렌더링 모드에서 외부 스토어의 상태 변경이 일관성을 해치는 문제 발생했는데, 이것을 Tearing 현상이라한다. (간혹 동일한 데이터를 보여주는 UI 컴포넌트들이 서로 다른 값을 표기하는 버그) Tearing 현상 Concurrent 모드에서 React는 렌더링을 여러 청크로 나누어 처리한다. 그리고 useEffect를 사용한 구독은 비동기적이며, Concurrent 모드에서 렌더링이 중단될 수 있다. 이렇게되면 서로다른 사용자마다 서로다른 데이터를 보게되는데, 데이터 일관성이 중요한 도메인에서는 치명적인 오류를 야기한다. 이런 문제를 useSyncExternalStore로 해결할 수 있다. useSyncExternalStore을 사용하면 상태 업데이…

React 상태가 변화하는 과정은 크게 5단계로 나눌 수 있다. 초기 트리거 단계: useState를 통한 상태 생성과 업데이트 객체가 만들어지는 단계 스케줄링 단계: 여러 상태 업데이트를 우선순위에 따라 배치 처리하는 단계 재조정(Reconciliation) 단계: Virtual DOM을 비교하여 실제로 변경이 필요한 부분을 파악하는 단계 커밋(Commit) 단계: 변경사항을 실제 DOM에 적용하고 부수효과를 실행하는 단계 완료 단계: 클린업을 수행하고 다음 업데이트를 준비하는 단계 이 각 단계들은 React가 상태 변화를 효율적이고 일관되게 처리하여 성능 최적화와 안정적인 렌더링을 보장하기 위해 설계되었다. 배치 처리 (Batching) 배치 처리는 여러 상태 업데이트를 하나의 리렌더링으로 그룹화하는 프로세스다. 배치 처리를 통해 불필요한 렌더링을 최소화하고, 메모리 할당을 줄이는 등의 장점을 누릴 수 있다. React 18에서는 모든 업데이트가 자동으로 배치 처리된다. 트랜…

동아리, 회사, 스터디 등등 많이 바쁘다.. 멘토링 끝나고 블로그에 회고 작성하려는 큰 포부를 가졌지만.. 요즈음 과제가 어려워서? 시간이 빠듯해서 잘 못했다ㅠㅠ 그렇기에 오랜만에 회고를 작성해보고 복습해보자! 타입스크립트는 어떻게 컴파일할까? 우선 타입스크립트는 TSC 컴파일러를 통해 바로 컴파일되는 것이 아닌 자바스크립트 코드로 변환된다. 이 과정에서 고수준 언어인 타입스크립트가 저수준 언어인 자바스크립트로 변환되어 트랜스파일이라고 부르기도 한다. 상세한 과정은 아래와 같다. 타입스크립트 소스코드를 타입스크립트 AST로 만들고, 타입 검사기가 AST를 확인하여 타입을 확인한다. (TSC) 타입스크립트 AST를 자바스크립트 소스로 변환한다. (TSC) 자바스크립트 소스코드를 자바스크립트 AST로 만든다. (런타임) AST가 바이트 코드로 변환되고 런타임에 바이트 코드가 평가되어 프로그램이 실행된다. (런타임) 타입스크립트 컴파일러의 구성 요소와 동작 방식 Scanner => Pa…

한 주 소감 및 복습 내용 힘들게 1차 과제를 마무리했다. 재사용성과 가독성에 대한 고민을 더 해보라는 피드백으로 코드를 열심히 만져보았다. 격렬하게 다루었던 커밋 기록은 여기를 확인해보시면 됩니다. 평소라면 생각해보지 않은, 상태관리 변경 시점과 브라우저 동작방식 등에 대해서 자바스크립트로 코드를 작성하며 구현해보았다. 구현하기 너무 어려워서 구글링을 해본 결과 좋은 자료들도 발견하게 되어 공유 드리니 확인해보시면 좋겠다! 황준일님의 상태관리 시스템 만들기 DaleSeo의 History API 멘토링을 진행하면서 대답하지 못했거나, 더 공부가 필요한 것들에 관해 공부를 시작해보자! 도대체 자바스크립트 킹짱맨은 언제 될 수 있는 건데..ㅠㅠ 버블링과 캡처링 HTML 문서의 각 엘리먼트들은 계층적 구조로 이루어져있다. 이러한 구조 때문에 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어날 수 있다. 이렇게 HTML 요소에 이벤트가 발생할 경우, 이벤트가 연쇄적으로 …

한 주 소감 및 복습 내용 나 마라톤했다? 10K, 나 회사가 엄청 바빳다, 그리고 Event Loop도 만들었고, History API를 열심히 만들고있다! 추가로 공부할 내용들은 아래와 같다. 상태관리 라이브러리를 내부적으로 구현한다고 가정했을 때 상태는 어떻게 트리거하고 UI 반영하게 할 수 있을지 observer와 flux 구조, re-render 시킨다면 어떻게 접근할지 react-router-dom을 구현한다고 가정했을 때 인터페이스를 어떻게 설계할지 Router guard, 는 각각 어떻게 구현할 수 있을지 composite Layers React Virtual Dom과 탐색 알고리즘 브라우저의 Javascript 엔진이 스크립트를 어떻게 파싱하고 실행하는지 추가로 이번주에 react-router가 어떻게 동작하는지 만들어보고, 분석해보자. 아 그리고 프레임워크와 라이브러리 차이와 CSR과 SSR의 차이를 복습해보자! Composite Layers Reflow…

화면 UI는 yiseo0님의 오픈소스를 참고했습니다. 감사합니다! 왜 만들었어!? JavScript을 이용해 Event Loop를 동작해보는 사이트를 만들어보았다. 왜!? 그냥 내가 공부하려고!! 우선은 간단하게 만들어보았는데, 점차 리팩토링도 하면서 해당하는 것들에 관해서 공부하며 추가할 것이다!!! 시연해보기 👉 Event Loop with JavaScript 직접 만들어보고 싶으면 Github Code를 참조하세요 많은 분이 Event Loop에 관해서 공부했을 것으로 생각한다. 그렇기에 내가 이벤트 루프를 만들기 위해서 어떤 내용을 참조했는지, 링크를 남겨두겠다! 추후 업데이트 기록 추가로 공부할 내용을 적어보겠다. 우선은 코드를 더 직관적으로 리팩토링할 예정이다. 6/3 업로드 완료 1차 배포 및 업로드 완료!!! 출처 및 도움되는 링크들 Promise를 만들어보자 JavaScript 동기와 비동기 완벽 가이드 Inpa Dev 왜 만들었어!? 추후 업데이트 기록 6/3…

한 주 소감 및 복습 내용 많은 것을 했고, 많은 것을 하고 있따.. 이것저것 만들고, 공부의 깊이는 더욱 깊어져 주제마다 별도의 페이지로 작성하겠다! 아자아자 화이팅!! 5월 넷째 주 회고 해커톤을 했습니다. 저번에는 참가자로 이번에는 운영진으로 경험해보았습니다. 사람들과 시간이 비어있을 때, CI/CD와 Docker 에 대해 이야기를 나누었습니다. 토요일 점심에 크래프톤에서 코딩테스트가 요청되어 진행했습니다. 주관식 3개 알고리즘 3개 진행했는데, 알고리즘 지식이 부족해 어렵게 느꼈습니다. 이팩티브 디버깅 행사에 다녀왔습니다. 디버깅을 위한 접근 방식에 대해 다른 사람들과 경험을 공유해볼 수 있는 시간이었습니다. 공부를 하다 보니 부족하다고 느껴지는 것이 명확해지고 있습니다. 테스트를 다루는 부분과, 회사에서 현재 다루고 있는데 CI/CD에 대한 지식을 넓히려 합니다. 이번 주 좋은 것과 나쁜 것 이번 주에 개인적으로 잡은 약속 없어서 공부할 수 있는 시간을 많이 가져왔습니…

Promise를 직접 만들어보자. 앞서 나는 Promise()에 대한 글을 2번 정도 게시했다. 자바스크립트 Promise를 퀴즈로 쉽게 익히기 JavaScript 동기와 비동기 완벽 가이드 위 글을 쓰고 나서 몇 달이 지난 현재, Promise의 내부는 어떻게 동작하고, 어떻게 구성이 되어있는지 궁금했다. 아티클을 읽던 와중에 푸만능님의 JavaScript Promise 객체 직접 구현해보기를 알게 되어서, 위 내용을 실습해보며 내가 새롭게 알게 된 내용들에 대해 공부해보려한다. Promise를 어떻게 만들어볼까? Promise를 만들기 전에, Promise에 대해 이해해보기 위해, 기능 구현 목록을 작성해보자 우선 Promise는 실행 상태를 나타내기 때문에, Pending(실행 전), fulfilled(실행 후 성공 => resolve), rejected(실행 후 실패 => rejected)이 필요하다. 그리고 Promise는 JS 이벤트 루프에서 Microtask Queue…

한 주 소감 및 복습 내용 이번 주부터 과제가 엄청나게 많다. 그리고 이전에 했던 과제들에 대한 복습들도 이루어져야 되기 때문에, 개념적인 공부는 위 과제들을 진행하면서 해당 게시글을 여기에 리포스팅할 예정이다. 이번주에 멘토링을 진행하면서 다시 공부해보면 좋을 것 같은 부분은 아래와 같다. 하나씩 차근차근 천천히 준비하면서 폭 깊은 개발자가 되어보자! 자바스크립트에서 함수의 “동적”이랑 “정적”의 의미를 이해하기 const 호이스팅에 대해서 깊이 학습 좋은 함수에 대해 생각해보기 Promise를 만들어보자 useState를 직접 구현해보자! 자바스크립트 이벤트루프 시뮬레이션 도구를 직접 구현해보자! (추후 링크 참조) 브라우저 렌더링에 관한 아티클들 읽어보자 Naver D2 - 브라우저는 어떻게 동작하는가? Toast UI - 성능 최적화 웹 성능 최적화에 필요한 브라우저의 모든 것 자바스크립트의 함수에서 동적과 정적에 대해 자바스크립트에서 동적(Dynamic) 과 정적(Sta…

으아아아ㅏ 멘토링 두번째 회고 및 복습 시작!!! 복습.. 또 복습 복습은 복숭아다.. (복숭아가 너무너무 먹고싶다.) 이번 주도 어김없이 아는 것을 설명하지 못하고, 계속 반복된 이야기만 했다. 아직 잘 몰라서 그런 것 같다. 미숙하지만 더더더더! 공부하자 We Can Do It const, let, var의 호이스팅에서 차이점 우선 호이스팅이란 실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 것을 의미한다. 변수 생성 과정은 선언 단계(Declaration phase) => 초기화 단계(Initialization phase) => 할당 단계(Assignment phase) 이렇게 총 세 단계를 거쳐 생성되고, 변수를 선언 및 초기화 하기전에 사용하게 되는 영역을 TDZ(Temporal Dead Zone)라고 한다. var : 선언한 변수는 호이스팅 시 undefined로 초기화되어, 변수 선언 이전에 해당 변수를 참조할 수 있다. 변수 선언과 동시에 unde…

Promise에 대해서 공부해보자 나는 개인적으로 프론트엔드의 꽃은 Promise와 비동기라고 생각한다. 백엔드를 공부하는 친구들이 가장 어려워하는 부분이기도 하고, 나의 러닝 커브가 가장 길었기 때문이다! 어차피 해당하는 내용은 공부를 미리 진행한 적 있어서 블로그 링크를 첨부하고 퀴즈를 통해 작동에 방법을 익히고, 활용해볼 예정이다!! Promise를 이해하기 위한 선행학습자료는 여기에 첨부하니 확인해보시길 권장드립니다. Promise.all() 위 코드의 결과값에서 3번째 Promise.all()에서 1,2,3이 출력되지 않고 error만 출력된 이유는 Promise.all()에서 입력 값으로 들어온 프로미스 중 하나라도 거부당하면 즉시 거부하기 때문이다. Promise.all()의 개념이 더 궁금하면 MDN 자료를 확인해보시면 됩니다. ✔️ Promise Order 위 코드는 어떤 순서로 값이 출력될까? 우선 동기식 코드(synchronous code) 1이 출력되고나서 3,…

독학으로 공부를 계속하다 회사에 다닌 지 1년이 넘은 현시점에서, 스스로를 객관적으로 돌이켜보기 위해서 멘토링을 신청하게 되었다! 멘토링을 하면서 느낀 경험을 1주일 단위 회고 형식으로 진행해보려 한다. 첫 번째 주차의 회고를 진행해보겠다 (24.04.30 ~ 24.05.06) 일단.. 다시 공부가 필요한 것들 복습하자 돌이켜 생각해보면 잘 몰랐던 것들은 계속 모르거나 헷갈리고 있다. (나 자신을 똥 멍청이라 생각한다ㅠ.. 그래도 천재가 되기 위해서 차근차근 복습해보자) 1.gif 깊은 복사와 얕은 복사의 차이 얕은 복사(Shallow Copy)는 원본 객체의 최상위 수준의 속성들을 복사하고, 내부의 객체는 참조를 공유한다. 즉, 내부 객체에 대한 변경은 복사된 객체와 원본 객체 양쪽에 모두 영향을 주고, 최상위 수준의 속성이 필요한 경우에 사용한다. Object.assign()을 이용한 얕은 복사 Spread 연산자를 이용한 얕은 복사 깊은 복사(Deep Copy)는 원본 객체의…

Singleton Pattern 싱글톤 패턴은 특정 클래스의 인스턴스가 오직 하나만 생성되도록 보장하며, 이 인스턴스에 전역적으로 접근할 수 있게 하는 디자인 패턴이다. 싱글톤 패턴은 전역 변수를 사용하지 않고도 전역적인 접근을 제공하여, 공유 자원에 대한 동시 접근을 제어할 수 있어, 자원 관리와 동시성 제어에 중요한 시스템이다. 자바스크립트에서는 클래스를 사용하지 않고도 싱글톤 패턴을 구현할 수 있다. 왜냐하면 자바스크립트는 프로토타입 기반 언어이기 때문에 일반적인 함수와 객체, 클로저를 사용하여 싱글톤 패턴을 구현할 수 있다. 위 예시에서 클래스는 처음 생성될 때만 새로운 인스턴스를 생성하며, 이후에는 기존 인스턴스를 반환한다. 와 메서드를 통해 데이터를 가져오고 설정할 수 있다. 또한 자바스크립트의 함수와 프로토타입을 사용하여 싱글톤 패턴을 구현할 수 있다. 그리고 즉시 실행 함수 표현식(IIFE)을 사용하여 싱글톤 패턴을 구현할 수 있다. 위 예시는 IIFE를 사용하여…

Dependencies (종속성) 목적: 애플리케이션이 프로덕션에서 실행되기 위해 필수적 설치 방법: 명령어를 플래그 없이 실행할 때 설치 사용 사례: 웹 프레임워크, 유틸리티 라이브러리 등 애플리케이션이 정상적으로 작동하는 데 필요한 패키지를 포함 예시 DevDependencies (개발 종속성) 목적: 개발 및 테스트에만 필요 설치 방법: 또는 명령어를 실행할 때 설치 사용 사례: 테스트 라이브러리, 빌드 도구, 린터 등 프로덕션 환경에서는 필요하지 않은 패키지를 포함 예시 PeerDependencies (피어 종속성) 목적: 패키지를 사용하는 소비자가 특정 종속성을 제공해야 함을 명시 설치 방법: 자동으로 설치되지 않으며, 패키지를 사용하는 프로젝트에서 설치 사용 사례: 플러그인이나 라이브러리가 호스트 애플리케이션이 특정 버전의 종속성을 사용하도록 보장할 때 유용하며, 여러 버전의 동일한 패키지가 사용되는 것을 피할 수 있다. 예시 요약 Dependencies: 런타임에…

모듈은 현대 소프트웨어 개발에서 코드의 재사용성과 유지보수를 높이기 위해 필수적인 요소다. 그리고 자바스크립트에는 CommonJS와 ES 모듈이 있다. 두개가 어떤 차이가 있는지 비교해보자! CommonJS Node.js의 기본 모듈 시스템으로 CommonJs를 사용한다. 를 사용하여 모듈을 로드하고 를 사용하여 변수와 함수를 내보낸다. 동기적 로딩: 모듈을 하나씩 순차적으로 로드하고 처리하므로 성능에 민감한 애플리케이션에서 블로킹이 발생할 수 있다. 유연성: 는 코드의 어디서나 호출할 수 있어 조건부 또는 동적으로 모듈을 로드할 수 있다. ES 모듈 표준화된 포맷: ES 모듈은 자바스크립트 코드 재사용을 위한 공식 표준 문법: 와 문을 사용 비동기적 로딩: 모듈을 비동기적으로 로드하여 고성능 웹 애플리케이션의 성능을 향상시킬 수 있다. 네이티브 브라우저 지원: 모든 최신 웹 브라우저에서 지원하여 서버와 클라이언트 환경 간에 코드를 쉽게 공유할 수 있다. 파일 확장자: 일반적으로…

What is Single Thread? javascript 는 Single Thread 기반 언어 ⇒ 한 번에 하나의 작업만 수행 가능 하지만! 동시에 병렬처리 해야 될 때가 있다 그럴 때 javascript는 비동기 함수(setTimeout, ajax, Promise 객체 등)를 이용 동기와 비동기 동기(Synchronous) : 먼저 시작된 작업이 끝날 때까지 기다리다가 새로 시작(한번에 여러작업이 아닌 하나씩) 비동기(Asynchronous): 작업이 끝날때까지 기다리지 않고 다음 작업 수행(한번에 여러작업을 처리함) 자바스크립트의 비동기 내장함수 자바스크립트는 비동기 내장함수를 제공함 ⇒ setTimeout, XMLHttpRequest, fetch() XMLHttpRequest 현재는 잘 사용하지 않음 관련 링크 : https://7942yongdae.tistory.com/67 setTimeout / clearTimeout setTimeout() 함수는 특정 코드를 바로…