f-lab-edu / red-yoo-toss-tech

red-yoo-toss-tech

개요

red-yoo-toss-tech(RYTT)는 vanilla JavaScript로 toss tech페이지를 만들면서 front-end의 기초적인 설계와 구현능력을 성장시키며 git에 대한 이해와 협업과 코드리뷰에 대한 이해를 향상시키는 목적으로 만들었습니다.

프로젝트 소개

tosstech 페이지을 기반으로 만듭니다.

페이지 예시

페이지 section을 나누어 Component단위로 작업합니다.

• nav section : logo, gnb..등이 존재합니다.
• main section : 개발 기술에 대한 list들이 존재합니다.
• employment section : 채용 공고에 대한 내용들이 존재합니다.
• footer section : 피드백 보내기, 회사소개, 고객센터...등이 존재합니다.

사용한 기술

• HTML
• CSS
• JavaScript

Git 전략

github에서 코드리뷰를 주기적으로 받으며 빠른 피드백을 통한 학습능력 증진이 목표이기에 이 프로젝트에 git전략을 github-flow을 채택하였습니다.

커밋 메시지

커밋 메시지 참고사이트

• 명령조로 작성한다.
• 첫 번째 문자를 대문자로 작성한다.
  • ex) Feat : ~~기능 개발
• 변경사항이 무엇을 의미하는지 알 수 있도록 하기
• 커밋 메세지 본문에 "왜", "무엇을 위해", "어떻게" 변경했는지 상세 내용을 추가설명한다.
• 맥락 없는 총칭적 메세지는 자제한다.

커밋 컨벤션

Feat : 새로운 기능에 대한 커밋

Fix : 버그 수정에 대한 커밋

Build : 빌드 관련 파일 수정에 대한 커밋

Chore : 그 외 자잘한 수정에 대한 커밋

Ci : CI관련 설정 수정에 대한 커밋

Docs : 문서 수정에 대한 커밋

Style : 코드 스타일 혹은 포맷 등에 관한 커밋

Refactor : 코드 리팩토링에 대한 커밋

Test : 테스트 코드 수정에 대한 커밋

ex) Feat : Nav-component 카테고리버튼 기능 구현

Pull requests 메세지 컨벤션

Issue-number + 개발 내용

ex) Issue 2 Nav-component 카테고리버튼 기능 구현

Issue 내용 컨벤션 예시

상세 내용 : todo blabla

To-do

• todo 1
• todo 2

red-yoo-toss-tech's Issues

README 수정

Issue: 📄README 수정

참고 이미지 추가

To-do

• 프로젝트 소개 이미지 추가
• git전략 이미지 추가

ArticleComponent로 넘어온 후 새로고침 했을 때 페이지 오류

Issue: 🐞Fix

ArticleComponent로 넘어온 후 새로고침 했을 때 페이지 오류

To-do

• ArticleComponent에서 JSON_DATA를 받지못하는 것을 수정

MOCK DATA 내용 추가

Issue: ✨Feat MOCK DATA 내용 추가

MOCK DATA의 data를 추가한다.

To-do

• tech page의 data를 추가한다.
• design page의 data를 추가한다.

README 작성

Issue: 📄DOC

프로젝트 소개, 사용기술, Git 전략, 컨벤션 등을 소개합니다.

CSS선택자가 달라짐에 따라 style.css수정

Issue: 🐞 Fix

main-container의 css선택자가 달라짐에 따라 style.css수정

To-do

• .main-container를 #main-container로 수정

코드 컨벤션 환경 세팅

Issue: ⚙️Setting

rytt 프로젝트의 코드 컨벤션 환경 설정을 합니다.

To-do

• eslint 설정
• prettier 설정
• husky 설정

router 기능 구현

Issue: ✨Feat router 기능 구현

vanila javascript로 router기능을 구현한다.

To-do

• navigation에 존재하는 "디자인", "기술"을 클릭할 때 마다 url이 변경된다.
• 변경된 url을 확인한다.
• routing기능이 어디서 구현되어야 하는지 결정한다.

글로벌 폰트 설정

Issue: 🎨 Html&CSS

웹 폰트, 글로벌 폰트 설정

Article Component 이벤트 위임

Issue: ✨Feat Article Component 이벤트 위임

현재 Article Component의 title과 summary를 클릭해야 article이 출력되는 것을 이벤트 위임을 적용하여 해결

To-do

• article container에 click event적용
• click event에 따른 페이지 변경 구현

Main-Content 마크업 및 CSS

Issue: HTML&CSS

main-content 에 대한 마크업 및 스타일을 구현합니다.

To-do

