오늘의 CODE

회사에서 지난 프로젝트의 소스코드를 유지, 수정하고 새로운 기능을 추가해야 하는 추가 프로젝트에 참여하게 됐다. 기존 소스 코드는 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를 추가하는 경우, 옵션 선택..

vue-carousel을 한 레이어에 multiple로 사용하게 되었다. 제공되는 API는 슬라이드를 miltiple 사용에 대한 속성이 따로 정해져 있지 않았다. pc에서는 사용에 불편이 없었지만 mobile에서 슬라이드의 세로축 스크롤 시 클릭 이벤트가 실행되는 현상이 발견되었다. github에서 이슈를 확인해보니 나랑 비슷한 문제에 봉착한 사람이 있는 듯 했다. 그래서 첫번째 스크립트 작성 시 참고해봤다. https://github.com/SSENSE/vue-carousel/issues/566 In mobile view scrolling carousel down is triggering click event. · Issue #566 · SSENSE/vue-carousel Bug Report Curr..