비전공 프론트엔드 개발자

1. 읽기전용 ( ReadOnly ) 읽기 전용은 수정이 안되고, 읽기만 가능하다. let drink: readonly string[] = ["water", "juice", "coffee", "beer"]; drink.push("tea"); // error 타입을 지정할 때 readonly 만 붙이면 끝. 2. Tuple 최소한의 길이와 특정위치에 특정타입을 지정할 수 있다. const developer: [string, number, boolean] = ["jun", 29, true]; developer 라는 변수의 각위치 인덱스들은 지정된 타입만 선언이 가능하다. 최소한의 길이를 넘어갈 경우 에러가 발생한다. 3. typeof unknown 오해할 수 있는 부분은, result 라는 변수는 타입이 지..

1. 타입 추론 ( Type inference ) let course = ' react-type-script ' => 문자열 course = 1234 => 숫자열 course 는 타입을 지정해 주지않아도 선언된 시점에 문자열로 지정이 된다. ( 매번 타입을 지정해주는건 상당히 귀찮은 행동이다. ) 숫자열을 재할당을 하게 될 경우 에러가 발생한다. ( 결론. 타입을 지정하지 않아도 타입스크립트는 할당된 값에 따라 타입을 자동으로 지정해준다. ) 2. 유니온 타입 변수를 선언할 때 하나의 타입만 사용하지 않고, 여러 타입을 혼용하게 될 때가 있다. let exampleType : number | string = ' This is union type ' -> 문자타입과 숫자타입 모두 사용 가능. ( 현재 문자..

let num: number; num = 2; let userName: string; userName = "jun"; let isBoolean: boolean; isBoolean = true; function addNumber(a: number, b: number) { return a + b; } let data = addNumber(2, 5); 변수에 타입을 지정할 수 있다. 타입지정과 선언을 동시에 할 수 있다. 배열의 값도 타입을 지정할 수 있다. let names: string[]; // 배열의 타입 names = ["jon", "jade", "something"]; names 변수에 숫자타입을 넣게 되면 오류가 뜬다..! *** any 타입에 관하여. let person:any 타입을 any 로..

VSCODE Prettier 설치 방법 정리 1. vscode 확장? 프로그램을 먼저 설치를 확인한다. 2. 기본 포멧 에디터가 prettier 로 설정되어 있는지 확인한다. ( 추가로 해당 부분이 체크되어 있는 지도 확인해 봐야 한다. ) 3. 설정 검색 부분에 json 을 검색 후 setting.json 파일에 코드를 추가한다. 추가해야할 코드는 아래와 같다. { "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } 이 부분을 굳이 복붙하지 않아도, prettier install 페이지에서도 확인할 수 있다. 코드까지 추가가 되었..

npm uninstall -g create-react-app yarn global remove create-react-app 프로젝트를 할 때 create-react-app 을 자주 애용했다. 하지만 이번에 처음보는 오류를 보았다. 오류내용중 가장 눈에 띄는 내용은,, You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). 이런 글귀가 있었다. 검색을 해보니 create-react-app 은 더 이상 전역으로 지원을 하지 않는다고 한다. 해결방법이 상당히 간단하여 간략하게 정리할겸 공유하고자 한다. 먼저 글로벌 설치를 제거해야 한다. npm uninstall -g create-react-app yarn gl..

컴퓨터의 기본구조 컴퓨터의 구조 및 기능에 대해 학습합니다. 컴퓨터의 구조 : 하드웨어와 소프트 웨어가 합쳐진 형태이다. => 하드웨어 : 전자 회로 및 기계장치로 되어있어 입출력장치, 중앙처리장치(CPU), 기억장치 등으로 구성되어 있음. => 소프트웨어 : 그 하드웨어 위에서 제어하며 작업을 수행하는 프로그램 구성요소는 입출력장치, 중앙처리장치, 저장장치가 있다. 입력장치는 컴퓨터가 처리할 수 있는 형태로 명령이 들어오는 물리적인 장치이다. 쉽게 생각하면 키보드 마우스 등 컴퓨터와 연결해서 무언가를 입력할 수 있는 장치. 출력장치는 처리된 데이터를 사람이 알아볼 수 있게 출력해주는 물리적인 장치를 의미. 모니터가 대표적인 예시. 중앙처리장치(CPU)는 크게 산술/논리 연산장치(ALU) 와 제어장치 그..

웹표준 웹 표준의 개념과 등장 배경을 기억한다. => 웹 표준이란? W3S에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 이다. 크롬, 사파리 에서는 콘텐츠가 잘 보이지만, 인터넷 익스플로러에서는 안보이는 일이 자주 있었다. 크로스 브라우징이 되지 않아 각각 따로 개발을 해야 하니 시간과 비용이 많이 들었다. 이런 비용과 시간을 아끼고자 웹 개발의 형식을 통합하게 되었다. 그게 바로 웹 표준이다. 웹 표준을 지켰을 때의 장점을 이해한다. 1. 유지보수의 용이성 - HTML, CSS, JS 로 분리하여 관리하다 보니 유지보수가 용이해지고 코드가 경량화 되어 트래픽 비용감소. 2. 웹 호환성 확보 - 웹 브라우저의 종류나 버전 운영체제와 상관없이 항상 동등한 결과나 나오도록 할 수 있다. 3. 검색 ..

로컬 상태와 전역 상태의 차이점을 이해한다. => 로컬상태 : 특정 컴포넌트 안에서만 관리되는 상태 ( 장바구니 페이지에서 cartItem 중 수량체크 인풋, 그게 컴포넌트 안에서만 영향을 주기 때문에 로컬의 예시 ) => 전역상태 : 프로덕트 전체 혹은 여러 컴포넌트에서 동시에 관리되는 상태 ( 장바구니 페이지에서 cartItem 이 추가되거나 수량이 변경되면 금액이 변동된다. 이 금액은 여러 컴포넌트가 상태를 관리함. ) 전역 상태의 필요성을 이해한다. => 전역상태를 남발하는 것은 좋지 않다. 하지만 다른 컴포넌트가 하나의 상태를 다룬다면 출처는 반드시 하나여야 한다. 이를 전역공간으로 한다. 전역공간을 쓰지 않을 경우 공통의 부모 컴포넌트에서 props 를 사용하여 계속해서 내려줘야 하는데 이는 ..