HOBBi 스토리북 배포 정적 앱으로 내보내기 스토리북을 배포하기 위해서는 먼저 정적인 웹 앱으로 내보내야 합니다. 이 기능은 이미 스토리북에 내장되어 있으며 미리 구성되어 있습니다. yarn build-storybook을 실행하면 storybook-static 디렉토리에 정적인 스토리북이 생성될 것이며 이를 정적 사이트 호스팅 서비스에 배포할 수 있습니다. 크로마틱(Chromatic)으로 배포하기 스토리북 관리자가 만든 무료 배포 서비스인 Chromatic을 사용하여 안전하게 배포하고 호스팅 할 수 있습니다. 자기가 하고 싶은 레포를 선택하면됩니다. Library View Storybook을 누르시면, storybook - Storybook 볼 수 있습니다. npm run chromatic 으로 하면 배포됩니다. CHROMATIC_PROJECT_TOKEN 은 .env 파일에 넣어줬습니다. 참고 스토리북 공식문서 배포 강기봉의 현란한 날갯짓 블로그 크로마틱 배포 정적 앱으…

Storybook의 핵심 개념 컴포넌트 단위 개발 Storybook은 UI 컴포넌트 하나하나를 “Story”라는 단위로 분리해서 개발합니다. 각 Story는 컴포넌트의 다양한 상태(예: 버튼의 크기, 색상, 비활성화 등)를 독립적으로 보여줍니다. 실시간 미리보기 & 테스트 Storybook UI에서 각 Story를 클릭하면, 해당 상태의 컴포넌트를 실시간으로 미리보고, 조작(Props 변경)하며 테스트할 수 있습니다. 문서화 각 Story는 자동으로 문서화되어, 디자인 시스템, 개발자 문서, QA 가이드 등으로 활용할 수 있습니다. Storybook의 주요 기능에는 뭐가 있을까? Stories 컴포넌트의 다양한 상태/조합을 코드로 정의합니다. 예시 Controls (Args/ArgTypes) Storybook UI에서 props(Args)를 실시간으로 조작할 수 있습니다. argTypes로 props의 타입, 설명, 컨트롤 타입(슬라이더, 드롭다운 등)을 지정할 수 있습니다. Do…

Next.js 공식 문서입니다. HOBBi 프로젝트를 진행하면서 Next.js에 대해서 깊게 학습하고 사용해보기로 했었습니다. 사실 Next.js 13버전은 사용해봤지만, 15버전은 얼마나 다를까 하다가 공부한 내용을 정리해 봅니다. Next.js 15 기존에 app router 기법은 비슷한거 같았고, 기존에 app 폴더안에 이런식으로 폴더를 만들면 endpoint/abc 이런식으로 라우팅이 작동합니다.(주의할 점으로는 폴더안에 파일을 만들어야한다는 점) 그리고 공용 UI가 있을 경우 을 사용하면 좋을꺼 같다고 생각했습니다. next.js는 layout 안에 page가 작동하는 방식. 상위폴더의 layout.js 안에 하위폴더의 layout.js를 담아서 보여줍니다. layout 사용하면 좋은점 페이지 이동 시 state 보존합니다. 인터랙티브한 요소들은 유지되며 리렌더링이 되지않음 Dynamic Routes Dynamic Routes http://localhost:300…

Splash Screen 이란? 애플리케이션이 시작될 때 기본 인터페이스나 콘텐츠가 로드되기 전까지 일시적으로 표시되는 초기 화면을 말합니다. 구현 방법 “어떻게 구현하면 좋을까?” 생각을 하다가 react portal 에 대해서 학습한적이 있기에 스플래시화면도 사용 해보면 좋을거 같아서 일단 portal을 사용하였다. react protal 이란? React Portal은 부모 컴포넌트의 DOM 계층 구조 외부에 자식 컴포넌트를 렌더링할 수 있게 해주는 기능입니다. 주로 모달 창 툴팁 스플래시 화면 플로팅 메뉴 사용됩니다. react protal을 사용하는 이유? react 특성상 부모 컴포넌트가 렌더링 되면 자식 컴포넌트가 렌더링 되는 Tree 구조를 가지고 있다. 이런 Tree 구조는 종종 불편함을 가지게 되는데 부모-자식 관계를 가지고 있어 DOM 계층 구조에 영향을 미치게 된다. 하지만 리액트 포탈을 사용하면 독립적인 위치에서 렌더링하기 때문에 편리하게 사용이 가능하다. …

