똑같은 삽질은 2번 하지 말자

middleware 미드웨어는 레이아웃, 페이지가 랜더링되기 전에 실행되는 파일이 정의되는 폴더다. 미들웨어는 클라이언트 뿐만 아니라 서버에서도 쓰이는 개념이므로 개념 자체를 알아두면 도움이 된다.= The middleware Property 형태: String, Array, Function 요소: String or Function Named middleware 이름있는 미들웨어는 아래의 사진처럼 middleware라는 파일을 만들어 안에 인증모듈을 넣고 아래의 코드처럼 사용한다. import FollowList from '~/components/FollowList'; export default { components: { FollowList, }, middleware: 'authenticated', /..

MySQL의 인증 방법 때문에 발생하는 이슈 기본적으로 설치 중에 사용자의 인증 방법은 auth_socket 방법 / 플러그인으로 설정되어 있는데 이걸 패스워드로 바꿔줘야 ORM같은걸로 접속할 때, 비밀번호 설정만으로 접속이 가능하다. 바꾸는 방법 To alter the authentication method type the following in your mysql server console: mysql> ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password'; We are now almost done but the changes wont be reflectd unless you flush the privilag..

Homebrew velog.io/@mordred/Apple-M1-Mac%EC%97%90%EC%84%9C-HomeBrew-%EC%84%A4%EC%B9%98 Apple M1 Mac에서 HomeBrew🍺 설치 공식 홈페이지에 나와있는위 명령어는 M1에서는 $ zsh command not found brew 과 같은 결과를 준다.M1 Mac에서 HomeBrew를 설치하는 방법은 아래와 같다.brew와 함께 즐거운 개발을 시작하면 된다. 😎 velog.io zsh-syntax-highlighting 적용하기 brew install zsh-syntax-highlighting vi ~/.zshrc vi를 통해 연 .zshrc 파일에 이하의 코드를 추가해 준다. source /opt/homebrew/share/zsh-..

import Vue from 'vue'; import Vuex from 'vuex'; import VueRouter from 'vue-router'; Vue.use(Vuex); Vue.use(VueRouter); Nuxt에선 위의 방식을 사용해서 모듈을 가져오지 않는다. (코드반복 제거) nuxt.config.js export default { // Global page headers: https://go.nuxtjs.dev/config-head head: { titleTemplate: '%s - nuxt-ts', title: 'nodebird', htmlAttrs: { lang: 'en', }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: '..

마이크로 프론트앤드 크고 복잡한 제품에 대해 동시에 작업 할 수 있도록 프론트 엔드 개발을 확장하는 것이 어려움으로써 프론트 엔드 어플리케이션을 더 작고 관리하기 쉬운 여러조각으로 나누는 설계 방법론 마이크로 프론트엔드란 프론트엔드 어플리케이션을 설계하는 방법론 중 하나라고 한다. 백엔드에서 마이크로서비스 아키텍쳐가 유행했듯, 프론트엔드에서도 최근 들어 각광받고 있는 설계 방법론 마이크로 서비스처럼 전체 화면을 작동할 수 있는 단위로 나누어 개발한 후 서로 조립하는 방식으로, 여기서 작동 단위에 사용된 프론트앤드 프레임워크로 Angular 이든, React 또는 Vue 또는 Vanilla 자바스크립트에 상관하지 않고 조합 가능한 방법을 제공한다. 이론적으로 이해가 되는데, 실제로 구현하는건 솔직히 개인적..

Nuxt.js Vue의 상위 프레임워크로 SSR모드(제일 자주 이용되는)가 존재한다. Nuxt 방식 물론 CCR과 같이 SPA로 작동하지만, 서버사이드렌더링을 통해 특정페이지도 던질 수 있다.(덩어리가 아니라 거기서 쬐끔 떼어내서 던지는건가? ) (기존 CCR에서는 처음에 한번에 html css js를 웹팩을 이용해 한 덩어리째로 전송을 받고 그 이후에는 화면 리플레쉬 없이 서버에서 API로 데이터를 주고 받는다.) 그럼 왜? Nuxt일까? 클라이언트 사이드 렌더링에서도 단점이 있기때문에 나왔다. 대표적으로 프론트 자체가 한 덩어리로 검색엔진에 인식되다보니, html파일 헤드의 메타를 주로 이용하는 검색엔진(SEO) 최적화에 문제가 있다. 그리고, 화면에서 단 한번만 호출되고 변함이 없을 정보들은 서버사..

목표 자바의 상속에 대해 학습하세요. 학습할 것 (필수) 자바 상속의 특징 super 키워드 메소드 오버라이딩 다이나믹 메소드 디스패치 (Dynamic Method Dispatch) 추상 클래스 final 키워드 Object 클래스 자바 상속의 특징 상속의 개념을 알기전에 객체지향의 특징인 다형성을 알아야 하는데, 다형성(Polymorphism) 같은 자료형에 여러 가지 객체를 대입하여 다양한 결과를 얻어내는 성질 (동일한 조작방법으로 동작시키지만 동작방법은 다른 것을 의미한다.) 상속(Inheritance) 부모 클래스에서 클래스의 행동과 정의를 가져다 사용할 수 있게 해준다. 기존의 정의와 상태를 상속받아 사용할 수 있으며, 새로운 행동을 추가하거나 새로운 타입에 대한 행동을 오버라이드 할 수 있다...

타입스크립트 = 타입이 입혀진 자바스크립트 의미 왜 사용하는가? 1. 에러방지 2. 코드의 자동완성과 가이드 타입스크립트 라이브러리 설치 npm i typescript 자바스크립트 파일로 컴파일 tsc app.ts 기본타입 // js 문자열 선언 var str = 'hello'; // TS 문자열 선언 var str: string = 'hello'; // TS 숫자 let num: number = 10; // TS 배열 let arr: Array = [1,2,3]; let heroes: Array = ['Capt','Thor','Hulk',10]; // Type 'number' is not assignable to type 'string'. let items: number[] = [1,2,3]; /** ..

목표 자바의 Class에 대해 학습하세요. TodoList 클래스 정의하는 방법 객체 만드는 방법 (new 키워드 이해하기) 메소드 정의하는 방법 생성자 정의하는 방법 this 키워드 이해하기 과제 (Optional) int 값을 가지고 있는 이진 트리를 나타내는 Node 라는 클래스를 정의하세요. int value, Node left, right를 가지고 있어야 합니다. BinrayTree라는 클래스를 정의하고 주어진 노드를 기준으로 출력하는 bfs(Node node)와 dfs(Node node) 메소드를 구현하세요. DFS는 왼쪽, 루트, 오른쪽 순으로 순회하세요. Class란 ? 유사한 특징들의 지닌 객체들의 속성을 묶어놓은 그릇, 틀 같은 친구이다. 또는 어떤 하나의 물건을 만들기 위한 설계도 라..

목표 자바가 제공하는 제어문을 학습하세요. TodoList 선택문 반복문 과제 (옵션) 과제 0. JUnit 5 학습하세요. 인텔리J, 이클립스, VS Code에서 JUnit 5로 테스트 코드 작성하는 방법에 익숙해 질 것. 이미 JUnit 알고 계신분들은 다른 것 아무거나! 더 자바, 테스트 강의도 있으니 참고하세요~ 과제 1. live-study 대시 보드를 만드는 코드를 작성하세요. 깃헙 이슈 1번부터 18번까지 댓글을 순회하며 댓글을 남긴 사용자를 체크 할 것. 참여율을 계산하세요. 총 18회에 중에 몇 %를 참여했는지 소숫점 두자리가지 보여줄 것. Github 자바 라이브러리를 사용하면 편리합니다. 깃헙 API를 익명으로 호출하는데 제한이 있기 때문에 본인의 깃헙 프로젝트에 이슈를 만들고 테스트..