html, css, js
1.HTML과 CSS
html은 웹페이지의 구조를 결정하고 css는 웹페이지의 스타일을 설정한다.
2.CSS의 pseudo class
CSS를 이용해서 간단하게 문서를 더 생동감있게 만들 수 있다.
3.자바스크립트 기초 문법 정리 - 1
자바스크립트의 문법은 내 생각엔 파이썬과 자바가 섞여있으면서도 완전히 다른 점도 많았다. 나중에 혼란이 오지 않도록 여기에 기록 해두기로 한다.
4.자바스크립트 기초 문법 정리 - 2
함수, 조건문, 반복문
5.backtick(백틱)을 사용한 문자열
자바스크립트에서 백틱은 쉼표와는 다르다.
6.flex 박스
flexbox를 사용하면, 더 쉽게 화면을 구성할 수 있다.
7.DOM과 JS
DOM : Document Object Model, javascript를 통해서 DOM을 조작하여 HTML을 변경할 수 있다.
8.자바스크립트 고차함수와 메서드
자바스크립트에서 일급객체는 변수에 할당이 가능하며 다른 함수의 인자로 전달이 가능하고, 다른 함수의 결과로 리턴이 가능하다. 고차함수는 함수를 인자로 받을 수 있고(콜백함수), 함수의 형태로 리턴할 수 있는(커리함수) 함수를 의미한다.
9.클로저(Closure)
자바스크립트는 기본적으로 함수 내부에서 선언된 변수를 외부에서 접근할 수 없다.
10.자바스크립트 메소드 정리
유용하게 사용했던 자바스크립트 메소드를 정리한다.
11.Array.some() 과 Array.every()
Array.some() 과 Array.every()을 이용하면, 각각 배열의 원소들이 특정 조건을 만족하는지 확인할 수 있다.
12.JSON과 StringifyJSON
JSON(JavaScript Object Notation)은 데이터 교환을 위해 만들어진 객체 형태의 포맷이다.
13.자바스크립트 비동기, 동기
자바스크립트는 비동기로 작동한다. 하지만 웹 페이지의 로딩을 기다리거나, 입력을 기다리거나, 다운로드가 완료된 후에 실행되야 하는 코드가 있을 수 있다. 따라서 이때는 동기적으로 작동이 될 수 있도록 한다.
14.자바스크립트의 timer와 관련된 Web APIs
callback 함수를 일정 시간에 따라 실행할 수 있도록 도와주는 API에 대해서 정리해둔다.
15.자바스크립트 함수의 arguments 객체
자바스크립트의 함수의 인자는 명시적으로 작성되지 않을 수 있다. 이때, 함수의 인자를 사용할 수 있게 arguments 객체가 존재한다.
16.비동기적으로 웹페이지 구성 - Ajax
Ajax(Asynchronous JavaScript and XML)를 사용한 웹페이지를 방문했을 때, 웹페이지가 새로운 데이터로 갱신되었다면 필요한 부분에 필요한 데이터만 비동기적으로 받아와 렌더링 된다.
17.node.js 환경에서 fetch 사용하기
브라우저에서 멀쩡히 돌아가던 코드라도, fetch가 있다면 node.js 환경에서 에러가 발생한다.
18.CORS(Cross-Origin Resource Sharing)에 대해서
CORS는 추가적인 HTTP header로 어떤 origin의 허가를 받았는지 확인한다.
19.순수 node.js로 간단한 서버 만들기
순수 nodejs로 간단하게 웹 서버를 만드는 방법을 정리합니다. 참고 자료 : https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/
20.express를 사용해 node.js로 서버 만들기
Node.js 환경에서 Express.js는 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크입니다.
21.parseInt와 Number, substr과 substring
자바스크립트에는 유사한 기능을 제공하는 함수들이 있다. 대표적으로 parseInt와 Number, substr과 substring이 있는데, 이들이 구체적으로 어떻게 다른지 예시로 기록한다.
22.express API의 query, params, body
express를 사용하여 서버를 만들면 URI를 통해서 API를 사용할 수 있다. API 문서를 통해서 서버의 자원을 사용할 수 있다.
23.환경 변수 (리눅스, dotenv, 리액트에서 dotenv)
리눅스에서는 이미 많은 환경변수들이 사용되고 있다. node.js 환경에서는 dotenv 모듈을 사용하여 환경변수를 사용할 수 있다.
24.TypeScript 시작하기
C언어나 자바를 사용했었던 나에게 파이썬이나 자바스크립트는 어색한 부분이 있었다.
25.React에서 Typescript 정리
리액트에서 타입스크립트를 사용하며 기존의 자바스크립트에서 사용했던 문법과 달랐던 점을 정리하기로 했다.
26.자바스크립트에서의 호이스팅(hoisting)
선언한 변수가 맨 위 상단으로 끌어올려져 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 호이스팅이라고 한다.
27.자바스크립트의 원시타입과 참조타입
자바스크립트는 두 가지 종류의 데이터 타입을 가진다.
28.DOM과 CSSOM, 브라우저 렌더링 과정
브라우저에서 데이터를 받아 렌더링이 일어나는 과정을 정리하기로 하였다.
29.자바스크립트의 스코프와 실행 컨텍스트
자바스크립트의 스코프와 실행 컨텍스트에 대해서 정리하기로 하였다.
30.자바스크립트의 이벤트 루프
자바스크립트에서 자주 접하게 되는 개념인 이벤트 루프에 대해서 정리한다.
31.자바스크립트 Set
종종 알고리즘 문제를 풀다보면, Set을 사용할 때가 있다. 다만, Set은 기존의 배열과 사용되는 메서드가 다르기에 헷갈리지 않도록 글을 남기기로 했다.
32.자바스크립트 sort() 메서드
sort를 사용하면서, 실상 sort를 잘 알지 못 하는데 관습적으로 사용하고 있다는 느낌을 받았다. sort에 대해서 더 잘 이해하고 잘 사용할 수 있도록 sort에 대해서 알아보기로 하였다.
33.자바스크립트 배열에서 찾기
배열에서 데이터를 찾는 방법으로 여러 방법이 있다. find 메서드, findIndex 메서드, indexOf 메서드, includes 메서드를 정리한다.
34.HTML 더 잘 사용하기
과거 확장자의 글자수가 제한되어 있었을 때 htm이 사용되었다.
35.자바스크립트 특징 정리
자바스크립트에 대해서 더 알게된 점을 정리한다.
36.자바스크립트 class
ES6부터 자바스크립트에서도 class 문법이 지원된다.
37.자바스크립트 ES6 문법
ECMAScript 2015(ES6)에서 새로 추가된 기능들이 많다. ES6의 codename은 Harmony이다.
38.Promises
Promises는 자바스크립트에서 비동기를 처리하기 위해서 사용된다.
39.SCSS 사용하기
SCSS는 CSS를 편하게 사용하고 코딩하듯이 사용하기 위해서 만들어졌다. Sass 버전 3에 추가된 것이 Scss이다.
40.자바스크립트 index 추출 메서드 Array(number).keys()
자바스크립트를 사용하며 때때로 1이나 0부터 시작하여 값이 1씩 증가하는 배열을 사용해야할 필요가 있었다.
41.@keyframes 사용하기
웹사이트에 다양한 애니메이션 효과를 부여하고 싶다면, keyframes을 사용할 수 있다.
42.forEach와 async await
forEach는 promises를 기다리지 않기에 async await 구문 역시 동작하지 않는다.
43.javascript undefined와 null
undefined는 변수에 값이 할당되지 않은 상태이다. null은 변수에 값이 할당된 상태이다.