instagram Clone Coding를 마치며 기록하는 후기🍋login, main페이지로 나누어 리액트 입문기 로직을 기록해보려한다.
✔️ 적용 기술
- JavaScript(ES6+)
- React.js (JSX)
- SCSS
- Git
✔️ 주요 기능
- 로그인 페이지 레이아웃id, pw 입력 시 로그인 버튼 활성화 기능
- 메인 페이지 레이아웃댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
📚 리액트를 이용한 wesragram 작업 후기 (로직 기록)
💫 Login 페이지
- className의 동적 사용style에 변화를 줄 때 inline으로 바로 줄 수도 있지만 sass 파일을 사용하여 코드의 간결함을 주었다.⬇️ 삼항연산자를 이용해 ture : flase이 들어갈부분에 클래스명을 넣어 sass파일에 스타일 값을 입력함
- Boolean 데이터 타입의 활용 (위예시와 같은 상황일때 다른 표현방식)1번째 이미지는 Boolean 데이터 타입의 활용해 ture : flase로 나타내었다.ture : flase로 나타낸 코드를 좀더 간결하게 표현한 로직
- 객체의 키값 활용객체에서 키값을 줄때에는 두가지방법이 있다.
.(dot)과\[](대괄호).=키값이름이 명시적으로 정해져있을때 사용[]=변수로 지정 할 수 있는 방법동시에 구조 분해 할당 적용
- backend와 연결해보기(이모티콘 컬러별로 설명)
❤️ 'fetch'메서드는 backend가 전달해줄 주소 넣기 (해당 아이피 주소가 정확해야 연결가능)- method의 디폴트 값은 GET이다. 이경우method:GET 생략가능하다- back과 연결하기전 mockdata파일을 이용해 test를 해볼수 있다이때, 해당파일의 url localhost번호와 동일해야한다하지만 url localhost를 지워주면 이를 자동으로 인식한다 ex)"/data/FeedsData.json"
🧡 - 로그인일 경우 body 부분에 들어갈 key이름과 value이름이 back에 가지고있는 데이터와 동일해야 실행됨- 회원가입일 경우 front에서 유저가 가입한 데이터를 찍어서 back으로 보내주면 back에서 저장후 로그인가능
💛 데이터를 가지고있는 파일이 어떠한 파일이건 json파일로 변환되어 읽을수 있도록 해주는 로직
💚 해당부분은 함수가 실행될때 마다 경우의 수를 인식해 알람창이 뜨도록 설계했다
💙 if문에서의 조건은 데이터 메세지가 동일해야 하는데, 이때 데이터 메세지는 back에서 설정한 메세지와 동일해야한다
💜 back에서 받은 토큰값을 localStorage에 저장하는 로직*localStorage=back에서 받은 토큰을 foront에서 저장해주는 객체이다.localStorage(객체)안에 setItem(메서드)
🤎 (초록박스)if문의 마지막 결과로 history.push를 이용해 ("")주소로 이동시킴
💫 Main 페이지
- Component분리 state&props사용반복되는 코드 Array.map() 활용메인파일
state로 key,value정의 ➡️ 해당 객체로 map 돌리기 ➡️ 로직에 컴퍼넌트파일 담기⭐️key값 꼭 넣어주기!!key값을 넣어줘야하는 이유컴퍼넌트 시킨 파일부모파일로 부터 state값을 props로 가져오기브라우저에 보여질 jsx파일의 형태를 전부가져오기props뒤에 붙는 key값은 목데이터에 정의된 값과 동일해야함해당로직에 필요한 목데이터 짜임
💫 공통
- reset.scss & common.scss
- 초기화 하는 세팅은 Reset.scss에 넣는다
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}- 모두가 같이 쓸 수 있는 또는 개발하면서 계속 쓰는 css는 common.scss에 넣는다
$themeColor: #0095f6;💫 sass
- 새롭게 알게된 sass 코드input안에 커서를 클릭했을때 placeholder가 없어지는게아니라 그대로 유지되면서 스타일만 달라지게 했다
