TIL(21.04.05 - 10)

21.04.05(월)

- 04.01(목) 부터 velog 클론코딩 진행중

 

- axios[GET] 함수 활용, 게시글 API 호출하여 메인 게시글 리스트 뷰 형성 완료

 

- then() 함수 함정 빠진 경험을 하게 됨

github.com/JeongJoo-Lee/TIL/blob/main/Debugging/axios%26then.md

JeongJoo-Lee/TIL

 

---

21.04.06(화)

- axios(POST) 이용하여 새글 작성 기능 구현 성공

 

- 리덕스와 axios 활용도에 대한 이해도가 높아지는것이 느껴짐

 

- useEffect{( ), [ ]}

  : 두번째 항이 변할때마다 첫번째항 () 안에 있는 값들이 실행이됨(useState와 함께 콤비로 사용하면 시너지 좋은듯)

 : 두번째 값이 비어있으면, 즉 변할 값이 없으면 처음에 실행되고 이후에 실행되지 않음.

 

- useEffect 에 대한 설명이 아주 자세히 적힌 블로그(나중에 정독해보자)

overreacted.io/ko/a-complete-guide-to-useeffect/

useEffect 완벽 가이드

 

---

21.04.07(수)

- 상세페이지 조회 기능구현을 시도하였으나 이해도 미흡으로 실패

 

---

21.04.08(목)

- 백엔드로부터 받은 상세페이지 API를 이용하여 상세페이지 조회 기능 구현을 쉽게 성공(redux, axios 활용)

 

- 백엔드측에 API 포트 3000번 열어달라고 요청하면 내 localhost에서도 API를 이용해서 작업할 수 있다는 것을 이제서야 알게됨.

 

- 프론트 작업하면서 사용하는 폴더의 용도에 대해 사전에 백엔드 측에 설명을 해주면 작업 능률이 더 올라갈 것 같다는 조언을 듣게됨.

   다음 프로젝트부터 잊지않고 실행하는 걸로! (ex. page폴더에는 페이지 자체를 보여주는 컴포넌트들이 담겨있어요!)

 

 - 클론코딩 기간 종료

2021.04.09 - [프로젝트] - velog 클론코딩

velog 클론코딩

- 미니프로젝트 시작(2주) : 팀 재편성(5조) - 프론트엔드(React) 2명, 백엔드(Node.js) 2명

---

21.04.09(금)

- 렌더링을 최소화하는 방법에 대해 알게되었다. 메모이제이션을 활용하는 방식인데 부모컴포넌트가 재렌더링되면

  자식컴포넌트도 재랜더링되는것이 기본이지만, 자식컴포넌트 측에 메모이제이션을 적용하면 부모컴포넌트가

  재랜더링 될때 자식컴포넌트는 재랜더링 되는것을 막고 불필요한 랜더링 횟수를 줄이는 것이다.

// 메모이제이션 적용 전 자식 컴포넌트

import React from "react";

const POST = (props) => {
	return (
	<div>
    포스트내용
    </div>
    );
};


// 메모이제이션 적용 후

import React from "react";

const POST = React.memo((props) => {
	return (
	<div>
    포스트내용
    </div>
    );
});

프로젝트 완성 후 성능 개선시 다방면에서 활용이 가능할 듯 하다. 미리 알아두자.( React.memo( ) )

 

---

21.04.10(토)

- 프로젝트할때 config.js 라는 파일을 새롭게 만들고 API를 좀더 편하게 관리하는 방법에 대해 알게되었다.

  이번 미니프로젝트때 활용해볼 예정이다.

- 클론코딩이 끝나고 다른사람들의 클론코딩 코드를 보면서 내가 구현하지 못한 부분들을 보는중인데 이게 생각보다 도움이 많이

  되는 것 같다.