백엔드에서 DTO 만들어서 프론트에서 api 연동시 Response 값이 다르게 와서 문제가 발생한 상황입니다 문제점 중복을 확인하는 검증에서 Dto 클래스 필드의 변수를 isDuplicate로 지정을 했었다. 그 후 프론트에서의 API 연동에서 isDuplicate가 아니라 duplicate로 표시가 되었다. 기대되는 값은 이지만 표시되는 값은 였다. 원인 분석 원인은 lombok의 getter와 json을 직렬화 & 역직렬화하는 jackson 라이브러리에 있었다. lombok 라이브러리의 공식 문서를 살펴보면, You can annotate any field with @Getter and/or @Setter, to let lombok generate the default getter/setter automatically. A default getter simply returns the field, and is named getFoo if the field is called f…

프로젝트 초기 SSE 방식은 백엔드에서 동기적으로 작동했기에 저희 프론트에서 자동 연결 시도 함수를 만든 상황입니다. (추 후에는 비동기로 하여 에 (백엔드에서 네임 지정)으로 바꾸었습니다.) 문제점 초기에는 알림창을 열었을 때만 SSE 연결이 이루어지는 구조였습니다. 좋아요, 댓글 등의 실시간 알림 기능이 제대로 동작하지 않는 문제 발생 초기 동작 사용자가 웹 애플리케이션에 로그인한 상태에서도 알림 컴포넌트를 열기 전에는 SSE 연결이 활성화되지 않았습니다. 새로운 알림(예: 좋아요, 댓글)이 발생해도 사용자가 알림 UI를 열 때까지는 실시간으로 알림을 받지 못했습니다. 알림 UI를 닫거나 페이지를 이동하면 SSE 연결이 종료되어, 다시 알림 UI를 열어야만 연결이 재개되는 비효율적인 방식이었습니다. 원인 분석 알림 기능은 좋아요, 댓글 등 다양한 이벤트 발생 시 실시간으로 사용자에게 푸시되는 것이 핵심입니다. SSE 연결이 알림 UI 로딩 시에만 의존적으로 동작하도록 설계되었…

HOBBi 프로젝트에서 Next.js 15 버전을 사용했는데 인증이 된 사람과 비회원 즉 인증이 안된사람들의 라우팅을 어떻게 처리할지 생각중 Next.js Middleware 공식문서를 보게되었고, 프로젝트에 활용해보면 좋겠다는 생각이 들어서 사용하게 되었습니다. 문제점 Next.js의 미들웨어를 사용하여 라우팅 시 사용자 인증 상태를 확인하고 접근 권한을 제어하려 했으나, 미들웨어 환경에서는 에 저장된 정보에 접근할 수 없었습니다. 미들웨어는 클라이언트 측 스크립트가 실행되기 전에 요청을 가로채 처리하므로, 브라우저 API인 를 사용할 수 없습니다. 원인 분석 미들웨어에는 실행 환경에 제약이 있습니다. 미들웨어는 서버에서 실행이 됩니다. 이 환경은 객체나 와 같은 클라이언트 측 웹 API에 접근할 수 없습니다. 따라서 에 저장된 사용자 인증 상태 정보는 미들웨어에서 확인할 수 없으며, 페이지 접근 권한 제어 로직을 미들웨어에서 수행하는 것이 불가능했습니다. 해결 방안 사용자 로…

회고 HOBBi 스위프 공모전이 끝나서 프로젝트에 대한 회고를 작성해보려고합니다. SWYP에 어떻게 참여하게 되었는지? 개발을 혼자 공부하면서 뭔가 회의감이 온 거 같아서 어느 순간 사이드 프로젝트를 진행해 보면 어떨까?라는 생각이 들어서 찾아보다가, IT 사이드 프로젝트를 전문적으로 진행하는 SWYP를 찾아서 신청하고, 참여하게 되었습니다. 팀원 구성은 어떻게 정해졌는지? 사실 SWYP에서 팀원을 구성하는 방법이 있었는데, 개인의 프로필 카드를 작성하여 어필하는 방식이었는데, 사실 걱정부터 됐었다. 왜냐하면 다른 사람들의 프로필 카드를 봤는데, 이미 경력자 이신 분들도 많았고, 현업에서 일하고 계신 분들도 많았기에 “누가 내 프로필 카드를 보고 연락을 줄까?”라는 생각이 들었지만, 최대한 개인 프로젝트, 협업 했던 프로젝트를 적어서 프로필 카드를 작성했고, 마침내 결전의 날인 팀원을 뽑는 시간이 왔었는데, 역시나 처음에는 연락이 없었었고, 내가 연락하기에는 “남한테 피해 주는 건…

