김기지의 코딩노트

타입스크립트에서 배열 타입과 튜플 타입을 시용해보자!! 🍉 배열 타입 정의하기 배열을 저장하는 변수의 이름 뒤에 배열요소타입[ ] 형식 또는 Array 형식으로 배열 타입을 정의한다. (꺽쇠와 함께 타입을 작성하는 문법을 타입스크립트에서 '제네릭' 이라고 부른다.) 배열 요소의 타입이 string이거나 number일 것을 의미 이처럼 바(|)를 이용해 여러 타입 중 하나를 만족하는 타입을 정의하는 문법을 유니온(Union) 타입이라고 부른다. 🐾 다차원 배열 타입 정의하기 [ ]를 연달아 작성해 다차원 배열 타입을 정의한다. let doubleArr : number[][] = [ [1, 2, 3], [4, 5], ]; let doubleStr:string[][]= [ ['hello', 'welcome']..

타입스크립트의 기본 타입 (Basic Types) 타입스크립트가 자체적으로 제공하는 타입들 또는 내장 타입이라고도 할 수 있다. 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 '타입 계층도'를 살펴보자. null, undefined, number 등 흔히 알고 있는 타입 뿐만 아니라 any, void, never 같은 처음 보는 타입들도 존재한다. 이렇게 꽤 많은 기본 타입들이 제공되며 이런 각각의 기본 타입들은 서로 부모-자식 관계를 이루며 계층을 형셩한다. 🐾 실습 환경 설정하기 이전 시간에 설정한 옵션과 동일하게 설정한 후 타입스크립트 파일을 만들어 컴파일한다. // tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "..

🌵@types/node 설치하기 @types/node 패키지란? Node.js 내장 기능들의 타입 정보를 담고 있는 패키지 > npm i @types/node 📌 @types/node 패키지를 설치해야 하는 이유? 더보기 @types/node 라이브러리는 Node.js가 제공하는 기본 기능(내장 함수, 클래스 등)에 대한 타입 정보를 가지고 있다. 때문에 설치하지 않으면 Node.js가 제공하는 console 등의 기본 기능들의 타입이 선언되지 않는다. 타입스크립트 코드를 실행하기 전에 타입 검사 과정을 거치는데, 이 과정에서 타입이 선언되지 않은 코드는 타입이 올바르게 사용되지 않았다고 판단되어 오류가 발생한다. 따라서 Node.js의 기본 기능들을 위한 타입을 별도로 선언하기 위해 @types/nod..

대부분의 프로그래밍 언어는 어떻게 동작할까? 대부분의 프로그래밍 언어는 인간친화적이다. 프로그래밍 언어는 영어 문법과 비슷하기 때문에 바이트 코드나 기계어, 이진수 같은 언어를 기반으로 동작하는 컴퓨터가 프로그래밍 언어를 바로 이해할 수 없다. 그래서 컴퓨터는 코드를 해석하기 쉬운 형태로 변환하는 '컴파일'과정을 거쳐 코드를 실행한다. 다른 언어로 변환하는 프로그램 -> 컴파일러 📍 컴파일 과정 컴파일러는 어떤 과정을 거쳐 컴파일을 할까? 컴파일러는 프로그래밍 언어로 작성된 코드를 AST(추상 문법 트리)라는 형태로 먼저 변환한다. 더보기 AST란? 코드의 공백이나 주석 탭 등 코드 실행에 관계없는 요소들은 전부 제거하고 트리 형태의 자료구조에 코드를 쪼개서 저장한 형태 자바스크립트 코드를 AST로 변환..

🌱 타입스크립트 기존의 자바스크립트를 더 안전하게 사용할 수 있도록 여러 가지의 타입 관련 기능을 추가한 언어 즉, 자바스크립트의 확장판 언어이다. 그런데 자바스크립트가 아닌 타입스크립트를 왜 배워야 할까? 자바스크립트는 원래 간단한 상호작용 정도를 처리하기 위해 개발되었다. 그렇기 때문에 문법이 아주 유연하고 프로그래머가 아주 쉽고 간결하게 코드를 작성하는 데에 중점을 두고 만들어졌다. 버그로부터의 안정성이나 견고함을 일부 포기하게 되었지만 간단한 프로그램에서는 전혀 문제가 되지 않았다. 하지만, Node.js의 등장 이후 간단한 프로그램에서 복잡한 프로그램으로 자바스크립트의 범위가 확장되어 유연함이 안정성을 떨어뜨리는 단점이 되었다. 그래서 이런 문제점을 극복하기 위해 자바스크립트의 기존 문법과 장점..

이력서 작성을 위해 그동안 묵혀둔 프로젝트를 배포하기 시작한 김기지쿤,,, 그러나 React로 Github에서 배포하기란 생각보다 만만치 않았는데,,,!!!! 프로젝트를 배포하는 방법 중 가장 간편한 방법인 Github에서 gh-pages로 배포하기를 도전해보았다!! 사실 저번 협업 프로젝트 연습에서도 같은 방법으로 배포를 했었지만 팀장님이 배포를 하셨기 때문에 그 때의 기억을 더듬어,,,차근차근,,,, gh-pages브랜치로 배포를 하기 전, main브랜치에서 페이지 생성을 미리 해주어야 한다. 더보기 레포지토리의 settings에 들어가 page에서 배포할 파일이 들어간 브랜치에서 page배포를 해준다!! 1. package.json파일 script에 predploy와 deploy를 추가한다. "pr..

약 2달 전,,,인가,,,,? 스터디때 만들었던 Holiday Calendar를 싹 갈아 엎어버리기!!! 저 프로젝트에 관해 약간의 TMI를 나열하자면,,, 중간 발표 전날이였나,,, 급하게 주제를 변경함 디자인? 생각하지도 않고 코드부터 침 배포? 나중에 리팩토링할 생각으로 레포지토리 썩혀둠... 메인 프로젝트도 마무리되었겠다, 깃헙 저 아래 숨겨두었던 이 아이를 꺼낼 때가 되어 리팩토링을 시작하려 한다. (주저리 끝!!) 메인 프로젝트때 담당했던 부분이 마침 또 캘린더였고 멘토님이 추천해주셨던 useQuery를 사용해 HTTP통신을 해보려한다. 🔥 React Query 애플리케이션에서 데이터를 관리하고 API와의 상호작용을 간편하게 처리하기 위한 라이브러리 React Query를 사용해 데이터를 캐싱..

프로젝트 기간에 들어가기에 앞서 스터디에서 협업 프로젝트 경험하기 우리의 주제는 UrClass Clone 4명이서 각자 맡을 컴포넌트를 나누다 보니 팀 페이지를 추가로 구현하게 되었다. 🐾 협업 프로젝트의 첫 번째 Step 원격 저장소 연결하기 처음엔 내가 사다리타기에 걸려 원격 저장소를 만들어야 했다. 구글링을 하면서 저장소를 생성하고 팀원분들께 권한 부여까지 마쳤는데,,, 지라에서 연결이 안된다,,,!!! 결국 관리자이신 현진님이 원격 저장소를 만들어 권한을 부여해주셨다. 프로젝트에서 사용할 브랜치를 생성하여 연결하기 위해서는 // 브랜치 생성하기 git checkout -b 브랜치명 // 브랜치 이동하기 git checkout 브랜치명 이렇게 잘 진행되나 싶었는데 문제는 끊이지 않는 법! 🚨 원격 ..

🌱 번들링 여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위 번들 : 사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음 사용자가 더 쉽고 빠르게 프론트엔드 애플리케이션에 접근할 수 있도록 용량을 줄이거나 파일을 최소화하여 유저에게 전달하는 과정 사용자가 브라우저를 열고 주소를 입력하면, 해당 주소에서 개발자가 번들링한 여러 파일을 받음 이 파일을 브라우저가 실행하여 웹 애플리케이션을 제공 🌱 번들링의 필요성 HTML, CSS, JavaScript 파일을 그대로 전송할 시 생길 수 있는 문제점 두 개의 .js파일에서 같은 변수를 사용하고 있는 경우 → 변수 간 충돌이 일어남 딱 한 번 불러오는 프레임워크 코드가 8MB → 인터넷 속도가 느린 국가의 모바일 환경에서는 사용이 불편 번들 파일 ..

🌐 반응형 웹 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론 디바이스 종류에 따라 웹 페이지의 크기가 자동으로 재조정됨 모바일 퍼스트 사용자 경험을 디자인할 때 모바일인 경우에 최우선으로 초점을 맞춰 디자인하는 것 반응형 웹의 탄생 배경 더보기 과거의 웹 사이트들은 데스크탑 컴퓨터를 통해서 이용하는 경우가 대부분이였기에 개발자들은 데스크탑에 최적화된 화면만 구성했었다. 이후 전자기기의 발전으로 태블릿, 스마트폰 등의 전자기기에서 웹에 접속할 수 있게 되어 전자기기들의 화면의 크기가 다양해져 여러 가지 버전의 웹 페이지를 만들어야 하는 경우가 발생하게 되어 반응형 웹페이지가 나오게 되었다...