오늘의 CODE

클론 코딩 책을 보고 따라하던 중 기재된 내용과는 다르게 자꾸 에러가 나는 상황이 발생했다. 아무래도 책이다보니 출판 후 업데이트 되기가... ㅎㅎ React-router가 v6로 업데이트 되어 생기는 에러가 대다수였다. 최신 뉴스는 아니었지만 그동안 React에 소홀했던 나에겐(반성반성😑 ) 당황스러웠다. 내용을 잊지 않기 위해 정리해본다. Migration 프로세스 1. React V16.8 이상으로 업그레이드 2. React Router V5.1 이상으로 업그레이드 내부의 모두 제거 커스텀 리팩토링 - components나 render 속성을 사용하는 대신 children 속성 사용 3. React Router V6으로 업그레이드 V6버전은 V5버전 대비 번들 사이즈가 많이 줄었다고 한다. (이전 ..

회사에서 지난 프로젝트의 소스코드를 유지, 수정하고 새로운 기능을 추가해야 하는 추가 프로젝트에 참여하게 됐다. 기존 소스 코드는 React로 만들어진 프로그램으로 아직 수정될 내용이나 추가될 기능에 대한 기획서를 받아보지 못한 상태에 코드 분석을 먼저 진행하기 위해 소스코드를 클론했다. 근데... npm install을 해도 아무리 해도 node_modules 폴더도 생성되지 않았으며 당연히 실행되지 않았다. 검색 및 지인 찬스를 이용해 결국 버전이 너무 낮은 모듈 때문에 그랬던 것으로 확인했다. 그도 그럴 것이 소스코드 마지막 수정이 3년전... 해당 모듈을 stable한 버전으로 변경하니 실행되는 것을 확인했다. 어찌저찌 상황은 해결했지만 보다 근본적인 의문이 생겼다. 그동안은 그냥 튜토리얼을 보고..

스택이란? 스택(STACK)은 객체들의 집합소로 데이터를 기록하는 구조라고 보면된다. 스택이란 쌓아올린다는 것을 의미한다. 따라서, 스택 구조라는 것은 책을 쌓는 것처럼 차곡차곡 쌓아올린 형태의 구조를 말한다. 스택의 특징 스택은 같은 구조와 크기의 자료를 정해진 방향으로만 쌓을 수 있고, 정해진 곳을 통해서만 접근할 수 있다. 아래가 막혀있고 위가 뚫린 형태로 차곡차곡 쌓는 구조로 볼 수 있는데, 이러한 경우 가장 위의 자료가 가장 최근에 쌓인 자료가 된다. 스택은 시간 순서에 따라 자료가 쌓여 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다는 구조적 특징을 가진다. 이를 후입선출(LIFO, Last-In-First-Out)구조라고 한다. 스택에서 삽입은 PUSH, 삭제는 POP이라는 용어로 사용하고 ..

arr.reduce(callback [,initialValue]) 자바스크립트의 reduce 함수는 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환한다. 파라미터 1. callback function accumulator - accumulator는 callback 함수의 반환값을 누적 currentValue - 배열의 현재 요소 index(Optional) - 배열의 현재 요소의 인덱스 array(Optional) - 호출한 배열 callback 함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종적으로 하나의 값을 반환한다. 2. initialValue(Optional) 최초 callback 함수 실행 시 accumlator 인수에 제..

요소를 더하거나 지우기 Array.push(...items) - 맨 끝에 요소 추가 const list = [1, 2, 3, 4, 5]; list.push(6); // 6 list; // [1, 2, 3, 4, 5, 6] Array.pop() - 맨 끝 요소 추출 const list = [1, 2, 3, 4, 5]; list.pop(); // 5 list; // [1, 2, 3, 4] Array.unshift() - 맨 앞에 요소 추가 const list = [1, 2, 3, 4, 5]; list.unshift(0); // 0 list; // [0, 1, 2, 3, 4, 5] Array.shift() - 맨 앞에 요소 추출 const list = [1, 2, 3, 4, 5]; list.shift(); /..

undefined는 변수를 선언하고 값을 할당하지 않은 상태, null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다. 즉, undefined는 자료형이 없는 상태이다. null과 undefined는 둘다 Javascript의 여섯가지 기본값에 포함되며, Javascript의 falsy value에 포함된다. 여섯가지 기본값(Six primitive value in Javascript) Boolean Null Undefined Number String Symbol falsy value false 0 (zero) "" (empty) null undefined NaN (Not a Number) typeof를 통해 자료형을 확인해보면 typeof null // 'object' typeof undefin..

문제. 노치라는 영역은 웹뷰에서는 문제없이 노출되지만 아이폰으로 확인 시 가려지거나 짤려보이는 현상을 말한다. 노치는 다른 표현으로 안전영역(safe Area)라고 할 수 있다. 아이폰 화면의 레이아웃이 변경되면서 생긴 문제로 X버전부터 이런 문제가 발생하기 시작했다. 해결. 1. 전체 화면 설정 meta 태그를 추가한다. viewport-fit이란? viewport에 새로 추가된 속성으로 단순한 사각형 모양의 디스플레이가 아닌 디스플레이를 위한 속성이다. vieport-fit을 지정하지 않으면 기본값은 auto로 콘텐츠를 모두 보여줄 수 있도로 콘텐츠를 축소하여 보여준다. viewport-fit을 위와 같이 cover로 지정 시 viewport를 스크린 전체로 확대한다. 아이폰X가 나오면서 단순히 네모..

node-sass, sass-loader 설치 npm install --save-dev node-sass sass-loader nuxt.config.js 설정 // nuxt.config.js export default { css: [ '~assets/scss/app.scss' ] } error 발생 Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function 설치 후 위와 같은 에러가 발생한다면 버전 호환이 되지 않아 발생하는 에러다. 기존 모듈을 삭제하고 버전 10을 설치한다. // 기존 모듈 삭제 npm uninstall sass-loader // 10버전 재설치..

플젝을 바로 시작할 수 있는 설치가 되어있다고 가정하고 진행하도록 한다. 만약 설정이 안되있는 경우, 아래의 글의 vue-cli 설치방법을 따라 준비하도록 한다. https://mirabo.tistory.com/122 [nuxt.js] NUXT(템플릿 설치는 vue-cli) 설치하기 NUXT를 설치하는 방법으로는 크게 3가지가 있다. 1. vue-cli 설치 2. npm(yarn) 설치 3. 수동설치 1. vue-cli 설치 vue-cli로 Nuxt start-template을 다운받아 설치한다. vue-cli를 전역으로 설치(미설치 시에만).. mirabo.tistory.com 프로젝트 설치 완료 시 아래와 같은 구조를 가진 프로젝트가 생성된다. Axios / Proxy 설정 api통신을 사용하기 위해..

TypeScript 추가하기 vue2에서 TypeScript를 사용하는 두가지 방법을 알아보자 🚗 프로젝트 생성할 때 추가하기 1. vue-cli로 프로젝트 생성 vue create 프로젝트명 2. Manually select features 선택 3. TypeScript 및 필요한 항목 선택 4. 선택한 항목에 대한 옵션 선택 5. 프로젝트 생성 완료 🚙 프로젝트 생성 후 추가하기 1. TypeScript를 제외한 프로젝트를 생성 2. 해당 프로젝트의 터미널에서 아래의 명령어 입력 vue add typescript 3. 필요한 옵션 선택 4. 타입스크립트 추가로 생성되있던 기존 파일 중 일부 변경 및 새로운 파일 추가(자동) 🔥 주의 사항 기존 프로젝트에 TypeScript를 추가하는 경우, 옵션 선택..