Next.js 15 설치 next.js 에서 eslint + prttier + husky + lint-staged 우선 VSCode에서 prettier 확장 프로그램을 설치하는 것이 좋다. prttier 해당 프로젝트에서 파일을 만들고 규칙을 넣어주면된다. eslint next.js를 설치하면 eslint 사용하는 구분에 yes 하면 파일 만들어짐. eslint는 이제 8 → 9버전으로 업그레이드되면서 포맷팅 기능을 없앤다고 공식문서에 나와있음 하지만 여전히 9번저에서도 포맷팅 기능이 가능하지만, 언젠간 사라지니깐 분리를 해놓긴 해야 함. eslint-config-prettier : eslint와 prettier 충돌을 방지하기 위해서 설치✅ eslint-plugin-prettier : eslint에서 prettier 실행하는 명령어인데 이제 필요 없어짐❌ husky 초기화를 진행하면 해당 프로젝트 최상위 루트에  디렉토리가 생성되고 에  스크립트가 자동으로 추가된다. 참고로 …

회고 모바일 청첩장 사이트 친구의 부탁으로 모바일 청첩장을 만들어보게 되었는데, 내가 개발에서 추구하는 것은 친구가 되었던 사람들에게 실질적인 도움을 주는 개발이기 때문에 나와 맞아서 선뜻 만들어주겠다고 했다. 하지만 막상 수락하고 만들어주겠다고는 했지만, 한번도 만들어보지 않았기에 예시 자료들이 필요했다. 그래서 모바일 청첩장을 구글에 검색하여 제작해주는 사이트에 들어가서 샘플을 보게 되었다. 예시 사이트 참고했던 곳 그리고 예시 사이트를 참고하면서 개발을 진행하였고, 빠르게 개발하면 좋겠다고 생각했기에 기술 스택은 무난하고 자신 있는 React, TailwindCSS, TypeScript를 선택하였다. 개발 기간을 일주일 정도 생각했기에 개발을 하면서 모바일 청첩장에서 제일 중요하다고 생각하는 것은 UI라고 생각했다. 하지만 UI에 시간을 다 쏟기에는 일주일이라는 시간은 짧다고 생각해서 선택한 것은 shadcn UI였다. shadcn UI 선택한 이유 처음 사용해보는 shadc…

코드 중간 점검 JavaScript 코드를 제대로 이해하고 파악하면서 작성을 했는지 구체적으로 확인해 보려고 한다. main.js 은 시각적으로 보이는 판, 는 바둑돌이 놓일 위치를 표시하는 판이다. 는 화점의 위치들을 표시한 것인데 오목판(table)을 18x18로 만들기 때문에 화점의 위치를 고정적으로 표시해 놓은 변수이다. [행, 열]이라고 생각하면 된다. 함수는 게임을 초기화하는 함수이다. 먼저 (오목판) table과 (바둑돌) go을 초기화 시키기 위해 HTML을 초기화시켜준다. 게임 초기화 함수안에 함수들은 차근차근 설명하겠다. view.js 함수는 오목판(table)과 화점을 생성 및 보여주기 위한 함수이다. 먼저 HTML에 한번 초기화 시켜준다.(혹시 다른 요소가 있을 수 있으니 초기화 먼저) 그리고 행과 열을 표시해 주기 위해 이중 for 문을 사용한다. 첫 번째 for 문에서는 행이 만들어진다. 두 번째 for 문에서는 열이 만들어지고, 열에 을 사용해서 , …

타이머 기능 구현 체스, 바둑, 오목 같은 경우 돌을 착수할 시 타이머로 시간을 정해 놓는 경우가 있다. 나는 몇 초로 지정하면 좋을까 하다가 넷마블 오목은 35초 시간을 제한을 걸어 두었기에 35초로 지정해놨다. 1. HTML 먼저 타이머 view를 보여주기 위해 타이머 html을 만든다. 2. CSS 타이머 위치를 내가 두고 싶은 곳으로 둔 다음 꾸며준다. 바둑판 색깔도 변경해 보았다 3. JAVASCRIPT gameLogic.js eventHandlers.js main.js 다음에 해야 할 것 흑돌일 때 33 규칙 넣기 버그 찾아서 고치기 리팩토링하기 (흑돌, 백돌 각각의) 스탑워치 놓기 WebRCT 이용해서 실시간으로 채팅이나, 게임방 만들기 타이머 기능 구현 1. HTML 2. CSS 3. JAVASCRIPT gameLogic.js eventHandlers.js main.js 다음에 해야 할 것

