# Web

- [Next.js](/fork-my-brain/web/next.js.md)
- [\[Next.js\] CSS모듈과 복수의 class 사용하기](/fork-my-brain/web/next.js/next.js-css-class.md): 이 글에서는 next.js 프레임워크를 사용한 리액트 프로젝트에 CSS 모듈을 적용하는 방법과 classnames 라이브러리를 이용해 여러 개의 className을 적용하는 방법을 정리했다.
- [Node.js](/fork-my-brain/web/node.js.md)
- [\[Node.js\] 웹페이지에 파일 띄우기](/fork-my-brain/web/node.js/node.js.md): 쿼리스트링에 따라서 data디렉토리에 있는 적절한 파일을 읽어 불러오는 작업을 해볼 것이다. 각 페이지 마다 다른 내용을 일일이 html 파일에 적어줄 필요가 없어 훨씬 깔끔하고 유지보수가 용이한 웹 어플리케이션이 될 것이다.
- [\[Node.js\] URL에서 쿼리스트링 추출하기](/fork-my-brain/web/node.js/node.js-url.md): 실제로 웹 서버를 만들때는 쿼리스트링을 먼저 지정하고 그 쿼리스트링으로 URL을 연결한다.   하지만 이 우리의 목적은 쿼리스트링을 읽고 다루는 방법을 학습하는것이기 때문에, 반대로 URL에서 쿼리스트링 데이터을 parse(추출)하는 방법을 알아볼 것이다.
- [\[Node.js\] '새 글 작성' 페이지 만들기](/fork-my-brain/web/node.js/node.js-1.md): 웹브라우저로부터 POST method로 전송받은 데이터를 파일로 저장하고, 작성한 글과 내용을 볼 수 있는 페이지로 Redirection하는 방법을 정리했다.
- [React](/fork-my-brain/web/react.md)
- [\[React\] 2. 컴포넌트(Component) 생성 및 파일별로 분리하기](/fork-my-brain/web/react/react-2.-component.md): App.js 파일의 App 컴포넌트 구조를 참고해 새로운 컴포넌트를 만들고, 파일로 분리해 관리한다.
- [\[React\] 1. 파일 구조 이해하기](/fork-my-brain/web/react/react-1..md): 새로운 React앱을 생성하면 여러 폴더와 파일들이 생기는데, 그중 가장 핵심이 되는 파일은 다음 3가지 이다.
- [\[React\] 4. 컴포넌트의 State 란](/fork-my-brain/web/react/react-4.-state.md): 사용자가 알 필요가 없는 데이터를 내부에서 은닉하는 것. 즉, 캡슐화를 통해 코드를 리펙토링 하는 것이 좋은 사용성을 만드는 핵심이다.
- [\[React\] 3. 컴포넌트의 Props 란](/fork-my-brain/web/react/react-3.-props.md): 마치 HTML 태그의 속성처럼, 한 컴포넌트의 요소에 props value를 지정하면 다른 컴포넌트에서 그 value에 값을 넣어 사용할 수 있는 것이다.
- [Javascript](/fork-my-brain/web/javascript.md)
- [Click, Enter 두 개의 이벤트 동시에 등록하기](/fork-my-brain/web/javascript/click-enter.md): form 내부의 button를 submit하면 클릭과 엔터가 동시에 입력된다. 이걸 이용해서 form 태그에 이벤트를 등록해, 클릭을 하든 엔터를 누르든 같은 이벤트로 취급할 수 있다.
- [Click eventListener 등록하기](/fork-my-brain/web/javascript/click-eventlistener.md): 즉, js파일에 발생했을 때 실행 되어야 하는 함수를 짜면 브라우저는 그 이벤트가 발생했을 때 등록된 코드를 실행하게 된다. 이런 방식을 이벤트 프로그래밍이라고 한다.
- [JavaScript & C 문법 비교](/fork-my-brain/web/javascript/javascript-and-c.md): 이 글은 단순히 두 언어 문법의 차이을 비교한다. 자바스크립트의 문법이 C와 많이 유사한 것 같아서, 약간 다른 표현법 정도만 정리해두면 쉽게 외울 수 있을 것 같다.
- [JavaScript 객체 지향의 특징](/fork-my-brain/web/javascript/javascript.md): 자바스크립트에서 모든 것들은 <객체>에 기반을 두고 있다. 이 글에서는 자바스크립트 객체만의 특징을 정리했다.
- [CSS](/fork-my-brain/web/css.md)
- [\[CSS\] box-model, display, position](/fork-my-brain/web/css/css-box-model-display-position.md): CSS 기초 레이아웃을 배웁시다
