공부 및 일상기록

Hook 이란 Hooks는 리액트 v16.8에 새로 도입된 기능. 함수형 컴포넌트에 사용되는 몇 가지 기술을 Hook이라고 함. 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect등의 기능 등을 제공. 함수 컴포넌트도 클래스 컴포넌트처럼 사용 가능 ⇒ 같은 Hook을 여러번 호출 가능 ⇒ 몸통 안 복합 실행문의 { }에서는 사용할 수 없음(js의 black scope는 block외에는 사용 불가) ⇒ 비동기 함수는 콜백함수로 사용할 수 없음 ** 지원하는 Hooks useState : 컴포넌트의 state 관리(상태에 따라 다른 화면 출력) useEf..

먼저 회고 주제인 서버리스와 DOM에 관하여 알아본다. 서버리스(Serverless) 란? 수많은 자료에서도 언급되고 있지만 서버리스는 일단 서버가 없다는 뜻이 아니다. 서버리스는 서버가 없는 백엔드가 아닌 우리가 직접 서버를 관리하지 않아 신경 쓸 필요가 없는 경우를 뜻한다. 보통 사이드 프로젝트나 프로토타입을 빨리 출시할 때, 쉽게 출시하고 저렴한 장점이 있다. 서버리스는 왜 생겨났을까? 온 프레미스(On-Premise) 온프레미스란 직접 서버를 설치하는 것을 말한다. 만약 회사가 아닌 개인이 서버를 운용하려면 하드웨어를 구입하고 전원을 항상 공급하며 직접 소프트웨어를 하드웨어로 업로드해 서비스를 운영해야 한다. 하드웨어와 소프트웨어를 모두 직접 관리해야 한다. 하지만 개인이 그것을 유지하기엔, 집이..

ES란 무엇인가? ECMA스크립트(ES) 는 ECMA 인터내셔널이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍언어이다. 자바스크립트를 표준화하기 위해 만들어고 ES5는 2009년에, 그로부터 6년 후 2015년에 ES6가 출시되었다. 그럼 과거버전과의 차이를 알아야 할 필요가 있을까? 여러 가지 검색 결과 두가지 결론이 나온다. 1. 레거시코드(오래되어 유산이 된 코드..)를 최신 문법으로 리팩토링 할 수 있어야 한다. 2. 리팩토링이 아니더라도 코드의 동작을 해석/유지보수 할 수 있어야 한다. 그렇다면 ES5에서 ES6가 되면서 새롭게 바뀐 내용은 무엇일까? 1. let, const 키워드의 추가 기존 var로 선언한 변수는 동일한 이름으로 여러번 중복해서 선언이 가능했..

목표 1. JS의 기초 문법을 활용 기초 문법을 숙지하고 있고 리액트 컴포넌트 안에서 JS를 사용할 수 있다. ES6 문법을 습득하였고 리액트 컴포넌트 안에서 map, filter를 활용할 수 있다. 2. 리액트의 특징과 컴포넌트 활용 컴포넌트 개념을 숙지하고 컴포턴트 생성을 할 수 있다. 모던 웹에서 리액트가 탄생한 배경을 알고 화면 내에서 재사용 가능한 컴포넌트 단위를 나눌 수 있다. 3. React의 props, state 개념 알고 활용 props, state 를 활용하여 데이터를 전달할 수 있고 리렌더링이 발생하는 조건을 안다. 불변성을 지켜야 하는 이유를 이해하고 있으며 props, state를 활용해 함수를 전달할 수 있다. 4. 추가학습 Github 사용법 숙지하기 → 항해에서 제공한 강의..

항해 99 1주차를 무사히 완료하고있다. 1주차엔 미니프로젝트를 4일만에 완성하도록 하였다. 우리조가 만들고자 했던 목표는 게시판 이며 게시판의 목적은 각 언어별 모르는 코드 질문 및 답변, 답변글에 대한 추천기능, 답변 채택을 통한 답변 검증, 비회원은 글을 참고할수 있지만 작성이나 답변 불가능, 이정도 였다. 하지만 이제 막 코딩을 접한 우리는 모든 기능을 소화해내기엔 실력이 부족하여 답변 채택기능과 추천 기능을 구현해내지 못했다. 위 프로젝트 깃허브 자료 : https://github.com/Hwirin-Kim/QnA_Board GitHub - Hwirin-Kim/QnA_Board: hanghae99 1week miniproject (with siwon, hyunjin) hanghae99 1week..