방구석 개발자의 놀이터

1. lazy loading 적용 전 아래의 사진은 고객사의 로고들이 있는 고객사례 컴포넌트이다. 해당 컴포넌트는 index 페이지에 포함되어있다. 즉, 고객이 최초에 홈페이지에 들어왔을 때 보여지는 화면에 포함되어있다. 하지만 해당 컴포넌트는 스크롤을 좀 내려야 볼 수 있다. 그렇다면 과연 고객이 처음 홈페이지에 들어왔을 때 해당 이미지들을 불러와야 할까? 현재는 처음 홈페이지 들어오면 아래 사진과 같이 해당 이미지들을 전부 불러온다. 고객은 최초에 홈페이지에 들어왔을 때 보이지 않는 컴포넌트의 40개 img load를 기다려야한다. 물론 이미지의 사이즈가 크지 않지만, 언제든 고객사 로고는 추가될 수 있으며 인터넷이 좋지 않은 상황에서는 더욱 차이가 날 수 있다. 2. lazy loading 적용 방..

1. MDN Web Docs - scrollIntoView 한국어 문서 수정에 기여하게 된 계기 한국어 문서 수정에 기여하게 된 계기의 시작은 scroll-behvaior의 instant 옵션 history와 관계가 있다. 따라서, scrollIntoView의 scroll-behavior의 instant 옵션이 언제 어떻게 사라졌다가 언제 어떻게 다시 사용이 되었는지 history를 모두 정리해 보았다. 1-1. typescript의 scrollIntoView 옵션과 MDN Web Docs의 옵션의 차이점 발견 처음에는 typescript에서 scrollIntoView를 사용하려는데 behavior옵션이 MDN Web Docs의 영어 문서 내용과 다른 점을 발견하였다. MDN Web Docs - scro..

1. 오픈소스에 기여하게 된 계기 1) Skeleton Loading을 위한 react-loading-skeleton 선택 개인 프로젝트를 진행하며 Skeleton Loading을 사용하기위해 npm trend를 검색해보았다. 위 사진의 npm trend를 보면 react-content-loader와 react-loading-skeleton이 가장 인기가 많은것을 볼 수 있다. 이중에서 custom 기능을 제공하는 react-content-loader보다 직관적으로 설명이 되어있는 react-loading-skeleton을 사용해보기로 했다. 2) Github README의 설명과 다르게 동작하는 오류 발견 Github README의 설명을 보면 skeleton의 width prop을 주지 않으면 ..

1. referentialIntegrity(참조 무결성) 설정 데이터베이스의 참조 무결성 설정을 위해 prisma에서 설정해 줄 때 Preview feature "referentialIntegrity" is deprecated. 라는 오류를 볼 수 있다. prisma 공식문서를 읽어보면 Prisma version 3.1.1에서 사용된 referentialIntegrity 기능은 Prisma version 4.8.0 이후부터 relationMode로 대체되었다고 한다. 따라서, 위의 이미지와 같이 relationMode = "prisma" 옵션으로 바꿔주면 문제는 해결된다. 2. relationMode 설정하는 이유 오류는 해결했지만 왜 relationMode를 설정해야 할까? 이 역시 prisma공식문서..

리팩터링 책을 읽고 난 후 너무 당연하게 여겨왔던 코드에 대한 의문이 생기는 날이 종종 생겼다. 그 중 하나가 Modal toggle 로직이였다. 어떠한 문제가 있었고 어떻게 개선했는지 예제로 알아보자. (변수명, 함수명은 예제를 위해 임시로 지어논 이름입니다.) 1. Modal toggle 로직을 변경하고 싶었던 이유 이전의 Modal toggle 로직은 아래와 같았다. 빨간색 박스 : Modal toggle에 관여하는 state 영역 주황색 박스 : Modal toggle 함수 노란색 박스 : Modal을 렌더링 해주는 영역 위와 같은 구조는 Modal이 추가될 때 마다 state를 추가해야하고, state 변화에 따라 toggle 함수를 변경해야 한다. 또한, 컴포넌트에서 사용되는 state가 많아..

