Project Theme

🎟Instagram cloning

👨🏼‍💻Specific page

1. Login Page

2. Main Page

🤳🏼Implementation Function

Login page

• 로그인 시도시 Id&Pw 다섯글자 이상 입력 및 Id @ 포함
• 조건 만족 시 버튼 활성화 및 색 변경
• 활성화된 버튼 클릭시 Main 페이지로 이동

Main page

• 댓글 추가 삭제 기능
• Stroy Board override

Related page

• github

Technical specification

• Setup
  - CRA setting

  • node-modules - package.json - .gitignore
  • public - index.html, images
  • src - components, pages, styles(reset.scss, common.scss), Routes.js

• Language - JavaScript, HTML, CSS(SCSS)

• Library - React js

---

Specific function

1. 로그인 구현

1.1 레이아웃 및 CSS

우선 HTML, CSS 로 큰 틀을 구성하였습니다.
큰 틀 구성 시 Pesticide(chrome extension)을 활용하여 최대한 간단한 코드 구성을 만들고자 했습니다.
그리고 최대한 semantic한 태그를 이용하여 div태그의 남발을 방지하려고 노력했습니다.

레이아웃 구성 후 flex 기능을 이용하여 대부분의 정렬을 마무리 하였고 구체적인 세부사항들을 진행하였으며 자주 사용되는 기능은 SCSS 의 mixin기능 및 $변수를 이용하여 변수로 선언 뒤 적용하였습니다.

그리고 SCSS의 수정과정에서 HTML 작성 시 무분별하게 생성되었던 className을 최대한 배제하는 방향으로 nesting을 실행하여 불필요한 속성들을 제거 했습니다.

1.2 기능 구현 (React state, props)

로그인 기능을 구현하기에 앞 서 크게 세가지의 컴포넌트로 분리를 진행했습니다.
중간의 좌측에 있는 것을 LoginContent, 하단의 Nav바를 LoginNav로 분리하였습니다.

그것들을 Login.js 라는 부모 컴포넌트에서 조합하였습니다.

1.2.1 LoginContent

LoginContent는 ID와 PW의 값을 state로 저장하여 이벤트를 발생시켜야 할 것이라는 생각으로 각자의 state를 만들었습니다.

그리고 로그인 버튼의 경우 클릭 시 json으로 받은 정보를 js로 변환 뒤 내부 state에 저장하기 위한 token이라는 state를 생성하였습니다.

활성화와 동시에 색상의 변경을 위해 별도의 disabled 속성과 관련된 별도의 state를 설정하였고 그에 따른 css 도 설정하였습니다.

고민을 많이했던 문제는 두개의 input창(id, pw)에 각 각의 input 값을 따로 받아야 한다는 것이었습니다.

• 초기 셋팅 시에는 각자 한개씩 메소드를 만들어 적용하였으나 버튼 활성화가 되기위해서 두가지 Input창의 value에 동일한 조건이 설정되어야 한다는 점

• JS 에는 Event bubbling 효과가 존재한다는 점에 착안하여 두가지 함수를 합치고 조건을 변수화 하였습니다.

name이라는 속성값을 각자 input에게 다른 이름으로 부여한 뒤 setState시 [name]:value를 해주어 target의 명확한 input에 변화값을 state에 저장시키도록 하였습니다. 또한 해당함수인 updateInput을 input tag들을 감싸고 있는 div에 onChange event에 선언하였습니다.(버블링효과)

2.메인 구현

2.1 layout

메인페이지의 레이아웃 역시 최대한 간편한 구성으로 짜려고 노력했으며 semantic태그의 사용 및 scss의 적절한 사용을 위해 노력하였습니다.

보통의 페이지와 다르게 특별한 부분은 우측에 존재하는 sidebar가 스크롤이 내려갈때 nav바와 함께 붙어 위치를 유지한다는 점이었습니다.

이를 구현하기 위해 sticky 기능을 사용하여 고정을 시켰습니다.
sticky기능 구현 시 top에서부터의 위치가 중요한데 고정위치를 지속적으로 유지하기 위해 %단위를 이용했습니다.

