코딩하는 고릴라

SSAFY 10기 비전공 JAVA 트랙 교육과정 회고23년 5월 ~ 6월그 간의 경험을 비추어 보았을 때, 나는 문제가 생겼을 때 문제 해결을 지시하고 과정을 관리하는 사람보단 직접 문제를 해결하는 사람이 되길 원했던 것 같았다. 그래서 다니던 직장을 퇴사하고 개발 직무로의 전환을 위해 SSAFY에 지원했다. JAVA가 대세라는 말에 가까운 지역인 대전, 비전공 JAVA 트랙으로 지원했다. 이 때는 아직 어떤 개발자가 되겠다 싶은 생각은 하지 않았었다. 막연히 개발로 돈을 벌어보고만 싶었다. 서류 제출 과정에서는 개발 직무로의 전환 이유와 간절함에 대해 어필했다. 시험은 공기업 인적성 시험을 잠시 준비했던 경험이 도움 됐던 것 같았고, 면접은 최신 IT 트렌드 뉴스들을 주제별로 독서하듯 쭉 읽어나가면서 ..

컴포넌트의 상태 별 UI를 관리하기 위해 프로젝트에 스토리북을 적용해보기로 결정했습니다. npx storybook@latest init프로젝트의 루트 디렉토리에서 스토리북을 설치합니다. 위 명령어를 이용하면 루트 디렉토리에 .storybook 폴더와 stories 폴더가 생성됩니다.프로젝트의 구조입니다. ui 패키지에 존재하는 컴포넌트를 blog, lab 서비스에서 가져다가 사용하는 방식입니다.따라서 ui 패키지 내에 존재하는 컴포넌트들을 스토리북으로 관리해줘야 합니다.import type { StorybookConfig } from '@storybook/nextjs';import { join, dirname } from 'path';/** * This function is used to resolve ..

turborepo를 활용해 만든 next.js 프로젝트에서 blog 서비스에 대한 jest 테스트 실행 후 위와 같은 에러를 맞이했습니다. Page 컴포넌트 내에는 테스트용 Div 요소와 다른 패키지에서 가져온 Button 컴포넌트를 포함하고 있습니다. 에러 메시지를 토대로 예상했을 때, 서로 다른 패키지에서 작성된 컴포넌트를 하나의 패키지 내에서 렌더링 하려 했고, 각각의 패키지 내에 설치된 react의 버전이 다를 것이라 생각해 확인해 봤습니다. apps/blog/package.json "react": "19.0.0-rc-f994737d14-20240522", packages/ui/package.json "react": "^18.2.0", 페이지 컴포넌트가 존재하는 패키지와 Button 컴포넌트가 존..

자바스크립트에서 비동기 작업을 다루는 것은 매우 중요한 일이나 개인적으로 헷갈리는 부분이 많았습니다.해당 게시물에서는 예시 코드와 함께 코드가 어떤 순서대로 작동되는지 나타내는 모식도와 함께 정리해 보았습니다.node.js 와 브라우저에서의 비동기 작업은 다소 차이가 있기에 브라우저를 기준으로 설명했습니다. 호출 스택 (Call Stack)자바스크립트 코드에서 호출된 함수가 쌓이는 공간입니다.이벤트 루프 (Event loop)호출 스택, 콜백 큐를 감시하며 실행될 작업을 조정하는 역할을 합니다.동기적으로 작업하는 함수는 호출 스택에 쌓아가져 실행시키고, 호출 스택이 비어있을 때만 콜백 큐에 있는 작업을 순차적으로 호출 스택에 올리는 역할을 합니다.콜백 큐 (Callback Queue)비동기 작업의 처리 ..

기존 진행했던 프로젝트는 모두 React 기반으로 진행하였습니다.최근에 Next.js를 학습했고, 리소스 최적화, SEO 등 여러 측면에서 훨씬 편리한 개발 환경을 제공받을 수 있어Next.js를 직접 활용해 보고자 새 블로그 사이트를 만들고자 기획해 보기로 했습니다. Front- Next.js 14- tailwindcss- storybook Back- Next.js 14- Next-Auth- postgresql 테스트- Jest 배포- turborepo : 모노레포 마이크로 프론트엔드 개발 환경 구성을 위해 사용- vercel 일단은 Next.js의 활용에 초점을 두어 진행하고, 추후 배포 관련해서 더 학습해 볼 여지가 있다면 Docker를 활용한 배포 방식도 적용해 볼 예정입니다.무엇보다 기존에 프로..

⏰ WHY로그인 여부에 따라 페이지 접근 시 라우팅 할 LoginGuard 컴포넌트 내에서 if - else 문을 활용해 코드를 작성했었습니다.이는 가독성 측면에서 좋아보이지 않아 최근에 학습한 lookup table 패턴으로 보다 유지보수가 용이한 코드로의 리팩토링을 시도해보았습니다. 🦍 WHATLookup table? - 객체 내에 조건을 key로, 실행시켜야 할 함수를 value로 하여 if문 순회 없이 조건에 부합했을 때의 함수를 O(1)에 실행시킬 수 있도록 하는 디자인 패턴 초기 코드  먼저 lookup table 패턴과는 무관하지만 배열 형태로 되어 있는 loginLimitPath 를 set 형태로 변환해 경로를 체크하는 로직의 시간 복잡도를 O(n) 에서 O(1)로 줄였습니다. 다음으로는..