open modal 버튼을 클릭 시 Modal Component가 렌더링 된다고 할 때 click 함수를 어떤걸 사용할지에 따라 테스트코드는 다음과 같이 작성할 수 있다. 1. fireEvent.click을 사용할 경우 it("부모 컴포넌트 state를 이용한 모달 버튼을 클릭하면 모달이 나타난다", () => { renderComponent(); //모달이 처음에는 보이지 않는다 expect(screen.queryByText("모달 타이틀")).toBeNull(); //버튼 클릭 시 모달 등장 const buttons = screen.getAllByText("open modal"); fireEvent.click(buttons[0]); //모달 등장 const modal = screen.getByTest..

프로젝트를 진행하다보면 여러 이유로 proxy를 나눠야할 상황이 발생할 수 있다. 여기서 다룰 상황은 2가지 이다. 1. api 버전 혹은 제공하는 환경이 달라져 proxy를 나눠야 할 경우 기본적인 proxy 수동 세팅은 src > setupProxy.js 파일을 만들어 아래와 같이 세팅하면 가능하다. // src/setupProxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function(app) { app.use( createProxyMiddleware("/api/v1", { target: "https://api.test.com", changeOrigin: true, cookieDom..

최근에 Hot했던 ChatGPT를 사용해보면서 느낀 개인적인 생각을 정리해보려고 한다. 1. ChatGPT가 웹 개발자를 대체할 수 있을까? 각종 커뮤니티에 가장 많이 올라왔던 질문이였던 것 같다. 대다수의 답변과 마찬가지로 나는 No 라고 생각한다. 물론 간단한 웹사이트를 제작할 수 있을지 모른다. 다만, 이 또한 개발자가 ChatGPT를 사용했을 때의 이야기이다. 내가 No라고 생각하는 이유는 정말 많지만 간단하게 몇가지만 적어보고 넘어가겠다. product는 기획에 따라 계속해서 기능 및 구조가 변하게 된다. 기능 및 구조가 변하게 되면 이전에 ChatGPT가 만들어 놨던 코드를 올리고 어떤식으로 변경될 지를 설명 해줘야 하는데 과연 개발자가 아니고서야 정확한 명령이 가능할까? 프론트엔드 관점에서 ..

분명 route 설정을 제대로 했는데 설정한 URL 경로로 갔을 때 cannot Get 에러를 목격 했다면 webpack의 mode가 development일 확률이 크다~!! 결론부터 말하자면, 2가지 방법이 있다. 1. webpack.config.js에서 아래와 같이 설정하면 된다. module.exports = { mode: "development", devServer: { historyApiFallback: true, } } 2. webpack serve에 옵션을 추가하면 된다. npx webpack serve --history-api-fallback 그렇다면 devServer의 historyApiFallback이 무엇을 의미하는지 알아보자. 먼저, React는 모두가 알다시피 SPA(Single ..

작년에 스타트업으로 이직 후 1년 기념으로 개발자로써 대기업SI에서 스타트업으로 이직 했을 때 장단점에 대해 글을 쓴 적 있다. 1년은 정말 맛보기란 말인가... 2년이 지난 2022년에는 많은 일이 일어났다... 1. 회사의 완전한 인수 합병 내가 스타트업으로 합류 당시 회사는 매출이 탄탄한 SI 중소기업에 지분을 60%정도 팔아 자본금을 확보한 상태였다. 이렇게 되면 스타트업이라도 자본금이 어느정도 안정적이니까 좋지 않을까? 라는 생각을 했다. 하지만, 이 생각은 반은 맞고 반은 틀리다. 자본금이 어느정도 안정적이지만 모회사-자회사 관계가 되어버려 자본금이 있어도 모회사에 허락을 맡아야 자본금을 쓸 수 있게되며 회사의 성장 방향성이 모회사에 의해 결정된다. 이렇게 구조가 모회사-자회사 관계가 되어버리..