리팩토링이란? “결과의 변경 없이 코드의 구조를 재조정함”이란 뜻 리팩토링 JavaScript 전체 코드가 너무 길어져서 가독성을 높이기 위해 파일을 나누고 리팩토링이란 걸 해보겠습니다. 파일을 나누려고 합니다. 메인이 되는 (main.js) 화면을 보여주는 (view.js) 게임의 로직이 있는 (gameLogic.js) 이벤트가 발생하는 (eventHandlers.js) 게임 룰 및 규칙 있는 (rules.js) 이렇게 다섯 가지로 나눠보려고 한다. 1. main.js 2. view.js 3. gameLogic.js 4. eventHandlers.js 5. rules.js 다음에 해야 할 것 흑돌일 때 33 규칙 넣기 버그 찾아서 고치기 리팩토링하기 (흑돌, 백돌 각각의) 스탑워치 놓기 WebRCT 이용해서 실시간으로 채팅이나, 게임방 만들기 리팩토링이란? 리팩토링 1. main.js 2. view.js 3. gameLogic.js 4. eventHandlers.js 5. rul…

1. 바둑판 화점 찍기 생각해보니 바둑판을 그릴 때 바둑판의 화점을 생각못해서 화점을 찍는 JavaScript, CSS 구현 2. 3-3, 4-4 규칙 구현 3-3 일 때 4-4 일 때 3. 전체코드 다음에 해야 할 것 흑돌일 때 33 규칙 넣기 버그 찾아서 고치기 리팩토링하기 (흑돌, 백돌 각각의) 스탑워치 놓기 WebRCT 이용해서 실시간으로 채팅이나, 게임방 만들기 출처 1. 바둑판 화점 찍기 2. 3-3, 4-4 규칙 구현 3-3 일 때 4-4 일 때 3. 전체코드 다음에 해야 할 것

Why? 순수 자바스크립트로 포트폴리오를 만들어 보고 싶어서 고민하다가 내가 진짜 만들어보고 싶었던 게 뭘까 고민하다가, 오목을 좋아하니깐 오목을 만들어보자 해서 만들어 보도록 하겠습니다. 사실 고스트 바둑왕을 좋아해서 바둑을 만들고 싶었지만, 바둑에 대한 규칙을 모르기 때문에 고스트 오목왕으로 let’s go~ 1. HTML, CSS 일단 기본 틀을 만듭니다. 2. JAVASCRIPT 위치가 중복될 경우 게임 승리시 다음에 해야 할 것 흑돌일 때 33 규칙 넣기 버그 찾아서 고치기 (흑돌, 백돌 각각의) 스탑워치 놓기 WebRCT 이용해서 실시간으로 채팅이나, 게임방 만들기 출처 Why? 1. HTML, CSS 2. JAVASCRIPT 위치가 중복될 경우 게임 승리시 다음에 해야 할 것

Why? The Odin Project를 하면서 grid 와 flex에 대해서 나왔는데 개발을 하면서 display에 대한 배치를 정확하게 생각해 본 적은 없었지만, 과제를 하면서 grid 와 flex를 상황에 맞게 언제 사용해야 할지 의문점이 들어서 글을 남겨보려 한다. The Odin Project CSS Grid vs FlexBox 일단 grid와 flex에 차이점에 대해서 알아볼 필요가 있다. 차이점 Flex Box 1차원 레이아웃용으로 설계된 Flexbox는 단일 축(가로 또는 세로)을 따라 항목을 정렬한다. 컨테이너 내의 공간을 분배하고 품목을 한 방향으로 정렬하는 데 이상적이다. CSS Grid 2차원 레이아웃을 위한 CSS 그리드를 사용하면 열과 행을 동시에 제어할 수 있다. 따라서 두 축을 따라 정렬해야 하는 보다 복잡한 레이아웃에 적합하다. 각각의 사용시기 Flex Box 항목을 한 방향(행 또는 열)으로 정렬할 때 더 간단한 구성 요소 수준 레이아웃. CSS G…

