개발👩💻/프론트엔드 (15) 썸네일형 리스트형 npm yarn yarn berry 패키지 관리 툴이다. Node Package Manager 패키지 관리자: command line client + npm registry 기본적으로 node.js 내에 npmd은 내장되어 있다. 기본적으로 패키지 관리자가 없다면 따로 코드를 작성하거나 다운로드 받아서 붙여주어서 사용해야하지만 이러한 패키지 관리 툴이 있다면 온라인에서 바로 한줄의 코드로 해당 코드 및 프로젝트를 받아와 바로 사용할 수 있다. package.json을 사용하여 의존성을 관리하고 어떤 패키지가 다운로드되었는지 어떤 버전을 사용하는지 등을 기록하여 어드 곳에서도 동일한 환경을 구축할 수 있다. Yarn 페이스북에서만든 패키지 관리자 툴이다. npm 과 같은 기능을 수행한다. yarn은 npm의 단점을 향상시키기 위해 만들어진 .. 이미지 최적화 및 성능 개선 기존 프로젝트의 이미지가 온전히 원본 이미지를 img src를 사용해서 가져오고 있었기 때문에 이미지 관련 작업이 필요했다. 1) 우선은 프론트 단에서는 이미지를 viewport에 잡힐 때 load 시키고 (Intersection Observer) 2) 빠르게 구현했어야 했기 때문에 이미지 캐싱, 레이지 로딩 및 압축 포매팅 등 기능을 제공하는 next image를 사용했다. 3) 업로드 하는 부분도 Toast UI 에디터를 사용하고 있었기 때문에 사진을 에디터에 불러오는 훅을 커스텀해서 s3에 업로드 하기 전에 Next API를 사용해서 해당 이미지 최적화 로직을 구현하고, s3에 업로드한 후 백엔드에 업로드된 이미지 주소를 보내주었다. 이 외에도 웹폰트, 스크롤, 스켈레톤 등을 통해서 성능을 개선할 .. V8엔진 작동 방식 feat 웹 어셈블리 V8 엔진은 C++로 만들어 졌으며, JS와 웹어셈블리를 실행할 때 사용된다. V8 엔진은 브라우저 위에서 뿐 아니라 독립적으로도 사용될 수 있으며 예는 node.js가 있다. V8 엔진에서의 동작 방식을 보면 JS 코드를 읽기 -> parsing -> bytecode -> 실행 순으로 이뤄지는데 최근 브라우저에서는 turbofen 엔진을 통해 최적화를 진행한다. V8 엔진은 다음과 같은 일을 수행하게 되는데 1) JS 코드 실행 2) 객체를 메모리 힙 영역에 할당 3) 사용하지 않는 객체를 GC에서 해제 4) hidden class를 사용하여 객체 프로퍼티 참조하여 참조 속도 개선 5) turbofen 엔진을 통해 최적화 -> 속도, 메모리 최적화 hidden class 여기서 정적 타이핑 언어와 달리.. vertical percentage bar 바닥부터 채우기 세로로 된 퍼센테이지 바를 만들기위해서 아래와 같이 구조를 만들었다. 그런데 내부 퍼센테이지에 따라 채워져야하는 바가 위에서부터 채워지는 문제가 생겼다. 이미지 스프라이팅을 하고 있었기 때문에 이미지에 absolute와 cover를 사용해서 강제로 bottom:0을 만드는 것은 할 수 없었다. 사람모양이어서 사진의 바닥에서부터 퍼센테이지에 따라 그림에 맞춰 바닥부터 올라왔어야 했기에 어떻게 하면 좋을지 검색해도 원하는 부분은 안나왔다. 결론적으로 flex와 background-position-y를 통해 해결했다. /* 상위 컴포넌트 */ const GrayBar = styled.span` background: url(..) no-repeat; background-position: ; width: ; he.. next: link # anchor 사용하기 next link로 # 해시 앵커를 사용하니 제대로 작동하지 않았다. 내비에서 해당 #아이템을 클릭하거나 스크롤이되어 #아이템에 해당하는 곳이 observer된다면 url또한 자동으로 업데이트 되도록하고 뒤로가기를 누른다면 replace로 #관련 주소는 히스토리로 담지 않고 바로 전페이지로 이동하게 하는 것이 목표였다. 우선 next link 에서 #해시 앵커를 사용하기 위해서 if (location.hash) location = location; 위와 같이 해주면 된다. 활성화된 내비 아이템과 내비가 가리키는 컴포넌트를 state로 관리하고 클릭할 때나 페이지 #이 포함된 url로 처음 들어올 때만 해당 앵커가 가리키고 있는 곳으로 스크롤해야 하기 때문에 useEffect(() => { // 처음 들어.. react: intersection observer 사용기 프로젝트에서 내비게이션바를 만들기 위해서 해당 컴포넌트에 위치하면 내비가 바뀌는 부분을 해야했다. 컴포넌트는 가변적이며, 버튼으로 줄였다 늘렸다할 수 있는 공통 컴포넌트를 사용하면 컴포넌트 7가지가 있고 그 컴포넌트들에 따라서 observer가 뷰포트에 위치하는 컴포넌트를 찾아 내비게이션 애니메이션 효과를 주면 되었다. 우선 내비게이션을 클릭하면 해당 컴포넌트로 이동하는 부분은 href #로 해결했다. 7개의 컴포넌트가 사용하는 공통 컴포넌트에서 // Nav.tsx ... ... // CommonContainer.tsx ... ... 이렇게 처리해주었다. 하지만 헤더가 있었기에 해당 헤더만큼 숨겨진 마진값을 주어야 했다. 이부분은 // CommonContainer.tsx const CommonWrappe.. 웹팩이란? 웹팩은 모듈 번들러이며, 자바스크립트 파일들을 모듈로 관리하는데서 출발한다. 자바스크립트 파일들이 많아지면 하나로 관리하는 것이 힘들어지고, 이것들을 브라우저에 로딩하는 것 또한 많은 네트워크 비용이 발생하게 된다. 그래서 이러한 파일들을 모듈화하여 즉시함수호출 스타일로 변경해주고, 하나의 파일로 묶어(bundled) 네트워크 비용을 최소화 할 수 있는 방법이 필요하고 이것이 웹팩의 기능이다. 웹팩의 config 파일 예시를 보자 webpack.config.js const path = require('path') const webpack = require('webpack') const ExtractTextPlugin = require('extract-text-webpack-plugin') module.e.. 이전 1 2 다음
