인증(authentication)은 자신이 누구라고 주장하는 사람을 확인하는 절차입니다. 권한부여(authorization)는 가고 싶은 곳으로 가도록 혹은 원하는 정보를 얻도록 허용하는 과정입니다.

JSON 웹 토큰

Authentication

JSON 웹 토큰(JSON Web Token, JWT)은 선택적 서명 및 선택적 암호화를 사용하여 데이터를 만들기 위한 인터넷 표준으로, 페이로드는 몇몇 클레임(claim) 표명(assert)을 처리하는 JSON을 보관하고 있습니다. 토큰은 비공개 시크릿 키 또는 공개/비공개 키를 사용하여 서명됩니다. 이를테면 서버는 "관리자로 로그인됨"이라는 클레임이 있는 토큰을 생성하여 이를 클라이언트에 제공할 수 있습니다. 그러면 클라이언트는 해당 토큰을 사용하여 관리자로 로그인됨을 증명합니다. 이 토큰들은 한쪽 당사자의 비공개 키(일반적으로 서버의 비공개 키)에 의해 서명이 가능하며 이로써 해당 당사자는 최종적으로 토큰이 적법한지를 확인할 수 있습니다.

[JWT] JSON Web Token 소개 및 구조

[인증/인가]Session(세션)과 Token(토큰)(JWT)의 차이점

Session Auth

OAuth와 춤을

OAuth 2.0 개념과 동작원리

OAuth

호다닥 공부해보는 SSO와 친구들 (SAML, OAuth, OIDC)

명령 줄 인터페이스(영어: command-line interface, CLI, 커맨드 라인 인터페이스) 또는 명령어 인터페이스는 가상 터미널 또는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다.

커맨드라인 인터페이스, 셸, 터미널이란?

CLI 기본기

파일과 디렉토리 커맨드 정리

CLI 기본 개념

10분만에 vim 실습하기

커맨드라인으로 외부 패키지 설치하기(Windows)

커맨드 라인으로 외부 패키지 설치하기(macOS)

CLI 도구 설정

css framework / CSS 프레임워크

CSS Frameworks

Tailwind CSS 사용기

Tailwind

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다.

설명 출처: HTML: Hypertext Markup Language

HTML/CSS를 위한 편리한 도구 소개

HTML/CSS

HTML 은 프로그래밍 언어가 아닙니다; 컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 **요소(elements)**로 이루어져 있습니다. tags로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다.

설명 출처: HTML 기본

1분 안에 웹사이트 런칭하기

HTML 문법 정리

HTML 코드를 편하게 입력하는 법

시맨틱 HTML

HTML의 이해

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

설명 출처: 나의 첫 HTML 폼

HTML 폼 정리

HTML Form과 Validation

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?

설명 출처: CSS 기초

CSS 기본 문법 정리

CSS 기본 개념 정리

CSS 종속성 우선순위 정리

배경 이미지 정리노트

Display 정리

CSS의 이해

CSS 레이아웃은 CSS(Cascading Style Sheets)를 사용하여 웹 페이지의 요소를 배열하는 과정입니다. 개발자는 텍스트, 이미지 및 단추와 같은 웹 페이지 요소의 위치, 크기 및 모양을 제어할 수 있습니다.

설명 출처: CSS 레이아웃 개요

z-index가 내 맘대로 안될 때

포지셔닝 정리

Flexbox

Flexbox 정리

Grid

Grid 정리

CSS 레이아웃 구성

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 레이아웃과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.

설명 출처: 반응형 디자인 개요

미디어 쿼리 초보자 안내서

반응형 디자인과 미디어 쿼리

Sass는 종속형 시트(CSS)로 해석 및 컴파일되는 스크립트 언어입니다.

공식 가이드

Sass(SCSS) 완전 정복!

Sass

웹사이트에서 버튼을 클릭하면 새로운 창이 뜨고, 화면을 스크롤하면 새로운 콘텐츠가 스르륵 생기고… 이런 게 다 자바스크립트 덕분이라는 사실 알고 계셨나요? 자바스크립트는 웹에 있는 여러 가지 요소를 자유롭게 다루기 위해 등장한 프로그래밍 언어입니다. HTML과 CSS만으론 뭔가 부족하다고 느꼈다면, 자바스크립트로 웹사이트에 생기를 불어넣어 보세요!

