[WIL] 개발일지: 항해99 6주차

4월 둘째 주: 항해99 6주차

Chapter 4: 클론코딩 <velog>

Chapter 4는 실제로 구동되고 있는 서비스를 똑같이 구현하는 클론코딩 프로젝트였다. 지금까지 매주 팀으로 활동하긴 했으나 실제 팀으로 프로젝트를 진행하는 것은 1주차 미니 웹사이트 만들기 프로젝트 이후 두번째, 프론트엔드포지션으로 참여하는 팀프로젝트는 처음이라 긴장도 걱정도 많이 되었지만 너무 좋은 팀원들을 만나 서로에게 많이 배우고 코딩하는 즐거움을 알게 되었고 자신감을 가지게 된 감사한 한 주 였다.

velog 클론코딩

주제: 개발자들을 위한 블로그 서비스, velog(벨로그)

선정 이유:

• 기본적인 CRUD(Create, Read, Update)구조가 메인인 서비스
• 반응형 웹, 깔끔한 디자인, 트렌지션 효과를 연습하기 좋은 CSS 구조

기능분류: 

1. 로그인, 회원가입
2. 게시글 전체 조회(메인페이지): 트렌딩 순 / 최근 순 정렬
3. 게시글 작성: 마크다운 에디터
4. 게시글 상세조회 (게시글 내용, 해쉬태그, 댓글, 좋아요, 무한스크롤 및 사이드 목차를 이용한 자동 스크롤 이동)

팀원 구성:

• 백엔드 2명, 프론트엔드 2명

스펙(spec):

• Server: Spring
• Front: React
• DB: My SQL
• Hosting: AWS

내가 담당한 부분: 

• " jwt token" 로그인/회원가입 
• token을 localStorage에 저장하고 token의 유무로 Header가 바뀌고 게시글 작성 및 댓글 가능 권한이 주어지게 됨
• 게시글 전체 조회(메인페이지): 트렌딩 / 최근 순 정렬

새로 배운 점:

• 기획부터 배포까지: 협력과 소통의 중요성 !!!!!! 

<CSS>

• 반응형 페이지 만들기
• display, position, space-between, align 용법에 대한 이해 
• hover로 효과내기 : background-color변경, transform, transition
• nav바 클릭을 강조하기 위해 slide 효과 내기

<기능>

• map을 활용한 전체 리스트 정렬
• modal 이용해 팝업창 만들기

<연결>

• 백엔드의 API를 가져와 프론트와 연결하는 axios 사용법
• token을 localStorage에 저장하고 이를 활용하는 법

클론코딩의 장점:

1. 실제 구동되는 서비스를 뜯어봄으로 인해 혼자 구상하는 것보다 구체적이고 세심한 구조들을 관찰할 수 있다.

2. 내가 구현할 수 있는 기능 개발만에 치우쳐지지 않고 공부할 수 있다.

3. 적당히 보기 좋은 디자인이 아닌 최대한 똑같은 디자인을 구현하고자 하는 노력을 통해 CSS 능력이 한껏 향상 될 수 있다.

 

 

클론 코딩을 통해 리액트 사용법에 많이 익숙해졌을 뿐 아니라 프론트엔드와 백엔드가 함께 협력하는 방법을 알게되어 배운게 정말 많은 한주였다. 아쉬운 점이 있었다면 주특기 선택 전에 백엔드를 경험할 기회가 너무 적었다는것...? ㅠㅠㅠ 프론트 뿐 아니라 백엔드에 대한 지식의 범위도 넓힐수록 원활한 소통에 도움을 줄 것이라는 생각이 든다.

 

그다음 7,8주차는 2주간 한 팀과 미니프로젝트를 진행하게된다. 백엔드에 대한 지식을 넓히기 위해 노력할 것이고, 프론트엔드 부분에서는 지난 클론코딩에서 나의 파트가 아니었던 댓글, 좋아요, 무한스크롤 등의 세부 디테일을 담당해보고 싶다.

 

 

그럼 다음주도 화이팅!!!!!