분류 전체보기 (501) 썸네일형 리스트형 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), .. [알고리즘/javascript]quickSort 문제 정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다. 입력 인자 1 : arr number 타입을 요소로 갖는 배열 arr[i]는 정수 arr.length는 100,000 이하 출력 number 타입을 요소로 갖는 배열을 리턴해야 합니다. 배열의 요소는 오름차순으로 정렬되어야 합니다. arr[i] [1, 3, 21] Advanced quickSort 함수의 두 번째 인자로 callback 함수를 받아서, 그 함수의 리턴값을 기준으로 요소들을 정렬해 보세요. 코드 naive solution const quickSort = function (arr) { // 리스트의 크기가 0 또는 1이 될 때까지 반복한다(더 이상 분할이 불가능 할 때까지) if (arr.length [알고리즘/javascript]insertionSort 문제 정수를 요소로 갖는 배열을 입력받아 오름차순으로 정렬하여 리턴해야 합니다. 입력 인자 1 : arr number 타입을 요소로 갖는 배열 arr[i]는 정수 arr.length는 1,000 이하 출력 number 타입을 요소로 갖는 배열을 리턴해야 합니다. 배열의 요소는 오름차순으로 정렬되어야 합니다. arr[i] [1, 3, 21] Advanced insertionSort 함수의 두 번째 인자로 callback 함수를 받아서, 그 함수의 리턴값을 기준으로 요소들을 정렬해 보세요. 코드 naive solution const insertionSort = function (arr) { // TODO: 여기에 코드를 작성합니다. let key,i,j; // 맨 앞 요소는 이미 정렬되었다고 가정하고 i=1.. 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.. 이전 1 ··· 39 40 41 42 43 44 45 ··· 63 다음