타입스크립트를 프로젝트에서는 많이 사용해봤지만 개념을 제대로 공부해본 적은 없기 때문에 핸드북 내용을 정리해보려 한다. 자료는 공식 타입스크립트 핸드북과 캡틴판교님의 타입스크립트 핸드북을 참고할 예정. 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주는 컴파일 과정을 거쳐야 한다. 타입스크립트를 써야 하는 이유 에러의 사전 방지 타입스크립트를 사용하면 에러를 사전에 방지할 수 있다. // math.js function sum(a, b) { return a + b; } 위의 코드는 두 숫자의 합을 구하는 함수 코드이다. sum(10, 20); // 30 sum('10', '20'); //1020 숫자 10과 20을..

https://youtu.be/XXseiON9CV0 유튜브 코딩애플님의 영상을 보았다. JWT 토큰을 간단하게 사용해본 적은 있지만 코딩인생을 끝내고 싶지 않았기 때문에 영상 내용을 간단히 정리해보려 한다. 보통 회원 기능을 구현하는 방식에는 2가지가 있다. 세션 방식 토큰 방식 유저가 로그인을 하면 서버에서 입장권을 발급해주고, 서버에 요청할 때마다 입장권을 제출하면 서버에서 입장권을 확인 후 응답을 해주는 것이 일반적인 과정이다. 세션 방식 세션 방식을 사용하면 입장권에 써있는 정보가 많이 없다. 발급 번호 정도만 존재하고, 서버에서는 해당 번호가 서버에 존재하는지 확인 후 통과시킨다. JWT 방식 입장권에 써있는 정보가 많다. 이메일, 이름, 발급일, 유효기간 등. 입장권을 검사할 때 입장권 자체만..

This 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. 함수 호출 방식과 this 바인딩 this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다. 함수의 상위 스코프를 결정하는 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하지만 this 바인딩은 함수 호출 시점에 결정된다. 동일한 함수도 다..

이전 글 [React] 재귀 컴포넌트로 트리 메뉴 만들기(1) 이번에는 접었다 폈다 하는 효과까지해서 트리 메뉴를 완성해보려고 한다. routes/Directory/Child.tsx import { useState } from 'react' import { DownArrow } from 'assets/svgs' import * as Styled from './index.styles' const Child = ({ child }: Props) => { const [isOpened, setIsOpened] = useState(true) const handleClick = () => { setIsOpened((prev) => !prev) } // ... return ( {child.name} {child.ty..

김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 헤더 - 캐시와 조건부 요청 프록시 캐시 클라이언트가 아주 멀리 있는 서버에 접근한다면 시간이 오래 걸리게 된다. 대략 500ms가 걸린다고 한다면 모든 사람들이 다 500ms씩 기다려야 한다. 그래서 중간에 프록시 캐시 서버를 둔다. 이를 CDN 서비스..

김영한님의 모든 개발자를 위한 HTTP 웹 기본 지식 강의를 듣고 정리한 내용입니다. https://www.inflearn.com/course/http-%EC%9B%B9-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., - 강의 소개 | 인프런... www.inflearn.com HTTP 헤더 - 캐시와 조건부 요청 캐시 기본 동작 캐시가 없을 때 클라이언트에서 star.jpg를 요청하면 서버에서는 응답을 내려준다. HTTP 헤더와 관련된 용량이 0.1메가, HTTP 바디와 관련된 용량이 1.0메가라고 했을 때, 1.1메가의 네트워크를 차..

재귀 컴포넌트 트리형 메뉴를 만들어야 하는 과제가 있었다. depth가 깊지 않다면 모든 요소들을 map으로 돌면서 렌더링해주면 되지만 자식 요소들이 많아질 경우 어떻게 구현할 지 고민이 많았다. 이 때 재귀 컴포넌트를 사용하면 된다는 것을 알았다. 재귀 컴포넌트란 말그대로 컴포넌트를 재귀적으로 만드는 것이다. 자세한 내용은 아래에서 직접 구현하면서 알아보자. 데이터 구조 [ { id: 1, name: 'Root', type: 'folder', children: [ { id: 2, name: 'Child 1', type: 'folder', children: [ { id: 3, name: 'Grand Child', type: 'file', }, ], }, { id: 4, name: 'Child 2', ty..