전체 글

Vue CLI를 통해서 프로젝트를 생성한다. Vue CLI Vue CLI is currently in maintenance mode and no longer the default tooling used to build Vue applications. Vuetify projects are now generated using vite. We plan on enabling the Vue CLI installation path in an official guide in the future. 먼저 아래 명령어를 치면 npm create vuetify 프로젝트 이름, 초기 설정, 타입스크립트 사용 여부, 패키지 의존성 관리 및 스크립트 실행 도구 설정을 할 수 있다. 나는 아래와 같이 설정했다. - project ..

vue3 부터는 vite 기반의 빌드 설정이 사용된다. vuetify3 프로젝트를 시작하기 전에 vite가 무엇인지부터 알고 가면 좋을 것 같다. 프로젝트를 생성하기 전 vite가 무엇인지 알아보자~! # Vite란? Vite(비트)는 Vue 창시자 에반 유가 만든 프론트엔드 빌드 도구이다. vite는 자바스크립트 네이티브 모듈(ESM)을 기반으로 한 데브 서버이다. vite를 사용하면 기존에 사용되던 번들링 도구들(웹팩, 롤업 등)을 사용할 때 보다 훨씬 빠르게 개발 및 배포가 가능하다. 다른 프론트엔드 빌드 도구와 어떤 차이점을 가지는지 알아보면 vite에 대해 더 이해하기 쉬울 것 이다! # 자바스크립트 네이티브 모듈(EMS)란? EMS(ECMA Script Modules)의 공식문서 정의는 아래와..

# 1. 타입스크립트 탄생 배경 자바스크립트는 일주일만에 생겨난 언어라는 말이 있다. 자바스크립트는 초기에 브라우저에서 HTML, CSS의 한계를 극복하고자 간단한 프로그래밍 동작을 수행하기 위해 만들어졌다. 애초에 간단한 기능만 수행하기 위해 만들어지다보니 제약이 없고, 언어차원에서 많은 기능을 제공할 필요도 없었다. 그러나, 웹 시장이 급격히 발전하기 시작하면서 브라우저에서 많은 동작이 필요하게 되었고, 애플리케이션의 복잡도가 올라가면서 복잡성이 높은 애플리케이션을 설계할 수 있는 능력을 갖추게 되었다. 웹 시장이 발전하면서 많은 개발자가 자바스크립트에 익숙해졌고, 다른 시장에서도 자바스크립트를 활용하고자 하는 수요가 늘었다. 이 수요에 맞춰 브라우저 밖에서도 자바스크립트를 실행할 수 있는 Node...

# 주요 내용 1. netlify: command not found 해결방법 2. Client-Side 에서 API Key를 노출하지 않고, TMDB API와 통신하기 위한 redirect server 만들기(netlify를 통해 서버리스 만들기) 기업 과제 중 TMDB의 Open API를 통해서 영화 목록 리스트를 구현하고 있었고, API Key를 숨겨야하는 것이 구현 과제였다. TMDB의 API는 key를 파라미터로 전달해주어야한다. https://api.themoviedb.org/3/movie/76341?api_key= # 문제 (feat: .env 통해서 API Key 숨기는거 의미없다..) 나는 여태 .env 파일을 통해 API Key를 숨겼는데, 이건 진짜 숨겨지는 것이 아니였다. .env는 ..

# 1. 내가 겪은 문제 아래 영상에서 처럼 아래 방향키를 한 번 눌렀을 때 뇌암-> 뇌경색 순서대로가 아닌, 뇌암 -> 뇌출혈로 이동되는 현상이다. 마치 2번 누른 것 처럼 중복된 이벤트가 발생되는 것 같다. 구글링 엄청 했는데 보통 한글 입력이 2번 발생하는 현상이라는 글이 많았다. 나는 한글입력은 올바르게 동작되고 있었기에 이 문제와 다른 문제라고 생각했다. # 2. 문제 파악 사용한 코드는 아래와 같다. 상황 파악을 위해 콘솔을 찍어보는 방법밖에 없었다.. // SearchBox.jsx import React, { useEffect, useState } from "react"; import searchApi from "../api/seachAPI"; import ResultList from "./..

