본문 바로가기

전체 글125

자바스크립트의 은닉화 그리고 모듈 자바스크립트의 은닉화은닉화는 객체의 내부 상태와 구현 정보를 외부로부터 숨기고, 객체와 상호작용하기 위한 공개 인터페이스를 제공하는 프로그래밍 관행을 말함.변수가 프로그램의 다른 부분, 외부 스크립트, 라이브러리에 의해 의도치않게 덮어쓰여지는 것을 방지하기 위해 중요함.즉시 호출 함수 표현식(IIFEs), 클로저, 그리고 블록을 사용하여 데이터 은닉화를 달성할 수 있음.javascript는 다른 언어에 비해 데이터 은닉화를 강력하게 지원하지 않음.typescript는 스코핑을 도입했지만 비공개 변수에 접근하더라도 코드가 컴파일되고 실행될 수 있어, javascript에서 은닉화의 한계를 보여줌.  모듈과 은닉화코드의 안정성과 유지보수성을 높이기 위해 필요함.내부적인 구현 세부사항을 숨김으로써, 모듈 사용.. 2024. 3. 12.
npm module 지금 제가 맡고 있는 프로젝트들은 같은 어드민 성향을 띄지만 서로 사용자들의 성격이 다릅니다. 기획에서 요구하는 데이터나 날짜, 시간과 관련된 포맷팅이 비슷하여 비슷한 유틸함수들이 여러개 생기게 되었습니다. 각각의 프로젝트에서 다른 이름이지만 같은 동작을 하는 함수들이 하나 둘 쌓였고 관리 포인트를 줄이기 위해 라이브러리 제작을 하기로 했습니다. 이 라이브러리에 컨셉은 경량화와 유연함이었습니다. 라이브러리의 크기는 작지만 우리가 관리하는 프로덕트에 여기저기에 쓰여야 했으니까요. 기본적으로 확장성과 재사용성을 고려했고 class를 활용하여 기능에 따라 함수들을 분리하기로 했습니다. 코드의 안정성을 위해 테스트 코드도 도입하기로 했습니다. 어떤걸 넣어야할까? 기존 프로젝트에서 helpers와 function.. 2024. 3. 10.
rollup rollup이란? 모듈 번들러. 주로 웹 어플리케이션 개발에서 사용되며, 모듈간의 의존성을 해결하고 최적화된 번들을 생성 ECMAScript 모듈과 CommonJS와 같은 다양한 모듈 시세틈을 지원함. rollup은 모듈 간의 의존성을 분석하여 사용되지 않는 코드를 제거하여 번들 크기를 최소화하고 불필요한 코드를 제거하여 성능을 향상시킴. import()함수를 지원하여 코드를 비동기적으로 로드할 수 있음. 웹 어플리케이션의 초기 로드 시간을 최적화 할 수 있음. Typescript 변환, css 번들링, 이미지 처리 작업 등을 수행할 수 있음. ES6문법과 typescript를 지원하여 babel로 commonJS, javascript로 변환할 필요가 없음. rollup 설정하기 진입점은 'src/mai.. 2024. 3. 10.
webpack 기본질문 웹팩이란? javascript 어플리케이션을 위한 모듈 번들러 모듈 번들러 : 애플리케이션을 구성하는 여러 모듈 및 자원(HTML, CSS, javascript, image, font 등)들을 하나로 번들링하여 관리함. 이를 통해 개발자는 여러 파일을 하나의 파일로 결합하여 네트워크 로드를 줄이고, 코드를 조직화하고, 의존성을 관리할 수 있음 빌드, 번들링, 변환 이 세 단어는 모두 같은 의미이다. 웹팩이 하는 일. 여러개의 javascript 파일 및 이미지, css 파일, 폰트 등을 하나로 묶어주는 도구. 모듈 번들링 의존성 그래프를 기반으로 프로젝트의 모든 모듈을 분석하고 이를 하나 또는 여러개의 번들로 묶어줌. 모듈시스템을 지원하며 각 모듈 간의 의존성을 파악하여 효율적으로 번들링. 로더.. 2024. 2. 24.
useState, setState의 동작원리(react 18) useState를 사용할 때 최초에 initial state의 값을 할당한 후 setState를 사용하여 값을 업데이트 하게 되면 항상 리렌더링은 일어날까? 아니다. 처음에는 '왜?'라는 생각이 잠시 들었지만 조금 더 깊이 생각해보면 아니라는 것을 알 수 있다. 만약 사용자가 같은 값을 계속해서 주입시키는데도 렌더링이 반복적으로 일어난다면 얼마나 쓸모없는 연산이 이뤄지겠는가. 그렇다면 어떻게 가능할까? 먼저 useState와 setState의 원리를 알아야한다. react의 원리에 대해 알아보는 강의와 문서들을 참고하고 react 18버전에는 어떻게 반영되어있는지 확인해봤다. 우리가 useState를 사용하려고 react에서 import하게 되고 이 useState가 어디서 왔는지 어디서 import해왔.. 2024. 2. 15.
break && continue The break statement "jumps out" of a loop. break가 실행되면 감싸고 있던 for/while문 종료 for (let i = 0; i < 10; i++) { if (i === 3) { break; } console.log( i ); } //0 1 2 //3이되면 for문 종료 The continue statement "jumps over" one iteration in the loop continue가 실행되면 해당되는 조건만 제외하고 다시 for/while문을 돌게됨. for (let i = 0; i < 10; i++) { if (i === 3) { continue; } console.log(i); } // 0 1 2 4 5 6 7 8 9 //3만 건너뜀 출처: htt.. 2022. 3. 5.

티스토리툴바