분류 전체보기

[ 보안 ] 인증 과 인가 의 차이

인증과 인가 인증 (Authentication)이란? 유저가 누구인지 확인하는 것, 로그인, 회원가입 등 인가 (Authorization)란? 유저에 대한 권한을 부여하는 것, 권한에 따라 유저가 할 수 있는 행동이 다름 인증과 인가는 보안에서 중요한 개념입니다. 인증 (Authentication) 내가 인마 느그 서장이랑 인마! 어저께도! 같이 밥 묵고 으! 싸우나도 같이 가고 다 했어 임마 범죄와의 전쟁 中 인증은 사용자가 누구인지 확인하는 것입니다. 회원가입, 로그인 등이 있습니다. 실생활에서 회사에 출근할 때 출입증을 보여주어서 인증의 과정을 거칩니다. 여러개의 절차가 있을 수 있습니다. (2 Factor Authentication) 아이디, 비밀번호를 입력하여 로그인 후 OTP를 입력하여 인증을..

[ 소프트웨어 공학 ] 애자일 과 폭포수

애자일 (Agile) 이란? 애자일은 소프트웨어 개발 방법론 중 하나입니다. 애자일은 반복적인 개발과 고객의 요구사항을 빠르게 반영할 수 있도록 하는 방법론입니다. 애자일은 코드 기반(Code-oriented)이며, 폭포수 모델(Waterfall model)과는 다르게 반복적인 개발을 통해 고객의 요구사항을 빠르게 반영할 수 있도록 하는 방법론입니다. 공정과 도구보다는 개인과 상호작용에 더 가치를 둡니다. 애자일 소프트웨어 개발 선언 우리는 소프트웨어를 개발하고, 또 다른 사람의 개발을 도와주면서 소프트웨어 개발의 더 나은 방법들을 찾아가고 있다. 이 작업을 통해 우리는 다음을 가치 있게 여기게 되었다 공정과 도구보다 개인과 상호작용을 포괄적인 문서보다 작동하는 소프트웨어를 계약 협상보다 고객과의 협력을..

[ Web ] WebPack, Bable, Polyfill

Babel Babel은 자바스크립트 컴파일러입니다. 최신 버전의 자바스크립트 문법을 구 버전의 브라우저에서도 동작하도록 변환해주는 역할을 합니다. Babel은 ES5+ 코드를 ES5 호환 버전으로 변환합니다. 이것은 브라우저에서 지원하지 않는 최신 기능을 사용할 수 있게 해줍니다. 또한, JSX 문법을 사용할 수 있게 해줍니다. Webpack Webpack은 모듈 번들러입니다. 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javascript, Images 등)을 모두 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구입니다. Polyfill Polyfill은 브라우저가 지원하지 않는 기능을 구현하는 코드입니다. 예를 들어, 브라우저가 ES6 문법을 지원하지 않는다면, Babel을 이용해..

[ Web ] 검색 엔진 그리고 검색 엔진 최적화 ( SEO )

SEO (Search Engine Optimization) 검색 엔진은 웹 페이지를 검색 결과로 제공하기 위해서, 웹 페이지의 내용을 분석합니다. 검색 엔진은 웹 페이지의 내용을 분석하여, 검색 결과로 제공하기 위한 여러 가지 규칙을 가지고 있습니다. 이러한 규칙을 준수하지 않으면, 검색 엔진이 웹 페이지를 제대로 분석하지 못하고, 검색 결과로 제공하지 않을 수 있습니다. 이러한 규칙을 준수하는 것을 SEO (Search Engine Optimization) 이라고 합니다. SEO 를 위한 웹 페이지 구성 1. 문법에 맞는 HTML 문서를 작성합니다. (Semantic Markup) title 태그에 웹 페이지의 제목을 작성하고, div 태그를 사용해 줄을 바꾸고, strong 태그를 사용해 강조하는 등..

[ Web ] REST API

REST 란? REST 란, Representational State Transfer 의 약자로, 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미합니다. Respresentational State Transfer 는 HTTP URI 를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE) 를 통해 해당 자원에 대한 CRUD Operation 을 적용하는 것을 의미합니다. REST 구성 요소 REST API 는 자원(Resource), 행위(Verb), 표현(Representations)으로 구성됩니다. 자원(Resource) : HTTP URI 행위(Verb) : HTTP Method 표현(Representations) : HTT..

[ Javascript ] 객체 지향 프로그래밍이란?

