README.md

사이트 링크

kernel square

소개

랜딩 페이지

회원 가입, 로그인

회원 가입

가이드라인을 통해 어떤 규칙을 만족하는지 확인하면서, 회원가입을 할 수 있습니다

로그인

일반 로그인과 깃허브 로그인이 가능합니다

검색

랜딩 페이지와 사이트 내에서 개발자 Q&A에 대한 검색을 할 수 있습니다

알림

SSE	Web Push

SSE(Server Sent Event) 알림

자신의 질문에 답변이 달렸을 때, 자신의 답변이 랭킹에 들었을 때 SSE 알림을 확인할 수 있습니다

Web Push 알림

자신의 질문에 답변이 달렸을 때 모바일, PC에서 푸시 알림을 확인 할 수 있습니다

• 해당 기능을 지원하는 브라우저(디바이스) 및 알림 권한을 승인한 유저에 한함

프로필

회원 정보를 볼 수 있는 프로필 페이지입니다.
본인이라면 프로필 사진, 닉네임, 자기소개를 변경할 수 있습니다.

Q&A

질문

제목, 기술 스택, 내용을 입력하여 질문을 생성할 수 있습니다.
질문을 등록하면 AI가 답변을 해줍니다.

code syntax highlight 및 생성, 수정시 코드블록에서 지정한 언어를 보여주고, 코드의 클립보드 복사가 가능합니다

답변(댓글)

마크다운 형식으로 답변을 작성할 수 있습니다. 질문과 동일하게 코드의 클립보드 복사가 가능합니다

답변에 대해 투표(추천, 비추천)를 할 수 있습니다

커피챗

생성

멘토는 제목, 커피챗 요약, 태그, 소개글, 일시를 작성하여 커피챗을 생성할 수 있습니다

참가

커피챗 상세페이지에서 달력을 통해 가능한 일시를 확인하여 신청할 수 있습니다

채팅

시작 시간부터 30분 동안 채팅이 가능하며, 클립보드 복사 및 코드 보내기 기능을 제공합니다

모각코

생성

제목, 장소, 시간, 태그, 모집글을 작성하여 모각코를 생성할 수 있으며,
장소 검색 시 자동완성을 제공합니다

답변(댓글)

답변을 통해 서로 소통할 수 있으며, 답변에 대한 필터 및 더보기 접기 기능을 제공합니다

반응형 UI

하나의 웹 사이트로 다양한 디바이스(스마트폰, 테블릿 등)에 대응하는 레이아웃을 제공하여 유저경험(UX)을 향상시키고자 함

---

주요 기술 스택

협업

• notion

  • API 문서 등을 노션을 통해 백엔드와 공유

• whimsical

  • 백엔드와 협의된 초기 기획(기능)에 따른 대략적인 와이어프레임을 백엔드와 같이 협업

• 피그마(figma)

  • 와이어 프레임에서 좀 더 구체적인 디자인으로 작업

• 깃헙 프로젝트

  • 깃헙 프로젝트 칸반보드를 통해 작업 상황 공유

프론트엔드 팀원

Ryan-TheLion	JeongwooHam

성능 최적화 등을 위해 시도한 점

• 랜딩 페이지 비디오 용량 및 형식을 수정하여, 영상 렌더링 시간 최적화
• tailwindcss 를 최대한 활용해 빌드 타임에 만들어진 css 파일을 사용하는 것으로 css 적용 시간을 줄이려고 함
  • css-in-js 를 적용해야 되는 상황이 있을 수도 있기 때문에, emotion을 설치하기는 하였으나 인라인 style로 처리해도 괜찮은 경우라면 인라인 스타일을 적용
• 최대한 반응형 사이트로 만들려고 하였으며, 화면크기로 분기되는 것이 애매하다고 생각되는 일부 컴포넌트에 css @container 쿼리 적용
• 모각코 답변 입력시 마다 리렌더링되어 작성 시간이 입력할 때마다 갱신됨 => useMemo, memo를 활용하여 수정 등으로 인한 revalidate 외에 답변이 리렌더링 되지 않도록 함
• 모각코 장소 선택에서 검색어 입력시 debounce를 적용하여 API 호출 횟수 최적화 및 렌더링 개선
• form
  • react hook form 의 formProvider를 통해 Props drilling 개선
  • react hook form 의 fieldArray를 통해 동적인 배열 폼 데이터 관리
  • useController를 활용하여 watch없이 필드 값을 참조하고, 폼 필드 데이터를 변경할 수 있도록 함

트러블 슈팅

• toast ui editor 트러블 슈팅 깃헙 Wiki (문제를 발견하고 해결한 과정의 기록)