검색 페이지 검색 페이지 같은 경우 비인가이기도 해서 한 분이 파이썬으로 작업을 진행했지만, 지금은 나가셔서 JAVA로 변경중입니다. Search Content 검색 페이지에서 검색 결과를 표시하고 관리하는 컴포넌트 주요 기능 URL 검색 파라미터 기반 검색 결과 조회 무한 스크롤을 통한 검색 결과 페이지네이션 검색 조건 태그 표시 및 개별 삭제 검색 결과 로딩 상태 및 에러 처리 검색 결과 없음 상태 처리 검색 조건 : 제목 + 본문 검색 키워드 : 작성자 검색 키워드 : MBTI 필터 (다중 선택 가능) : 취미 태그 필터 (다중 선택 가능) 데이터 흐름 URL 검색 파라미터 파싱 검색 조건에 따른 API 호출 무한 스크롤로 추가 결과 로드 검색 조건 변경 시 자동 재검색 검색 조건 변경 시 URL 업데이트에 사용 현재 검색 조건을 URL에서 가져와서 사용 무한 스크롤을 위한 DOM 요소 검색 조건 태그를 클릭했을 때 해당 조건을 제거하고 URL을 업데이트 처리 …

마이페이지(소셜 연동, 챌린지 부분) 소셜 연동은 로그인, 소셜 로그인(kakao, google) 에 기록을 해두었고, 챌린지 부분 같은 경우에는 취미 자랑, 루티너, 취미 부자 되기로 일단 3가지로 딱 정해져있어서, Zustand로 상태를 관리를 하였습니다. PC 모바일 사용자의 개인 정보, 취미, 등급, 게시글을 관리하는 페이지 주요 기능 사용자 프로필 정보 표시 사용자 취미 태그 관리 사용자 등급 및 챌린지 현황 표시 사용자 게시글 목록 표시 SNS 계정 연동 관리 프로필 수정 페이지 이동 프로필 수정 페이지로 이동할 때 사용. SNS 연동 드롭다운 메뉴 표시 상태 SNS 연동 상태 구조 kakao google SNS 연동 드롭다운 메뉴의 DOM 요소를 참조 React Query를 사용하여 마이페이지에 필요한 모든 데이터를 병렬로 가져옵니다. 데이터 userProfileData : 사용자 프로필 정보 userPostData : 사용자 게시글 목록 userRa…

게시글 수정 게시글 수정에서는 dnd-kit을 사용했지만 아직 수정에 대해는 반영 되지 못하였습니다.(백엔드분과 소통 후 반영하도록 하겠습니다.) PC 모바일 게시글 작성 에서 Post Form은 같다(작성/수정 같이 되는 폼) 주요 기능 게시글 상세 정보 조회 및 로딩 게시글 수정 폼 표시(기존 데이터로 초기화) 게시글 수정 기능(서버 업데이트 요청) 성공/실패 시 적절한 피드백 제공 수정 완료 후 상세 페이지로 자동 이동 데이터 흐름 URL 파라미터에서 게시글 ID 추출 게시글 상세 정보 API 호출 조회된 데이터로 PostForm 컴포넌트 초기화 폼 제출 시 수정 API 호출 성공 시 상세페이지로 이동, 실패 시 에러 모달 URL 파라미터에서 게시글 ID 추출 페이지 이동 및 뒤로가기에 사용 성공/실패 메시지 표시에 사용 게시글 상세 정보 상태 API에서 조회한 게시글 데이터를 저장 일 경우 게시글을 찾을 수 없음을 의미 로딩 상태 게시글 상세 정보 조회 처…

