모노레포 환경에서 Next.js 레포에 vanilla-extract 종속성을 추가하게 되었다. 이 때, vanilla-extract의 next-plugin을 설치한 뒤 링크에서처럼 next.config.js에 plugin 관련 설정을 추가해주고 해당 레포를 실행했더니 아래 사진과 같은 에러가 발생했다. 나와 같은 에러를 겪은 분이 올린 이슈를 참고하였는데, 아래의 코멘트를 보고 해결책을 찾을 수 있었다. 원인은 모노레포 내 각 레포에서의 Next.js 버전이 통일되지 않았기 때문이었다. 현재 모노레포 환경에는 레포가 3개가 있는데, Next.js 버전은 각각 ^14.0.1, ^13.4.19, ^13.4.19 였다. 14 버전으로 올린 레포에서 위와 같은 에러를 확인했고, 각 레포의 Next.js 버전을 ..

어제 포스팅에 이어서 여러 조건에 대한 테스팅을 추가로 포스팅해보려고 한다. 볼 것은 상태 변경 시 바뀌는 렌더링 값에 대한 테스팅, HTTP 요청 전송 시 렌더링 여부에 대한 테스팅이다. 1. src/components/Greeting.js import { useState } from "react"; const Greeting = () => { const [changedText, setChangedText] = useState(false); const changeTextHandler = () => { setChangedText(true); }; return ( Hello World! {!changedText && 만나서 반가워요!} {changedText && 이렇게 바뀌었어요!} Change Text..

React: 자동화 테스트의 종류 기본적으로 수동으로 테스트하며, 이후에 자동화 테스트를 진행한다. 1. 단위 테스트(Unit Tests) - 앱의 가장 작은 가능한 단위(앱 내 개별 함수들)를 위해 테스트를 짜는 것 - 한 프로젝트에는 많은 개수의 단위 테스트가 포함됨 - 가장 공통적이며 중요한 테스트 2. 통합 테스트(Integration Tests) - 다수의 구성 요소 조합을 테스트함(다수의 컴포넌트가 함께 작동할 때) - 단위 테스트보다 수가 적음 3. 종단 간 테스트(End-to-End Tests: E2E Tests) - 앱을 하나의 완전체로 보고 테스트 하는 것 중요한 질문: 무엇을 테스트 할 것인가?, 어떻게 테스트 할 것인가? -> 테스트 코드에 어떤 종류의 코드를 넣을 것인가? 테스트또..

기본적인 Redux 사용방법에 대해서 알아봤다. 이제 이 Redux를 좀 더 편하게, 그리고 가볍게 사용할 수 있는 @reduxjs-toolkit 패키지에 대해 알아보고자 한다. 1. 다운로드 npm install @reduxjs/toolkit yarn add @reduxjs/toolkit 둘 중에 편한 것으로 하자. 그리고 기존에 Redux가 설치되어있는 프로젝트라면 package.json에 들어가서 Redux를 삭제하자. 왜냐면 @reduxjs-toolkit에는 Redux의 모든 게 다 들어가 있기 때문이다. 2. 적용 이제 필요한 곳에 사용해보자. 여기서는 createSlice와 configureStore을 사용할 것이다. 예시는 마찬가지로 counter이다. 이 gif를 보면 증가, 5만큼 증가,..

이번에는 Context API의 대안으로 떠올랐던 Redux의 기본 흐름에 대해서 살펴보려고 한다. 가장 쉬운 예시인 숫자 증가/감소로 설명하겠다. 1) Redux를 불러온다. const redux = require('redux') 2) 스토어를 만든다. const store = redux.createStore(""리듀서 이름"") 리덕스 라이브러리에 노출되는 방법이다. 파라미터로 리듀서가 들어가는데, 이는 어떤 리듀서가 스토어를 바꾸는지 스토어가 알아야 하기 때문이다. 3) 스토어에 들어갈 리듀서 함수를 작성한다. // 1 const counterReducer = (state = { counter: 0 }, action) => { // ... } // 2 const initialState = { cou..

