B41 TIL Blog

Git Flow 모델

Git git tag 0.1 0.1 버전이라고 태그를 달아 놓는 방법 checkout할 때 b옵션 브랜치 생성과 동시에 체크아웃 git branch release/0.2 /0.2는 0.2버전을 준비하겠다고 달아 놓음. git merge...

repeat, TypeScript Narrowing,

String.prototype.repeat() 문자를 반복해서 새로운 문자열을 반환 '안녕'.repeat(3); //안녕안녕안녕 TypeScript Narrowing 타입을 좁혀 주어 더 안정적으로 코드를 체크할 수 있도록 하는 방법 공식 문서에 다음과 같은 예제가 있다. function padLeft(padding: ...

220224,220225 - ClipBoard, React-Router v6

React-Router v6에서 History를 사용하려면 useHistory, History가 useNavigate로 바뀜. 사용법 import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); navigate(`/${item.key}`); ...

CORS, 브라우저 렌더링, REST란?

#CORS (Cross Origin Resource Sharing) A 사이트에서 B사이트의 API로 정보를 요청할 때 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 것을 Cross Origin Resource Sharing, CORS라고 함. 프론트엔드 : 접근 방법, 도메인, 포트가 담겨 있는 Origin이라는 Header를 ...

크로스 브라우징과 JQuery

#들어가기 이번에 IE8을 지원하는 웹사이트 만들기 프로젝트를 받고 깜짝 놀랐다. 지금까지 들은 강의에서는 JQuery는 이제 필요없다. 바닐라 자바스크립트는 ES6으로 배우면 된다고 했는데, 설마 JQuery를 배우게 될 줄은 몰랐다. 그런데 기존 레거시 코드를 React나 ES6 자바스크립트로 옮길 때 JQuery와 IE8에 대한 ...

git revert, reset, web

git revert와 reset의 차이 reset: 이전 상태로 돌려버림 (타임머신) revert : 과거 특정한 사건들만 없던 일로 돌려 버림 Web 폴리필(polyfill) : 웹 개발에서 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 말함. 이미지 스프라이트 로고, 아이콘 등의 파일을 한 개의 이...

pre태그, fit-content

pre 내용 상의 enter, space 등이 그대로 유지되는 태그 <pre> 그대여 그대여 오늘은 우리 같이 걸어요 </pre> fit-content html의 넓이가 100%인데 밑에 있는 content가 100% 이상의 값을 가지고 있어서 가로 스크롤할 때 네비게이션이 끊겨 버리는 경우에 사용하는 스타일...

Debounce, MUI 사용법

Debounce 연속으로 발생하는 이벤트를 제어하기 위해서 사용함. 이번 프로젝트에서 onChange로 검색 창을 구현하는데 실시간으로 변하는 값의 최적화 때문에 사용. useDebounce라는 커스텀 훅을 만들어서 값이 입력된 후 일정 시간이 지났을 때 처리하는 방식으로 만들 수 있음. typeScript import { useEff...

Next, Atomic 디자인 패턴, 라이브러리 사용

NEXT pages에는 component를 import만 (컴포넌트들이 한 눈에 들어올 수 있도록) components에 페이지의 모든 컴포넌트를 정리. API 호출할 때 SSR, CSR 어디에서 할 지 고민해보고 구현하면 좋음. useSWR 이미 가져온 것은 캐시에서 응답하고 아니면 새로 가져오는 것인데 이 훅은...

Next, Styled Component, TypeScript

스타일드 컴포넌트 매크로를 쓰면 cra에서 컴포넌트의 파일명을 볼 수 있어서 디버깅하기에 좋다. next에서는 babel 설정 파일에서 해줄 수 있다. (pure) styled component와 typescript를 같이 쓸 때 theme의 타입 설정에서 타입 대신 해당 값을 써주면 나중에 테마를 볼...