프론트엔드 첫걸음

자바스크립트는 인자의 개수나 타입이 자유롭기 때문에, 하나의 함수에서 다양한 입력을 처리하는 경우가 많다.타입스크립트에서는 이러한 유연한 호출 형태를 타입으로 명시하기 위해 함수 오버로드를 사용한다. 1. 함수 오버로드란?함수 오버로드는 하나의 함수가 여러 개의 타입 시그니처를 가질 수 있도록 하는 문법이다.function 함수이름(파라미터1): 리턴타입;function 함수이름(파라미터2): 리턴타입;function 함수이름(구현부) { ... }이렇게 여러 개의 선언부가 있고, 마지막에 하나의 구현부가 따라오는 형태다. 2. 예시로 이해하기function func(x: number): void;function func(x: string): void;function func(x: number | str..

프로젝트 코드에서 아래와 같은 걸 봤다. const flag: any[] = [ (content_type & 1) > 0, (content_type & 2) > 0, (content_type & 4) > 0, (content_type & 8) > 0, (ontent_type & 128) > 0, content_type ? content_type === 0 : true, ]; 해당 프로젝트는 어떤 api의 응답에 비트연산자를 활용하고 있었다.비트연산자를 알아보자 &와 &&는 다르다처음엔 &&인줄 알았다. &&은 &과 다르다.기호이름역할예시&&논리 ANDtrue/false 비교true && false → false&비트 AND숫자의 비트 비교5 & 4 → 4즉, &는 불..

생성자 파라미터에 접근제어자 붙여 클래스 속성 선언과 초기화를 한번에 할 수 있는 타입스크립트의 문법적 설탕.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}"이렇게해야한다는군요.회사에서 작성하느라 이만.

redux-persistRedux 상태를 브라우저 localStorage나 sessionStorage에 저장해 앱 새로고침 후에도 유지.마이그레이션persisted state 구조가 변경됐을 때 버전에 따라 변환해서 이전 데이터를 새 포맷으로 맞춰줌.앱 업데이트 시 state 구조가 바뀌어도 예전 데이터를 안전하게 변환.예전 버전 사용자가 업데이트된 앱을 열었을 때 에러 방지✅ migrationsconst migrations = { 0: (state) => { return { ...state, device: undefined } }, 1: (state) => { return { device: state.device } }}스토어 버전별 데이터 변환 ..

Google API key가 깃허브에 노출되었다고 메일이 왔다.API 코드를 git에 그대로 노출시키는 실수를 했다.git에 코드를 push하자마자 경고 메일이 날라왔다.깃헙 어느주소 어느경로의 firebase.config.js파일 안에 키가 그대로 노출되어 있다고....We have detected a publicly accessible Google API key associated with the following Google Cloud Platform project:Project [프로젝트명] (id: [프로젝트 아이디]) with API key [API키]The key was found at the following URL: https://github.com/깃헙주소/client/src/fireb..

[문제상황]Google API key가 깃허브에 노출되었다고 메일이 왔다.API 코드를 git에 그대로 노출시키는 실수를 했다.git에 코드를 push하자마자 경고 메일이 날라왔다.깃헙 어느주소 어느경로의 firebase.config.js파일 안에 키가 그대로 노출되어 있다고....We have detected a publicly accessible Google API key associated with the following Google Cloud Platform project:Project [프로젝트명] (id: [프로젝트 아이디]) with API key [API키]The key was found at the following URL: https://github.com/깃헙주소/client/src..