일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- html
- 인사이드 자바스크립트
- express
- 자바스크립트
- 우아한테크캠프 4기
- 러닝 자바스크립트
- 네이버 테크 콘서트
- 자바
- AWS
- 주간 회고
- 레인지 슬라이더
- ES6
- npm
- CSS
- 회고의 회고
- 코드스쿼드
- 토이프로젝트
- 토이 프로젝트
- 리액트
- toast
- 알고리즘
- 우아한테크코스
- 우아한형제들
- 자바스크립트 객체
- Hello Coding HTML5+CSS3
- 모듈 배포하기
- 개인 프로젝트
- 함수
- 프로그래머스
- 우아한테크캠프
- Today
- Total
목록자바스크립트 (7)
블로그
그동안 프로젝트를 진행하며, 생각없이 jsonwebtoken 패키지를 사용했다. 이 과정에서 JWT가 정확히 어떤 일을 하는지에 대한 인지 없이 사용을 했고, 왜 써야하는지에 대한 명확한 이유가 없었다. 그저 쓰던거니까 라는 생각으로, 무지성으로 사용할 수는 없으니 이번 기회에 정리해보기로 한다! JWT란? JWT는 JSON 형태로 통신 시 권한을 확인하기 위해 사용하는 토큰이다. 그동안 Header에 추가해서 사용했었는데 JWT는 URL-safe라는 특징을 가지고 있으며, 이는 인코딩 없이도 URL에 사용이 가능한 문자열로만 구성되어있음을 의미한다. JWT 프로세스를 간단하게 표현하면 아래와 같다! :) JWT 구조 JWT는 Header, Payload, Signature로 구성되며, 각 부분은 점(...
개요 웹팩은 시작점을 통해 연결된 모든 의존적인 모듈을 하나의 파일로 합쳐주는 모듈 번들러이다. 번들러란 무엇일까? 부터 들어가기에는 로더에 대해 알아보려하기 때문에 넘어가도록 하자! 참고로 시작점은 복수일 수도 있다. 로더 웹팩에서 로더는 번들링을 위한 파일의 변환을 도와주는 핵심적인 역할을 담당한다. 로더를 통해 자바스크립트 파일에서 CSS 파일을 import할 수 있고, TypeScript와 같은 다른 언어를 JavaScript로 변환할 수 있다. 로더의 사용 방법은 설정 파일과 인라인의 두 가지 방식이 있지만 공식 사이트에서는 설정 파일을 통한 사용을 권장한다. 그러므로 별도로 소개는 하지 않겠지만... 인라인 방식의 예시는 아래와 같다. import Styles from 'style-loader..
history 자바스크립트의 태생적 한계를 극복하기 위해 마이크로소프트에서 2012년에 발표했다. 자바스크립트의 대체 언어 중 하나로 정적 타이핑을 지원하며, ES2015의 문법을 기본적으로 지원한다. 정적 타입 타입스크립트는 자바스크립트와는 다르게 정적 타입을 제공한다. 이를 통해 개발자가 의도한 대로 동작하는 코드를 구현하기 수월해진다. 타입스크립트의 변수 선언은 아래와 같다. // 키워드 변수명: 타입 = 값; const age: number = 10; const name: string = "abc"; // 타입과 맞지 않을 경우 에러 발생 const foo: string = 7; // Type 'number' is not assignable to type 'string'. 물론 타입을 생략해도 동..
자바스크립트를 배우면서 가장 헷갈렸던 부분이 this 였다. 자바에서는 단순하게 자기 자신을 가리키지만 자바스크립트에서는 여러 상황마다 다른 결과를 보여준다. 몇 년 동안 사용하다보니 익숙해지긴 했지만 확실하게 포스팅으로 정리하는게 낫겠다는 생각이 들었다. 1. 일반적인 호출 일반적인 상황. 즉, 그냥 호출하는 경우 기본적으로 this는 전역 객체를 가리킨다. 단, strict 모드에서는 undefined function foo() { console.log(this); // window } foo(); 2. 내부 함수의 호출 1번과 마찬가지로 this는 전역 객체를 가리킨다. function foo() { console.log(this); // window function bar() { console.l..
프로젝트 글 목차 2021.03.13 - [메모 트리 프로젝트] 1. 기획 2021.03.13 - [메모 트리 프로젝트] 2. 설계 - 와이어프레임, 요구 사항 2021.03.14 - [메모 트리 프로젝트] 3. 설계 - 객체 모델링 2021.03.18 - [메모 트리 프로젝트] 4. UI 구현 - 1 2021.03.19 - [메모 트리 프로젝트] 5. UI 구현 - 2 2021.03.20 - [메모 트리 프로젝트] 6. 나머지 프론트엔드 작업 2021.03.20 - [메모 트리 프로젝트] 7. 배포 및 후기 UI 구현 생각한대로 스타일을 작성했지만 생각지도 못한 암초를 만나게 됐다. 흐름이 우측으로 발생하는 특성상 형제 요소의 상위 요소가 여러 자식 요소를 가지게 될 때, 다른 형제 요소의 영역을 침범..