코드스테이츠 SEB FE 41기/Section 별 내용 정리 (67) 썸네일형 리스트형 section4/Unit7/[Testing] TDD TDD 방법론 TDD(Test-driven Development)는 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론이다. 다시 말해, 개발자 자신이 바람직하다고 생각하는 코드의 결과를 미리 정의하고, 이것을 바탕으로 코드를 작성하는 법이다. TDD를 통해 소프트웨어를 개발한다는 것은 작은 단위의 테스트 케이스를 작성하고, 이를 통과하는 코드를 작성하는 과정을 반복하는 것을 의미한다. TDD의 개발 주기를 그림으로 나타내면 아래와 같이 총 3단계로 이루어진다. Write Failing Test: 실패하는 테스트 코드를 먼저 작성한다. Make Test Pass: 테스트 코드를 성공시키기 위한 실제 코드를 작성한다. Refactor: 중복 코드 제거, 일반화 등의 리팩토링을 수행한다. 이 과정에서.. section4/Unit6/[API] GraphQL GraphQL GraphQL은 페이스북에서 만든 쿼리 언어이다. 2016년 처음으로 등장해 현재까지 인지도 및 만족 부분에서 높은 비율을 차지하고 있는 언어이기도 하다. GraphQL이란? GraphQL은 오픈 소스로 제공된 쿼리 언어이다. Graph + Query Language의 줄임말로 Query Language 중에서도 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻한다. 쉽게 말해 API를 위한 쿼리 언어라고 할 수 있다. 왜 GraphQL을 사용하나요? GraphQL의 아이디어는 그래프로 생각하기에서부터 출발한다. 그래프라는 자료구조는 인간의 뇌 구조 및 언어적인 설명과 비슷하기 때문에 실제 현실 세계의 많은 현상들을 모델링할 수 있는 강력한 도구이다.. section4/Unit5/[컴퓨터 공학] 기초(11/30) 컴퓨터구조 컴퓨터는 단순하게 말하자면 하드웨어와 소프트웨어가 합쳐진 형태이다. 하드웨어란 전자 회로 및 기계 장치로 되어 있어 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있다. 소프트웨어는 그 하드웨어 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램이다. 컴퓨터의 기본 구성 요소 컴퓨터는 키보드와 마우스로 입력을 받아들이고, 모니터를 통해 출력한다. 또한 그런 화면을 출력하기 위해 컴퓨터의 어디선가는 연산하고 있을 것이고, 여러분이 필요에 따라 복사한 텍스트나 이미지 같은 것들을 기억하거나, 혹은 만들어진 파일을 영구적으로 저장하는 등의 기능 또한 하고 있다. 컴퓨터는 입력장치(Input), 출력장치(Output)가 갖춰져 있고, 내부에는 연산을 하기 위한 중앙처리장치(CPU), .. section4/Unit4/[React] 심화(11/29) 과제 : React Hooks 적용하기 1. json-server 설치 가짜 REST API 서버를 이용하여 json 데이터를 직접 받아와 실제 블로그처럼 되도록 코드를 작성한다. 먼저 가짜 서버를 설치한다. // json-server는 라이브러리로, json 파일을 이용하여 REST API 서버를 구축해주는 라이브러리이다. // 터미널을 열어 npm을 이용해 전역 설치를 해준다. react 앱 파일 내에 설치하면 제대로 작동하지 않을 수 있다. $ npm i -g json-server // 그 다음에 앱 내에 존재하고 있는 data 폴더로 이동한 뒤, 다음 명령어를 입력해 준다. // —port 3001이라는 옵션을 뒤에 붙여주지 않으면 json-server는 저절로 3000번 포트를 점유하고 // 서.. section4/Unit4/[React] 심화(11/28) Custum Hooks 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용할 수 있다. 여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다. 이를 이용하면 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점이 있다. (e.g. useSomething) 예를 들어 이런 컴포넌트가 있다고 보자. 해당 컴포넌트는 실제 React 공식 문서에 있는 컴포넌트이다. //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function F.. section4/Unit4/[React] 심화(11/25) React 심화 Virtual DOM React에는 Virtual DOM이라고 하는 가상의 DOM 객체가 있다. 이는 실제 DOM의 사본 같은 개념으로, React는 실제 DOM 객체에 접근하여 조작하는 대신 이 가상의 DOM 객체에 접근하여 변화 전과 변화 후를 비교하고 바뀐 부분을 적용한다. Virtual DOM이 나오게 된 배경 Virtual DOM은 Real DOM의 가벼운 사본과 같다. DOM을 Real DOM으로 부르는 이유는 Virtual DOM과 구분하기 위해서라고 생각하면 된다. Real DOM (DOM) Virtual DOM이 나오게 된 배경을 보기 전에, DOM의 개념을 다시 정리해 보도록 하자. DOM은 Document Object Model의 약자로, 뜻을 그대로 풀자면 문서 객체.. section4/Unit3/[HTML/CSS] 심화(11/24) 웹팩과 리액트 리액트 개발에 꼭 필요한 라이브러리 1. react, react-dom 너무나 당연한 이야기지만, 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom은 꼭 필요하다. 2. babel React를 학습하기 전, JSX부터 배워야 했었다. 그런데, 브라우저에서 JavaScript는 읽을 수 있지만 JSX는 읽을 수 없다. 지금까지 React를 JSX로 작성해왔는데브라우저에서 내가 만든 React 애플리케이션을 볼 수 있었던 이유는 create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해줬기 때문이다. 참고로 babel은 JSX를 JavaScript로 변경하여 e.. section4/Unit3/[HTML/CSS] 심화(11/23) 번들링 번들링은 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음이다. 웹펙 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다. Webpack이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러를 의미한다. 모듈 번들러란 HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링(빌드)하는 도구이다. 모듈 번들러(Module Bundler)의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가했다. 이 모듈 단위의 파일들을 호출을 해 브라우저에 띄워야 하는데.. 이전 1 2 3 4 5 ··· 9 다음
