What I studied

리액트를 공부하다 Vue로 넘어오면서 초기 셋팅부터 기본적인 설정까지 해보게 되었는데, vite + vue3 프로젝트를 먼저 셋팅해준 후, ESLint와 prettier 설정까지 마무리했다. 이 글은 내가 보기 위해 정리하는 것이다. 리액트와 관련된 라이브러리는 많이 사용해서 알고 있었지만 Vue는 처음이다보니 Vue와 관련된 것들은 모두 생소했다. 그래서 어떤 것들이 필요하고 어떤 것들이 사용되는지부터 차근차근 알아보면서 적용해보려고 한다. 1. Vite 란? Vite는 Webpack과 같은 빌드 도구인데 웹팩을 사용할 때보다 빠른 속도로 빌드된다는 장점이 있어 많은 주목을 받고 있다. 기존까지는 없었던 프론트엔드 개발 경험을 향상시켜줄 새로운 프론트엔드 툴인 것이다. 기존에는 원래 Vue 전용이었지만..

함수는 함수 정의를 통해 생성하는데 함수 선언문, 함수 표현식, Function 생성자 함수, 화살표 함수 등을 통해 함수를 정의할 수 있다. 함수를 정의한 후에 함수를 실행시키려면 함수를 호출시켜야한다. 1. 함수 정의 방법 1) 함수 선언문 function hello (a, b) { return a+b; } console.log(hello(3,7)); // 10 2) 함수 표현식 const hello = function (a, b) { return a+b; } console.log(hello(3,7)); // 10 3) function 생성자 함수 const hello = new Function('a', 'b', 'return a + b'); console.log(hello(3, 7)); // 10 ..

vue의 state 흐름이 어떻게 이루어지 알아보기 위해 간단하게 CRUD를 구현할 수 있는 TodoList를 만들어봤다. 리액트는 useState를 통해 상태를 업데이트할 수 있었는데 vue와는 어떤 차이가 있을지도 궁금했다. 공식 문서를 보면 프로젝트를 시작하는 방법부터 자세하게 나와있어서 차근차근 따라해보았는데 생각보다 크게 어렵지는 않았던 것 같다. 1. Vue 프로젝트 시작하기 npm init vue@latest 해당 명령어를 입력하면 아래와 같이 옵션을 선택할 수 있는데, 내가 원하는 상황에 맞게 옵션을 선택해주면 빠르게 만들 수 있다. 나는 router 설정과 Eslint, prettier 옵션을 선택한 후 프로젝트를 생성했다. ✔ Project name: … ✔ Add TypeScript?..

Vue 프로젝트를 처음 만들어 이것저것 실행을 시켜보니 정말 많은 에러를 만날 수 있었다. 처음에 리액트를 사용했을 때도 그랬던 것 같은데 Vue도 처음이니 이럴 수 밖에 없는 것 같다..? 처음에는 App.vue 파일에서 count 함수를 실행시키고 조건문과 반복문을 사용하는 정도로 실행을 시켜봤는데, 두번째 단계인 컴포넌트 생성에서 에러를 만났다. 컴포넌트 폴더 안에 Fruit.vue 라는 파일을 생성했는데... 화면이 안보인다... ESLint가 화면을 막아버렸다. 뭐가 문제인걸까 에러 로그를 쭉 읽어보니 error Component name "Fruit" should always be multi-word 라는 문구가 눈에 띄었다. 컴포넌트의 이름은 항상 multi-word여야한다? 뭔소리지? Us..

매번 리액트만 공부하다가 vue로 만든 프로젝트는 어떻게 동작하는지 궁금해서 vue를 설치해봤다. vue는 공식문서도 잘 되어있어서 보고 따라하기 어렵지 않았는데, cdn을 통해서 설치하거나 npm, CLI 등의 방식으로 프로젝트를 시작할 수 있는 것 같았다. 그래서 위 방법 중 npm 설치를 통한 프로젝트 시작과 CLI 방식을 통한 프로젝트 시작 두가지를 시도해보았는데. CLI 방식을 위해 글로벌로 패키지 설치를 시도했는데 바로 에러가 발생했다. $ npm i -g @vue/cli 에러 로그는 다음과 같다. npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/@vue npm ERR! errno -13 ..

