온라인 강의(유데미, 인프런 등) (43) 썸네일형 리스트형 [한 입 크기로 잘라먹는 타입스크립트] 타입스크립트 이해하기 1. 타입스크립트 이해하기 타입스크립트를 이해한다는 말은 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들간의 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사 하는지 그 원리와 동작 방식을 낯낯이 살펴본다는 말이다. 중요한 문법 들만 쏙쏙 뽑아서 달달 외우듯이 빨리 배워서 빨리 프로젝트에 타입스크립트를 적용하는것도 방법이 될 수 있긴 하지만 타입스크립트는 문법만 외워서 대부분의 상황에 잘 써먹을 수 있을 만큼 만만한 언어는 아니다. 원리와 개념에 대한 수준급의 이해가 없다면 새롭거나 어려운 문제를 맞닥뜨렸을때 스스로의 힘으로 해결하기 힘들다. 결론은 뭐다? 뭘 배우던 시간을 가지고 천천히 배워나가야 한다. 급할 때 볼 수 있는 타입스크립트 중요 문법 모음도 있다. htt.. [한 입 크기로 잘라먹는 타입 스크립트] 타입스크립트 기본 1. 기본 타입 기본 타입(내장 타입) = 타입스크립트가 자체적으로 제공하는 타입 2. 원시 타입 원시 타입(Primitive Type) = 동시에 한 개의 값만 저장할 수 있는 타입 원시 타입이 아닌 배열이나 객체 같은 비 원시 타입들은 동시에 여러 개의 값들을 저장할 수 있는 반면, number, string, boolean 등의 원시 타입은 단 하나의 값만 저장 가능하다. 1) number 타입 자바스크립트에서 숫자를 의미하는 모든 값을 포함하는 타입. 단순 정수 뿐만 아니라 소수, 음수, Infinity, NaN등의 특수한 숫자들도 포함한다. 변수의 이름 뒤에 콜론(:)과 함께 변수의 타입을 정의하는 문법 = ‘타입 주석’ or ‘타입 어노테이션’ // number let num1: number .. [react] redux를 사용하기 싫을 때 전역 데이터 관리 방법 - react custom hook으로 바꾸기(feat. context API) Redux를 사용하고 싶지 않을 때?! 리액트만 존재하는 세상에서 살고 싶을 때 부가 라이브러리를 설치하기 싫을 때 리덕스를 사용하지 않고 전역 state를 관리하고 싶을 때 해결 방안 1 ) context API 장점: 사용하기 간단한 편. 리덕스를 몰라도 됨. 단점: 고빈도 업데이트에는 효율적이지 않음(테마나 인증에는 적합). context에 변경 사항이 있을 시 useContext를 사용하는 모든 컴포넌트가 다시 빌드되고 리렌더링 됨(직접적으로 영향받았는지 상관 안 하고) -> 자주 바뀌는 state의 관리에 최적화되어있지 않음. https://bbeeyaks-moment.tistory.com/entry/react-context-API-useContext [react] context API cont.. [test] react 테스트 간단 개념 정리 Manual Test 브라우저에서 코드 미리 보며 테스트하는 것으로 매우 중요하다. 하지만 가능한 모든 조합과 시나리오를 테스트하는 것은 어렵기 때문에 오류 발생 가능성이 있다. Automatical Test 코드를 테스트하는 코드로 앱의 개별 구성 요소를 테스트한다. 매우 기술적인 요소지만 모든 구성 요소를 한 번에 테스트할 수 있다. 1. Unit Tests 가장 작은 단위에 대한 테스트를 작성하는 것이다. 개별 구성 요소(함수, 컴포넌트)를 격리하여 테스트한다. 프로젝트에는 일반적으로 수십 또는 수 백 개의 단위 테스트가 포함된다. 가장 흔하고 가장 중요한 test이다. 모든 개별 단위를 각자 테스트하면 전체 애플리케이션도 동작한다는 아이디어로, 전체 애플리케이션이 실제로 작동하는지 확인하기 위해 .. [vercel] vercel로 client 배포하기 vercel nextjs를 만든 팀과 같은 팀이 개발하였고, nextjs에 최적화되어 있다. Git과 연동되어 따로 파일을 빌드할 필요없이 프로젝트 폴더를 Git에 push 해준뒤 vercel과 프로젝트 폴더를 연동 시켜주면 된다. 수정사항이 생길 경우 수정 뒤 다시 push해주면 자동으로 재배포가 된다. 1. 깃헙 레포지토리 vercel과 연결 2. 배포 완료 되면 'visit' 버튼 누른 후 배포 링크 방문 후 테스트 메인 프로젝트에서 배포할 때 vercel을 사용했어서 vercel 사용 방법이 궁금했는데, NextJS 강의를 들으며 해당 내용이 있어 정리해보았다. 정리라고 표현할 것도 없이 무지무지 간단했다! 나중에 토이 프로젝트 진행할 때 가볍게 배포해주면 너무 좋을 것 같다. 이제 코스에서 배웠.. [NextJS] NextJS 개념 정리 NextJs React를 기반으로 한 생산용 React 프레임워크이다. 대규모의 양산형 React 앱을 쉽게 개발할 수 있게 도와준다. 프레임워크?! 라이브러리보다 크고 다양한 기능을 가진다. 코드를 작성하는 방법, 파일을 구성하는 방법에 대한 명확한 규칙과 지침이 있다. 서버 사이드 렌더링(자동으로 사전 페이지 렌더링. SEO에 유리)을 내장하고 있는 React 풀스택 프레임워크이다. 백엔드 코드를 프로젝트에 쉽게 적용할 수 있어 프로젝트에 클라이언트와 백엔드 코드를 모두 내장시킬 수 있다. npx create-next-app npm run dev 를 이용해 개발 서버를 시작할 수 있다. React에서 react-router-dom의 라우팅은 CSR을 제공하고, Next에서 제공하는 File Syste.. [typescript] tsconfig.json tsconfig.json에서 중요한 설정들만 정리하고 넘어가자. { "compilerOptions": { // 작성된 코드를 어떤 자바스크립트 버전으로 변환할건지 결정 "target": "es5", // 타스 라이브러리들 -> 어떤 타입이 타스에서 기본적으로 지원되는지 결정 "lib": ["dom", "dom.iterable", "esnext"], // .js 파일 초함 여부 결정. 일반 자스 파일을 프로젝트에 둘건지, 에러 표시 안할건지 "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, // 프로젝트에 가장 엄격한 설정 적용됨 -> 묵시적 any 설정 불가. 명시적으로 타.. [typescript] typescript 개념 정리(2) React with TypeScript 설치 npx create-react-app 프로젝트 이름 --template typescript 리액트는 jsx문법을 사용하기 때문에 typescript를 사용할 때 확장자명을 ts가 아닌 tsx로 사용한다(컴포넌트를 생성하는 게 아니라면 ts로 작성해도 됨). props의 타입 지정 : React.FC props의 타입을 Generics로 지정한다. -> FC 자체가 Generics 타입이다. React.FC를 사용하면 props에 기본적으로 children 이 들어가 있고, 컴포넌트의 defaultProps, propTypes, contextTypes를 설정할 때 자동완성 기능을 이용할 수 있다. React.FC가 이미 제네릭 타입이기 때문에 타입은 이미 정의된.. 이전 1 2 3 4 5 6 다음
