프로젝트를 진행하거나, 일을 하다보면 한 번쯤 이런 상황을 겪게 됩니다.... 기획은 나왔지만, 개발은 아직 방향이 모호하고화면을 만들어야하는데 백엔드 API가 정리되지 않았고,백엔드는 기능을 만들고 있지만 어떤 형태로 데이터를 내려줘야 할지 계속 변동하는 상황이요 이렇게 된다면 자연스럽게 일정은 미뤄지고, 동료 간 커뮤니케이션은 뜨거워지고,... 결국 생산성은 떨어지게 될 겁니다.이를 방지하고 생산성을 높이기 위해선 어떻게 해야할까요? 소프트웨어 개발 방법론에 따르면 해당 고충을 해결하기 위해업무의 효율을 높이기 위해 여러 가지 개발 방법론이 많이 존재하는 것을 볼 수 있습니다. 이번에 포스팅할 내용은 어떠한 서비스, 비즈니스 모델을 구성할 때, API 를 위주로 구상할 수 있는 방법론에 대해 포스팅 ..

저번 포스팅에서 세션, 쿠키에 대해 정리했다면, 이번에는 JWT 중심으로 웹 인증 방식에 대해서 알아보려고 합니다. 다만 JWT를 제대로 이해하기 위해서는, 인증 (Authentication) 과 인가(Authorization) 를 구분해서 보는 것이 중요합니다. 웹은 기본적으로 상태를 기억하지 않는 (stateless) HTTP 위에서 동작하기 때문에, 로그인 상태를 어떻게 유지하고 권한을 어떻게 확인할지 항상 고려됩니다. 인증과, 인가부터 정리해 보자!!! 인증 (Authentication) 은 쉽게 말해서 "너 누구야?" 를 확인하는 과정이라고 보면 됩니다.사용자가 아이디와 비밀번호를 입력했을 때, 서버가 그 정보를 확인하고 이 사용자는 가입된 회원이다 라고 판단하면 인증이 된 것 반면 인가 (A..

너무 너무 헷갈립니다.공부하면서 그 당시에는 알았다고 넘어가도 막상 내가 누군가에게 제대로 설명하지 못하는 이 머리가 나쁜건지, 이제는 그 뿌리를 뽑고자 제대로 정리해보고자 합니다. 얕은 복사란 무엇인가? 깊은 복사란 무엇인가? 얕은 복사란?얕은 복사는 객체를 복사할 때 겉 껍데기만 복사하고, 내부에 있는 객체는 같은 주소를 공유하는 복사 방식입니다.즉, 새로운 변수가 생성되지만 내부 데이터는 동일한 메모리를 참조하게 됩니다. 깊은 복사란?깊은 복사는 객체를 복사할 때 내부에 있는 모든 데이터까지 완전히 새로 복사하는 방식입니다.따라서 원본과 복사본은 서로 영향을 주지 않습니다. 여기서 중요한 포인트원시값 (number, string 등) 은 복사 시에 항상 값이 복사됨객체와 배열은 참조형이기 때문에 ..

웹에서 자주 등장하는 개념인 쿠키, 세션, 로컬스토리지, 세션스토리지에 대해 정리해보려고 합니다. 기본 개념을 정확히 이해해 보려고 해당 글을 작성합니다.1. 쿠키( Cookie ): 쿠키는 사용자의 웹 브라우저에 저장되는 작은 데이터 파일입니다. 보통 4kb정도 됨웹 서버가 생성하여 웹 브라우저로 전달하면, 브라우저는 이를 저장해 두었다가 서버로 요청 보낼 때 자동으로 전송합니다.즉, 서버가 이 사용자 누구지? 를 기억하기 위한 하나의 방법. 특징브라우저에 저장됨HTTP 요청 시 자동으로 서버에 포함됨만료 기간 설정 가능함 사용 예시로그인 상태 유지비로그인 시 장바구니 정보 저장광고의 오늘 하루 보지 않기 기능 등 쿠키는 브라우저 (클라이언트) 에 저장되기 때문에 설정 없이 사용할 경우 탈취및 변경 ..

드롭다운에서 hover시 background 영역 color 를 지정해 줬는데 scroll 바 영역 때문에 해당 color가 먹지 않는 이슈 발생 내가 원하는 디자인 스크롤 영역으로 색상 지정이 불가능 한 상태 스크롤 되는 영역에 ... . 박아놓고css 파일 에서 .option-scroll ::ng-deep. simplebar-content-wrapper { padding-right: 0 } 하고 하위 div 영역에 width 100% 주었더니 해결 완료

인증과 권한을 라우팅 단계에서 제어하는 방법 여러 웹사이트나 애플리케이션에선 로그인을 통해 여러 서비스에 접근을 할 수 있다하지만 로그인을 했다고 해서, 모든 서비스에 접근할 수 있는 건 아니다. 예를들면, 로그인하지 않은 사용자가 직접 url을 통해 `/main`으로 접근하려 하는경우,일반 사용자가 `/admin`과 같은 관리자 페이지에 접근하는 경우토큰이 만료된 상태에서 보호된 라우트로 이동하려는 경우이러한 경우들을 방지하기 위해 라우트 접근을 제어하는 메커니즘을 알아보려고 한다그중 가장 대표적인 것이 AuthGuard 와 canActivate 이다.1. AuthGuard란 무엇인가?사용자의 인증 및 권한 상태를 기준으로 특정 라우트에 대한 접근을 허용하거나 차단하는 역할을 함. AuthGuard는..

Angular에서 DOM 요소를 구성하다 보면, `*ngIf` , `*ngFor` 을 사용하게 될텐데해당 태그들을 사용하면, ng-template, ng-container 과 같은 생소한 태그들을 마주치게 됩니다. 우선 `*ngIf` , `*ngFor` 과 같은 Structural Directive가 무엇인지부터 이해하고 가겠습니다. 그래서 이 글은 다음 순서로 정리해보겠습니다.Directive란 무엇인가Directive의 종류Structural Directive의 특징ng-template의 역할ng-container가 필요한 이유1. Directive란 무엇인가?Directive는 DOM의 모양이나 동작을 지시하기 위한 Angular의 명령Directive 는 HTML 요소에 "행동 규칙"을 부여하..

Operators이란 무엇인가?Operator는 함수이고, 크개 두 가지로 나뉩니다pipeable Operatorcreation Operator(아직 Operator 함수의 종류에 대해 말하는거 아님)먼저 Pipeable Operators ( 파이프가 가능한 연산자) 는RxJS에서 자주 사용하는 Operator는 pipe()에 전달해서 사용할 수 있는 Pipeable Operator 입니다. 이는 Observable을 받아 새로운 Observable을 반환하는 함수입니다.이는 순수 연산으로, 이전 Observable은 변경되지 않습니다. Observable에 pipe()라는 메서드를 사용해 연결할 수 있다 => `observableInstance.pipe(operator)` 이런식으로(사용예시), 그..

Pipes는 Angular 템플릿 표현식에서 사용하는 특수한 연산자로, 템플릿 안에서 데이터를 선언적으로 변환할 수 있게 해준다.해당 내용은 공식문서를 번역한 내용입니다. Pipe를 사용하면 변환 함수를 한 번 선언해 두고, 그 변환을 여러 템플릿에서 재사용할 수 있다. Angular pipe는 수직 막대 문자 `|` 를 사용하며, 이는 Unix pipe에서 영감을 받았다고 합니다.Angular의 pipe문법은 JavaScript의 `|`인 비트연산자 `OR` 와 다르게 Angular 템플릿 표현식에서는 비트 연산자를 지원하지 않는다.import { Component } from '@angular/core';import { CurrencyPipe, DatePipe, TitleCasePipe } fr..

초보자인 입장에서 활용도 높은 Reduce를 쉽게 이해해 보려고 해당 글을 써본다.Reduce()reduce라는 단어를 직역하면 "줄이다" 라는 의미를 가진다.const numbers = [4, 3, 2, 1];const sum = numbers.reduce((acc, cur) => { return acc + cur;});// 첫 번째 실행 : acc:4 + cur: 3 -> return : 7// 두 번째 실행 : acc:7 + cur: 2 -> return : 9// 세 번째 실행 : acc:9 + cur: 1 -> return : 10 reduce는 `배열.reduce((acc, cur) => {}, initialValue)` 의 형태로 보통 많이 쓰인다.or `Array.prototype.redu..