1. GraphQL GraphQL은 클라이언트 요청에 따라 트리 구조의 JSON 데이터를 유연하게 응답으로 전송하고자 하는 쿼리 언어. REST API를 사용하면 엔드포인트에 해당하는 각각의 요청을 하나하나 따로 보내야 하는 것에 비해, GraphQL을 사용하면 하나의 요청에 묶어서 보낼 수 있는 장점이 있음. A. 특징(REST API vs. GraphQL) REST API: Resource의 형태와 데이터 요청 방법이 연결되어 있지만, GraphQL: Resource의 형태와 데이터 요청 방법이 완전히 분리되어 있음. // GET /books/1 { "title": "Romance of the Three Kingdoms", "author": { "firstName": "Luo", "lastName":..
1. 스택(Stack) 후입선출 원칙(가장 나중에 입력된 값이 가장 먼저 나감)에 따라 데이터를 추가하거나 제거하는 자료 구조. A. 배열을 이용한 방법 const stack =[]; stack.push("element"); // 데이터 추가 stack.pop("element"); // 데이터 제거 B. 리스트를 이용한 방법 배열을 이용했을 때, 데이터 추가/제거 모두 O(1)의 시간 복잡도를 가지기 때문에 배열로 스택을 구현하는 것도 나쁜 선택은 아님. 하지만, 스택에서는 배열처럼 인덱스로 접근할 필요도 없고, Javascript의 배열 내장 메서드도 필요 없기 때문에 별도의 클래스를 만들어서 사용하는 것도 좋은 방법. 단일 연결 리스트를 이용해 스택을 구현할 수 있음. 단일 연결 리스트에서 데이터를 ..
1. 이진 힙(Binary Heap) 완전 이진 트리의 일종으로, 여러 개의 값들 중에서 최댓값이나 최솟값을 빠르게 찾아내도록 만들어진 자료구조. 힙은 느슨한 정렬 상태(상위에 있는 노드의 값은 항상 하위 자식 노드의 값보다 큼/작음)를 유지함 A. 이진 힙의 종류 ① 최대 힙: 부모 노드의 키 값이 자식 노드의 키 값보다 크거나 같은 이진 힙 ② 최소 힙: 부모 노드의 키 값이 자식 노드의 키 값보다 작거나 같은 이진 힙 B. 용어 a. 이진 트리: 각 노드가 최대 2개의 자식 노드를 가지는 트리 b. 완전 이진 트리: 마지막 depth를 제외한 모든 depth가 완전히 채워져 있는 트리로, 마지막 depth는 꽉 차있을 필요는 없지만 노드가 왼쪽에서 차례대로 채워져 있어야 함. 2. 최대 힙: 삽입(..
우선 webpack.config.js 파일을 작성해 줌. module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'app.bundle.js', } } React 앱을 빌드하기 위해서 필요한 로더에는 JSX 표현을 웹 브라우저에서 읽을 수 있는 표현으로 바꿔주는 babel-loader, Javascript 파일에서 CSS 파일을 불러오기 위한 style-loader, css-loader, HTML도 같이 컴파일해서 빌드해주는 html-webpack-plugin가 있음. 1. style-loader, css-loader 설정하기 npm ins..
1. React에서 환경 변수 사용하기 Create-React-App으로 React 앱을 만들면 React 환경 변수를 자동으로 잡아주기 때문에 프로젝트 최상위 위치에 .env.develpoment, .env.production을 만들어 REACT_APP_로 시작하는 환경 변수를 사용할 수 있음 // .env.development REACT_APP_CLIENT_KEY = 123456 REACT_APP_CLIENT_ID = react 이렇게 설정한 환경 변수는 dotenv 등 별도의 모듈 설치 없이 process.env로 접근이 가능함. // App.js const TEST = process.env.REACT_APP_TEST 2. Webpack 빌드 A. dotenv 모듈 # 우리가 React에서 사용할 ..
정규 표현식 ko.javascript.info RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 1. Javascript에서 정규표현식 사용하기 String.replace(), String.match() 등의 메서드는 정규표현식을 사용할 수 있는데 아래와 같은 형식으로 정규표현식을 넣어줄 수 있음. / /* 정규표현식 삽입 */ /플래그 const str = "a..bcd."; str.match(/[a-z]/); // 소문자 a~z까지 검사 str.replace(/\./g, "") // 모든 "." 문자를 제거(빈 문자..
1. Webpack의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가함. 이 모듈 단위의 파일들을 호출을 해 브라우저에 띄워야 하는데, JavaScript 언어의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때에 생겨나는 네트워크 쪽의 코스트도 신경써줘야만 했음. 그래서 이런 복잡성에 대응하기 위해 하나의 시작점(ex. React App의 index.js)으로부터 의존성을 가지는 모듈†을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 됨. † 의존적 관계에 있는 파일들(import, export..
CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ... heropy.blog 1. Grid 행과 열 Grid 레이아웃은 행과 열로 이루어져 있는데, 최상단 지점부터 1번째 행/열로 지정됨. 예를 들어, 2번째 행와 3번째 행, 1번째 열과 2번째 열 영역에 위치에 있는 grid item은 grid-area: 2/1/3/2로 표현할 수 있음. (TIP: (2, 1) 지점과 (3, 2) 지점 내부) 2. grid-area grid-area: /* 시작 행 */ /* 시작 열 */ /* 끝 행 */ /* 끝 열 */; 어떠한 요소의 위치를 지정하는 방법으로,..
JavaScript 2022. 8. 2. 17:46
구조 분해 할당 ko.javascript.info 1. 구조분해 할당(Destructuring Assignment) const [left, right] = [1, 2]; const { data } = { data: [0, 1, 2, 3] } console.log(left); // 1 console.log(data); // [0, 1, 2, 3] 배열, 객체 구조분해 할당의 기본적인 사용법은 위와 같음. 2. 원하는 속성을 다른 변수명으로 지정하기 const obj = { data: { id: 1, title: "제목", date: "2022-08-01" } } const { data: entry } = obj; console.log(data); // Uncaught ReferenceError: data ..
APIs 2022. 8. 2. 12:20
1. GraphQL GraphQL은 클라이언트 요청에 따라 트리 구조의 JSON 데이터를 유연하게 응답으로 전송하고자 하는 쿼리 언어. REST API를 사용하면 엔드포인트에 해당하는 각각의 요청을 하나하나 따로 보내야 하는 것에 비해, GraphQL을 사용하면 하나의 요청에 묶어서 보낼 수 있는 장점이 있음. A. 특징(REST API vs. GraphQL) REST API: Resource의 형태와 데이터 요청 방법이 연결되어 있지만, GraphQL: Resource의 형태와 데이터 요청 방법이 완전히 분리되어 있음. // GET /books/1 { "title": "Romance of the Three Kingdoms", "author": { "firstName": "Luo", "lastName":..
알고리즘 2022. 8. 1. 14:55
1. 스택(Stack) 후입선출 원칙(가장 나중에 입력된 값이 가장 먼저 나감)에 따라 데이터를 추가하거나 제거하는 자료 구조. A. 배열을 이용한 방법 const stack =[]; stack.push("element"); // 데이터 추가 stack.pop("element"); // 데이터 제거 B. 리스트를 이용한 방법 배열을 이용했을 때, 데이터 추가/제거 모두 O(1)의 시간 복잡도를 가지기 때문에 배열로 스택을 구현하는 것도 나쁜 선택은 아님. 하지만, 스택에서는 배열처럼 인덱스로 접근할 필요도 없고, Javascript의 배열 내장 메서드도 필요 없기 때문에 별도의 클래스를 만들어서 사용하는 것도 좋은 방법. 단일 연결 리스트를 이용해 스택을 구현할 수 있음. 단일 연결 리스트에서 데이터를 ..
JavaScript/React 2022. 7. 31. 19:29
const Toast = ({ text, dismissTime }) => { // dismissRime: Toast 컴포넌트가 언마운트되는 시간 const [isFading, setIsFading] = useState(false); // 클래스 부여에 이용할 State useEffect(() => { let mounted = true; setTimeout(() => { if (mounted) { setIsFading(true); } }, dismissTime - 500) // 애니메이션 시간만큼 빼서 setTimeout() 실행 return () => { mounted = false } }, []) // 'fade-out' 클래스가 있으면 사라지는 애니메이션 실행 return ( {text} ) } To..
알고리즘 2022. 7. 27. 15:21
1. 이진 힙(Binary Heap) 완전 이진 트리의 일종으로, 여러 개의 값들 중에서 최댓값이나 최솟값을 빠르게 찾아내도록 만들어진 자료구조. 힙은 느슨한 정렬 상태(상위에 있는 노드의 값은 항상 하위 자식 노드의 값보다 큼/작음)를 유지함 A. 이진 힙의 종류 ① 최대 힙: 부모 노드의 키 값이 자식 노드의 키 값보다 크거나 같은 이진 힙 ② 최소 힙: 부모 노드의 키 값이 자식 노드의 키 값보다 작거나 같은 이진 힙 B. 용어 a. 이진 트리: 각 노드가 최대 2개의 자식 노드를 가지는 트리 b. 완전 이진 트리: 마지막 depth를 제외한 모든 depth가 완전히 채워져 있는 트리로, 마지막 depth는 꽉 차있을 필요는 없지만 노드가 왼쪽에서 차례대로 채워져 있어야 함. 2. 최대 힙: 삽입(..
기타 2022. 7. 26. 17:14
우선 webpack.config.js 파일을 작성해 줌. module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, './dist'), filename: 'app.bundle.js', } } React 앱을 빌드하기 위해서 필요한 로더에는 JSX 표현을 웹 브라우저에서 읽을 수 있는 표현으로 바꿔주는 babel-loader, Javascript 파일에서 CSS 파일을 불러오기 위한 style-loader, css-loader, HTML도 같이 컴파일해서 빌드해주는 html-webpack-plugin가 있음. 1. style-loader, css-loader 설정하기 npm ins..
기타 2022. 7. 26. 15:48
1. React에서 환경 변수 사용하기 Create-React-App으로 React 앱을 만들면 React 환경 변수를 자동으로 잡아주기 때문에 프로젝트 최상위 위치에 .env.develpoment, .env.production을 만들어 REACT_APP_로 시작하는 환경 변수를 사용할 수 있음 // .env.development REACT_APP_CLIENT_KEY = 123456 REACT_APP_CLIENT_ID = react 이렇게 설정한 환경 변수는 dotenv 등 별도의 모듈 설치 없이 process.env로 접근이 가능함. // App.js const TEST = process.env.REACT_APP_TEST 2. Webpack 빌드 A. dotenv 모듈 # 우리가 React에서 사용할 ..
JavaScript 2022. 7. 25. 14:23
정규 표현식 ko.javascript.info RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 1. Javascript에서 정규표현식 사용하기 String.replace(), String.match() 등의 메서드는 정규표현식을 사용할 수 있는데 아래와 같은 형식으로 정규표현식을 넣어줄 수 있음. / /* 정규표현식 삽입 */ /플래그 const str = "a..bcd."; str.match(/[a-z]/); // 소문자 a~z까지 검사 str.replace(/\./g, "") // 모든 "." 문자를 제거(빈 문자..
기타 2022. 7. 25. 12:36
1. Webpack의 등장 모던 웹으로 발전하면서 JavaScript 코드의 양이 절대적으로 많이 증가했고, 또 대규모의 의존성 트리를 가지고 있는 대형 웹 애플리케이션이 등장하므로써 세분화된 모듈 파일이 폭발적으로 증가함. 이 모듈 단위의 파일들을 호출을 해 브라우저에 띄워야 하는데, JavaScript 언어의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때에 생겨나는 네트워크 쪽의 코스트도 신경써줘야만 했음. 그래서 이런 복잡성에 대응하기 위해 하나의 시작점(ex. React App의 index.js)으로부터 의존성을 가지는 모듈†을 모두 추적하여 하나의 결과물을 만들어내는 모듈 번들러가 등장하게 됨. † 의존적 관계에 있는 파일들(import, export..
CSS 2022. 7. 24. 16:10
CSS Grid 완벽 가이드 CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ... heropy.blog 1. Grid 행과 열 Grid 레이아웃은 행과 열로 이루어져 있는데, 최상단 지점부터 1번째 행/열로 지정됨. 예를 들어, 2번째 행와 3번째 행, 1번째 열과 2번째 열 영역에 위치에 있는 grid item은 grid-area: 2/1/3/2로 표현할 수 있음. (TIP: (2, 1) 지점과 (3, 2) 지점 내부) 2. grid-area grid-area: /* 시작 행 */ /* 시작 열 */ /* 끝 행 */ /* 끝 열 */; 어떠한 요소의 위치를 지정하는 방법으로,..