게시글 작성 게시글 작성 부분도 dnd-kit, 이미지, 취미태그, 제목, 내용 별로 취미 피드를 작성 하는 곳인데, 취미태그에 대한 데이터 가공 하는 법과 dnd-kit 부분이 어렵게 느껴져서 기록해보았습니다. PC 모바일 사용자가 새로운 게시글을 작성할 수 있는 페이지 주요 기능 게시글 제목 입력 취미 태그 선택(최대 5개) 이미지 업로드(최대 5장) 게시글 내용 작성 게시글 작성 데이터 검증 게시글 작성 서버로 데이터 전송 성공/실패 시 적절한 피드백 제공 흐름 페이지 진입 시 취미 태그 선택 상태 초기화 PostForm 컴포넌트에서 사용자 입력 수집 폼 제출 시 FormData로 서버로 전송 성공 시 작성된 게시글 상세 페이지로 이동 실패 시 에러 메시지 모달 표시 게시글 작성 완료 후 상세 페이지 이동에 사용 성공/실패 메시지 표시에 사용 페이지 진입 시 및 작성 완료 후 취미 태그 선택 상태 초기화 페이지 진입 시 취미 태그 선택 상태 초기화 목적 이전에 …

게시글 상세 페이지 게시글 상세 페이지에 기능에 대해서 기록해보았는데, 어려웠던 점은 댓글,대댓글에 대한 데이터를 가공하는 방법이 어려웠습니다. 밑에는 api에 구조를 보고 데이터를 가공했었습니다. 저희 댓글은 댓글과 대댓글로 2뎁스로 이루어지고 대댓글에 대댓글은 되지 않는 구조입니다. 즉 댓글-대댓글 이렇게 구조화됩니다. 로 대댓글이 있는지 알 수 있습니다. 예를 들어 인 경우이면 댓글만 달려있는 상태입니다. 인 경우이면 에 맞게 댓글-대댓글이 된 구조입니다. PC 모바일 사용자가 개별 게시글의 상세 내용을 확인할 수 있는 페이지 주요 기능 게시글 상세 정보 조회 (로그인/비로그인 사용자 구분) 게시글 수정 및 삭제 기능(작성자만) 댓글 조회 및 작성 기능 공유 기능 좋아요/좋아요 취소 기능 댓글 섹션으로 자동 스크롤 데이터 흐름 URL 파라미터에서 게시글 ID 추출 로그인 상태 확인 및 적절한 API 호출 게시글 상세 정보 로드 및 상태 업데이트 사…

게시글 목록 페이지(메인 페이지) 메인 컨텐츠인 게시글 목록 페이지 기능에 대해 기록해보았습니다. PC 모바일 주요 기능 무한 스크롤을 통한 게시글 목록 조회 로그인한 경우 : 사용자의 취미 태그에 따른 게시글 필터링 비회원인 경우 : 모든 게시글을 cursor 기반 조회 (인가가 필요없는 비회원인 경우 파이썬으로 진행되었는데 백엔드분이 그만둠으로써 자바로 변경되어 다시 수정될 예정) 를 활용한 스크롤 감지 좋아요/좋아요 취소 기능 스크롤 위치에 따른 맨 위로 이동 버튼 로딩 상태 및 에러 처리 데이터 흐름 사용자 인증 상태 및 피드 타입 확인 를 통한 무한스크롤 데이터 조회 로 스크롤 위치 감지 스크롤 하단 도달 시 다음페이지 데이터 요청 좋아요 액션 시 낙관전 업데이트로 UI 즉시 반영 캐시 관리 및 쿼리 데이터 업데이트 인증 스토어에서 사용자 정보 가져오기 피드 스토어에서 현재 피드 타입 가져오기 all : 전체피드 hobby : 취미 기반 피드 관찰 대상 요소 스…

