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

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

회고 모바일 청첩장 사이트 친구의 부탁으로 모바일 청첩장을 만들어보게 되었는데, 내가 개발에서 추구하는 것은 친구가 되었던 사람들에게 실질적인 도움을 주는 개발이기 때문에 나와 맞아서 선뜻 만들어주겠다고 했다. 하지만 막상 수락하고 만들어주겠다고는 했지만, 한번도 만들어보지 않았기에 예시 자료들이 필요했다. 그래서 모바일 청첩장을 구글에 검색하여 제작해주는 사이트에 들어가서 샘플을 보게 되었다. 예시 사이트 참고했던 곳 그리고 예시 사이트를 참고하면서 개발을 진행하였고, 빠르게 개발하면 좋겠다고 생각했기에 기술 스택은 무난하고 자신 있는 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 위치가 중복될 경우 게임 승리시 다음에 해야 할 것

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