project를 초기 세팅하면서 eslint에 대한 에러를 만났다. 📍 문제❌ SyntaxError: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.cjs': Unexpected token '||=' eslint 설치한 이후에 아무 것도 건드리지 않았는데, App.tsx 파일을 누르니 위 에러가 나타났다. 📍 상황위 plugin을 로드하지 못했다는 이슈로 node 버전을 통해 해결할 수 있었다.현재 나는 회사 프로젝트로 인해 노드 14 버전이 WebStrom IDE에 기본적으로 세팅이 되어 있었다.하지만 vite 로 프로젝트를 만들었기에 terminal에서는 node version을 바꿔주었지만IDE 자체에 뜨는 문제였기 때문에 ..
🔎 모듈이란? 자바스크립트에서 모듈이란 일반적으로 '파일' 각각을 말한다. 기존에는 모듈이라는 개념이 없었지만, 점점 자바스크립트 세계가 커지면서 모듈을 불러오고 내보낼 수 있도록 하였다. ECMAScript 2015(=ES 6)에서 공식적으로 모듈 시스템이 도입되었다. 각 모듈은 독립적으로 자체 스코프를 가진다. 모듈 내에서 선언한 변수, 함수 등을 해당 모듈 내에서만 사용 가능하다. 이에 따라 모듈 간에 공유하기 위해서는 export, import 구문을 사용할 수 있다. 필요한 모듈만 로드하여 사용 가능하며, 모듈화를 통해 코드를 작고 큰 단위로 나누어 관리할 수 있다. 💡 모듈 시스템 공식적으로 ESM이 도입되기 전까지는 AMD, CommonJS, UMD가 사용되었다. - AMD Asynchron..
input tag의 event 중 onKeyDown, onKeyPress, onKeyUp, onInput, onChange에 대해 정리를 하려고 한다. 이번에 몰랐던 사실들을 많이 알게 되었다 🤔 🤔 그럼 각 이벤트에 대해 먼저 알아보자! onKeyDown 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 onKeyDown만 눌렀을 때, 계속 실행이 된다는 것이다. onKeyPress onKeyDown과 마찬가지로 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 KeyCode 값이 아닌 ASCII 값이기에 한글을 포함해 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다는 것이다. 아래의 사진을 보면, 한글을 입력했을 때 해당 이벤트..
끝과 끝을 맛본 2023 😀 첫 입사한 회사에서의 퇴사와, 현 회사와의 만남 작년 11월 프론트엔드 개발자로서 처음 입사한 회사에서 3개월 업무를 하고 그만두었다. 이후에 개발팀이 완전 무너졌는데 그래도 좋은 사람들을 만나고 짧지만 압축해서 많은 것들을 배울 수 있었다. 그리고 현재의 회사에 입사를 하여 기존 코드 유지보수와 리팩토링 및 신규 서비스 개발들을 하며 어느덧 1년 차 개발자로서 성장하였다! '문제'에 대해 놀라지 않고 차분히 대응하는 태도 개발자는 문제를 해결하는 사람이다. 새로운 것을 만들어 내기도 하지만, 기존 서비스 이슈에도 계속 대응을 하며 서비스를 이끌어야 한다. 나는 회사 대표 서비스인 2개의 플랫폼 '메인' 페이지를 주 담당으로 맡게 되었다. 메인 페이지는 단순히 서비스의 진입점..
변수는 총 선언, 초기화, 할당의 3가지 과정을 거친다. var 키워드로 선언한 변수는 let, const와 다르게 선언과 초기화를 동시에 한다. 초기화 단계에서 변수의 값은 암묵적으로 undefined가 된다. 왜 여기에서 '암묵적'이라는 단어가 들어가는 것일까? 모던 딥다이브 자바스크립트책을 다시 한번 읽다가 이 키워드가 눈에 들어오기 시작했다. 암묵적 사실 변수는 undefined로 초기화되지 않는다. 메모리 공간에 이전에 다른 애플리케이션에서 사용하던 쓰레기 값이 남아있을 수 있다. 값을 할당하지 않은 상태에서 참조하게 되면 쓰레기 값이 나오는 것이다. 이러한 오류를 방지하기 위해 자바스크립트는 undefined로 한번 더 할당한다. 즉, 최초로 값을 할당하는 초기화 단계에서 var 키워드로 선언..
자바스크립트로 동적인 페이지를 만들 때 페이지 이동에 대한 여러 작성 방법이 있다. 각 코드의 사용법과 기능을 알아보겠다. location.href = '링크' location 객체에 있는 href 프로퍼티가 있다. 이를 활용하는 방법이다. 현재 페이지 상태에서 새로운 링크로 이동한다. 새 창이 띄어지지 않고 단순히 url이 변경된다. 히스토리에 남기 때문에 뒤로 가기를 해도 이전 페이지로 이동이 가능하다. - location.href 현재 페이지 경로를 반환 - location.href = '링크' 다른 페이지(링크)로 이동 hello console.log(location.href); // https://realzzu.tistory.com/ location.replace('링크') replace는 위와..
SPA(Single Page Application)인 리액트는 webpack과 같은 번들러를 통해 모든 코드가 하나의 javascript 파일로 번들링 되어 로딩된다. 이에 따라 사용자가 첫 페이지 진입 시 불필요한 코드로 인해 로딩이 느리게 될 수 있다. 브라우저에서는 javascript 파일을 모두 불러올 때까지 렌더링을 멈추기 때문이다. 렌더링 속도를 높이기 위한 방법으로는 코드 스플리팅(코드 분할)이 있다. 필요한 시점에 필요한 코드를 불러옴으로써 첫 렌더링을 빠르게 할 수 있다. 코드 분할의 방법으로 dynamic import, 즉 동적 import에 대해 알아보겠다. 기본 Import 기본적으로 import 한다면, 불러온 라이브러리는 빌드 시 함께 번들링이 된다. import { minus ..
svelte 프로젝트에서 tailwind css를 적용하는 과정에서 애를 먹었다. 결과적으로 간단했던 것인데 처음 세팅해 보는 거라 어려웠다 🥲 필수 패키지 설치 npm i -D tailwindcss postcss autoprefixer npx tailwindcss init -p 로 tailwind 초기화해주고나서 추가로, webpack을 위해 npm i -D style-loader css-loader postcss-loader 까지 설치해 준다. tailwind.config.js content에 하위 내용을 입력해 준다. /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,svelte,t..
한 줄 요약: Node를 설치할 때 LTS 버전을 권장하는 이유를 알았다 ^^^! prettier 설치 이후에 svelte 파일만 적용이 안되는 현상이 일어났다. 찾아보니 공식 문서나 git, 구글링 등에서 세팅하는 방법이 다 달랐다. 그리고 svlete 자체가 정보가 많이 없었고, webstorm이나 패키지 자체에서 해결되지 않은 이슈들도 꽤 있어 보였다. 모든 방법 다 해봐도 안돼서 포기하려던 찰나에 무언가를 발견했다. prettier-plugin-svelte의 설치 버전은 2.10.0인데, 해당 패키지 Git Repository에서의 태그는 2.7까지밖에 안나왔었다. 또한 prettier 버전은 3이었는데, last week에 출시된 버전이길래 안전하게 2 버전대로 다운그레이드하였다. 이전 버전들로..
