개발일지

약 2달간 next.js 13 버전을 사용해 회사의 신규 서비스를 개발하였다. 우선 기획이 나온 대부분의 기능과 주요 QA를 끝난 지금, 미루고 미뤄왔던 일들을 조금씩 해나가는 중이다. TODO 중 하나였던 폴더구조를 어떻게 가져갈지 고민하고 정리한 내용을 기록한다. 1. 개발환경 next.js의 13버전을 사용하고 있고, src 폴더도 사용하고 있다. css는 tailwind를 사용하고 있어 global.css 파일 외에 따로 관리하는 css 파일은 없다. 2. 고민한 내용들 🤔 컴포넌트는 어디에?? 가장 고민이 된 부분은 컴포넌드를 어디에 둘 것인지 였다. next.js 13은 app router를 사용하기 때문에 app 폴더 아래 page들이 위치한다. 그래서 처음에 생각했던 위치는 page에서 사..

회사에서 Next.js로 웹서비스를 개발하고 있는데, ios 모바일 웹브라우저(사파리, 크롬)에서만 textarea에서 한글 입력시 버벅거리는 문제가 나타났다. 한글을 입력할 때 화면에 늦게 그려지면서 버벅거렸고, 글자가 여러번 입력되는 현상도 있었다. 안드로이드에서는 문제가 없어서 ios를 중심으로 찾아봤는데, 완벽하게 일치하는 사례를 찾지 못했다. ios의 buffer문제나, font display도 관련이 있는지 찾아봤는데, 해결 방법이 되지는 못했다. 한참 헤매다가 폰트가 문제가 아니냐는 팀원의 질문에 폰트를 다시 원래 사용하던 것으로 바꿔보니 문제가 해결되었다. 폰트는 이렇게 next font를 활요해서 사용하고 있었다. import { Roboto } from "next/font/google"..

이전 포스팅에서 간단한 Todo web app을 context api를 사용해서 만들어보았다. context api를 사용하면서 여러 컴포넌트에서 상태를 공유해야할 때 간단히 쓸 수 있는 방법이지만, 관리해야하는 상태가 많아지만 Provider depth가 굉장히 증가해서 관리하기 어려울 거라고 느꼈다. 한편으로 최근 많이 사용한다는 Recoil이 궁금해서 찾아보던 중, context api와 recoil을 비교하는 글을 다수 접할 수 있다. 특히 context api에 대해 공통적으로 언급되는 주의사항이 있었는데, 바로 모든 자식 컴포넌트가 리렌더링된다는 점이다. 그래서 React 공식문서를 다시 찾아봤다. 공식문서에 따르면, 다음과 같이 설명하고 있다. ... Whenever MyApp re-rend..

tailwind에서는 tailwind.config.js를 통해 원하는 색상, 폰트, 변수 등을 추가할 수 있다. 그런데 1. 기존에 tailwind에서 제공하는 색상을 사용하면서, 추가로 내가 지정한 색상을 변수로 추가하는 경우와 2. 내가 원하는 색상만 추가하여 사용하는 경우가 다르다. /** @type {import('tailwindcss').Config} */ module.exports = { theme: { colors: { //여기에 추가하면 기존 색상은 사용하지 않고, 여기에 추가한 colors만 사용할 수 있다. }, extend: { colors: { //여기에 추가하면 기존 + 추가로(extend) 사용할 수 있다. } }, }, } 이름을 잘 보면 기능을 유추할 수 있다. - theme..

최근 리액트를 공부하기 위해 드림코딩에서 리액트 강의를 듣고 있다. https://academy.dream-coding.com/courses/react 강의 과정 중 간단한 TodoList를 만드는 챌린지가 있어서 만들어보게 되었다. 상태관리 library는 따로 사용하지 않고 React에서 기본적으로 제공하는 hook을 이용해 상태를 관리하였다. Component를 분리하는 과정에서 2개 이상의 Component가 동일한 State를 공유해야하는 상황이 생겼고, Context를 사용해서 해결해 보았다. 1. 전체 구조 서비스의 전체적인 구조는 다음과 같다. function App() { return ( ); } Header에서는 다크/라이트 모드를 처리하는 ThemeMode와 메뉴바인 Nav를, To..