본문 바로가기

Web dev39

Bundling / Webpack Basic concepts 번들링의 필요성 - 개발을 하다보면, 아래의 왼쪽과 같이 다양한 형태의 파일들이 생성된다. 페이지를 로딩할 때, 많은 파일들이 다운로드되며, 이는 고스란히 서버 측의 네트워크 코스트가 된다. 또한, 서버와의 접촉이 많을수록 애플리케이션이 느리게 로딩되어 사용자 경험도 저하된다. 개발자의 입장에서는 서로 다른 패키지들에서 같은 이름의 변수나 함수를 사용해 충돌하는 일이 벌어질수 있다는 위험성도 존재한다. 이때, 의존성을 가지는 여러 파일을 묶어주는 번들러를 통해 파일들을 번들링해 제공한다면 (위 사진의 오른쪽!) 위와 같은 문제들을 해결할 수 있다. 예시로, 브라우저 네트워크 탭에서 여러개의 html, js 파일을 다운로드하여 화면을 렌더링한다는것을 볼 수 있다. (번들링 전) 번들링 후에는 이렇게 번들링.. 2023. 1. 18.
자바스크립트 14 ES6 문법-spread/rest 문법 1. spread 문법 (전개 구문) -> 함수 호출, 배열 리터럴과 문자열, 객체 리터럴 : 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소를 넣을 때에 사용함 function sum(x,y,z) { return x+y+z; } const numbers = [1,2,3]; sum(...numbers) // 6 // sum(1,2,3)과 동일함 2. rest 문법 (나머지 매개변수) -> 함수의 마지막 매개변수 앞에 ...를 붙이면, 모든 후속 매개변수를 배열에 넣도록 지정함. 마지막 매개변수만 나머지 매개변수로 설정할 수 있음. -> Array 인스턴스이므로, sort, map, forEach, pop 등의 메서드를 직접 적용할 수 있음. -> .length 속성도 사용 가능함. : .. 2023. 1. 11.
CDD / CSS in JS / Styled Components 1. CDD 란? Component Driven Development, 컴포넌트 주도 개발. 레고처럼 조립해나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어나가는 개발 방법론. Bottom-up 방식 2. CSS in JS 태블릿, 데스크탑, 모바일 등 다양한 디바이스 환경에서 인터넷을 사용하기 시작하면서, CSS 작성 방식도 꾸준히 변화하고 있다. 프로젝트 규모와 복잡도가 커지고, 디바이스 환경이 다양해지면서 효율적인 CSS 작업을 위해 CSS 구조화에 대한 필요성이 대두되었다. 다양한 방법론이 있지만, 중요한 지향점은 코드의 재사용 코드의 간결화 (유지 보수 용이) 코드의 확장성 코드의 예측성 (클래스 명으로 의미 예측) 이정도로 정리해볼 수 있다. 이러한 방법론들을 거쳐 캡슐화하여 컴포넌트 기반으로.. 2023. 1. 3.
Redux 01 Redux 개요 / FLUX 패턴 1. Redux 란? :자바스크립트 앱을 위한 상태 관리 라이브러리. 프론트엔드 개발에서 상태(state)란, UI에 동적으로 표현되는 데이터를 의미합니다. 토글 스위치의 on/off 상태부터, 렌더링되는 데이터들까지 프론트엔드 화면은 상태 / 상태 변경이 일어나는 곳 / 상태 변경의 영향을 받는 곳으로 구성되어 있습니다. 이러한 상태들을 React로도 충분히 관리할 수 있기는 하지만, 그것이 상당히... 골치가 아플 때가 있습니다. 예를 들어, props drilling이 5회 이내로 많지 않다면 큰 문제가 되지 않을 수도 있지만, 규모가 크고 구조가 복잡한 서비스의 경우에는 React만으로 상태관리를 하는 경우 1. 코드의 가독성이 매우 나빠짐. 2. 코드의 유지보수 또한 힘들어짐. 3. state .. 2023. 1. 2.