React

index.html에서 style.css와 script.js 파일 불러오기index.html에 <style></style>태그와 <script></script>태그로 css, javascript 코드 바로 작성하기만약 메인 페이지를 위해 필요한 C

Babel: 어떤 코드의 형태를 변환시키는 컴파일러예를 들어 ES6의 arrow function을 아래와 같이 일반 함수 선언으로 변경해주는 것이 있다.JSXReact 코드를 작성하기 위한 문법 JavaScript 표준이 아니기 때문에 브라우저가 읽지 못함=> Babe

webpack.config.jshtmllive server로 확인해보려고 했는데 에러가 났다...index.js 파일을 가보니...ReactDOM.render(React.createElement(<FollowButton />), domContainer); 라고 되

props를 통해 값을 내려 받거나, 자신이 관리하고 있는 state가 변경되면 컴포넌트 렌더링이 발생한다.props부모 컴포넌트가 자식 컴포넌트에 전달하는 값값을 자신(자식 컴포넌트)이 변경할 수 없음. 읽기전용state자신(컴포넌트)이 스스로 관리하는 상태값값을 자

이것은 뭔가 JS와 HTML이 섞여있는 느낌이다. 이것은 JavaScript를 확장한 문법인 JSX이다.React.createElement : JSX코드를 JS코드로 변환<JSX를 사용한 코드><JSX를 사용하지 않은 코드><위 React.createE

명함 list는 이미 저장이 되어 있는 상태이다.api 호출을 한다고 가정하고, 명함 리스트를 알맞은 위치에서 초기화component가 처음으로 mount 되었을 때 api를 호출해서 정보를 가져와야 함=> useEffect() 사용component가 mount된 직후

추첨하기 구현 링크이전 내용을 참고하려면 위 링크를 참고하면 된다.이전 코드를 실행하면 잘 실행이 되지만 개발자 창을 보면 Warning이 떠있는 것을 볼 수 있다. key가 설정되어 있지 않아 발생하는 것이다.key를 넣어줄 때에는 map() 함수 내부에 있는 엘리먼

JSX 콜백 안에서 this의 의미에 대해 주의해야 함.JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않다.this.handleClick을 바인딩하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 된다.위

input의 초기값을 비어있게 만드려면 useState를 이용한다.이렇게 설정을 했는데 input이 많아지면 일일히 다 적어줄거냐...그러면 너무 복잡해지고 코드가 더러워진다.그래서 우리는 이것을 객체 형식으로 만들어줄 수 있다.지금은 2개밖에 없기에 별 차이가 없는

ref는 무엇일까?? ref란? HTML과 비교해보면 쉽다. HTML을 작성할 때 이렇게 id를 붙이는 것처럼, 리액트에서도 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. 즉, ref는 DOM에 직접 접근하기 위한 도구이다. 어떤 작업에 사용할까? R

SPA(single Page Application) SPA: 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS와 CSS같은 모든 자산을 로드하는 애플리케이션이다. > 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가

Memorization : 결과값을 저장해서 캐싱된 결과값을 리턴해주어 같은 인풋이 들어왔을 때는 이미 저장된 결과값을 활용하는 방식으로 빠르게 프로그램을 가속화할 수 있는 최적화 기법캐시 : 임시적으로 데이터를 저장하는 공간피보나치처럼 재귀함수를 사용할 때 많이 사용

REST API(Representational State Transfer API)자원(RESOURCE)을 URI로 표시행위(Verb)를 HTTP METHOD로 표현표현(Representations)URI는 정보의 자원을 표현해야 한다.자원에 대한 행위는 HTTP Met

주로 Input을 관리할 때, Fetch를 요청할 때 사용한다.코드, 로직의 반복을 최소화.재사용성 높임.변경사항 있을 때 커스텀 훅에서만 변경하면 되기에 효과적이고 효율적이다.useFetch 사용 전useFetch 사용 후 useFetch라는 커스텀 훅을 사용했다.