개발자 퉁이리

타입스크립트 프로그래밍 책을 읽다가 생소한 단어가 눈에 들어왔어요. 타입 어노테이션. 타입 어노테이션과 타입 추론, 둘을 비교하면서 어떠한 친구들인지 한번 알아보는 시간을 가져보아요! 타입 추론 선언과 초기화를 동시에 하여 초기화된 값을 통해 타입을 해석하는 동작을 말해요. const tooo1 = '퉁이리' 위와같이 선언과 초기화를 동시에 해주면 타입스크립트는 tooo1의 값을 string으로 간주해요. 초기화를 해준 '퉁이리'의 값을 통해 string을 추론한 것이죠. 실제로 typeof를 통해 확인해보면 'string'이라고 나옵니다. 원래 C언어나 C++ 등 자바스크립트 이전 언어들은 보통 타입을 선언해주었어요. string tooo1 = "퉁이리"; 다음과 같이요. 그렇지만 우리 멋진 자바스크립..

반복문 자바스크립트에서 여러 데이터 값을 관리할 때 배열이나 객체를 많이 사용한다. 이러한 데이터를 관리할 때, 유용하게 쓰이는 반복문인 map, filter, reduce에 대해 정리해보자! map, filter, reduce에 대해 알아보기 전에 기본적인 for문을 가볍게 짚고 넘어가 봅시다! for문 const practice = [ { name: "개발자", value: 150, active: false }, { name: "퉁이리", value: 200, active: true }, { name: "프론트엔드", value: 110, active: true }, { name: "티스토리", value: 300, active: true }, { name: "깃허브", value: 250, acti..

예외 처리 예외 처리란 프로그램 실행 시 정상적으로 작동되지 않을 때, 해당 오류를 대응하는 방법을 의미합니다. ✨예외란? 일반적인 통례나 정해진 규칙에서 벗어남을 의미해요. 자바스크립트에서도 정해진 규칙이 있다. 따라서 우리는 자바스크립트에서 정해준 문법을 따라서 코드를 구성해야 합니다. 그런데 가끔 정의되지 않은 코드를 참조한다거나, 정의되지 않은 함수를 참조할 때 애러가 발생하고 우리는 이를 해결해야 합니다. 이때 예외 처리를 한다면 해당 오류를 대응할 수 있습니다. 지금부터 알아봐요! 예외 처리 방법 throw try catch Promise async/await 1️⃣ throw 예외를 강제로 발생시켜야 하는 상황에서 throw를 사용해요. 애러 내용을 커스텀할 수 있다는 특징을 가지고 있습니다..

ViteJS vite는 빠르고 간결한 빌드 도구다. 웹 프로젝트 규모가 계속해서 커짐에 따라 빌드를 하는 시간도 그만큼 길어지고 있다. vite는 이러한 문제를 해결할 수 있는 능력을 가지고 있다. 프랑스어로 빠름을 의미하는 vite는 그 이름에 걸맞게 엄청나게 빠른 빌드 속도를 자랑한다. 지금부터 CRA의 대항마인 vite를 사용하여 React 프로젝트를 생성해보자 Vite는 원래 Vue용으로 개발되었지만 React, Svelte 등 거의 모든 웹 프레임워크를 지원하고 있다. Vite가 현재 지원하는 템플릿 JavaScript TypeScript vanilla vanilla-ts vue vue-ts react react-ts preact preact-ts lit lit-ts svelte svelte-t..

자바스크립트 패키지 매니저 자바스크립트 패키지 매니저는 프로젝트에서 사용할 패키지에 대해 설치, 수정, 삭제 등을 도와주는 도구다. 최고의 오픈 소스 생태계를 가진 자바스크립트에서 패키지 매니저는 정말 중요한 존재이다. 최근에는 오픈 소스를 사용하지 않으면, 개발 진행이 안 될 정도로 유용하고 좋은 자료들이 너무 많이 개발되어있다. 그리고 서로서로 의존성이 높아서 하나를 받으면 다른 것을 받아야 하는 상황도 연출된다. 패키지 매니저를 통해 오픈 소스를 다운로드하게 되면 프로젝트 안에서 package.json에 목록이 저장되고, 후에 install 명령어를 통해 package.json 안에 있는 정보들을 손쉽게 다시 다운로드할 수도 있다. 그렇다면 패키지 매니저의 종류로는 무엇이 있을까? npm과 yarn..

CORS CORS는 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유를 말한다. 날 너무나도 힘들게 하고 괴롭혔던 CORS CORS가 무엇인지에 대해서는 이전 포스팅에서 이미 다루었으므로 SKIP!! 오늘은 CORS를 proxy로 해결해보자. proxy로 CORS 해결하기 배포 : netlify WEB 배포를 netlify로 했는데 배포 후 서버에서 데이터를 불러오려고 시도하면 계속해서 CORS 오류가 발생했다. CORS가 무엇인지는 알고 그에 대한 해결법도 알고 있었지만 막상 직접 경험하니 머리가 새하얘졌다. 이전 프로젝트에서도 CORS를 만났는데 서버에서 받아오는 데이터를 그냥 저장하여 불러오는 식으로 해결했었는데 이번에는 정말 해결하고 싶었다. 나는 배포를 net..

Flexbox Flexbox는 반응형 레이아웃 및 구성 요소를 만드는 데 사용된다. Flexbox는 CSS3 레이아웃으로 사용자 인터페이스에 대해 최적화된 배치를 해준다. 지금부터 행과 열 형태로 레이아웃을 구성하는 Flexbox에 대해 알아보자 Flexbox 적용법 display : flex; 적용법은 간단하다. Flexbox를 적용하고 싶은 레이아웃에 대해 display 속성을 flex로 설정하면 된다. FlexBox를 설정하면 여러 속성을 활용하여 커스터마이징을 할 수 있다. 위 사진을 보면 여러 속성이 있는 것을 확인할 수 있다. 기본 Flexbox 속성들을 지금부터 알아보자. Flexbox 속성 main axis main-start | main-end main size cross axis cro..

인터페이스 인터페이스는 타입을 정의하는 강력한 방법으로 변수, 함수, 클래스의 타입을 정의할 수 있게 도와준다. 인터페이스는 변수, 함수, 클래스의 타입을 정의함으로써 일관성을 유지시켜주는데 크게 기여한다. 인터페이스가 어떻게 작동하는지 다음 예시를 통해 확인하자. interface Items { id: string category_id: string category_name: string name: string price: number } 위 예시를 보면 Items라는 인터페이스 안에 여러 변수가 들어있다. 그리고 각각 타입이 지정되어 있는 것을 확인할 수 있다. interface 형식 interface 이름 { 키: 타입 key : type } interface를 선언한 후 이름을 지정해준다. 그리고..

inputmode inputmode 속성을 이용하면 input에 대한 요소, 가상 키보드를 지정하여 사용할 수 있다. inputmode 속성 none text (기본값) decimal numeric tel search email url 1️⃣ none 가상 키보드를 사용하지 않는다. 페이지가 자체 키보드나 입력 컨트롤일 때 사용한다. 2️⃣ text 사용자의 표준 입력 키보드가 나타난다. 3️⃣ decimal 소수점( , or . )을 지원하는 숫자형 키보드를 제공한다. 장치에 따라 음의 부호( - )의 제공 여부는 다르다. 4️⃣ numeric 숫자형 가상 키보드를 제공한다. (소숫점은 없다) 5️⃣ tel 전화번호 키보드를 제공한다. 숫자 0~9, 별표(*), 해시(#) 키를 포함한다. 6️⃣ sea..

FLUX FLUX는 FaceBook에서 고안한 단반향 데이터 흐름의 디자인 패턴이다. FLUX 패턴은 REACT Redux의 디자인 패턴으로 사용되고 있다. MVC 모델을 사용하고 있던 FaceBook에서 데이터가 많아지고, 복잡해지자 예상치 못한 오류들을 FaceBook에게 안겨주었다. 위 그림처럼 복잡해졌고, FaceBook은 이를 해결하기 위해 FLUX 패턴을 고안해낸다. FLUX 패턴 FLUX 패턴은 데이터를 보다 명확하게 구분하기 위해, MVC 복잡성을 해결하기 위해 데이터의 방향이 한쪽으로만 이동한다. FLUX 요소 Action Dispatcher Store View 🔥 Action Action은 데이터 상태 변경을 도와준다. Action 생성자는 type과 payload를 묶어 Dispatc..