• main content 컴포넌트 세분화
• 마크업
• css 스타일링

여러 개의 MainComponent list가 생성 기능 구현

Issue: ✨Feat

JSON데이터 기반으로 MainComponent list가 생성되는 기능 구현

To-do

• MOCK_DATA.json을 활용하여 MainComponent가 생성됨
• 참고할 데이터 수 만큼 list가 추가로 생성됨

ArticleComponent 구현

Issue: ✨Feat ArticleComponent 구현

Main이나 DesignComponent에서 container를 클릭한다면 Article이 등장하고 Aricle에 해당되는 데이터를 보여준다.

To-do

• container를 클릭했을 때 이벤트 위임처리
• Article로 넘어갈 때 라우터 처리
• ArticleComponent 구현

JSON Data가 Article로 넘어가지 않는 에러

Issue: 🐞 FIx

JSON Data가 Article로 넘어가지 않는 에러 수정

To-do

• MainComponent.ts파일 수정

Nav-Section 레이아웃 설정

Issue: Style

전체 레이아웃과 Nav-Section 스타일을 구현합니다.

To-do

• 전체 레이아웃 설정
• nav-section CSS 구현

타입스크립트 프로젝트로 변환

Issue: ⚙️Setting

타입스크립트 프로젝트 변환

router.js를 typescript로 리팩토링

Issue: ⚒️Refactor

router.js를 typescript로 리팩토링 작업

To-do

• router.js를 typescript로 리팩토링한다.

Footer-Section CSS 구현

Issue: HTML&CSS

Footer-Section에 대한 스타일을 구현합니다.

To-do

• Footer-Section HTML 마크업구현
• Footer-Section CSS 구현

.js , .map파일 git상에서 삭제

Issue: 🐞Fix

Git상에 .js, .map파일이 올려져있음

To-do

• .js , .map파일을 삭제한다.

Component파일관리와 nav,footer 코드수정

Issue: ⚒️Refactor

Main.js에 component를 관리하도록 리팩토링과 Nav-Component,Footer-Component가 return하게 리팩토링

To-do

• Main.js 생성 이후 각 Component파일을 import하게 리팩토링
• HTML에 script태그 링크를 Main.js로 리팩토링
• Nav-Component, FooterComponent가 해당 코드만 return하게 리팩토링

MOCK_DATA 수정

Issue: ✨Feat MOCK_DATA에 데이터 추가

MainComponent의 article내용에 관한 데이터 추가

To-do

• 작성자 이미지 데이터 추가
• 작성자 이름 데이터 추가
• 작성자 직무 데이터 추가
• article내용 추가
• article 코드블럭 추가

게시글 스크롤 뷰 문제

Issue: 🐞 BugFix

게시글 진입 시 스크롤 위치가 이전 페이지와 동일한 문제

repo README 작성

목표

현 프로젝트에 관한 개요, 소개, 사용기술 등을 작성하는 것

component를 class형식으로 리팩토링

Issue: ⚒️Refactor

각 component파일 코드를 class형식으로 리팩토링

To-do

• NavComponent 코드 리팩토링
• FooterComponent 코드 리팩토링
• MainComponent 코드 리팩토링

Article 라우터 구현

Issue: ✨Feat Article 페이지 라우터 구현

게시글 클릭시 article 페이지 라우팅 구현

To-do

• article 게시글 클릭시 파라미터 해당 id 값 변환
• article 코드 리팩토링

README img 안보이는 현상

Issue: 🐞Fix

public폴더명이 src로 바뀌면서 README에서 프로젝트 소개, git 전략 img 안보이는 현상

To-do

• README의 img경로 재설정

MOCK_DATA 통합 시키기

Issue: 📄Docs

기존 Mock data 디자인, 개발 데이터 통합 시키기

TypeScript로 MainComponent 마이그레이션

Issue: ✨Feat

MainComponent를 TypeScript로 마이그레이션 작업

To-do

• to를 입력해주세요.
• to를 입력해주세요.

Dummy Data 작성

Issue: Docs

main content로 받을 dummy data를 JSON 형식으로 작성

github pull request, issue 템플릿 설정

Issue: ⚙️Setting

깃헙 PR 템플릿, issue 템플릿을 작성합니다.

To-do

• PR 템플릿 작성
• Issue 템플릿 작성

TypeScript로 component파일 마이그레이션

Issue: ✨Refactor

TypeScript로 component파일 마이그레이션 작업

To-do

• AritcleComponent TypeScript로 작성
• DesignComponent TypeScript로 작성
• FooterComponent TypeScript로 작성
• NavComponent TypeScript로 작성