9기에 이어서 이번 10기 기술매니저로도 참여하게 되었는데, 첫 순회를 돌면서 생각보다 잘하시는 분들이 많아 안심이 되었던 것 같다. 10기에도 역시 리액트, 리덕스, 리덕스툴킷, json-server, custom hooks 등의 과정이 포함되어있었고 수강생분들이 과제를 하며 어려운 점 등을 같이 고민해보고 해결해드릴 수 있어 뿌듯했다. 지금은 모른다 솔직히 말하면 나는 리덕스 툴킷이나 json-server, custom hooks 등을 직접 사용해본적이 없다. 내가 6기 과정에 참여하고 있을 당시에는 새로운 것을 배울 때 하나하나가 모두 어렵게만 느껴지고 이렇게 하는 것이 맞나? 라는 생각이 들었는데 지나고 나니 이제는 새로운 것을 배울 때 공식문서나 구글링을 통해 찾아보는 것이 습관이 되었다. 그래..

자바스크립트는 객체 기반의 프로그래밍 언어인데 원시값을 제외한 나머지는 모두 객체이다. 자바스크립트의 원시값에는 숫자, 문자열, 불리언, null, undefined, 심벌 등이 있고 객체 타입에는 함수, 배열, 정규 표현식 등이 있다. 1. 객체 생성 방법 자바스크립트는 클래스 타입의 객체지향 언어가 아니라 프로토타입 기반 객체지향 언어로서 다양한 객체 생성 방법을 지원하는데 아래와 같은 방법으로 객체를 생성할 수 있다. 객체 리터럴 Object 생성자 함수 Object.create 메서드 생성자 함수 클래스(ES6) 이 중에서 가장 흔하게 사용되며 간단하게 객체를 생성할 수 있는 방법은 객체 리터럴을 이용하는 방법이다. 객체 리터럴은 객체를 생성하기 위한 표기법으로 약속된 기호를 사용하여 값을 생성하..

어떤 언어를 사용하던 조건문과 반복문은 정말 많이 사용하게 될 수밖에 없다. 각각의 Case에 따라 내가 원하는 결과를 얻기 위해서 조건문을 사용하고, 반복문을 통해 하나의 코드로 동일한 작업을 수행할 수 있도록 해줄 수 있다. 1. 조건문( if문 ) 가장 대표적인 조건문 사용방법은 if문을 사용하는 것이다. 입력받은 점수가 60이하일 때, 재시험 대상이라는 문구를 띄워주었다. const mathScore = prompt('영어 점수를 입력해주세요.') if(mathScore { if(EnglishScore > 90) { alert('잘했어요!') } else if(EnglishScore > 70) { alert('조금 더 분발하세요.') } else { alert('재시험 대상입니다!') } } sc..

프로그래밍을 하다보면 데이터 타입이 일치하지 않아 가끔 예상치 못한 오류를 뱉어내기도 하는데 예전에 실전프로젝트를 진행하며 풀리지 않는 문제로 계속해서 고민했던 적이 있었다. 그 때는 아직 많이 부족해 원인을 찾는데 너무 오랜 시간을 허비했지만 지금은 비슷한 문제 상황이 생겼을 때 데이터 타입을 비교해보는 것까지 꼼꼼하게 체크하게 된다. 1. 자바스크립트의 데이터타입 데이터 타입이란 것은 말 그대로 값의 종류를 의미한다. 자바스크립트에서는 총 7개의 데이터타입을 갖는데 크게 원시타입과 객체 타입으로 분류할 수 있다. 숫자타입, 문자열타입, 불리언타입, null 타입, undefined 타입, 심벌타입을 포함하는 원시타입과 객체, 함수, 배열 등을 포함하는 객체 타입이 있다. 구분 데이터 타입 설명 원시 ..

우리가 사용할 변수를 선언할 때, 전역 변수로 선언하거나 지역변수로 선언해 사용하는 방법이 있다. 전역 변수와 지역변수의 개념에 대해서 잘 모를 때는 그냥 아무렇게나 사용했었는데 다시 공부하면서 공통으로 사용하는 변수만 전역 변수로 사용하고, 되도록이면 지역변수를 사용하는 것이 좋다는 것을 알게 되었다. 1. 전역변수와 지역변수 전역 변수는 프로그램 전체에서 접근할 수 있는 변수로, 글로벌 스코프를 갖는 변수이다. 즉, 함수 외부에서 선언된 변수라고 할 수 있으며, 프로그램이 종료되어야만 메모리에서 삭제되는 특성이 있다. 반면에, 지역변수는 함수 내부에서 선언된 변수로 함수가 실행되면 만들어지고 함수가 종료되면 메모리에서 삭제된다. 1) 전역변수와 지역변수의 사용 예제 // 전역변수 const name ..