자바스크립트가 뭔가요?

JavaScript 웹 개발

자바스크립트 기본 문법

[번역] Say bye bye to bad javascript practices

JavaScript 문법과 표현

현대 프로그래밍 언어에서 TypeScript와 JavaScript의 관계는 다소 독특합니다. TypeScript은 JavaScript 위에 레이어로서 자리잡고 있는데, JavaScript의 기능들을 제공하면서 그 위에 자체 레이어를 추가합니다. 이 레이어가 TypeScript 타입 시스템입니다.

TypeScript for the New Programmer

The TypeScript Handbook

(번역)더 좋은 타입스크립트 프로그래머로 만드는 11가지 팁

TypeScript

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

DOM 소개

DOM 다루기

이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 예를 들자면, 만약 유저가 웹페이지에 있는 버튼을 고른다면, 여러분은 그 사건에 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다. 이 문서에서는, 우리는 이벤트에 대한 몇몇 중요한 개념을 논하고, 그것들이 브라우저에서 어떻게 작동하는지 살펴봅니다. 이것은 완전한 공부가 되지 않을 것입니다; 단지 지금 단계에서 여러분이 알아야 할 필요가 있는 것입니다.

이벤트 입문

다양한 이벤트

이벤트 다루기

비동기 프로그래밍은 작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작하여 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술입니다. 작업이 완료되면 프로그램이 결과를 제공합니다.
브라우저가 제공하는 많은 기능, 특히 가장 흥미로운 것들은 시간이 오래 걸릴 가능성이 있으므로 비동기적입니다. 예를 들어 다음과 같습니다.

fetch() 를 이용해 HTTP 요청 만들getUserMedia()를 사용해 사용자의 카메라 또는 마이크에 접근하기
showOpenFilePicker()를 통해 사용자에게 파일 선택을 요청
따라서 여러분만의 비동기 함수를 자주 구현 할 필요는 없지만 올바르게 사용 해야 할 경우가 많습니다.

Introducing asynchronous JavaScript

JavaScript 비동기 처리를 위한 promise 이해하기

Promise와 async, await

알아야 하는 비동기 실행 함수들

비동기 실행 관련 문법 총정리

비동기 실행과 Promise 객체

자바스크립트 객체 표기법과 JSON 문법의 차이

모범적인 Web API, REST API

Status Code 더 자세히

Web API

ESLint와 Prettier 사용법과 차이점

Linters & Formatters

ESLint & Prettier, Airbnb Style Guide로 설정하기

프론트엔드 개발환경의 이해: 린트

ESLint

아! 보기 좋은 코드다! Prettier 알아보기

Prettier

CSS의 진화 과정

Modern CSS

Styled Components란?

styled-components

Styled Components

css의 클래스를 고유한 값으로 만들어서 이름이 중복되는 것을 막아준다

CSS Module

CSS Modules

Next.js에 기본으로 포함된 CSS-in-Js

넥스트를 꾸며줘 : styled-jsx 활용하기

Styled JSX

Emotion으로 React 컴포넌트 스타일하기

Emotion

Module Bundlers

webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.

Webpack의 핵심 개념

모듈 소개

번들러(Bundler)란?

Webpack

패키지 매니저(Package manager)는 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴입니다. 여기서 패키지를 다루는 작업이란 패키지를 설치, 업데이트, 수정, 삭제하는 작업을 의미합니다.

설명 출처: 패키지 매니저(Package Manager)란?

npm과 yarn

패키지 관리자

npm 패키지 사용법

yarn 설치 및 사용법

yarn

CSR, SSR, SSG 조화를 이루다.

Page Rendering

CSR과 SSR의 장단점

[React] SSR과 CSR(SPA) 차이

어서 와, SSR은 처음이지?

(번역)도대체 SSG가 뭘까요? Next.js로 설명하는 정적 사이트 생성

Next.js는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크입니다. 리액트 문서는 Next.js를 "권고하는 툴체인들" 중 하나로 언급하며 개발자들이 Node.js로 서버 렌더링되는 웹사이트를 빌드할 때의 해결책의 하나로 충고하고 있습니다.

[Next.js] 기본 개념 : Next.js 란? Next.js를 왜 사용할까? Next.js의 장점은?

