하빈H

뷰 라우터란? 뷰 라이브러리를 이용하여 싱글 페이지 어플리케이션을 구현할 때 사용하는 라이브러리 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM 방식이 있다. 그 중 CDN 방식으로 설치한 예제는 아래와 같다. 해당 소스를 Open with Live Server로 실행시켜 보면 Vue 인스턴스에 VueRouter가 잘 주입이 된 걸 확인할 수 있다. ($route)

Git Clone 할 때 Token으로 미리 로그인 해두지 않으면 원격 브랜치에 push할 때 로그인 하라는 알림창이 뜬다. 매번 로그인하기 번거롭다면 Token을 생성해서 연동해두면 편리하다. 1. Push 요청을 했을 때 로그인 하라고 뜨는 팝업에서 Use Token... 클릭 2. Generate 버튼 클릭 3. GitHub에 로그인 4. 기본으로 입력되는 것 그대로 사용해도 무방하다. 5. Generate token 버튼을 클릭하면 다음 창으로 넘어가고, 생성된 Token을 복사한다. 6. IntelliJ로 돌아가서 복사한 Token을 입력하고 Log In 버튼을 클릭하면 연동이 되면서 소스 Push가 될 것이다.

최근에 회사와 개인 프로젝트에서 Lombok을 사용하게 되었다. 단순히 @Data 어노테이션으로 getter, setter 코드 작성하는 걸 줄여주는 것만 있는 줄 알았는데, 생각보다 유용한 기능이 더 많았다. 편리한 만큼 잘못 사용하기도 쉽기도 하니 각 어노테이션별 특징은 더 알아보고 업데이트해야될 것 같다. Lombok이란? 여러가지 어노테이션을 제공하여 반복되는 소스코드를 컴파일 과정에서 자동으로 생성해주는 Java 라이브러리이다. @Data 사용 방법 : https://projectlombok.org/features/Data @Data projectlombok.org @NoArgsConstructor, @AllArgsConstructor 사용 방법 : https://projectlombok.org..

깃허브에 있는 repository를 내 로컬의 인텔리제이에 clone하고자 한다. 1. File > Project from Version Control...을 클릭한다. 2. URL에 복사한 repository url을 입력하고, Directory에 복사하고자 하는 디렉토리 경로를 선택한다. 3. Trust Project를 클릭한다. 4. This Window를 클릭하면 현재 열려있는 인텔리제이 창에, New Window를 클릭하면 새 창에 clone한 소스를 열어서 볼 수 있다.

같은 컴포넌트 레벨 간 통신 같은 컴포넌트 레벨 간 데이터를 전달하기 위해서는 상위 컴포넌트를 통해야한다. 아래 그림과 같이 appContent라는 하위 컴포넌트에서 appHeader라는 하위 컴포넌트로 데이터를 전달하려면 appContent에서 Root로 Event를 발생시키고 Root에서 Props 속성을 내려주는 방식으로 구현하면 된다. 예시 appContent에서 Event로 10을 전달해주면 Root의 num 속성에 세팅하고, 이를 propsdata라는 Props 속성으로 appHeader에 데이터를 전달해주었다.

컴포넌트 통신 방식 프롭스(Props) 속성 : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줌 이벤트(Event) 발생 : 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 올려줌 Props 예시 상위 컴포넌트의 data가 바뀔 경우 하위 컴포넌트의 props도 바뀐 데이터가 반영된다.(Reactivity) 프롭스 속성 이름(아래 예시에서 'propsdata')는 여러 객체에서 동일하게 작성해도 구분이 된다. Event 예시

Vue란? MVVM((model-view-viewmodel) 패턴의 뷰모델(viewmodel) 레이어에 해당하는 화면 단 라이브러리이다. 뷰 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다. 뷰 인스턴스 생성 예시 아래와 같이 코드를 작성하고 VS Code의 Open With Live Server 활용해서 띄운 후 개발자도구로 열어보면 데이터 메시지가 잘 뜬 것을 확인할 수 있다. 인스턴스 속성 el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) template : 화면에 표시할 요소 (HTML, CSS 등) data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메소드 created : 뷰의 라이프 사이..

1. VS Code에서 Source Control > Download Git for Windows를 클릭한다. 2. git 설치가 완료되면 VS Code를 재시작 후 Source Control > Clone Repository를 누르고 Clone하고자 하는 git주소를 입력한다. 3. Repository 위치를 선택한다. 4. Clone이 완료되면 '열기'를 누른다.

1. Chrome https://www.google.com/intl/ko/chrome/ Chrome 웹브라우저 더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게. www.google.com 2. Visual Studio Code https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform ..

습관형성 플랫폼인 '챌린저스'와 같이 좋은 습관을 만들고 공유할 수 있는 웹 프로젝트를 진행하기로 했다. 아래는 기획 회의를 통해 요구사항을 정리한 목록이다. No Requirement Use case 1 필수 및 선택값을 입력하고 회원가입하한다. * 필수 : 아이디, 비밀번호, 비밀번호 확인, 닉네임, level 공개여부 * 선택 : 나이, 성별, 프로필 사진, 이메일, 연락처 1.1 회원가입 2 회원은 회원 정보를 수정할 수 있다. * 닉네임, level 공개여부 * 이 외 선택값 1.2 회원정보수정 3 회원은 비밀번호를 변경할 수 있다. 1.3 비밀번호 변경 4 회원은 회원 탈퇴할 수 있다. 1.4 회원 탈퇴하기 5 관리자는 level 구조를 관리할 수 있다. * 공통코드 관리 혹은 별도 화면 관리..