로컬 캐시 스토리지를 구현하려는데 생각보다 쉽지 않았다. 로컬 스토리지는 localStorage.setItem 등으로 쉽게 구현했는데, 캐시 스토리지 사용법은 잘 정리된 블로그를 찾기가 어려웠다. 따라서 크롬 블로그를 통해서 최대한 구현해보려고 했다! https://web.dev/i18n/ko/cache-api-quick-guide/ 나처럼 어려움을 겪는 사람들을 위해 캐시 스토리지를 구현하면서 발생한 에러와 설정하는 방법 디바운싱을 사용한 검색기능까지 공유해보려고 한다! [내가 구현하고 싶은 것] 1. 검색창 입력으로부터 API 응답 결과를 로컬 캐시 스토리지에 저장한다. 2. 검색창에 똑같은 입력이라면 API를 호출하지 않고 캐시된 데이터를 불러온다. => '뇌'를 입력하면 이미 캐싱된 데이터를 불러..

클린 코드에 대해서 많이 들어봤을 것이다. 그러나 개발자로서 왜 클린코드를 작성해야 하는지에 대해서 알고 있나? 많이 듣던대로 가독성과 유지보수를 위해서 라고 대답할 것 같다. 나 또한 그렇기 때문이다! 하지만 좀 더 심층적으로 알고 싶고 왜 클린 코드로 작성하면 유지보수가 쉬운지 클린코드를 어떻게 작성해야하는지 포스팅하려고 한다. # 1. Clean Code 개발자가 갖춰야하는 능력 중 하나는 좋은 코드(클린 코드)를 쓰는 것이다. 이는 매우 중요하며 나쁜 코드를 쓰지 않는 것은 더더욱 중요하다. 왜 좋은 코드를 써야할까? 코드는 소프트웨어의 근본이기 때문이다. 이 근본이 나쁜 코드로 이루어져 있다면 곧 망가지고 만다. 이는 더이상 기능을 확장하거나, 수정할 수 없다는 의미이다. 소프트웨어는 의미 자체..

서버는 백엔드 개발자만 알아야하는 지식일까요? 프론트엔드 개발자는 기획, 백엔드 등 다양한 직무의 사람들과 협업해야 하며 의사소통해야 합니다. 따라서 프론트엔드도 알아야 할 서버의 운영 방식과 클라우드 컴퓨팅에 대해서 알아봅시다! # 1. 서버란? 보통 우리는 인터넷을 통해 특정 웹사이트나 리소스에 접속하게 됩니다. 하지만 정확히 말하면, 우리가 접속하는 것은 해당 웹사이트나 리소스를 제공하는 컴퓨터에 접근하는 것입니다. 서비스를 제공하기 위해서는 일반적으로 컴퓨터를 작동시키고, 특정 프로그램을 실행시켜 네트워크를 통해 컴퓨터에 접속하면 원하는 리소스를 얻을 수 있습니다. 이 컴퓨터는 외부에서 접근 가능하도록 인터넷에 연결되어 있으며, 이러한 컴퓨터를 우리는 보통 "서버"라고 부릅니다. 서버는 물리적인 ..

1. 타입과 타입 별칭(Type Aliasing) 기존 타입에 대한 별명 부여 객체에 대한 새로운 타입 생성 type MyType = string; // MyType 이라는 별칭 부여 let a :MyType = "Hello"; type MyType2 = { name:string; age:number; } letb : MyType2 = { name:"홍길동", age:20 }; 1.1 선택적 필드와 읽기 전용 선택적 필드: 물음표를 사용 => age 필드는 값이 들어갈 수도 있고, 없을 수도 있다. 읽기 전용 : readonly 사용 => email 필드는 처음 값이 정해지면 변경할 수 없다. // 선택적 필드와 읽기 전용 type MyType3 = { name:string; age?number; rea..

Typescript 컴파일러와 loader - 컴파일러(트랜스파일러): tsc 1. 타입스크립트 설치 npm install -D typescript // -D는 --Save-dev와 같음 2. 아래 명령어를 순서대로 따라하기! 1. mkdir typescript-test // 디렉토리 만들기 2. cd typescript-test // 디렉토리 들어가기 3. npm init // 패키지 생성(엔터로 기본값 설정하기) 3. npm install -D typescript // 개발자 의존성 설정으로 타입스크립트 npm 설치 4. // VSCode 실행 후 '보기'-'터미널' 을 열고 다음 명령어 실행 npx tsc --init //tsconfig.json 파일을 만들어주는 명령어 5. // package.j..