TIL32. useMemo

useMemo는 memoization된 값을 반환하는 React의 hook입니다.값을 반환하는 콜백과 의존성 array를 넘겨주는데, 의존성에 변화가 일어날 때마다 콜백이 실행되어 값을 다시 할당합니다.이전에 사용된 값을 재사용하는 방식주로 Component성능을 최적

2일 전
·
0개의 댓글

TIL32. async / await

async await는 비동기 프로그래밍을 동기 프로그래밍처럼 작성할 수 있도록 함수에 추가된 기능이다. ES2017에서 자바스크립트 표준이 되었으며, async await를 이용해서 코드를 작성하면 가독성이 좋아진다.async await는 비동기 상태를 값으로 다룰

2일 전
·
0개의 댓글

TIL31. Axios

HTTP 클라이언트 라이브러리로 비동기 방식으로 HTTP 데이터 요청을 진행한다.비동기이기 때문에 이를 처리할 수 있는 async, await를 같이 쓴다.axios는 내부적으로 XMLHttpRequest를 다루지 않고 AJAX 호출이 가능.fetch와 axios 둘다

2일 전
·
0개의 댓글

TIL30. useCallback

컴포넌트에서 props로 넘겨주는 함수(위의 예제에서 onChangeId)는 useCallback이 필수적이다.자식 컴포넌트로 넘겨주는 함수는 무조건 useCallback으로 감싸준다.useCallback(fn, deps)함수(fn) 내부에서 쓰는 state를 deps

2020년 11월 15일
·
0개의 댓글

TIL29. Redux

Javascript에서 흔히 쓰이는 State Container이다.React뿐만 아니라 어떠한 Javascript 라이브러리와도 연결할 수 있는 State 관리 라이브러리이다.어플리케이션에 컨테이너에서 데이터와 비지니스로 로직을 분리하여 리액트가 순전히뷰에만 관여할

2020년 11월 15일
·
0개의 댓글
post-thumbnail

2차 프로젝트 후기 "Function Of Beauty"

펑션오브뷰티(Function Of Beauty) 는 맞춤형 헤어,스킨 및 바디 케어 제품을 판매 하는 사이트 입니다.자신의 몸에 맞는 유형을 퀴즈로 풀고 자기에 맞는 제품을 추천해 자신의 각인도 세길 수 있는 서비스도 있습니다. 자신의 맞는 제품을 찾아보고 싶다면\~~

2020년 11월 14일
·
1개의 댓글

TIL28. Hooks useEffect

useEffect는 함수형 컴포넌트에서도 라이프사이클과 같은 기능을 사용할 수 있게 해준다.componentDidMount 와 componentDidUpdate, componentWillUnmount 를 합쳐놓은 것이다.useEffect 함수는 state 변수를 하나만

2020년 11월 8일
·
0개의 댓글
post-thumbnail

TIL27. Git Rebase

Rebase란 머지와 비슷한 기능이다. Git rebase는 커밋의 base를 다시 정하는 작업이다.단점이 있다면 커밋 순서대로 rebase를 하는데, 각 커밋마다 충돌해소를 순서대로 해줘야한다.mergy commit : git이 봤을 때 브랜치가 다른 두개가 있다고

2020년 11월 8일
·
0개의 댓글

TIL26. styled components

현존하는 리액트 CSS-in-JS 관련 라이브러리 중에서 가장 잘나가는 라이브러리이다.말 그대로 자바스크립트 안에서 CSS를 작성할 수 있는 형태이다.리액트에서 컴포넌트를 사용하는 것과 같이 태그로 사용할 수 있고, props를 전달할 수도 있다.\`(백틱)으로 감싸서

2020년 11월 8일
·
0개의 댓글

TIL25. Hook

함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수선택적 사용 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook를 사용할 수 있다. 그러나 만약 당장 Ho

2020년 11월 1일
·
0개의 댓글

TIL24. Pagination

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 보여줄 수 없는 경우우리는 사용해야된다 => Pagination!데이터를 일정 길이로 끊어서 전달 하는 것이 point!FrontEnd에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)

2020년 11월 1일
·
0개의 댓글
post-thumbnail

1차 프로젝트 후기 "WATCHAPEDIA"

왓챠피디아(WATCHAPEDIA) 는 내 취향에 딱 맞는 영화, 드라마, 책을 추천받고 평가할 수 있는 콘텐츠 평가/추천 서비스입니다.2020.10.19 ~ 10.30 (11일)함준호(PM)김정현김지안조혜미김예진김창곤

2020년 10월 31일
·
1개의 댓글
post-thumbnail

TIL23. 비동기 처리문법

JS에서 비동기 처리를 진행합니다.서버에 데이터요청을 했는데, 언제 완료될지도 모르고 기다릴 수 없기 때문에 나머지 코드를 먼저 실행하는 것이 비동기 처리입니다.setTimeout으로 생각대로 코드 호출이 되지 않는 것을 알 수 있었습니다.이를 해결하는 방법은 콜백함수

2020년 10월 25일
·
0개의 댓글

TIL22. 동적 라우팅

라우팅이란 다른 경로(주소)에 따라 다른 View(화면)을 보여주는 것 입니다.React Router 에서는 두 가지 방법을 통해 유동 라우팅 기능을 구현할 수 있습니다.Query parametersURL parameterslocationthis.props.locati

2020년 10월 25일
·
0개의 댓글

TIL21. 조건부 렌더링

보통 삼항 연산자를 사용하거나, AND 연산자를 사용해야 한다.if문은 사용할수없고, 사용하려면 IIFE(즉시실행 함수 표현) 을 사용해야한다.1\. 삼항연산자 사용\-> true or false 일때, 다른 결과값을 보여준다.∴ 내용이 달라져야 할 때 사용함!!2\.

2020년 10월 25일
·
0개의 댓글
post-thumbnail

TIL20. React filter

filter() 메서드는 주어진 배열 내에서 콜백 함수로 넘어온 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.Array.prototype.filter() 이렇게 사용한다.▼예시map을 보면 element 자리에 currentvalue 가 있는데 둘

2020년 10월 18일
·
1개의 댓글

TIL19. fetch

fetch함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나이다. 아래의 코드는 로그인을 위한 방식이기 때문에 사전에 회원가입이 되어있어야 한다. 나는 postman을 통해 백엔드로부터 정보를 받아 회원가입을 진행했고jeonghyun, kim95가

2020년 10월 14일
·
0개의 댓글

TIL18. Mock Data

Mock Data 란, 말 그대로 "가짜 데이터" 를 의미한다.API 를 통해 백에서 받아온 데이터가 아니라 프론트엔드에서 필요에 의해 임의로 만든 샘플 데이터이다.프로젝트를 진행하다 보면 많은 경우에 API 가 나오기 전에 페이지가 먼저 만들어진다. 따라서 프론트에서

2020년 10월 13일
·
0개의 댓글

TIL17. React Event handling

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는방식과 매우 유사하다.몇 가지 문법 차이가 있다.React 에서 events 이름은 반드시 camelCase(카멜케이스, 낙타표기)를 사용해야 한다.React 에서 event hand

2020년 10월 11일
·
0개의 댓글

TIL16. React Map

map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후그 결과로 새로운 배열을 생성 한다.arr.map(callback, \[thisArg])callback 새로운 배열의 요소를 생성하는 함수callback의 파라미터 3가지

2020년 10월 10일
·
0개의 댓글