본문 바로가기

FrontEnd+

[React] 함수 컴포넌트를 위한 리액트 훅(hook) '리액트 훅(hook)'은 지금으로부터 2년 전('19)에 새로 추가된 리액트 API이다. '훅'이 무엇인지, 어떻게 사용하면 좋은지 정리해보자. (feat. 로이드의 수업!) hook의 등장배경 클래스 컴포넌트가 외면받은 이유 클래스 컴포넌트는 인스턴스의 프로퍼티로 상태를 갖도록 할 수 있고, 컴포넌트의 라이프사이클에 따라 생명주기 메서드도 활용할 수 있다는 확실한 장점이 있다. 그럼에도 클래스 컴포넌트가 외면 받은 이유는 클래스가 함수보다 복잡하기 때문이다. this 바인딩만 생각하더라도 클래스가 함수보다 복잡하다는 것은 반박할 수 없는 사실이다. 클래스의 복잡성은 컴포넌트 활용 및 재사용에 장벽이 되었다. 함수 컴포넌트, hook이라는 날개를 달다 사람들은 단순한 함수 컴포넌트를 찾기 시작했다. 함.. 더보기
[React] 공식문서로 시작하는 리액트 입문 2편 글이 생각보다 길어져 두 편으로 나누어 작성하게 되었다. 1편에 이어, 리액트는 공식 홈페이지의 '기본 가이드'를 조건부 렌더링 개념부터 이어서 살펴보겠다. 07. 조건부 렌더링 리액트에서는 각 컴포넌트에 원하는 동작을 캡슐화해두고, 조건에 따라 렌더링하게 할 수 있다. A or B 렌더링 애플리케이션의 상태에 따라서 여러 컴포넌트 중 하나만 렌더링할 수 있다. JavaScript의 조건문 활용하거나 JSX 내에서 논리연산자(&&, ?)등을 활용하면 된다. 이 때 조건에 따라 선택된 요소(element)를 저장하기 위해 let으로 선언한 변수를 사용할 수도 있다. 만약 조건식이 너무 복잡해진다면 컴포넌트를 분리해야하는 타이밍이 아닌지 생각해보자. // JavaScript 조건문 활용 function Gr.. 더보기
[React] 공식문서로 시작하는 리액트 입문 1편 우아한테크코스 프론트엔드 과정의 레벨 2는 리액트로 진행된다고 한다. 레벨2를 앞두고 아주 기초적인 개념이라도 훑어보려고 한다. 리액트는 공식 홈페이지에서 제공하는 공식문서가 잘 정리되어있다고 해서 가볍게 문서만 읽고 정리해보자. ( + 리액트의 공식문서는 풍부한 사전지식을 전제로 한 설명이 섞여 있어 친절한 편은 아니라고 한다...! ) 공식 홈페이지를 훑어보니 크게 주요 개념을 단계적으로 설명해주는 '기본 가이드'와 실습 위주로 간단한 게임을 따라 만드는 '실전 튜토리얼'로 구성되어 있었다. 이 글에서는 '기본 가이드'의 개념 위주로 정리하겠다. 01. 왜 리액트일까? 페이스북에서 리액트를 만든 이유 2013년 5월, 페이스북에서 '리액트'를 발표했다. 그리고 같은 해 7월 Facebook Devel.. 더보기
웹팩(Webpack) 밑바닥부터 설정하기 최근 웹팩을 설정해서 과제를 제출했다. 웹팩을 '활용'했다고 하기에는 사용한 기능이 빙산에 일각에 불과한데, 이마저도 대부분을 페어로부터 배웠다,,, 혼자 해보면 정말 못할 것 같아서, 다시 처음부터...! 정리를 해보려고 한다. 웹팩 설정 파일(webpack.config.js)을 차근차근 완성해가며 웹팩의 주요 개념을 익혀보자. 0. 웹팩(webpack)이란? 웹팩 공식 Github 에서는 웹팩을 '모듈(module)'을 위한 '번들러(bundler)' 라고 소개한다. 웹팩에 대해 알아보려면 '모듈'과 '번들러'가 무엇인지부터 알아보아야겠다. webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage.. 더보기
쉽게 쓰인 유튜브 API 튜토리얼 유튜브에서 제공하는 API를 이용하면 내가 만든 웹페이지에서 유튜브와 관련된 다양한 기능을 추가할 수 있다. '영상 검색하기'를 기준으로 유튜브 API 기본 사용법을 익혀보자. 1. API 키 발급부터 KEY 없이는 API를 쓸 수 없다! API를 사용하기 위해서는 먼저 key를 발급받아야 하고, key를 발급받기 위해선 구글 계정이 필요하다. 인증 없이는 대부분의 API를 사용할 수 없어서 구글 계정이 반드시 필요하다. 구글 계정이 준비되었다면 구글 개발자 콘솔(Google Dev Console) 로 접속하고 하단 왼쪽 그림과 같이 새 프로젝트를 생성한다. 만들기 버튼을 누르면 잠시의 로딩 끝에 하단 오른쪽 그림과 같이 프로젝트 생성이 완료된다. 'API 및 서비스 사용 설정'을 클릭하자. 'API 및.. 더보기
cypress - stub 사용법, Alert 테스트 예제, 이벤트타입 'stub' 란? cypress에서 'stub'는 함수가 어떻게 사용되었는지 기록하고 프로그래머가 '함수의 동작을 컨트롤' 할 수 있게 해 준다. 영단어 'stub'는 '그루터기(초목을 베고 남은 밑동)' 또는 '뿌리째 뽑아낸다'는 뜻이다. 비슷한 기능을 가진 'spy'가 스파이처럼 기존 함수를 건드리지 않고 정보만 전달하는 반면, 'stub'는 프로그래머 마음대로 무엇이든 할 수 있도록 통째로 뽑아왔다는 의미에서 'stub'로 지은 게 아닐까 싶다. 'stub'는 유닛 테스트에 가장 흔하게 사용되지만 통합 테스트나 E2E 테스트에서도 유용하다. stub 간단 사용법 stub는 cy.stub() 와 같이 cy 뒤에 체이닝 해서 사용한다. 리턴값이 체이닝 가능한 객체가 아니라 stub이기 때문에 stub .. 더보기
cypress - 테스트 주도 개발(TDD, BDD) 적용 백엔드와 달리 프론트엔드는 테스트 주도 개발(TDD)을 할 수 있는 환경이 잘 갖춰져 있지는 않지만, 테스트도구 사용자들은 만족도가 높은 편이라고 한다. 테스트 도구 중 하나인 cypress는 브라우저 기반의 GUI를 지원하고 문서 정리가 잘되어있어 진입장벽이 낮다. 용어부터 정리하고 넘어가자. 관련용어 정리 TDD(Test-Driven Development) 요구사항에 걸맞는 테스트 케이스를 우선 작성한 다음 ,각 테스트를 통과하기 위한 최소한의 코드를 작성하고 리팩토링 하는 프로그래밍 방식이다. 테스트의 단위는 함수 단위로 매우 작고 거의 모든 함수가 테스트 대상에 포함된다. 모듈크기를 작게하고 모듈간 의존성을 작게한다. add(1, 1)이 2인지 확인하는 것은 TDD 이다. BDD(Behaviour.. 더보기
네트워크 면접질문 총정리 Get Post 메서드를 비교해주세요 GET과 POST 모두 클라이언트가 서버로 요청을 보낼 때 사용하는 HTTP 메서드입니다. GET은 CRUD의 R 즉, 리소스의 조회를 할 때 사용하고, POST는 CRUD의 C 즉, 리소스를 생성해서 서버에 저장할 때 사용합니다. POST의 경우 GET과 달리 바디에 내용을 담아 보낼 수 있어, 단순히 URL로 리소스를 요청하는 GET 뿐만 아니라 대부분의 메서드를 대체할 수 있지만 특별한 경우가 아니라면 각각의 메서드에 맞는 역할로 사용하는 것이 좋습니다. (POST, GET, PUT, DELETE 이 4가지의 Method를 가지고 CRUD를 할 수 있습니다.) TCP UDP 방식을 비교해주세요 TCP와 UDP 모두 네트워크 계층 중 전송계층에서 사용하는 프로토콜.. 더보기

티스토리툴바