/frontend

나의 Frontend 소개서😵

Primary LanguageJavaScript

image

아직 해보지 못했던 활동 ‘X’에 대한 목표를 세우고 달성하게 도와주는 나의 ❌ 소개서

💡 가치 제안 💡

image

🤔 문제

고객은 그동안 못 해봤던 활동들을 그동안 도전하지 못한 똑같은 이유로 도전하기 어려울 것이다.

✨ 타겟

하고 싶었지만 해보지 못한 활동들을 부담 없이 달성해보고 공유를 통해 성취감을 느끼고 싶은 사람
👉 20대 / SNS를 즐겨 사용함 / 도전을 즐기지만 시간이 많이 없는 or 도전을 망설여하는 사람 / 자신의 도전에 대한 성과를 다른 사람들에게 공유하고 싶은 사람

💗 나의 X 소개서의 핵심 기능

1️⃣ 이름 입력 / X 선택

이름과 비밀번호로 나의 X소개서의 정보를 설정하고, 원하는 카테고리를 선택합니다.
운동, 액티비티, 취미, 성장/자기계발, 문화/예술, 페스티벌, 여행 총 7가지로 나뉘어집니다

image

2️⃣ X 소개서 작성

그 X를 하고 싶은 이유, 지금까지 못했던 이유, X와 만날 날짜 3가지의 질문을 받아 X 소개서를 작성합니다.

image

3️⃣ X 소개서 저장

완성된 X 소개서를 이미지로 저장하게 합니다.
저장 크기는 인스타그램 스토리 사이즈로 제작합니다.

image

4️⃣ X -> O 변화 확인

👉 설정 기간 내 O/X를 선택하고, 기간 후에는 X 만 선택 가능합니다.
나의 X 소개서의 고유 url로 접속해 비밀번호로 입력하여 결과 확인이 가능합니다.

image

👇 아래는 결과 화면 2가지 입니다.

image

image

🧑🏻‍💻 웹소개서


Happhee
Wooyoung
Dangpy
talkingOrange
🌈 서히 🌈
Web FE - 나의 X결과, O결과 		💗 우영 💗
Web FE - O/X 선택, X결과 		👼 명지 👼
Web FE - 시작, 카테고리 		🌕 예원 🌕
Web FE - 이름/비밀번호 , X 정보 입력

⚒️ 기술 스택

    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.1.3",
    "eslint-plugin-simple-import-sort": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-route": "^1.0.3",
    "react-router-dom": "^6.4.3",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.6",
    "typescript": "^4.4.2",
    "react-capture": "^0.3.5",

라이브러리

import { useCapture } from 'react-capture' // 스크린 캡쳐 라이브러리

✅ 커밋 컨벤션

제목 내용
init 작업 세팅 커밋 (패키지 설치 등)
feat 새로운 기능을 추가할 경우
style 기능에 영향을 주지 않는 커밋, 코드 순서, css등의 포맷에 관한 커밋
fix 버그를 고친 경우
refactor 프로덕션 코드 리팩토링
docs 문서를 수정한 경우, 파일 삭제, 파일명 수정 등 ex) README.md
chore 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정
code review 코드 리뷰 반영

📁 폴더 구조

|-- 📁 node_modules
|-- 📁 public
└── 📁 src
	|-- 📁 asset
	|-- 📁 components 
	└── 📁 pages
		├── Main.ts 
		├── Login.ts 
		├── Category.ts 
		├── XInfom.ts 
		├── XIntroduction.ts 
		├── SelectResult.ts 
		├── XCorrect.ts 
		└── XIncorrect.ts 
	|-- 📁 styles
	└── 📁 utils
|-- .eslintrc.json
|-- .gitignore
|-- .prettierrc
|-- README.md
|-- package.json
|-- tsconfig.json 
└── yarn.lock

