Hoisting??????????호이스팅이란, 함수 또는 변수의 선언을 각각의 유효 범위의 최상단에 선언해주는 것을 말한다.유효범위란? 함수 블록 {} 을 말한다.JS Parser가 유효 범위 내의 코드를 훑은 후, 이를 기억했다가 실행시킨다.함수와 변수의 선언과 초기

ES6 이전에는 변수 선언은 var 뿐이었다. 하지만 ES6 에서 let 과 const가 추가되어 이를 이용하여 변수 선언을 할 수 있게 되었다.차이점을 알아보도록 하자.var, let, constvar는 함수 레벨 스코프이고 let 과 const 는 블럭 레벨 스코프

SCOPE??????????스코프를 우리 말로 번역하면 "범위" 라는 뜻을 가지고 있다. 즉 스코프란 "변수에 접근할 수 있는 범위" 라고 말할 수 있겠다.자바스크립트에선 스코프는 2가지의 타입이 있다.바로. Global (전역) 과 Local (지역) 이다.전역 스코

민석님이 설계한 Route를 보면, component={Home} 이란 이름의 페이지가 있다. Home 파일을 가보자.<Switch> 되는 Route 들을 따로 분리해놓은 파일임을 알 수 있다.불필요한 리랜더를 방지하기 위해 컴퍼넌트를 분리하고, 파일로 따로 분리

자 어떤식으로 나눠져있는지 파악해보자. 위의 코드는 가장 최상위 컴퍼넌트인 index.js 파일이다.

JavaScript async 와 await 그리고 유용한 Promise APIs위의 영상을 기반으로 작성하였음.

자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise위 영상을 기반으로 작성하였음.2초 후에 'ellie' 가 출력된다.resolve 를 주석처리하고 reject 를 추가하였더니 2초 후에 Error: no network 가 출력된 것을 확

컴퍼넌트 재사용"재사용"이 가능한 UI 단위.. UI? User Interface컴퍼넌트 재사용을 통해 컴퍼넌트 구조를 "효율적으로" 설계.부모 컴퍼넌트에서 자식 컴퍼넌트한테 여러 프롭스를 보낸다.프롭스의 내용은 고정된 값이 아니다.State는 변경이 가능한 상태.컴퍼

자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 위의 영상을 참고로 작성하였음.Sychronous Call Back즉각적으로, 동기적으로 실행하는 Call Back.Asynchronous Call Back나중에, 언제 실행될지 예측할 수 없는 C

생활코딩훅에서 clean up의 역할을 하는 것은?클래스 방식에서는 스테이트가 바뀔 때마다 이전의 props 와 이전의 state 값을 전달하여 두 개의 값이 다를 때만 작업을 처리하도록 했었다.아래의 코드처럼.스테이트가 바뀔 때마다 인자로 이전의 프롭스 값과 이전의

클래스 방식은 라이프사이클에 따라서 정해진 메소드에 따라 원하는 타이밍에 원하는 어떤 코드를 호출할 수 있다.어떻게 하면 랜더와 관련된 작업을 하는 FuncComp라는 함수가 실행된 후에 추가적으로 필요한 작업을 처리하게 할 수 있을까?\-> 그것이 바로 리엑트의 유즈

Learn React Portal In 12 Minutes By Building A Modal위 영상을 기반으로 작성하였음.기업협업 4일차. 함께 프로젝트를 진행할 개발자 분께서 모달창 관련하여 왜 포탈을 사용하게 됐는지를 이해하는 것이 중요하다고 말씀해주셨다. 준우님

1\. 유저가 이메일을 입력합니다.Email Input의 onChange 함수가 실행 됩니다.2\. onChange 함수에서 Email Input의 value를 setState를 통해 업데이트 합니다.3\. 유저가 비밀번호를 입력합니다.Password Input의 on

PortalsPortals포탈은 부모 컴퍼넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공.첫번째 인자 (child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식.두번째 인자(

생활코딩 Hook함수형 컴퍼넌트함수 스타일 코딩으로 할 수 없는 대표적인 작업이컴퍼넌트 내부의 스테이트를 만들어 사용하는 것.또한 컴퍼넌트의 생성 변경 소멸에 대한 이벤트인 라이프 사이클 api를 사용할 수도 없었음.그래서 함수 방식은 상위 컴퍼넌트가 시키는 일만 처리

Recoil: 왕위를 계승하는 중입니다 (새로운 React 상태 관리 라이브러리)유진님이 공유해주신 영상을 보며 정리한 내용을 여기에 기록해보고자 한다.리코일새로운 react 상태 관리 라이브러리.리액트 상태 관리의 역사.한동안은 기본적인 context, prop, s

오늘은 기업협업의 첫 날. 대표님께서 리덕스보다 리코일을 더 추천한다는 얘길 듣고, 개념이 궁금해져서 찾아보았다. 정말 공부할게 많구나 새삼 느꼈고공부하는 만큼 계속 성장할 수 있다는 것에 설렘도 느꼈다.Recoil — 새로운 리액트 상태 관리 라이브러리?

어느새 2차 프로젝트가 끝이 났다고..?1차 프로젝트 마무리도 얼떨떨한데.. 2차프로젝트 후기를 써야할 때가 오다니. 위코드에서의 시간은 정말 순식간이구나.. 싶다.이번에 맡은 사이트는 한정판 스니커즈 또는 옷을 거래할 수 있는 사이트 'KREAM'이다.프론트엔드: 재

네브 바와 검색 모달창에 대해 간단한 리뷰를 남겨보겠다.네브 바에서 검색 인풋창을 클릭하면 검색 모달창이 뜨도록 구현했다.검색 모달창의 이미지들에 호버효과도 추가했다.(우리 팀원들의 사진은 보너스\~~)api 통신을 통해 영어 이름 과 한글 이름 둘 다로 가능하며, 1

소셜로그인을 도전하다!네이버 로그인이라고 쓰여있긴 하나, 카카오톡 로그인이다.카카오톡에서 제공하는 오픈 api를 통해 소셜 로그인을 진행했다.소셜로그인은 사실 프론트엔드에서 특별히 할 건 없고 (카카오톡에 이미 설명이 잘 되어있따.) 다만, 백엔드에서 할 게 많았을 것