Next.js 다양한 기능 layout 패턴 components 폴더에 Layout.js 만들어 NavBer, Header 등 공통으로 사용하는 것을 넣는다. 공통으로 사용하는 것을 _app.js에 작성해도 되지만, 대중적으로 app.js를 크게 하기보단 Layout

아 Nextjs 뭐더라~ 분명히 썼었는데~다시 쓴다~쉽게 풀어 말하면 라이브러리(Library) : 단순 활용가능한 도구들의 집합 같은 느낌내가 사용하고 싶을때 사용하고 사용하고 싶은거 사용하면 된다.프레임워크(Framework) : 프레임워크가 정한 규칙대로 사용해야

꿀 먹은 벙어리가 되지 않기 위한 차근차근한 노력 #1 포트(Port) IP 주소와 함께 표기하는 예시 : http://000.000.000.000:21 http : 프로토콜 000.000.000.000 : IP 주소 :num : 포트 번호 포트(port)는 보통

Cloudinary는 클라우드 기반의 이미지 및 비디오 관리 서비스이다. 이미지나 비디오를 그냥 업로드 하는 것이 아니라 변환하여 더 빠르게 로딩할 수 있고,변환 시 퀄리티나 시각적으로 영향을 주지 않으며 자동으로 이미지나 비디오를 다른 버전으로 만들 수 있게 한다.일

Firebase는 구글에서 지원하며 어플리케이션 개발 플렛폼이다.빌드하고 어플리케이션을 성장할 수 있게하고 게임을 만들 수 있도록 도와준다.Firebase는 빌드 단계부터 시작해서 배포 후까지 모든 프로세스에서 필요한 것들을 담고 있다.빌드 : Firestore, Au

Git Git : 다운받아 설치해서 사용하는 형상 관리 도구(Configuration Management Tool) 프로그램 GitHub : Git을 기반으로 여러 가지 서비스를 제공하는 온라인 서비스 Git 사용하기 1. Git 설치 Homebrew 페이지에서 스

오늘 Vue 강의를 다 들었다,,좀 굵직한 것들은 나름? 다 들은 것 같다왜 이렇게 오래 놀았나 자책도 하곤 했지만 이제와 다시 생각해보면그래도 나를 위해 쉬어도 되는, 쉴만한 시간이었던 거 같다Vue 강의가 끝나갈 때쯤 Vue가 끝나면 뭐부터 시작해야 하나 막막했는데

실제로 Vuex는 코드 구조를 제한하지는 않는다. 하지만,애플리케이션 레벨의 상태<span style="color:2. 상태를 변경시키는 유일한 방법은 동기 트랜잭션인 mutation을 commit하는 것비동기식 로직은 캡슐화되어야 하며 action으로 구성위 규

단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 하나의 큰 객체 안에 포함되게 된다.그러나 규모가 커짐에 따라 저장소가 매우 비대해질 수 있다.이를 위해 Vuex는 저장소를 모듈로 나눌 수 있다.각 모듈은 자체 <span style="backgroun

액션은 mutations와 유사하다. 다른 점은,상태를 mutations시키는 대신 액션으로 mutations에 대한 commit을 한다.<span style="background-color:\`\`\`javascriptconst store = new Vuex.S

Vuex 저장소에서 실제로 상태를 변경하는 유일한 방법은 변이<span style="color:Vuex mutations은 이벤트와 매우 유사하다.각 mutations에는 타입 문자열 핸들러가 있고 핸들러 함수는 실제 상태 수정을 하는 곳이며, 첫 번째 전달인자로

때로는 저장소 상태를 기반하는 상태를 계산<span style="color:<span style="color:\`\`\`javascriptcomputed: { doneTodosCount () { return this.$store.state.todos.

Vuex는 단일 상태 트리<span style="color:즉, 이 단일 객체는 모든 애플리케이션의 상태를 포함하며 원본 소스<span style="color:이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미한다.단일 상태 트리를 사용하면 특정

Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다.애플리케이션의 모든 컴포넌트에 대한 <span style="background-color:또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및

번들러를 이용한 앱 제작 시, JavaScript 번들이 매우 크다면 페이지 로딩 시간에 영향을 미칠 수 있다.각 라우트의 컴포넌트를 별도의 단위로 분할하고 경로를 방문할 때 로드하는 것이 효율적일 것이다.Vue의 <span style="background-col

클라이언트 측 라우팅을 사용할 때 <span style="background-color:vue-router는 이러한 것들을 할 수 있으며, 라우트 탐색에서 스크롤 동작을 완전히 사용자 정의할 수 있게 한다.<span style="color:라우터 인스턴스를

때로는 라우트가 활성화될 때 서버에서 데이터를 가져와야 한다.<span style="color:이때, 두 가지 방법을 사용할 수 있다.탐색 후 가져오기: <span style="background-color:- 탐색하기 전에 가져오기: 라우트 <span

<router-view>는 본질적으로 동적인 컴포넌트이디.때문에 <transition> 컴포넌트를 사용하는 것과 같은 방식으로 트랜지션 효과를 적용할 수 있다.<span style="color:\`\`\`html 대상 라우트와 현재 라우트 간의 관계를

라우트를 정의 할 때 meta 필드를 포함시킬 수 있다.routes 설정의 각 라우트 객체를 라우트 레코드 라고 한다.라우트 레코드는 중첩 될 수 있으며 <span style="background-color:예를 들어, 위 라우트 구성에서 URL <span

네비게이션 가드(navigation guard) 란 뷰 라우터로 <span style="background-color:예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술이다.애플리케이션 전역에서 동작하는 전역 가드특정 ur