하다보니

spa와 mpa 오늘날 서버에 이미 잘 만들어진 html이 있고 사용자가 브라우저에서 주소로 접속하면 서버에 이미 배포되어 있는 html 문서를 받아와 보여주는 형식. 페이지 내에서 angular react vue - csr 시대로 접어든다. 클라이언트 측에서 다 해먹는 것. html 은 텅텅 - 빈 화면 seo 구 웹사이트 ---------------------------------- spa - 하나의 페이지로 구성된 웹 어플리케이션. map - 탭을 이동할 때마다 새로운 html을 받아와 페이지 전체를 다시 렌더링하는 법 mpa의 단점이 있어 ajax가 등장하면서부터 원하는 부분만 클라이언트에서 동적으로 갈아끼울 수 있고 화면 깜빡임도 없는 spa를 사용하게 되었다. csr과 ssr에 대해 알아보자..

nuxt 프로젝트 시작 npm i -g create-nuxt-app npm init nuxt-app learn-nuxt layout 레이아웃 컴포넌트 소개 asyncData 페이지 진입하기 전에 호출되는 로직. 따라서 컴포넌트를 가리키는 값이 없다고 볼 수 있다. this를 사용할 수 없다. return 값은 컴포넌트의 data와 병합되어 사용이 가능하다. 페이지(Page) 컴포넌트에서만 사용이 가능하다. asyncData 속성 pages 폴더 안에 들어가는 폴더가 url의 구조이다. pages -detail -> /pages/detail/ 파일 기반의 컴포넌트 생성은 서버를 한번 죽여야 한다. context - app, store,route, params, query, env ...등등 속해 있다. s..

style 태그의 scoped 속성 - 해당 컴포넌트 안에서만 유효한 스타일 속성 화면에서의 데이터 변경과 vue 인스턴스의 데이터 변경이 동기화 되는 것을 확인할 수 있다. slot 특정 컴포넌트를 다른 컴포넌트에서 사용할 때, 특정 코드들을 재정의할 수 있다. vue transition v-enter : 시작 v-enter-to : 끝 호이스팅 코드의 라인 순서와 관계없이 함수 선언식과 변수를 위한 메모리 공간을 먼저 확보한다. Enhanced Object Literals - 향상된 객체 리터럴 - 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성 가능 Modules - 자바스크립트 모듈화 방법 - 자바스크립트 모듈 로더 라이브러리(AMD, CommonJS) 기능을 js 언어 ..

v-for {{people[0].name}} {{people[0].age}} {{people[1].name}} {{people[1].age}} {{people[2].name}} {{people[2].age}} {{people[3].name}} {{people[3].age}} {{person.name}} {{person.age}} {{person.name}} {{person.age}} {{person.name}} {{person.age}} {{index}} v-for를 사용해서 객체의 속성을 반복할 수도 있다. {{ value }} {{ index }}. {{ name }}: {{ value }} new Vue({ el: '#v-for-object', data: { object: { title: 'How ..

뷰 인스턴스 생성하기 모든 vue 앱은 Vue 함수로 새 vue 인스턴스를 만드는 것부터 시작한다. vue 인스턴스를 생성할 때는 options 객체를 전달하여야 한다. vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용이 가능한 컴포넌트 트리로 구성된다. new Vue({ el:'#app', data:{ number:1, show:false }, methods:{ increaseNumber(){ this.number++ }, toggle(){ this.show=!this.show }, } }) 뷰 데이터와 메소드 vue 인스턴스가 생성될 때 data 객체에 있는 모든 속성이 vue의 반응형 시스템에 추가된다. 각 속성값이 변경될 때 뷰가 반응하여..

문제 설명 원형 수열의 연속 부분 수열 합으로 만들 수 있는 수의 개수를 리턴하도록 solution 함수 완성하라. 원형 수열이란 처음과 끝이 연결되어 있는 수열을 말한다. https://school.programmers.co.kr/learn/courses/30/lessons/131701 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 처음에 접근하기를 원형 수열이니 배열을 뒤로 이어 붙여서 원본 배열의 원소 갯수만큼 slice를 해서 해당 slice 배열의 합의 집합을 구하면 되지 않을까 생각했다. 즉 핵심은 1. 배열을 이어 붙인다. 2. s..

알고리즘을 그래도 꾸준히 풀었다고 생각했는데 하반기 코테 탈락이 많았다. 뭐가 문제일까. 왜 꾸준히 풀었다고 생각했지만 실력이 늘었다는 느낌이 없을까 고민해보니 문제가 몇 가지 있었다. 1. 시간을 정하지 않고 푼다. 고민 시간을 정해놓지 않으니 집중해서 풀이법을 생각해내지 않고 그렇다고 끝까지 붙잡아서 풀어내는 것이 아니라 설렁설렁 고민하다가 구글링으로 풀이를 보고 넘어간다. 이게 가장 큰 문제였다. 생각하는 힘을 키워야 한다. 연습이든 실전이든 1시간 안에 접근법 조차 생각하지 못하면 그건 틀린 문제다. 1시간을 잡고 그 안에 접근법을 생각해내자. 2. 유형을 공부하지 않았다. dp, 이분탐색, 다익스트라...등등 알고리즘 유형을 공부하고 문제를 반복해서 풀기 힘들어 유형을 외면하고 그저 문제를 보고..

git commitizen은 npm install -g commitizen npm install -g cz-conventional-changelog echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc 위와 같이 설치가 가능하다. (출처 : https://velog.io/@sgd122/git-commitizen%EC%9D%98-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95-%EB%B0%8F-template%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0) 이렇게 설치를 하고 git cz를 하니 The config file at "C:\Users\32182..

npx create-next-app@latest --typescript library는 개발자로서 내가 사용하는 것이다. library를 불러와서 library를 사용해서 무언가를 한다. 그런데 framework는 내 코드를 불러오는 것이다. framework는 코드를 적절한 위치에 잘 적기만 한다면 너의 코드를 불러와서 모든 걸 동작하게 할 것이다. library를 사용할때는 내가 원하는대로 코드를 작성할 수 있고, 사용하고 싶을 때 사용할 수 있다. 리액트 같은 경우는 내가 원하는대로 routing을 다룰 수 있고, 파일명을 정할 수도 있다. 라이브러리는 내가 원할 때 언제든 어떤방법으로든 부르면 된다. 프레임워크에선 특정한 규칙을 따라서 특정한 것을 해야 한다. 우리가 그것들을 따랐을 때 모든 게 ..

알아둬야하긴 하지만 자주 사용하지는 않을 것이다. nestJS, nextJS, CRA를 사용하는 대부분의 사람들은 수동으로 타입스크립트 프로젝트를 만들 일이 거의 없다. 이런 프레임워크랑 라이ㅡ러리, 패키지들이 우리를 위해 타입스크립트 프로젝트를 만들어 준다. 타입스크립트의 구성에 대한 인사이트를 제공. - npm init -y - package.json 아래와 같이 수정 아래 name은 제가 만든 파일 명입니다. { "name": "typescript-chain", "version": "1.0.0", "description": "", "scripts": { "build": "tsc" }, "keywords": [], "author": "", "license": "ISC", "devDependencies..