본문 바로가기

전체 글

 (286)
리액트 프로젝트 폴더 구조와 컨벤션 규칙 여러 사람과 협업을 할수록 규칙은 중요하다. 규칙 없이 마구 개발하면 서로가 작성한 코드의 의도를 파악하는 데에 더 많은 시간을 쏟게 되고 오히려 혼자서 개발하는 것보다 못한 퍼포먼스를 낼 수도 있다. 여러 규칙 중 폴더와 파일을 어떻게 배치할지를 잘 정하는 게 중요하다고 생각한다. 아무리 세부 코드가 엉망이어도 파일 구분이 명확하면 엉망인 코드와 상관없이 다른 파일(또는 모듈)에서 좋은 코드를 짤 수 있고 추후 필요시 엉망인 코드를 손 볼 수 있다. 또한 코드 퀄리티 자체가 별로라고 해도 props 등의 인터페이스가 명확하고 제대로 작동한다면 그저 모듈을 사용하는 것일 뿐이지 세부적인 복잡한 로직을 들여다 볼 필요는 없다. 마치 node module을 쓰듯이 말이다. 필자가 여러 프로젝트를 진행하면서 ..
Axios를 이용해서 Access 토큰과 Refresh 토큰을 갱신하는 방법 로그인한 사용자를 식별하기 위해 서버는 클라이언트에게 access 토큰을 발급하고 클라이언트는 인증이 필요한 요청을 할 때마다 header에 access 토큰을 포함시켜서 보낸다. 그런데 보안의 이유로 access 토큰에는 만료 시간이 필요하고 만료된 access 토큰을 이용해서 요청을 보내면 인증이 유효하지 않다는 401 에러를 서버에서 받는다. 이 때 클라이언트는 refresh 토큰을 이용해서 access 토큰과 refresh 토큰을 갱신하고 이렇게 사용자는 지속적으로 access 토큰을 이용하여 로그인 한 상태로 서버와 통신할 수 있게 된다. 그러나 access 토큰이 언제 만료될지는 클라이언트에서 알 수 없기 때문에 요청을 보내다가 갑자기 401 에러가 떨어질 수 있고 원하는 데이터를 받을 수 없..
고난도 레거시 코드에서 살아남는 방법 부트 캠프를 마치고 첫 번째로 들어간 회사에서 한 웹앱을 유지보수하게 됐다. 배운적 없는 php와 jquery가 대부분의 지면을 차지했다. 그래도 jquery는 자바스크립트를 약식으로 쓴 모양과 비슷해서 이해하기 어렵지 않았다. 보통 처음 오면 그렇듯 코드를 보며 어떻게 돌아가는지 파악하는 시간을 가졌다. 그러나 말로만 들었던 콜백 지옥을 만나게 됐다. 비동기 요청에 요청에 요청에 꼬리를 무는 콜백 함수가 많았고 그럴 필요가 없는 곳에서까지도 함수 뒤쪽에 또다른 함수가 호출되는 형태의 코드가 대부분이었다. 타고 타고 들어가다 보면 이게 뭘하는 함수였지라며 길을 잃고 만다. 글을 쓰는 지금 시점에서 보더라도 봤던 코드 중에 가독성 쪽으로는 최고 난이도였다. 일하다 못 버티고 떠난 인턴들이 한 둘 아니라고 ..
NextJS에서 static html로 export를 해서 AWS의 S3, Route 53, Cloudfront를 이용해 배포할 때 발생하는 route 문제 해결 방법 NextJS로 작업하고 빌드하면 Server Side Rendering을 구현할 수 있다. 요청이 있을 때마다 node가 돌아가는 서버에서 html 파일을 마련해 전달한다. 그러나 빌드시 next export라는 명령어를 쓰면 Server Side Rendering이 필요 없는 정적인(static) html 파일로 뽑아낼 수도 있다. 물론 이 때에는 Server Side Rendering과 관련된 option을 사용하지 못한다. 이 파일을 배포하는 가장 쉬운 방법으로는 vercel에 remote repository를 등록해서 올리는 방법이지만 회사 등에서 AWS를 이용해 배포해야 하는 경우도 있다. 이런 때에는 route 때문에 좀 고생을 하게 되어 기록으로 남긴다. 미리 알고 있어야 할 것들 S3, R..
NextJS에서 SVG 불러오는 방법 babel-plugin-inline-react-svg을 설치한다. npm i babel-plugin-inline-react-svg 루트에 .babelrc 파일을 생성해서 아래 내용을 입력한다. { "presets": ["next/babel"], "plugins": ["inline-react-svg"] } 아래와 같이 바로 불러올 수 있다. import CircleIcon from './circle.svg'; 참고 package.json { "dependencies": { "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/icons-material": "^5.2.5", "@mui/material": "^5.2.5", "babel-plugin..
React memo, useCallback 올바로 사용하기 리액트에서 리렌더링은 빈번히 일어난다. 리렌더링은 컴포넌트를 구성하는 함수를 다시 실행하는 것이라고 생각하면 좋다. 리렌더링의 목적은 state 변화로 무엇이 달라졌는지를 파악하기 위해서이고 부모의 state가 변했으면 당연 말단 자식까지 전부 리렌더링이 된다. 때문에 자식이 많고 복잡한 부모 컴포넌트일수록 리렌더링시에 많은 연산을 하게 된다. (여기에서의 리렌더링은 실제 DOM과는 관련이 없고 Virtual DOM을 생성하기 위한 리렌더링이다.) 이러한 경우를 위해 React.memo를 쓸 수 있다. 자식 컴포넌트에 memo를 쓰면 props의 값들을 메모리에 저장하고 리렌더링시에 비교하여 값이 달라졌을 때에만 자식 컴포넌트를 렌더링시키고 그렇지 않으면 건너뛴다. 메모리에 저장하는 것과 비교하는 로직이..
setState의 파라미터에 반드시 함수를 넣어야 하는 경우 useState 훅을 이용하면 state와 setState 함수를 얻을 수 있다. const [state, setState] = useState(0); setState 함수에 값을 넣으면 리액트 컴포넌트가 리렌더링 되고 state 값을 바꾼다. setState(1); 그러나 간혹 setState 함수에 함수를 넣는 경우가 있다. setState((state) => state + 1); 이전의 state 값을 불러와서 1을 더한다는 뜻이다. 아래와 별반 다를 게 없을 것 같다. const [state, setState] = useState(0); /* ... */ setState(state + 1); useState에서 받는 state 값도 이전의 값일 것이기 때문이다. 그러나 state가 여럿일 경우에 ..
Visual Studio Code 연두색 테마 개인적으로 Visual Studio Code에서 칼라 테마를 다크 모드로 하기 보다는 밝은 색 테마를 쓰고 모니터의 밝기를 어둡게 설정한다. 이렇게 하는 것이 눈의 피로도가 덜한 것 같다. 밝은 색 테마 중 녹색 계열이 없어 커스텀을 해봤다. 설정에서 color customizations을 검색하고 settings.json에 들어가 editor.tabSize 속성이 있는 JSON 객체에 아래의 값을 넣어주자. "workbench.colorTheme": "Default Light+", "workbench.colorCustomizations": { "activityBar.background": "#162e1a", // left end "breadcrumb.background": "#d0e0cf", // to..

티스토리툴바