모노레포 환경에서 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) - 앱을 하나의 완전체로 보고 테스트 하는 것 중요한 질문: 무엇을 테스트 할 것인가?, 어떻게 테스트 할 것인가? -> 테스트 코드에 어떤 종류의 코드를 넣을 것인가? 테스트또..

어제 급하게 달렸던 소프트웨어공학 프로젝트가 마무리되었다. 계속 까먹고 있었는데 제한 접근 라우팅은 로그인 기능이 있는 대부분의 서비스에서 필수로 요구되는 기능이다. 나는 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..

프로젝트를 진행중에, 페이지의 컨텐츠를 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개월간 없데이트 였던 점을 보고 앞으로도 더..

오늘 성공한건 카테고리를 눌렀을 때 그 카테고리를 가진 JSON 배열을 띄워주는 것이었는데, 처음 해본건데 돼서 신기했다. const menuArray = [ { id: 1, category: "커피", name: "아메리카노(ICE)", price: "4,100원", imgUrl: Americano, }, { id: 2, category: "커피", name: "아메리카노(ICE)", price: "4,100원", imgUrl: Americano, }, { id: 3, category: "에이드", name: "사과에이드", price: "5,200원", imgUrl: Americano, }, { id: 4, category: "커피", name: "아메리카노(ICE)", price: "4,100원"..

특정 값이 들어가 있고, 버튼을 눌렀을 때 값을 변경할 수 있게끔 하고, 저장을 누르면 그 값으로 바뀌는 inline text editor를 만들어 봤다. 함수형 컴포넌트로 진행했고, 로컬에서 진행했음을 먼저 말한다. 스타일링은 styled-components를 사용했는데, 여기서 스타일링은 중요한 부분이 아니므로 생략한다. 우선, useState로 두 가지 값을 정의한다 1. 수정 모드로 들어가는 useState (editMode로 정의했다.) 2. 텍스트 값에 대한 useState (text로 정의했다.) 연필 버튼을 눌렀을 때 editMode가 바뀌게 하기 위해서 editMode를 false로 지정해주었고, text는 현재 서버와 연결되어있지 않기 때문에 임의로 userState를 만들어서 그 안의..

기존의 checkbox 상태관리에서, 성별 및 연령대 select value 선택 시 버튼이 활성화되도록 기능을 추가했다. select는 Material-UI 라이브러리의 Select를 활용했다. 사용하고 싶은 것만 취사선택하여 코드 복붙을 하였고, option value를 그대로 적용시키기 위해 onChange 함수를 걸었다. 기본적으로 Material-UI에서 제공하는 것들을 import해준 뒤(앞 사진) handleChange 함수를 type에 따라 구분하였고, useState를 활용하여 현재 선택된 값(e.target.value)을 성별에 설정(setSearchSex), 연령대에 설정(setSearchAge) 해줬다(뒷 사진). isAllChecked라는 변수에, 기존의 checkbox 상태관리 ..

종합설계를 하면서 배우는 게 참 많다. 의무성이 생기니까 어떻게든 내가 맡은 부분을 책임감있게 끝내야 한다는 마음가짐을 갖고 하게 된다. 근데 또 하나하나 나중에 서비스를 만들 때도 꼭 필요한 것들만 한지라, 다행히 좋은 부분을 잘 맡았다는 생각이 들었다. 이 부분은, 서버에 토큰을 넘겨주는 방식은 아니고, 클라이언트 단에서 로그인 및 로그아웃을 해결하기 위한 방법이다. 서버와 합쳤을 때 토큰을 넘겨주는 부분은 따로 포스팅을 할 예정이다. 이번에는 카카오 로그인과, 로그인 여부에 따라 라우팅할 수 있는 페이지와 그렇지 않은 페이지를 구분하는 것을 구현했다. Kakao Developers에 들어가서 로그인을 한 뒤, 내 애플리케이션에 들어가서 애플리케이션 추가하기를 누른다. 그럼 이러한 페이지가 보일 것인..

종합설계 프로젝트에서, 체크박스의 상태관리 및 체크박스 전부 체크 시 버튼을 활성화하는 부분을 구현하는데 애를 먹었다. 여러 방법이 있지만, useState를 활용하여 상태관리를 하는 방법을 남겨보고자 한다. const SignupContents = ({ history }) => { const [checkedButtons, setCheckedButtons] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedButtons([...checkedButtons, id]); console.log(체크 반영 완료); } else { setCheckedButtons(checkedButtons.filter(button =>..