2.2 Component 기획(map)

메인또한 로그인페이지와 동일한 방법으로 여러가지의 component로 분리하였으며 Component별 수정을 용이하게 관리하기 위함이었습니다.

또한 팀원 모두 같은 Nav Component를 사용하여 불필요하게 동일한 Component의 반복을 줄였습니다.

몇 몇 Component에서는 반복되는 행위가 많이 보여 map함수를 적용하여 유사 코드의 낭비를 줄이기 위해 노력했습니다. 그 과정에서 다량의 src들과 name들은 mockdata화하여 별도의 파일로 관리 한 뒤 fetch 메서드를 통해서 불러왔습니다.(불러오는 과정에서 별도의 state에 저장했습니다.)

2.3 댓글기능 구현(map,filter)

댓글 기능 구현 시 유의한 점은 내용의 변화와 관계없이 그 틀은 일정하다는 것과 댓글 입력시 마우스로 버튼을 클릭하면 등록되는 것, 그와 동일하게 엔터키를 통해서도 등록이 가능해야한다는 점이었습니다.

일단 일정한 틀의 사용을 위해 map함수를 사용하였고 그 과정에서 클라이언트가 입력한 input value를 별도의 state에 저장한 뒤 map함수로 갖춰진 틀에 넣어주는 작업을 하였습니다.

또한 reply라는 별도의 댓글 component를 생성하였는데 이는 초기에 매우 길어진 feed라는 component의 가독성을 위해서 선택하였습니다.

하지만 이런 분리 과정속에서 props로 연결된 속성값만 보이다 보니 직관적으로 데이터의 흐름을 읽어내지 못하는 불편함을 발견하였으며 이는 추후 가능한 범위에서 수정을 할 생각입니다.

• 별도의 Component로 작성된 Reply
  -> comments라는 저장된 input값이 저장된 객체를 받아오게 되어있습니다.
  

• input값의 저장에는 setState 메서드를 이용하여 저장을 진행하였으며 댓글이 작성된 뒤 업로드가 되면 댓글창이 empty상태가 되어야 한다는 점에 착안하여 input:''라는 코드를 기입하였습니다.

• 댓글의 삭제를 위해 Filter 메서드를 이용하여 클릭된 해당아이디값을 가진 것을 제외한 댓글들은 그대로 반환하게 코드를 작성하였습니다.

3.Rendering(Routes)

Router를 이용하여 SPA(Single Page Application)의 개념을 실행해보았습니다

Router 기능을 통해 페이지들의 개별 path를 이용하여 하나의 페이지에 경로에 따른 다양한 페이지를 보여줄 수 있게 되었습니다.

---

후기

첫번째로 제대로 진행해본 cloning인점과 react library의 첫 시도였다는 점에서 아쉽지만 만족해야하는 점이 있다고 생각한다.

Html,Css의 적용에 있어서 아직도 semantic tag의 사용과 css의 적절한 응용이 부족한 것 같다.

두번째로는 클로닝과 동시에 새로운 개념들을 많이 배웠는데 그중에 기억에 남는 것은 아래와 같다.

• map함수 활용시 알게된 개념이며 객체를 분할해서 그대로 property값을 가져올 수 있다는 개념인 'destructure'(보통 mock data는 배열안의 객체로 존재되어 있으므로 이개념이 아주 유용하게 사용될 것 같다)

• 동기, 비동기 setState의 사용과 함수의 정확한 작동을 위해 console.log로 체크를 하던 중 알게된 개념이며 setState의 경우 비동기이므로 곧바로 실행되는 메서드가 아니다. 따라서 callback함수를 배치할 수 있는 기능이 있으며 상황에따라 setState의 선언을 사용해야 한다는 점이다.

• 라이프 사이클에 있어 ComponentDidMount는 한번만 실행되며 주로 데이터 호출 함수를 내부에 선언한다.

앞으로도 배워야할것들이 산더미다..
다음프로젝트에서는 조금 더 유용한 개념들을 많이 배웠으면 좋겠다.

끝!

- github -