postion fixed와 sticky

fixed와 sticky는 언뜻보면 비슷할지도 모르지만, 분명히 다른 쓰임새를 가진다. fixed는 사용자가 보는 화면에서 완전 고정된 위치를 가지지만, sticky는 상대적인 위치를 가지다가, 화면에서 벗어나면 fixed처럼 움직이는 특성을 가진다. HELLO WORLD GOOD .container { height: 1000px; } .side { /* position: fixed; */ position: sticky; top: 20px; left: 50px; height: 100px; width: 100px; } 위와 같이 웹이 구성되었을 때, 스크롤이 맨 위에 위치한 화면은 다음과 같다. 처음에 sticky는 상대적인 위치를 가진다. 스크롤을 밑으로 내리면, sticky값이 지정된 div는 다음과 ..

• format_list_bulleted 기타
• · 2023. 3. 15.
• textsms

webpack-bundle-analyzer 사용하기 & craco 설정

webpack-bundle-analyzer를 사용하면 빌드로 웹팩이 실행된 뒤 번들링된 결과물의 사이즈를 확인할 수 있다. 어떤 라이브러리, 컴포넌트가 얼마만큼의 용량을 차지하는지 시각화하여 보여주기에 앱 사이즈를 최적화하는데 도움이 될 수 있다. 웹 사이트의 용량이 클수록 로딩 속도가 커지므로, 최대한 작은 용량으로 번들링하는 것이 성능에 좋다. npm i webpack-bundle-analyzer -D webpack.config.js을 다음과 같이 설정함으로써, 웹팩 번들 분석 기능을 웹팩에 추가할 수 있다. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plu..

• format_list_bulleted 기타
• · 2023. 3. 14.
• textsms

patch-package 사용하여 노드 모듈 수정하기

오픈소스 라이브러리를 사용하다보면, 불가피한 이유로 node_modules 속 라이브러리를 수정할 일이 발생할 수 있다. 이 경우, 매번 npm install을 할 때마다 수정해야하는 것은 물론이고 다른 사람과의 협업이 진행중이라면, 매번 라이브러리 수정 이슈에 대해서 설명하고 문서를 남겨야하는 번거로움이 있다. 이때 사용할 수 있는 라이브러리로 patch-package가 있다. npm i patch-package patch-package를 설치한 뒤 node_modules에서 라이브러리를 수정한다. 그리고 npx patch-package 해당_라이브러리_이름 으로 patch-package를 실행하면, patches 폴더가 생기고 내부에 라이브러리 이름과 버전을 이름으로 갖는 patch 파일이 생긴것을 ..

• format_list_bulleted Node
• · 2023. 3. 13.
• textsms

React Native에서 node 내장 라이브러리 사용하기 (rn-nodeify)

노드에는 기본적으로 crypto, path, url, assert 등의 라이브러리가 내장으로 제공된다.리액트에서도 이를 사용하기 위해서 웹팩 설정을 변경하는 등의 추가적인 설정이 필요했는데, 리액트 네이티브에서도 그렇다.이를 간단하게 설정할 수 있게 해주는 라이브러리가 있는데, rn-nodeify이다.이번엔 rn-nodeify의 사용법에 대해서 기록하고자 한다.npm i rn-nodeify설치가 끝나면, package.json의 script에 postinstall을 작성한다."postinstall": "rn-nodeify --install fs,crypto,url,assert --hack"위의 명령어를 통해서 자동으로 기입된 라이브러리를 설치할 수 있다.위에서는 crypto, url, assert만 사용..

• format_list_bulleted React Native
• · 2023. 3. 11.
• textsms

간단하게 노드 서버에서 로그 기록하기 (morgan 사용하기)

노드를 사용한 서버에서 요청에 대한 로그를 남기기 위해서 미들웨어를 작성할 수 있다. 좀 더 편리한 방법으로 morgan이라는 라이브러리를 설치하여 사용할 수 있다. 난 express 환경에서 morgan을 사용해 보았다. const express = require("express"); const morgan = require("morgan"); const app = express(); app.use(morgan("dev")); 위와 같이 morgan을 사용하여 로그를 남길 수 있다. 인자로 설정을 넣을 수 있는데, 나는 dev설정을 사용하였다. combined, common, dev등의 설정이 있는데 앞의 두 개는 표준 Apache 로그에 관한 설정이고 dev는 개발용으로, 요청에 따라서 색상이 다른 ..

• format_list_bulleted Node
• · 2023. 3. 10.
• textsms

Typescript Generics와 Keyof, Mapped Types 사용해보기

타입스크립트에서 제네릭, Mapped Types을 사용해보고, keyof 키워드는 어느 상황에서 사용할 수 있을지 사용해보았다. interface dynamic { [key: number] : string, } const keys: dynamic = {1: 'one', 2: 'two'}; 타입스크립트에서는 위처럼 동일한 타입의 key-value값들을 갖는 객체를 정의할 수 있다. 다만, 이 경우 value의 타입은 맨 처음의 선언한 것에서 바뀔 수 없는 단점이 있다. 제네릭을 사용하여 더 확장성있게 코드를 작성할 수 있다. interface dynamic { [key: number] : T, } const str: dynamic = {1: 'one', 2: 'two'}; const num: dynamic..

• format_list_bulleted TypeScript
• · 2023. 3. 10.
• textsms