react15 Turborepo + Yarn berry를 이용한 Monorepo 구축 방법 회사에서 Turborepo와 Yarn berry를 사용하여 Monorepo를 구축했던 과정을 설명합니다. Monorepo란? Monorepo는 두 개 이상의 프로젝트 코드를 동일한 저장소에 저장하는 소프트웨어 개발 방법입니다. 각 프로젝트별로 패키지, 라이브러리, UI 컴포넌트를 저장하는 기존 방식과 달리 Monorepo에서는 패키지, 라이브러리, UI 컴포넌트 등을 공통을 관리할 수 있습니다. 또한, 프로젝트를 개발하는 개발자들이 하나의 저장소만 바라보기 때문에, 협업에 유리합니다. Monorepo를 구축하기 위한 도구 Monorepo를 구축하기 위한 대표적인 도구로는 아래 4가지가 있습니다. Yarn berry + workspace Lerna Nx Turborepo Yarn berry와 Yarn wo.. 2023. 1. 2. [번역][Next.js] Layout RFC 2022년 5월 24일에 Next.js에서 발표된 Layout RFC에 대해서 번역입니다. 원본 보기 Layout RFC는 2016년 이후 Next.js의 가장 큰 업데이트라고 합니다. Motivation Next.js에서는 Github, Discord, Reddit, 개발자 설문조사를 통해서 현재 Next.js의 라우팅 방식의 한계에 대한 피드백을 받았다. 그 결과로, 아래 두 가지 결과를 도출했다. layout 생성에 대한 개발자 경험이 향상될 수 있다. 중첩(nested)되고, routes간에 공유되고, navigation에서 상태를 유지할 수 있도록 layout을 쉽게 생성할 수 있어야 한다. 많은 Next.js 어플리케이션은 대시보드이거나 콘솔이다. 그래서 향상된 라우팅 솔루션의 이점을 누릴 수.. 2022. 7. 29. [react-query] useEffect에서 react-query의 useMutation을 사용할 때 dependencies 으로 인한 무한 요청 해결방법 react-query를 사용해서 POST 요청을 하기 위해서는 react-query의 mutate를 사용하고, 비동기 요청을 위해서는 mutateAsync를 사용한다. 페이지에 접속했을 때, POST 요청을 보내는 시나리오가 있어서 아래와 같이 useMutation을 선언하고, useEffect에 mutateAsync를 호출했다. 회사와 관련된 코드가 있어서 간단하게 작성했다. 위와 같이 선언 및 호출을 하고, 페이지에 접속하고, 크롬 개발자도구의 Network 탭에 접속해보면 해당 요청이 2000~3000개 이상 요청된다. 이런 현상이 발생하는 이유는 mutateAsync를 통해서 POST 요청이 실행되고, 해당 요청으로 인해서 mutation 객체가 변경되었기 때문에, useEffect가 다시 실행되.. 2022. 7. 13. CRA로 React 설치할 때 create-react-app 버전 이슈 CRA(create-react-app)을 사용해서 React 어플리케이션 개발을 setup할 때, 아래 명령어를 통해서 설치할 수 있다. npx create-react-app [--template ] 어느 때와 다르지 않게 명령어를 실행했는데, 다음과 같은 에러가 발생했다. 써있는대로 create-react-app 를 삭제하려고 아래 명령어를 실행했다. npm uninstall -g create-react-app # or yarn global remove create-react-app 그런데 삭제가 되지 않고, 발생했던 에러가 그대로 발생했다. 이곳 저곳 찾아보니 직접 디렉토리를 삭제하라고해서 which create-react-app을 찾아봤으나 create-react-app not found 가 리턴됐.. 2022. 2. 21. [VS Code] 파일 저장할 때 ESLint 동작하게 하기 예전에는 VS Code의 Extension인 ESLint의 설정메뉴에 Auto Fix On Save라는 메뉴가 있었다. 이 항목을 체크하면 설정이 됐었는데, 최근에 확인해보니 해당 설정 항목이 없어졌다. Auto Fix On Save를 설정하는 방법은 다음과 같다. Mac 기준으로 VSCode에서 Cmd + Shift + P 를 입력하면 명령 팔레트가 등장하는데, Open Settings를 입력한다. 입력으로 열린 settings.json에서 다음 항목을 입력하면 된다. "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true, 2022. 1. 27. 첫 Gatsby 사이트 만들고 Gatsby Cloud에 배포하기 사이트를 만드는 과정의 전체 프로세스는 다음과 같습니다. 로컬에서 Github로 소스를 push 합니다. Gatsby Cloud에서 Github에 있는 소스를 빌드하고 배포합니다. 사용자들이 사이트에 접속할 수 있습니다. Gatsby 사이트 만들기 Gatsby 사이트를 만들기위해 Gatsby CLI에서 명령어를 사용해야 합니다. gatsby new 위 명령어를 입력하면 여러 질문들이 터미널에 나타납니다. What would you like to call your site? → 사이트 이름 입력 What would you like to name the folder where your site will be created? → 사이트의 폴더 명 Will you be using CMS? → CMS를 사용할 지.. 2022. 1. 23. [Gatsby] 환경 구축 시작하기 앞서... Gatsby는 React기반으로 정적사이트(Static Site), 일반 웹사이트를 구현할 수 있는 오픈소스 프레임워크입니다. Gatsby라는 프레임워크를 알고만 있었고, 이를 이용해서 사이트를 개발해보고 싶었는데, 이번 기회에 Gatsby로 사이트를 만들어보면서 공부한 내용을 하나씩 정리해보려고 합니다. 주로 공식사이트를 기준으로 정리를 할 예정이고, 다른 블로그나 사이트에서 참고하면 아래의 참고자료로 남길 예정이니 자세한 내용은 아래 참고자료를 확인해주세요. 사전지식 Gatsby를 이용해서 사이트를 만들기 위해서는 Web 기술과 친해져야하고, 필요 소프트웨어 툴을 설치했는지 확인해야 합니다. 아래 4가지는 Gatsby에서 요구하는 사전지식 입니다. HTML (https://www... 2022. 1. 19. react-router-dom v5, v6 비교 안녕하세요. 이번에 회사에서 react-router-dom의 버전을 업그레이드하는 작업을 진행하면서 v5에서 사용하던 기능들이 v6에서 어떻게 변경되었는지 공유합니다. 1. Switch → Routes 변경 v5에서 사용하던 가 로 변경되었습니다. // v5 // v6 2. exact 옵션 삭제 속성 중, path가 정확히 일치할 때만 사용하는 exact 가 삭제되었습니다. // v5 // v6 3. component 방식 변경 v5에서 사용하던 component, render 속성이 element 속성으로 변경되었습니다. // v5 ( )} /> // v6 4. 중첩 라우팅 방법 변경 4.1 Basic 기존 v5와 동일하게 중첩라우팅을 사용할 수 있습니다. 여기서 차이점은 상위 path에 *가 추가되어.. 2021. 12. 4. [React]내가 개발한 사이트의 보안점수 확인하는 방법 React로 개발된 어플리케이션을 서버에 배포하기 위해서 운영팀에서 제공하는 보안점검을 실시했습니다. 보안점검의 결과로 웹 서버의 HTTP 보안 헤더가 설정되어 있지 않다는 결과를 받았더라구요 ㅠㅠ 보안점검 결과만 받았을 때는 무슨 말인지 전혀 알지 못해서 하나씩 찾아보면서 보안 헤더를 적용했고, 그 방법을 차근차근 정리해보려고 합니다. 먼저, 첫 번째로 내가 개발한 사이트가 현재 보안설정이 잘 되어있는지 확인할 수 있는 사이트입니다. 이 사이트는 mozilla에서 개발자, 관리자, 보안 담당자에게 사이트가 안전하게 구성되어있는지 확인할 수 있게 도와주고, 구성되어있지 않으면 구성하는 방법도 설명해주는 좋은 사이트입니다. https://observatory.mozilla.org/ Mozilla Obser.. 2021. 6. 22. 이전 1 2 다음