어제 프로젝트를 생성하여 Vercel에 push를 했다. (nextjs-meetup-for-deployment.vercel.app) 근데 아래 사진과 같이 첫 커밋만 Vercel에서 check 후 배포가 되었고 그 이후 디버깅 과정은 배포가 되지 않는 문제가 생겼다. 혹시 비슷한 문제를 겪고 있는 분이 있지 않을까 싶어서 글을 작성한다. GitHub은 오래전부터 써왔던지라 이전에 했던 기억이 있어서 따로 user 및 password 설정을 해두지 않았었는데, 이 부분이 문제였다. GitHub 우측 상단 클릭 후 Settings에 들어가면 아래와 같은 프로필이 나타난다. git config --global user.name "steadily-worked" git config --global user.ema..

Next.js는 사전 렌더링이 가능하다는 특장점을 갖고 있는 리액트 프레임워크이다. React로 개발을 해봤다면 useEffect Hooks를 써봤을 것이다. 이 useEffect Hook에서 의존성 배열(dependency array)에 빈 대괄호를 넣을 경우 최초 렌더링 시에만 1회 실행된다. 그렇지만 이 경우 비어있는 배열에 바로 값이 저장되는 형태가 아닌, 최초 렌더링 시에는 비어있는 형태로 렌더링이 되었다가 useEffect가 실행되면서 내부 함수가 실행되는 과정 이후 한 번의 렌더링이 더 있은 후에야 해당 useEffect가 적용이 되는 형태이기 때문에 안좋은 사용자 경험(예를 들면 페이지 접속 시 깜빡인다든가)을 제공한다. 예를 들어 아래의 컴포넌트가 있다고 해보자. SampleCompone..

어제 급하게 달렸던 소프트웨어공학 프로젝트가 마무리되었다. 계속 까먹고 있었는데 제한 접근 라우팅은 로그인 기능이 있는 대부분의 서비스에서 필수로 요구되는 기능이다. 나는 localStorage를 사용해서 구현했다. App.js import React from "react"; import { Route } from "react-router-dom"; import Manager from "../src/pages/Manager"; import Main from "../src/pages/Main"; import Start from "./pages/Start"; import Login from "./pages/Login"; import Complete from "./pages/Complete"; import O..

const dataArray = [ { "orderCode": "0001", "orderDetails": { "메뉴이름31": 1, "메뉴이름35": 1, "메뉴이름36": 1, "메뉴이름40": 1, "메뉴이름41": 1, } }, ]; 이런 형태의 JSON 파일이 있다고 해보자. 여기서 나는 "메뉴이름31": 1을 빼오고 싶었다. 아니 그냥 map함수를 돌면서 안에 있는 값들을 전부 빼오고 싶었다. 그래서 그냥 단순하게 아래와 같이 뽑아오면 될 거라고 생각했다. {dataArray.map((data) => ( {data.orderCode} {data.orderDetails} )};​ 근데 에러가 뜨는 것이었다. 생각해보니 data.orderDetails는 또 사전식 데이터이기때문에 저런 식으로 빼올 ..

프로젝트를 진행중에, 페이지의 컨텐츠를 SNS에 공유하거나 URL을 복사하는 기능을 구현하게 됐다. 이전에 카카오톡으로 공유하기를 만들 때 귀찮았던 기억이 나서 고민을 하다가 좀 찾아봤는데 react-share 라는 아주 괜찮은 라이브러리가 있어서 소개하고자 글을 쓴다. (카카오톡만 해봐서 다른 SNS로의 공유는 귀찮은지 편한지 잘 모른다) npm 주소 https://www.npmjs.com/package/react-share react-share Social media share buttons and share counts for React. www.npmjs.com react-share라는 라이브러리인데, 주간 다운 횟수가 20만회라서 괜찮아 보였지만 근 9개월간 없데이트 였던 점을 보고 앞으로도 더..