👋 Next.js Docs 한글화 작업 오픈 소스의 기여의 참여하게 된 점 이번 해 6월 정도였다. 내가 개발하고 있는 이상 작은 것이 됐든 아니든 오픈 소스 기여에 대한 꿈이 이었다. 개발 공부를 하면서 github을 자주 애용하고 있는 와중에 Explore repositories에 Next.js Docs 한글화 작업이 떠 있어서 들어가 보게 되었다. 마침 요새 next.js를 사용하여 개발을 진행하고 있었고, 공식 문서를 보고 공부를 한다고 하지만 언어 장벽에 좌절하고 있는 나 자신을 뒤돌아보게 되며 한글화 작업은 꼭 진행이 되어서 다른 개발자분들도 쉽게 공부할 수 있었으면 하는 바람으로 참여하게 되었다. Nextjs-kr Next.js Docs 한글화 작업 오픈 소스 기여하는 방법 먼저 하고 싶은 한글화 작업이 있으면 답글을 달아주면 이슈로 할당을 해줍니다. Nextjs.kr에서 정해준 규칙대로 번역한 과정입니다.(규칙에 For New Translators을 자세히 읽으시…

1. Material Theme & Material Icon Theme 두개의 익스텐션을 설치해줍니다. Material Theme 사용법 원하는 색상을 골라 선택해주면 vscode 테마 색상을 바꿀 수 있습니다. (code를 오래보고 있으면 눈아프니 어두운 색상으로 해주시면 👍) Material Icon Theme 사용법 폴더 아이콘 테마도 사진과 같이 바꿀 수 있습니다. 2. Prettier 코드를 정해진 규칙에 맞춰 이쁘게 포맷팅 해주는 익스텐션입니다. → prettier 검색 → Tab Width 2 , Single Quote 체크 → format on 검색 → format on save 체크해주시면 됩니다. 간혹 prettier가 적용이 안되거나 하는 경우에는 Default Formatter 확인해보면 null 이거나 설정이 잘못되어 있는 경우가 있기 때문에 prettier로 설정해줍니다. 3. ESLint 문법 에러나 버그를 찾아주는…

1. 기본 개발 환경 세팅 & 터미널 설정 1. homebrew 구버전 삭제 위의 커맨드 실행시 /usr/local/bin/brew 가 출력되었다면 이미 설치되어 있는 것입니다. 삭제하려면 를 실행해주세요. 2. homebrew 설치 실행 후 설치가 완료되면, 이라는 문구와 함께 각각 , 로 시작하는 커맨드가 두 개 안내될 것입니다. 모두 실행해주시면 됩니다. 후에 brew install로 node, yarn, zsh 을 깔아줍니다. 3. iterm2 설치 iterm2 설치로 들어가서 다운로드를 해줍니다. iTerm2 을 실행 시켜 을 눌러 원하는데로 설정을 해주시면됩니다. 4. ohmyzsh 설치 ohmyzsh 설치 5. 폰트 저의 폰트는 fira-code를 사용합니다. font의 다운 받은 Fira Code 를 설정해줍니다. 6. 테마 iterm 테마 색상에 들어가셔서 원하는 테마 색상을 저장을 해줍니다. 으로 설정에 들어가셔서 다운받은걸 import 해주시면 됩니…

회고 마음 한편으론 아쉽지만 또 한편으론 후련한 메인 프로젝트 회고 시작합니다. 팀원 구성은 어떻게 한 것일까? 일단 먼저 다빈님을 중심으로 프론트엔드는 현석님(저), 다솜님, 다빈님으로 실전 프로젝트가 구성이 되었고, 백엔드 분들 섭외하는 게 어려울 거 같았지만, 생각보다 빠르게 세 명이 구해져 프론트 3명, 백엔드 3명 총 인원 6명으로 팀원이 구성이 되었습니다. 저희 팀원은 숙박 플랫폼을 하기를 원했고, 산업군은 유통/물류로 선택하여 만들어졌습니다. 굳이 많은 숙박 플랫폼도 있지만 왜 숙박 플랫폼을 원했는가? “호텔 하면, 대부분의 사람들은 여행/호캉스란 단어를 떠올리시곤 합니다. 하지만, 실제로 호텔에 투숙하는 목적은 다양하게 있습니다. 출장 또는 워케이션/워캉스의 목적으로 호텔에 투숙하시며 회의실이나 미팅룸이 있는지, 객실에 콘센트가 있는지, 책상이 있는지 등을 물어보는 투숙객들은 주로 비즈니스 호텔을 찾으시는 경우가 많다고 합니다. 또한, 이사를 가기 전 임시로 거주를 …