본문 바로가기

국비

 (121)
03.07 국비학원 106일차 (상품 페이지 만들기(게시판 복습)) 이전 수업들에서 vue 로 UI 구성하고 spring 으로 데이터를 다루는 방식으로 게시판을 만들었다. 오늘은 복습 차원에서 그동안 배운것을 바탕으로 상품 페이지 만들기를 함. 기존 게시판을 만들던 틀에서 크게 다르지 않아 어려울 거 없다 생각했는데, 상품 등록 후 상품 목록에 업데이트 된 내용이 반영되지 않아 애를 먹었다. 아래처럼 상품 등록 자체는 문제 없이 실행된다. DB에도 등록한 상품이 반영되어 있는 것을 확인할 수 있다. 하지만 상품 목록 리스트에는 등록 상품이 반영되지 않는다....ㅜㅜ 어디 오타가 있나 싶어 한시간 동안 찾아봤는데 결국 못찾고 수업이 끝났다. 근데 역시나...ㅎ 집에 와서 다시 보니 mutation 코드가 잘못되어있었다. 상품 전체 리스트 데이터가 넘어갔어야 하는데 prod..
03.06 국비학원 105일차 (게시물 조회, 수정, 삭제) 게시물 등록에 이어 게시글 상세 조회 페이지, 수정 페이지, 삭제 기능 추가하기 > 게시물 목록 조회 작성했던 게시물 목록이 정상적으로 보여지고 있음 create schema `jpa_test` default chracter set utf8mb4; 위 명령어로 생성했던 스키마에 정상적으로 데이터가 저장된 것을 확인할 수 있음. > 게시글 상세 조회 > 게시글 수정 > 게시글 삭제 위에서 수정한 글을 삭제 버튼을 눌러 삭제해봄 전체 게시글 목록에서 해당 글이 삭제된 것을 확인할 수 있다. 0.1 Vuex : 네이버 블로그 (naver.com) 0.1 Vuex Vuex 0.1.1 Vuex state Management 상태(State)란 현재에 대한 정보(data) 상태 관리 각 component는 ... ..
03.03 국비학원 104일차 (vue↔spring↔jpa 게시판 등록) * 게시판 등록 페이지 생성 [Vue] views - 등록 페이지 components 로 등록 폼을 가지고 온다. components - 등록 폼 제목, 작성자, 본문, 등록버튼, 취소버튼을 가진 폼 생성 등록 폼은 초기 데이터를 가지고 있게 설정 하였고, onSubmit() 이벤트가 실행되면 각 title, writer, content 값을 상위 컴포넌트로 보낸다. /board-register url 에 전송되는 화면 >> store 기능 분리 (상태 관리 기능 제공) - actions.js : 비동기 통신 및 동작을 정의하고 관리 (mutation 트리거) - getters.js : 공유되는 상태 값 조회 로직 관리 - mutation-types.js : type 정의 - mutations.js : ..
03.02 국비학원 103일차 (주사위 게임) DDD : Domain Driven Development. 개발자가 SW를 개발하면서 실제 가치 있는 지식과 그렇지 않은 지식을 잘 구분해야 한다. 이를 위해선 고객이 누구인가를 잘 파악하는 것이 중요하다. DDD는 이처럼 domain 자체에 초점을 맞춘 설계 기법이다. (domain = 프로그램이 사용되는 대상 분야) VO : Value Object. 값을 저장, 관리하는 객체. 불변성 - 상태 변화(협업 상황에서 객체 생성 후 메서드에 인자로 넘기며 통제할 수 없는 수정 사항 발생) 를 처음부터 허용하지 않는다. 갈아끼우기 - setter를 남발하는 대신 불변성을 유지하면서 갈아끼우기. 객체 생성 후 값을 변경한다. 등가성 비교 - VO 자체에서 직접 비교 수단을 제공하는 방식이 무난. 객체 간 비교..
02.28 국비학원 102일차 (평가11) [인터페이스 구현] 서술형/평가자체크리스트 평가 진행 Mybatis 관련한 문제들이 주로 출제되었는데, 그동안 수업은 spring, vue 위주였어서 그새 까먹은게 많았었다. (열심히 구글링함 ㅎ) choose, when, otherwise 활용해서 동적쿼리문 작성하는 문제가 있었는데 조건문을 맞게 작성했는지를 모르겠다 허허
02.27 국비학원 101일차 (Github PR) 강사님이 만든 레포지터리를 fork 하여 PR 하는 작업 진행. 전 시간에 배우고 과제로 작업물 올리기를 내주셨는데 conflicts 나는 분들이 많아 이거 해결하는데 수업 시간 다보냄 허허.. 우선 레포지터리 fork 한 상태에서 GitHub Desktop 을 들어가 보면 내 이름의 사본 레포지터리가 보일 것임 (dduru-nuna/KHGPM-Frontend, dduru-nuna/KHGPM-Backend) clone 하기 선택하여 해당 레포지터리 누르기 원하는 경로에 clone 작업한 후, 프론트엔드 작업의 경우 vscode 로 들어가 open folder 로 프로젝트 열면 된다. !!!반드시 내이름 폴더로 들어가서 작업하기!!! 깃에는 node_modules 파일은 제외하고 올렸기 때문에 실제 구동하..
02.24 국비학원 100일차 (axios 데이터 전송(vue↔spring)) axios : 브라우저와 node.js 에서 모두 사용 가능한 Promise 기반의 HTTP 클라이언트 라이브러리이다. 비동기 통신으로 백엔드와 프론트엔드의 통신을 쉽게 하기 위해 Ajax와 더불어 사용된다. * Vue에서 Spring으로 데이터를 전송하는 간단한 예시 구현 [Vue] >> views의 AxiosTestPage.vue 'AxiosTestForm' 컴포넌트를 사용하는데 @submit 이벤트가 동작하면 onSubmit() 메서드가 실행된다. axios를 사용해 해당 url 로 이름과 전공 데이터 값을 post 요청한다. (axios를 사용하기 위해서는 아래와 같이 'npm install axios --save-dev' 명령어로 라이브러리를 설치해야한다. 설치 후, import 하여 사용할 수..
02.23 국비학원 99일차 (emit test) props - 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 props 라는 개념을 사용한다. (단방향 전달 방식) - 상위 컴포넌트에서 v-bind 또는 : 키워드를 사용하여 전달한다. :넘겨줄 이름 선언 = "넘겨줄 데이터" - 하위 컴포넌트 의 props 에 값을 넣어주고 에서 사용하면 된다. emit - 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 전달하기 위한 명령어 - 이벤트를 통해 데이터 값을 전달한다. $emit 또는 v-on 키워드를 사용한다. $emit('이벤트명', 데이터값) - 상위 컴포넌트에서 @이벤트명="메서드" 으로 사용하는데 이 이벤트가 발생하면 해당 메서드를 동작 시킨다. *오목 게임 만들기 진행중* 바둑판을 만들고 o,x 표시로 순서를 구분하기 까지 완성 >> vi..

티스토리툴바