# Stack - Stack은 데이터를 쌓아올리는 형태로 구성 - 데이터를 쌓아올릴 때, 정해진 방향으로만 데이터를 쌓아올릴 수 있음 - 데이터를 삽입하거나 삭제할 때, top으로 정해진 곳으로만 접근해 삽입, 삭제 작업을 수행할 수 있음 - top을 통해 들어온 데이터가 바닥에서부터 쌓이는 구조이므로 나중에 들어온 자료에 먼저 접근할 수 있고, 먼저 들어온 자료들은 나중에 들어온 자료들이 전부 삭제된 다음에 접근할 수 있음 => 후입선출구조 (Last in First out: LIFO) ## Stack의 사용 예시 - 컴퓨터 시스템 (시스템 스택, 실행시간 스택: 프로그램의 실행 순서를 관리) - 함수의 콜스택 - 브라우저의 방문기록 (뒤로가기) - 실행취소 - 후위표기법의 계산 - 하노이 탑 - 재귀..

## Grid: ### Why we use CSS-Grid? #### Flexbox로는 Grid를 만들기가 어렵다 flex box에서는: 1. 요소들을 정렬한 뒤, 첫째줄을 제외한 다른 요소들의 공백을 맞춰주려면 요소마다 개별적으로 margin 등을 적용해야 한다. 2. 요소들을 순서대로 격자모양으로 배치하는 것이 어렵다. - flex box에서 justify-content / align-items: space-between 을 적용했을 때: 1 2 3 4 5 body { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } div { width: 200px; height: 200px; backgroun..

* Node.js - 자바스크립트의 런타임 - 런타임은 프로그래밍 언어가 구동되는 환경을 뜻하며, 브라우저 역시 자바스크립트의 런타임 - Node.js로 자바스크립트는 브라우저 바깥에서 구동될 수 있게 되었고, 자바스크립트로 서버 등의 구축이 가능해짐 - 자바스크립트를 node 환경에서 실행할 수 있음 * NVM - node.js의 버전관리 (Node Version Manager) - NVM을 사용하는 이유: 1. 특정 node 버전에서만 실행되는 코드가 있을 수 있기 때문에 node를 버전별로 관리해줘야 할 필요가 있음 2. 호환성 문제 (너무 상위버전의 node.js를 사용한다면 호환이 잘 되지 않는 경우가 생길 수 있음) - NVM으로 node.js 설치하기 1. 설치: $ nvm install 2..

* Closure - 외부함수의 변수들에 접근 가능한 내부함수를 의미 - 해당 내부함수는 함수 자체로 외부함수에서 리턴되는 형태 pass me를 풀 때, 피보나치 수를 구하는 문제를 이 클로저 함수를 이용해서 풀었지만 함수의 호출이 끝났을 때 함수와 관련된 내부 변수들이 제거되는 것으로 알고 있어서, makeFib 안의 num1, num2가 왜 계속 기억되는지 제대로 이해하지 못하고 일단 작동은 하니 pass me를 제출했었다. 이번에 해당 문제를 예시로 클로저에 대해 좀 더 자세히 알아보려고 한다. /* fn을 호출할 때마다 호출한 횟수 n에 해당하는 n번째의 피보나치 수를 출력 */ const makeFib = () => { let num1 = 0; // 첫번째 숫자 저장 let num2 = 1; /..

## SCSS: ### Preprocessors and Set Up 1. SCSS는 기본적으로 css의 전처리기 - css의 전처리기 (preprocessor): SCSS -> 컴파일 -> CSS 코드 - css의 다른 preprocessor: stylus, less 등 2. SCSS가 Sass의 공식 syntax (둘이 같다고 생각하면 됨) 3. 컴파일하거나 빌드하는 단계가 필요 - gulp나 webpack을 이용 - 만들어진 gulp / webpack은 예시) styles.scss 등의 특정 파일을 css파일로 컴파일 - index.html은 컴파일된 css파일을 가리키고 있어야 함 (브라우저는 scss를 이해 못하기 때문) ### Concepts 1. Variables - scss파일들이 들어 있는..

최근 프리코스를 수료하고 어떤 것들을 더 공부해볼까 고민하다가, 가볍게 리액트를 맛보기로 했다. 사실 예전에 노마드코더의 리액트 무료강의를 들었던 적이 있었는데, node나 npm에 대해서 하나도 모르는 상태에서 따라치기만 급급해 제대로 이해를 하지 못하고 넘어갔던 기억이 있다. 이번에는 제로초님의 리액트 웹게임 강좌를 바탕으로 기초 내용부터 차근차근 이해하는 것이 목표! 6강까지의 초급 강의를 먼저 듣고, 배운 것들을 활용해보고 싶어서 프리코스 과제였던 twittler를 react로 구현해보기로 했다. 강의에서도 class와 hooks를 번갈아 가며 사용해서, 웬만하면 둘 다 구현해볼 생각이고, hooks에 조금 더 관심이 가서 hooks로 먼저 구현해보았다. 먼저 화면을 구성할 컴포넌트로 나누고, 각..