회고 모바일 청첩장 사이트 친구의 부탁으로 모바일 청첩장을 만들어보게 되었는데, 내가 개발에서 추구하는 것은 친구가 되었던 사람들에게 실질적인 도움을 주는 개발이기 때문에 나와 맞아서 선뜻 만들어주겠다고 했다. 하지만 막상 수락하고 만들어주겠다고는 했지만, 한번도 만들어보지 않았기에 예시 자료들이 필요했다. 그래서 모바일 청첩장을 구글에 검색하여 제작해주는 사이트에 들어가서 샘플을 보게 되었다. 예시 사이트 참고했던 곳 그리고 예시 사이트를 참고하면서 개발을 진행하였고, 빠르게 개발하면 좋겠다고 생각했기에 기술 스택은 무난하고 자신 있는 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명으로 팀원이 구성이 되었습니다. 저희 팀원은 숙박 플랫폼을 하기를 원했고, 산업군은 유통/물류로 선택하여 만들어졌습니다. 굳이 많은 숙박 플랫폼도 있지만 왜 숙박 플랫폼을 원했는가? “호텔 하면, 대부분의 사람들은 여행/호캉스란 단어를 떠올리시곤 합니다. 하지만, 실제로 호텔에 투숙하는 목적은 다양하게 있습니다. 출장 또는 워케이션/워캉스의 목적으로 호텔에 투숙하시며 회의실이나 미팅룸이 있는지, 객실에 콘센트가 있는지, 책상이 있는지 등을 물어보는 투숙객들은 주로 비즈니스 호텔을 찾으시는 경우가 많다고 합니다. 또한, 이사를 가기 전 임시로 거주를 …