개발일지

다사다난한 4분기였다. 2023년이 얼마 남지 않은 지금 올해를 돌이켜봐도 많은 일이 있었고, 또 성과도 있었다. 얼마 전에 갑작스럽게 퇴사를 하게 되면서 지금 온통 마음이 퇴사&이직으로 정신이 없지만 올해가 가기 전에 회고글을 작성하고 싶어서 오랜만에 글을 쓴다. React 프로젝트 Next.js로 마이그레이션하기 10월부터 본격적으로 개발했던 프로젝트를 배포하게 되었다. 기존에 React로 MVP 개발을 CTO님이 진행하셨는데 CTO님이 계속 프론트까지 작업하기에는 어려운 상황이라, 내가 새로 Next.js로 개발을 진행하였다. MVP는 이미 오픈한 상태였는데, Next.js 버전으로 마이그레이션하면서 실질적으로 서비스 운영도 전담하게 되었다. 우선 MVP와 동일하게 개발하고, 테스트를 진행한 후에 ..

약 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"..

최근에 일이 바빠지면서 블로그는 전혀 신경을 쓰지 못했다. 매일 회고글 써야지, 써야지 하다가 문득 2023년 3분기가 이미 한참전에 지나갔다는 사실을 깨달았다. 3분기는 개인적으로 많이 우울하고 힘든 시간이었다. 그래도 지금은 다시 즐겁게 개발하고 있다. 업무가 모호해지자 엄청나게 우울해졌다 이 글을 쓰고 있는 지금은 괜찮지만, 당시에는 정말 심각했다. 회사에서 신규 서비스로 초점이 옮겨가면서 상대적으로 기존 서비스에 할당되는 업무가 줄어들었고, 업무가 굉장히 모호해졌다. 아직 신규 서비스는 구체적인 기획이 나오지 않은 상태였고, 앱을 바로 만들지도 결정되지 않았다. (앱을 안만들면 나는 어떤 업무를 맡게 되는거지?) 신규 서비스 기획과 관련해서 팀원들 모두가 조금씩 학습을 해달라고 했는데, 나에게는 ..

이전 포스팅에서 간단한 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..

최초작성일: 2023년 4월 5일 이번에 플러터 버전을 업데이트하면서 새로운 에러들을 확인하고 있다. 그 중 LateInitializationError는 에러가 발생하는 위젯/하위 위젯 모두 late나 nullable로 선언된 변수가 없어서 왜 발생하는지 알 수가 없었다. LateInitializationError: Field '_children@25042623' has not been initialized. 플러터와 패키지 버전을 올린 이후에 발생한 문제라서 패키지에서 발생한 문제인지 의심했고, 에러 로그에서 문제가 되는 패키지의 경로를 확인할 수 있었다!! 그래서 구글링 결과, 해당 패키지 깃헙에서 이슈를 확인할 수 있었다. 해결 방법은 다음과 같다! (출처) @override Widg..

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

올해도 어김없이 인프콘 시즌이 돌아왔다! 작년에 회사 동료 한 분이 인프콘 당첨됬다고 하셔서 부러워했던 기억이 있는데, 올해도 추첨에 떨어졌다. 그래서 올해도 온라인으로 세션을 보겠구나, 하고 있는 와중에 인프런에서 시간표 추첨 이벤트를 한다는 소식을 들었다! 어떤 세션이 있나 구경할 겸 블로그에 올렸는데 당첨😎 (하필 결과 발표기간이 휴가기간이라 해외에서 다른 유심을 끼고 있었는데, 등록 마지막날 한국에 들어와서 늦지않고 등록할 수 있었다 ㅜㅜㅜㅜ) 시간표 공유하기 이벤트를 했음에도, 막상 프로그램을 자세히 살펴보니 세션 이외에 재밌어 보이는 프로그램이 많았다. 세션은 나중에 영상으로도 확인할 수 있으니, 현장에서 할 수 있는 것 위주로 돌아다녔다. 마침 이직에 대한 고민이 있었고, 네트워킹을 너무너무..

최초작성일: 2023년 1월 16일 0. Slivers 안에서 Expanded가 사용하고 싶었다. 앱에서 현재 사용하고 있는 공통 Layout widget을 사용해야 했고, 또CustomScrollView를 사용하고 있기 때문에 반드시 Sliver를 사용해서 ui를 그려야 했다. 내가 그리고 싶었던 것은 데이터가 없는 경우에 화면 중앙에 다른 위젯을 그려주는 것이었다. 정리를 해보면, 데이터가 있는 경우 : 스크롤 위젯 => SliverList 데이터가 없는 경우 : 스크롤X 위젯 => ?? 이런 상황이었다. 1. SliverToBoxAdapter를 사용하기 플러터에서 ui를 그릴 때 남은 공간을 모두 차지하게 하기위해 Expanded를 자주 사용하게 된다. (구체적인 예제는 공식문서 : Expanded..