React와 JavaScript를 사용하는 개발자에게 있어서 import와 dynamic import는 각각 고유한 용도와 특징을 가지고 있다. 그럼 이 두가지는 어떤 차이점이 있을까? Import import는 JavaScript ES6에서 도입된 정적(Static) 모듈 가져오기 방식이다. 코드 작성 시, 모듈을 상단에 명시적으로 선언하고, 모듈을 로드한다. Import는 아래 3가지의 특징을 가진다. 정적 로드: 컴파일 시점에 모든 의존성이 결정되고 로드되어, 빌드 도구가 전체 모듈 그래프를 미리 알 수 있게 해준다. 호이스팅(Hoisting): import 문은 파일의 최상단으로 끌어올려진다. 트리 쉐이킹(Tree Shaking): 불필요한 코드(사용되지 않는 모듈)를 제거하여 최종 번들 크기를 줄일 수 있다. Dynamic Import dynamic import는 ES2020에서 도입된 동적(Dynamic) 모듈 가져오기 방식이다. 이는 함수처럼 호출하여 필요할 때 모듈을…

HMR(Hot Module Replacement)이란? Hot Module Replacement(HMR)는 개발 환경에서 코드 변경 시 브라우저 전체를 새로고침하지 않고도 변경된 모듈만 업데이트하는 기능을 의미한다. 이는 특히 React와 같은 현대 프론트엔드 프레임워크에서 매우 유용하게 사용되고있다. HMR은 Webpack과 같은 모듈 번들러에서 지원하며, 개발 과정에서 생산성을 크게 향상시킨다. 수정사항을 웹에서 바로 확인할 수 있어, 불필요한 시간 소비를 방지할 수 있다. 그럼 HMR은 어떻게 동작할까? HMR이 편하게 해주는 것은 알겠다! 거의 2년여동안 HMR을 자연스럽게 사용하고 있는데, 궁금한적 없어 이참에 알아보자! 우선 개발자가 코드를 수정하고 저장하면, Webpack Dev Server는 변경 사항을 감지한다. Webpack Dev Server는 변경된 모듈만을 포함하는 업데이트를 생성하고 WebSocket을 토해 브라우저에 업데이트 정보를 전송한다. 브라우저는…

사내 프로젝트를 진행하며 build 폴더를 S3에 업로드하는 업무를 진행했다. 이 과정에서 build 폴더의 용량에 따라 시간, 금액이 차이가난다는 것을 알게되었다. 사내에서 프로젝트를 진행하면서 2GB가 넘는 build 폴더를 어떻게하면 효율적으로 S3에 업로드할 수 있을까라는 고민을 하게되었고, 그 과정속에서 압축에 대해 공부한 내용을 기록에 남기려한다. 무손실 압축(Lossless Compression) 무손실 압축은 손실 압축과 달리 데이터 손실 없이 파일 크기를 줄이는 데이터 압축의 한 종류다. 무손실 압축의 핵심 아이디어는 파일에 있는 콘텐츠의 통계적 중복성을 활용하는 것으로 압축하는 동안 긴 기호를 더 짧은 표현으로 대체하여 데이터 크기를 줄인다. 여러가지 방법 중 Dictionary-Based algorithm은 무손실 압축을 수행하는 데 가장 널리 사용되는 알고리즘이다. 이 알고리즘은 포인터가 포함된 dictionary를 구축해 더 작은 포인터로 대체하는 방식이다…

📢 본 글은 Will WebAssembly Replace JavaScript? 기반으로 작성되었습니다. WebAssembly? “Because apps compiled to WebAssembly can run as fast as native apps, it has the potential to change the way software is written on the web.” WebAssembly로 컴파일된 앱은 네이티브 앱만큼 빠르게 실행될 수 있기 때문에 웹에서 소프트웨어가 작성되는 방식을 바꿀 수 있는 잠재력을 가지고 있습니다. Evan Wallace – CTO and Co-Founder, Figma WebAssembly 또는 줄여서 WASM은 최근 몇 년간 많은 관심을 받고 있는 새로운 기술으로, 스택 기반 가상 머신(VM)을 위한 로우레벨 바이너리 명령어 형식이다. 월드와이드웹 컨소시엄(W3C)의 창설로 등장해서, 2015년에 처음 발표되었고 2년 후인 2017년에 첫…

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

