Pre-programming    바로가기

: What to do before you studying programming!

---

목차

1. 프로젝트 계획 이유

2. 목표

3. 작동 모습

4. 기술 스택

5. 세부 사항

6. 개발 계획

7. 배포

9. 버전

---

프로젝트 계획 이유

개발자 관련 유튜브를 보던 중 아래와 같은 흥미로운 설문조사를 발견했습니다.     (출처 : https://www.youtube.com/@nomadcoders )

위 설문조사를 통해 많은사람이 특정 프로그래밍 언어보단 그 언어를 학습하는 데

필요한 영어를 더 중요시한다는 사실을 알았습니다. 이를 돕고자 특정 기술을 배울 때,

먼저 알아야 할 영어 단어 학습을 돕는 웹을 개발하게 되었습니다.

---

목표

특정 기술을 배우는 데에 있어 효과적으로 영어단어를 학습하도록 돕는 서비스를 만들자!

1. 많은 사람이 배우고자 하는 기술을 우선적으로 제공할 것.
2. 효과적인 학습을 위해, 학습하려는 기술 문서에 자주 등장하는 영어 단어를 제공할 것.

1. 많은 사람이 배우고자 하는 기술을 우선적으로 제공할 것.

위의 목적을 달성하기 위해 npm install 수와 기술 문서의 완성도를 기준으로 10가지 기술을 채택했습니다. (https://www.npmjs.com/)

표 보기

기술	주간 다운로드 수	제공 유무
react	17,000k	O
next	3,400k	O
react-redux	6,400k	O
react-query	1,400k	O
react-router	8,800k	O
styled-components	4,700k	O
axios	35,000k	O
recoil	330k	O
tailwindcss	4,080k	O
react-hook-form	2,600k	O

2. 효과적인 학습을 위해, 학습하려는 기술 문서에 자주 등장하는 영어단어를 제공할 것.

영어단어를 추출하기 위해 진행한 프로세스는 다음과 같습니다.

1. 기술 문서 세부 url 추출

   자세히 보기

   

2. 세부 url에서 text 추출

   자세히 보기

   

3. text 전처리 ( 영어 사전에 존재 여부 , NLTK 사용)

   자세히 보기

   

4. 정렬 (빈도수 기준)

5. db에 저장

🍀 전체 프로세스는 아래의 디렉토리에서 확인하실 수 있습니다.

├── crawler
│   └── parser
│      ├── url-extractor
│      ├── html-extractor
│      ├── text-extractor
│      ├── word-extractor
│      ├── hash-extractor
│      ├── dictionary-validator
│      ├── level-seperator
│      └── en-ko-connector

---

작동 모습

Version 1 🥚

1. 로그인

   (✈️ 보기)

   

2. 학습할 기술 선택 및 내 단어장에 저장

   (✈️ 보기)

   

3. 레벨별 단어 학습 및 퀴즈

   (✈️ 보기)

   

4. 저장한 단어장 확인

   (✈️ 보기)

   

5. 내 단어장 학습

   (✈️ 보기)

   

6. 내 단어장을 모아 나만의 퀴즈 실행

   (✈️ 보기)

   

7. 유저 정보 변경

   (✈️ 보기)

   

Version 2 🐣

1. 둘러보기

   (✈️ 보기)

   

2. 검색어 자동 완성

   (✈️ 보기)

   

---

기술 스택

---

세부 사항

🎨 디자인 및 애니메이션 : framer-motion, styled-componenets, 디자인 (codepen 차용)

📦 상태 관리 :

• redux로 전역 상태를 관리
• redux-saga로 비동기적으로 api 요청
  • 데이터 없으면 api 콜, 있으면 그대로 사용
• dark mode 값은 _app.js 에서 관리 ( _app.js는 next.js 앱이 빌드될 때 모든 컴포넌트를 감싸고 있음)

👮🏻‍♀️ Form 검증 : react-hook-form과 정규식 사용

👷🏻‍♂️ URL 구조 :

• next.js 프레임워크는 pages 폴더 안의 폴더 구조가 그대로 url 주소에 반영됨
• 폴더 구조와 다른 url로 접속시 404page로 이동
• 인증 없이 인증이 필요한 페이지 접속 시 로그인 화면으로 이동

🤖 ORM : prisma 사용

💾 Database : vitess 사용

• mysql과 호환되는 데이터 베이스
• ps scale 서비스를 이용하면 별다른 설정 없이 db 연결이 가능 (url을 통해서 연결하기에 port, hostname, password 등이 필요 없음)

🚪 로그인 :

1. 클라이언트 단에서 phone number를 검증 후 서버로 넘겨주면 데이터 베이스에 phone number가 저장되어 있는지 확인

   • 없을 경우 user table에 phone number 저장

2. 6 자리 무작위 수(token)를 SMS로 발신, user table의 phone number와 일치하는 id와 앞에서 만든 무작위 수를 token table에 저장

   • SMS 발신 sendgrid 사용

3. 유저가 서버로 보낸 토큰 값과 token table에 저장된 값이 일치한지 확인

   • 일치할 경우
     1. 일치하면 token table에서 현재 phone number를 값으로 가진 모든 토큰들 중 일치한 토큰만 남기고 나머지는 삭제(여러번 인증 요청 했을 경우 대비)
     2. 일치하는 유저 정보를 JWT로 변환해 HTTP Header에 포함 후 응답함
     3. 서버 응답 중 JWT 값을 local storage에 저장후 인증에 사용
   • 불일치할 경우
     1. 불일치하면 401에러 응답

🔑 인증 :

• _app.js에서 local storage에 JWT 값이 있는지 확인 후 존재하면, 서버와 api 통신을 할 때 요청 헤더의 Authorization 필드에 담아서 보냄 (type은 bearer)

• 인증이 필요한 페이지(내정보 변경, 내 단어장)에 접속 시

  • local storage에 JWT 값이 없으면 로그인 페이지로 이동
  • local storage에 JWT 값이 있을 경우
    • 페이지에서 사용할 정보가 redux에 저장 중이면 그대로 실행
    • 페이지에서 사용할 정보가 없다면 redux-saga로 비동기 api call 요청함

개발 계획

타임라인	추가 기능	세부 계획
2023.07.02	자동완성 기능	1. 단어 로드가 완료되면 트라이 자료구조에 영어 단어를 저장한다 2. 유저가 찾는 단어와 가장 유사한 영어단어 8개를 보여준다
2023.07.23	유저 경험 개선	1. 퀴즈 결과 데이터를 db로 관리한다. 2. 단어장 커스텀 기능을 추가한다
2023.08.31	반응형 웹 (모바일 및 테블릿)	1. 디스플레이 크기에 맞춘 UI를 개발한다

• 네이버 부스트 캠프 참여로 2023.07.11 ~ 2023.12.15 세부 계획 수행 X

타임라인	추가 기능	세부 계획
2024.03.01 ~ 2024.03.07	최적화	번들 프로파일링, 이미지 스플라이트, 렌더링 최적화, CI/CD 구축
2024.03.8 ~ 2024.03.31	리팩토링	npm => pnpm or yarn 베리로 마이그레이션, 코드 개선, redux, redux-saga => Context api or Recoil
2024.04.1 ~ 2024.04.30	RSC	리액트 서버 컴포넌트 적용, 백엔드 통합 시도

배포

1차 배포 : Aws Elastic Beanstalk ( 30$/month = 1 loadBalancer 0.02$/1h )

2차 배포 : Heroku Deno(7$ / month)

---

버전

1.0.0

2.0.0

• 공개 아이디로 로그인 추가
• 검색어 자동완성 추가