회원가입 이메일 인증에 대해서 관한 커스텀 훅을 기록한 내용입니다. 처음 초기에는 이메일 인증 메일 확인 시 받은 메일함에서 이메일 인증 완료를 누르면 로컬 스토리지에 인증 상태를 넣어 자동으로 이메일 인증 완료가 되게끔 했었는데 문제는 모바일에서는 사용할 수 없는 단점과 로컬 스토리지에 인증 상태가 저장되어있으니깐 회원가입을 이메일 인증을 완료한 상태에서 다른 탭에서 회원가입을 처음부터 시작하면 이메일 인증이 완료되는 오류로 코드번호를 받아서 이메일 인증하는 것으로 바꿔보았습니다. use_email_verification (이메일 확인 시 로컬 스토리지 인증 상태) 리팩토링 전 use_email_verification 이메일 인증 훅 주요 기능 이메일 중복 확인 (회원가입 시) 인증 메일 발송 인증 타이머 관리(3분 카운트다운) 인증 상태 관리 및 동기화 로컬 스토리지를 통한 인증 상태 유지 다중 창 간 인증 상태 동기화 시나리오 회원가입 : 이메일 중복 확인 후 인증 메일 발송…

회원가입에 대한 1단계, 2단계 스텝별로 회원가입을 적용시킬 수 있어서 좋은 경험이었고, 사용자 관점에 대해서 많이 생각할 수 있어서(이메일 자동 인증 -> 이메일 코드 인증) 기록해 봅니다. (이메일 인증 커스텀 훅은 다음장에 기록해보겠습니다.) 회원가입 주요 기능 회원가입 단계별 폼 관리(총 2가지 1. 기본 정보 → 2. 상세 정보) 회원가입 데이터 상태 관리 및 유효성 검사 일반 회원가입과 소셜 회원가입 구분 처리 회원가입 완료 후 인증 상태 설정 성공/실패 피드백 및 페이지 이동 프로세스 기본 정보 입력 (이름, 이메일, 이메일 인증, 비밀번호, 비밀번호 확인) 상세 정보 입력 (닉네임, 생년 월일, 성별, MBTI, 취미) API 호풀을 통한 회원가입 완료 인증 상태 설정 및 메인 페이지 이동 Auth Store에서 인증 상태 설정 함수 가져오기 회원가입 완료 후 사용자 인증 상태를 설정하는데 사용 취미 선택 초기화 함수 회원가입 완료 후 취미 선택 상태를…

소셜 로그인 연동에 대해서 많은 공부가 되었고, 처음에는 연동하는 과정이 될까? 싶으면서도 막상 시나리오를 보고 개발해보니 이해하는게 어려웠지만, 좋은 경험을 기록해 봅니다. 로그인, 소셜 로그인(kakao, google) 프로젝트에서 로그인 & 소셜 로그인에 대한 로직 구현 설명 및 정리한 내용들 입니다. (+소셜 로그인 연동에 대한 시나리오 흐름과 로직이 헷갈리고 어려웠음🥹) 기존 로그인에 대한 스크린샷 zod를 이용하여 유효성 검사를 합니다. email: 이메일 형식 검증 password: 최소 8자 이상 검증 Record Utility Type Record: 키-값 쌍의 객체 타입을 생성 K: 키의 타입 (‘email’ | ‘password’) V: 값의 타입 (string) 결과: { email: string; password: string } Partial Utility Type Partial: 모든 속성을 선택적(optional)으로 만듦 ? 연산자를 모든…

react createPortal 을 적용해 보고, 공부해 본 것 기록해 봅니다. 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명으로 팀원이 구성이 되었습니다. 저희 팀원은 숙박 플랫폼을 하기를 원했고, 산업군은 유통/물류로 선택하여 만들어졌습니다. 굳이 많은 숙박 플랫폼도 있지만 왜 숙박 플랫폼을 원했는가? “호텔 하면, 대부분의 사람들은 여행/호캉스란 단어를 떠올리시곤 합니다. 하지만, 실제로 호텔에 투숙하는 목적은 다양하게 있습니다. 출장 또는 워케이션/워캉스의 목적으로 호텔에 투숙하시며 회의실이나 미팅룸이 있는지, 객실에 콘센트가 있는지, 책상이 있는지 등을 물어보는 투숙객들은 주로 비즈니스 호텔을 찾으시는 경우가 많다고 합니다. 또한, 이사를 가기 전 임시로 거주를 …