Linked… 라고 치는데 밑에 LinkedList가 나왔다.. (그 와중에 린다닷컴은 뭐지?) 그 이후에 새로 알게된 내용이 많아 기록을 남겨볼려고한다. LikedList LinkedList는 내부적으로 양방향의 연결 리스트로 구성되어 있어 참조하려는 원소에 따라 처음부터 정방향 또는 역순으로 순회할 수 있다. 적은 양의 데이터를 추가하거나 삭제할 때는 문제가 없지만, 양이 많아질수록 속도가 늦어지는 배열의 단점을 보완하기 위해 LinkedList가 생겨났다. LinkedList는 순차적 접근이고, 해당 위치의 노드를 찾는 데에 시간이 소비되어 검색의 속도가 느리다. 그렇지만 LinkedList는 데이터를 추가·삭제시 가리키고 있는 주소 값만 변경해주면 되기 때문에 ArrayList에 비해 상당히 효율적이고 중간에 있는 노드를 삭제해주면 양쪽에 있는 노드를 서로 이어주면 되기 때문에 ArrayList보다 상대적으로 작업이 빠르다. 단점 데이터를 get 하는 과정에서 ArrayLi…

갑자기 작업하다가 궁금해져서 적는 첫번째 오이소박한 궁금증!! useEffect의 dependency에 useRef를 넣으면? useEffect 의 []에 의존성(dependency)를 넣을 수 있다! 이건 다 알고 있겠죠!? 그러면 리렌더링이 될 때 어느 시점에 의존성이 작동 될 까!? 긴말 말고 예시코드를 보자! 위 코드는 useRef의 current, useState의 state를 handleButtonClick 함수를 이용해서 1씩 올려주는 코드다. useEffect의 dependency에 useRef의 ref와 ref.current 의 값을 넣어보고 동작을 비교해보자~!! [ref] useRef의 ref 객체를 dependency에 직접 넣어주게 되면 useEffect가 변경사항을 감지하지 못하고 리렌더링 되지 않는다.. 하지만 값은 변경된다!!! [ref.current] 그리고 useRef의 ref.current 값 을 dependency에 직접 넣어주게 되면 use…

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

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

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

나는 사실 저 명령어를 써본 적이 없다. 그리고 처음 본다.. git rev-parse는 Git 참조를 구문 분석하고 쿼리하는 데 사용되는 다용도 명령어다. 이해가 안 가니 예시를 보자 git rev-parse HEAD : 현재 브랜치에 있는 최신 커밋의 전체 SHA-1 해시가 반환한다. HEAD 키워드를 태그 또는 브랜치로 변경하면 해당 커밋 ID를 얻을 수 있다. git rev-parse —abbrev-ref HEAD : 현재 브랜치의 이름을 반환 git rev-parse 축약된 커밋명 : 레파지토리 내에서 고유한 전체 커밋 ID 반환 사실 이거 왜 쓰는지 모르겠다고 생각했다. 터미널을 확장해서 쓰면 복잡한 명령어를 작성 안해도 확인 할 수 있으니까! 그런데 다음 예시를 보니 터미널 명령어 내부에서 “조건문을 사용하는데 이런 이유로 사용하는구나” 라는 생각을 했다. 유효성 확인을 위해 아래처럼 사용 가능

Branch 구조와 전략을 세워보자! 코드를 작성하다보면 엄청나게 많은 Branch를 만들어야한다. 어떻게 구조를 잡아야할지 알아보자! Branch Structure(Gitflow 전략) 제품의 안정된 버전을 유지하는 브랜치, 배포 가능한 코드만을 허용하며, 직접적인 작업은 X 개발의 중심이 되는 브랜치, 다른 개발자들과의 협업 및 새로운 기능 개발을 위해 사용 새로운 기능 개발을 위한 branch, 개별 기능 또는 작업 단위로 생성 되며 develop 에서 분기됨 개발이 완료되어 pr 이 merge 되면 해당 feature branch 는 삭제(줄기관리) feature 은 작은 단위의 issue 가 된다. 올바른 branch 관리를 하기위해 각 feature 은 해당하는 이슈의 문제만 해결한다! 배포를 준비하기 위한 branch, 배포 전 마지막 테스트와 버그 수정 진행 develop 에서 분기되며, 완료되면 develop과 master 로 병합. 해당 작업을 진행할때는…