객체지향이란? 프로그래밍 패러다임의 하나로, 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 자바스크립트는 class 문이 포함되지 않은, prototype 기반의 객체지향 프로그래밍 언어이다. 객체지향 프로그래밍의 4가지 특징 (OOP의 4대 특징) 캡슐화 (Encapsulation) 객체의 속성과 기능을 하나로 묶고, 실제 구현 내용 일부를 외부에 감추어 은닉하는 것 캡슐 알약에 비유할 수 있다. 알약의 내용물을 보려면 알약을 깨야 한다. 즉, 알약을 깨지 않으면 알약의 내용물을 알 수 없다. 이처럼 캡슐화는 객체의 속성과 기능을 하나로 묶고, 그 중 일부를 외부에 감추어 은닉하는 것이다. 추상화 (Abstraction) 객..

[ JavaScript ] 크로스 브라우징

크로스 브라우징 크로스 브라우징이란, 다양한 브라우저에서 동일한 사용자 경험을 제공하는 것을 의미합니다. 글로벌 시장 조사 기관인 StatCounter 에 따르면, 2022년 12월 기준으로 전 세계에서 사용되는 브라우저는 다음과 같습니다. Chrome : 64.68% Safari : 18.29% Edge : 4.23% Samsung Internet : 3.05% Firefox : 3.01% Opera : 2.25% 대부분의 브라우저들이 Chrome 기반인 크로미움 엔진을 사용하고 있습니다. (크로미움 엔진을 사용하는 브라우저들은 크롬, 엣지, 오페라, 삼성 인터넷 등이 있습니다.) 크로미움 엔진을 사용하는 브라우저들은 크로스 브라우징을 고려하지 않아도, 대부분의 브라우저에서 동일한 사용자 경험을 제공할..

[ JavaScript ] Bundle 사이즈 줄이기

Bundle 사이즈 줄이기 React, Vue, Angular 등의 프레임워크를 사용하면, 번들 사이즈가 커질 수 있습니다. 이를 줄이지 않으면 사용자가 느끼는 페이지 로딩 시간이 길어져 사용자 경험이 떨어질 수 있습니다. 이를 해결하기 위해, 번들 사이즈를 줄이는 방법을 알아봅니다. Bundle 사이즈를 줄이는 방법 소스 코드 최소화 하기 : minify, uglify minify : 압축하기 불필요한 공백, 줄바꿈, 주석 등을 제거합니다. uglify : 난독화하기 변수명, 함수명 등을 알아보기 어렵게 변경합니다. 이름을 단순화해서 불필요한 데이터를 제거하면서, 외부인이 소스 코드를 읽기 어렵게 만들어 기초적 보안을 제공합니다. 코드 스플리팅 (Code Splitting) React 에서는 React..

SSR, CSR, SSG

SSR, CSR, SSG SSR, CSR, SSG 는 모두 렌더링 방식을 의미합니다. Server Side Rendering (SSR) SSR 은 서버에서 사용자에게 보여줄 페이지를 모두 구성해서 사용자에게 페이지를 보여주는 방식입니다. SSR 을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트에게 바로 보여줄 수 있습니다. 서버를 통해 페이지를 구성하기 때문에, CSR 보다 페이지를 구성하는 속도는 느리지만, 전체적인 사용자에게 보여주는 콘텐츠의 양이 많아지면, CSR 보다 빠른 속도를 보여줄 수 있습니다. 또 서버에서 첫 페이지를 서버에서 구성하기 때문에, 이미 완성된 페이지를 검색엔진이 수집할 수 있어서 검색 엔진 최적화(SEO)에 유리합니다. 서버 사이드 렌더링 (SSR) 의 장점 SEO..

[ JavaScript ] ESLint, Prettier

ESLint, Prettier ESLint ES 는 EcmaScript 의 약자입니다. ES6 이후로는 ECMAScript 라고 부릅니다. 표준화된 자바스크립트의 버전을 의미합니다. Lint 는 코드를 분석하여 문제점을 찾아내는 도구입니다. ESLint 는 자바스크립트 코드를 분석하여 문제점을 찾아내는 도구입니다. 코딩 컨벤션에 맞지 않는 코드나, 불필요한 코드, 버그의 가능성이 있는 코드를 찾아내는 도구입니다. Airbnb, Standard, Google 등의 코딩 컨벤션을 기본으로 제공합니다. Prettier 원본 스타일을 모두 제거하고, 코드를 일관된 스타일로 정리해주는 도구입니다. 줄바꿈, 들여쓰기, 따옴표 등의 스타일을 일관성 있게 정리해줍니다. ESLint 와 Prettier 를 함께 사용하면..