Next.js Getting Started

[if(kakao) 2021]Next.js와 Typescript를 이용한 프론트엔드 개발기

Next.js

컴퓨터 프로그래밍(영어: computer programming) 또는 간단히 프로그래밍(programming, 문화어: 프로그램 작성) 혹은 코딩(coding)은 하나 이상의 관련된 추상 알고리즘을 특정한 프로그래밍 언어를 이용해 구체적인 컴퓨터 프로그램으로 구현하는 기술입니다.

설명 출처: 컴퓨터 프로그래밍

프로그래밍 시작

JavaScript (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. 프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다.

설명 출처: JavaScript에 대하여

javascript 기본

[Tutorial] 자바스크립트 코딩 준비하기

자바스크립트 변수 작명 가이드

JavaScript 시작

모던 JavaScript 튜토리얼 | 코어 자바스크립트

연산자 우선순위

JavaScript 핵심 개념

모던 JavaScript 튜토리얼 | 코어 자바스크립트 | 자료구조와 자료형

문자열과 배열 사이

JavaScript 데이터 다루기

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React

컴포넌트 문법

State 정리하기

Hello World

React 개발 기초

웹 사이트 배포하기 (AWS S3)

React 배포

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다

Hook의 개요

React Hook

상태 관리 라이브러리의 미학: Redux 또는 MobX 를 통한 상태 관리

[if(kakao) 2022] 눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유

[if(kakao) 2021] 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유

React 상태 관리

리액트 라우터 정리

[React] 리액트 라우터 기본 사용방법

React Router

버전 관리 시스템은 파일 변화를 시간에 따라 기록했다가 나중에 특정 시점의 버전을 다시 꺼내올 수 있는 시스템입니다.

git pro v2 한글판

좋은 git 커밋 메시지를 작성하기 위한 7가지 약속

README.md를 더 예쁘게

개발팀 퇴근시간을 앞당겨줄 Git, Github 팁

버전 관리 시스템

Git 사용법

GitHub은 가장 큰 Git 저장소 호스트입니다. 수백만 개발자가 모여서 수백만 프로젝트를 수행하고 있습니다. 많은 오픈 소스 프로젝트는 GitHub을 이용해서 Git 호스팅, 이슈 트래킹, 코드 리뷰, 등등의 일을 합니다. Git을 많이 사용하다 보면 Git 프로젝트 자체에는 참여하지 않더라도 GitHub을 꼭 써야 하는 상황이 오거나, 스스로 쓰고 싶어질 것입니다.

깃허브 원격 저장소 생성

(비개발자를 위한) GitHub의 역사와 기능

GitHub

월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말합니다. 간단히 웹(the Web)이라 부르는 경우가 많습니다. 이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념입니다. 웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐입니다. 그러나 1993년 이래로 웹은 인터넷 구조의 절대적 위치를 차지하고 있습니다.

설명 출처: 월드 와이드 웹

웹의 기초

인터넷은 컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크입니다.

설명 출처: 인터넷은 어떻게 동작하는가?

기술 트렌드를 읽는 방법

프로그래밍 오버뷰

서비스의 동작 원리

웹개발 분야 이해하기

HTTP 개요

인터넷의 동작 원리

설명 출처: 그래서 정확히 무슨 일이 발생할까요?

브라우저는 어떻게 동작하는가?

웹 브라우저의 동작 원리를 알아보자

브라우저의 동작 원리

도메인 이름은 인터넷 인프라의 핵심 부분입니다. 인터넷에서 사용할 수있는 모든 웹 서버에 대해 사람이 읽을 수있는 주소를 제공합니다.

설명 출처: What is a domain name?

도메인이란?

도메인이란 무엇일까?

웹사이트 보안을 효과적으로 하기 위해서는 웹사이트를 설계하는 과정의 전반에 걸쳐 노력을 기울여야 합니다. 웹 애플리케이션에서, 웹 서버 설정에서, 비밀번호를 생성하고 재발급하는 정책에서, 클라이언트측 코드에서 말입니다. 하지만 다행스럽게도 서버측 웹 프레임워크를 사용한다면, 일반적인 보안 공격에 대해 이미 견고하고 잘 검증 된 방어 메커니즘이 "기본으로" 제공됩니다. 

웹 보안 지식