🖥 코드 컨벤션

  • 상수는 영문 대문자 스네이크 표기법 (예를 들면 키값)

    • API_KEY

  • 컴포넌트는 대문자 카멜 케이스를 사용한다. (함수형 컴포넌트)

    • MainHeader

  • 변수는 var 사용 금지, 그냥 const ! 안되면 let

  • rsc 나머지 함수는 화살표 함수를 이용하자

  • 암시적 반환을 최대한 활용한다 (early return)

  • axios, async await을 이용할 때 try & catch를 이용한다

  • 구조분해할당을 적극 이용하자

  • 변수 등을 조합해서 문자열을 생성할 때는 무조건 리터럴을 이용한다

    • X) var1 + “ “ + var2
    • O) ${var1} ${var2}

  • switch-case 사용시 break를 강제하자. case문 사이들끼리는 가독성을 위해 띄어주자

  • 조건문은 무조건 삼중 등호 연산자만 쓰도록 하자!! ? :

  • for는 지양하고 forEach, map을 사용

  • 주석은 쓰려고 하는 대상 바로 위에 쓰자 단, 한 줄이면 끝에 쓰는 것도 허용. 즉, 아래에 쓰는 것은 금지한다.

  • img태그의 alt 꼭꼭 넣어주시고, 한글로 적어주세요! alt=”foforever웨비들짱”

  • button 태그에는 type을 명시 합시다! asdf

  • TS

    • 버튼, 헤더와 같이 common component에서는 children 적극 활용
    // 여기에 주석!
interface SearchBarProps{
}

const SearchBar = (props : SearchBarProps) => {
  const { a, b, c } = props;
  ...
    • interface와 export default function 컴포넌트 선언 사이 한줄 띄어쓰기.
    • 컴포넌트에서 props로 전달받은 interface를 선언해줄때, 컴포넌트명+Props로 선언하기

  • props → hooks → 핸들러

  • styled-componets 는 tsx 맨 아래에 선언해주자.

  • 컴포넌트 최상단에 감싸는 것은 St{컴포넌트명}Wrapper. Root Container

  • 컴포넌트 선언 과 처음 스타일드 컴포넌트 선언 사이 한줄 띄어쓰기.

  • 스타일드 컴포넌트는 속성별로 개행을 해주므로 한줄 띄어쓰기 하지 않음.

2️⃣ 네이밍

  • 컴포넌트,변수명 : 동사 , 명사 중요한게 앞으로 → UserImg, DeleteBtn, useInfo
  • 함수명 : 동사 + ~

💡 브랜치 운영

  • main: 우리가 개발 최종시에 Merge를 하는 곳 ❗️

  • feature: 기능을 개발하면서 각자가 사용할 브랜치

    Main, Search, Search-detail, MyPage

    $ git checkout -b feature-{기능이름}

    ex ) feature-review -> review/2

    ex) feature-Main → main/2

    feature브랜치에서 header/#{이슈번호} 브랜치 생성

    ⇒ 추가 ) main_product O mainProduct X 스네이크 케이스로 명명하기

❤️‍🔥 에러 해결 과정

🌈 서히 🌈
💗 우영 💗
  1. 서버 연결 과정 중 GET과 POST 명세서에 내용이 정확치 않아서 연결하는데 오랜 시간이 걸렸다.
  2. GET으로 통신해야하는 부분을 POST로 적어 놔서 계속 작은 에러를 잡지 못했던 것같다.
  3. 하지만 서버와의 침착한 소통으로 에러 부분을 파악했고 문제를 원만히 해결할 수 있었다.
  1. svg는 ts에서 ReactComponent로 export 해주어야하고 png는 export default로 export 적용해야한다.
  2. 이슈를 어떻게 나눌 것인가에 대해서는 이슈를 나누면 각 작업을 시작하기 전 기능을 구체화할 수 있다는 장점이 있지만 이슈로 기록을 남긴다고 하면 커밋,pr으로도 기록을 남길 수 있기에
  3. 단순히 기록을 위한 이슈 발급이 아니라 의미있는 이슈를 발급하기 위해 어떤 기준(기간, 기능 등)으로 이슈를 나눌 것인가에 대해 사전에 개인, 팀별로 합의를 해야한다.
👼 명지 👼 🌕 예원 🌕
  1. 카테고리 별 선택 및 CSS 변경 에러 해결
  2. useState()를 사용해서 선택된 카테고리 이름 저장하고, isactive => props를 통해 선택된 카테고리 이름과 카테고리 이름이 같으면 스타일 변경하도록 했다.
  3. 스타일에 props를 받아 클릭했을때 지정한 스타일로 바로 변하도록 했다.
  1. log로 결과값을 띄우고 나서 어떻게 윈도우 창에 띄워야할지 고민 -> usestate이용 -> const 외부에 작성하며 오류가 발생하였다 -> 선언 후 return 이전으로 이동
  2. 비슷한 코드가 반복되는 문제 -> 다른 요소만 배열로 정리하고 map으로 묶어 반복함. 함수 내부 작성 시에도 가장 상위 루트로 하나를 감싸는 작업이 필요함.
  3. 버튼 클릭시 타 링크 이동 문제 -> useNavigate import 및 onclick이벤트로 연결