프론트엔드 첫걸음

1. 타입스크립트 타입이 헷갈릴 때타입스크립트의 타입 시스템이 복잡하게 보일 때는 잠시 타입을 지우고 자바스크립트 코드로 생각하면 이해가 쉬워진다.타입 없이 값의 흐름과 구조를 파악한 후 다시 타입을 붙이는 방식이 유효하다. 2. 원시 래퍼 타입과 템플릿 리터럴 타입원시 래퍼 타입string, number, boolean처럼 소문자로 시작하는 타입은 값의 타입이고, String, Number, Boolean은 객체 래퍼이다.타입 정의 시 객체 래퍼 타입은 쓰지 않는다. (예: string을 써야 함)템플릿 리터럴 타입문자열 타입을 조합하거나 추출할 때 사용한다.예:type Greeting = `Hello, ${T}`;위 타입은 Greeting일 때 "Hello, World"가 된다. 3. Rest par..

never 타입과 느낌표(non-null assertion)JavaScript와 TypeScript에서 null이나 undefined가 종종 문제를 일으키는 이유는 “값이 없음을 나타내는 상태”이기 때문이다.DOM 조작이나 API 데이터 처리 등에서 null 참조에 접근하면 자주 Cannot read property ... of null과 같은 에러가 발생한다.그러한 상황을 막기 위한 TypeScript의 never 타입, 그리고 느낌표(non-null assertion) 연산자를 활용할 수 있다/ 1. Cannot read property ... of null 에러란다음과 같은 코드에서 자주 볼 수 있는 에러다.const element = document.querySelector("header");el..

TypeScript 타입 캐스팅 정리1. 문자열을 다른 타입으로 강제로 변환 가능TypeScript는 원래 엄격한 타입 검사 덕분에 문자열을 바로 다른 타입으로 바꿀 수 없다. 하지만 **타입 캐스팅(type casting)**을 사용하면 강제로 변환이 가능하다.const value: string = "123";const numberValue = value as unknown as number;as unknown: 우선 value를 unknown 타입으로 변환as number: 이후 number 타입으로 변환이렇게 하면 타입 에러가 사라짐 2. as 키워드로 타입 강제 변환as는 TypeScript 전용 타입 캐스팅 키워드다.앞에 있는 타입을 다른 타입으로 강제로 바꿔준다.const someValue: ..

1. 타입 추론 제거 시 any 발생타입스크립트는 변수나 함수의 타입을 자동으로 유추하지만, 타입 정보를 지워버리면 any로 추론된다.이 경우 타입 안정성이 깨지므로 직접 타입 지정이 필요하다.// 타입 지정function add(x: number, y: number): number { return x + y;}// 타입 제거 시function add(x, y) { return x + y; // x, y는 any로 추론됨}결과: x, y의 타입이 any가 되어 버그 가능성 증가. 2. 리턴 타입은 추론 가능리턴 타입은 대부분의 경우 명시하지 않아도 TypeScript가 잘 추론해준다.function greet(name: string) { return `Hello, ${name}`;}// 리턴 타입:..

생성자 파라미터에 접근제어자 붙여 클래스 속성 선언과 초기화를 한번에 할 수 있는 타입스크립트의 문법적 설탕.class Point { constructor(public x: number, public y: number) { // 여기서 this.x = x; this.y = y; 를 안 써도 자동 처리 }}const p = new Point(10, 20);console.log(p.x); // 10console.log(p.y); // 20생성자 파라미터에 public/private/protected를 붙이면 자동으로 클래스 속성이 만들어지고 this에 할당된다.JavaScript가 아니라 TypeScript 컴파일러가 해주는 문법적 설탕(syntax sugar) 아래와 사실상 동일class Poin..

코드 출처 - 드림코딩 엘리 -------------------------------1. 일반 생성자 방식class CoffeeMaker { constructor(public coffeeBeans: number) {}}const maker = new CoffeeMaker(10); 2. 팩토리 메서드 방식class CoffeeMaker { private constructor(public coffeeBeans: number) {} static makeMachine(coffeeBeans: number): CoffeeMaker { console.log("머신 초기화 중..."); return new CoffeeMaker(coffeeBeans); }}const maker = CoffeeMaker..

1. JSX는 JavaScript가 아니다JSX는 JavaScript 확장 문법으로, 브라우저가 직접 실행할 수 없다.그래서 브라우저에서 사용하려면 **트랜스파일링(transpiling)**이 필요하다. 2. Babel이 하는 일Babel은 JSX를 JavaScript 코드로 변환해주는 트랜스파일러다.JSX를 기본적으로 React.createElement() 호출 형태로 변환한다.예시const vdom = Hello;↓ Babel 변환 ↓const vdom = React.createElement("p", null, "Hello");3. @jsx 주석 지시어Babel은 JSX를 어떤 함수로 변환할지 지정할 수 있도록 @jsx 주석을 지원한다.이걸 사용하면 React.createElement 대신 원하는 함..

개요사용자의 입력을 요구하는 서비스에서는 화면을 떠날 때 '떠나시겠습니까?' 를 묻는 경우가 있다.이 때 useBlocker를 잘 사용하면 더 좋은 코드를 작성할 수 있을것이다.useBlocker란?useBlocker는 React Router에서 네비게이션 차단 기능을 제공하는 훅이다.사용자가 페이지를 이동하려 할 때 특정 조건이 충족되면 네비게이션을 차단할 수 있다.즉, 페이지 이탈을 방지하는 역할을 한다. useBlocker 코드 React-Router 에서 useBlocker 코드를 찾아보자.//1. 매개변수export function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker { let { router, basename } = us..

절전모드를 끄고 데이터를 껐다 켜고 다시 교통카드 대보세요연결가능한 세션이 없다는 알림은 무시하고 그냥 다시 갖다대보세요.차분하게 다시 휴대폰 윗부분~ 가운데 사이를 갖다대보시면 환승됩니다.  - 이만

https://stackoverflow.com/questions/75215273/git-reset-headn-results-in-error-unknown-switch-e git reset HEAD@{n} results in error "unknown switch 'e'"I issued the command: git reset HEAD@{2} and got an error: unknown switch `e'. What's happening?stackoverflow.com git stash apply stash@{0}명령어가 안먹어서 검색해보니 윈도우는 git stash apply "stash@{0}"이렇게해야한다는군요.회사에서 작성하느라 이만.