전체 글
-
Vuex 기초배우기 #3 (getters)front-end/Vue.js 2022. 2. 22. 10:22
getters는 computed Vuex와 같은 중앙통제 저장소를 사용하면 발생하는 흔한 문제점 중 하나는 컴포넌트에서 vuex로 데이터를 접근할 때 중복된 코드를 반복 사용하게 된다는 것이다 가령 예를들어 각 컴포넌트마다 유저의 수를 표시하고 싶다면 {{ $store.state.allUsers.length }} 이런 식으로 접근하면 된다. 문제는 컴포넌트를 생성할 때마다 같은 코드를 계속 적어주어야 한다는 것이다. 지금의 예제는 굉장히 단순한 계산식을 적어놨지만 코드가 복잡해질수록 곤란하게 여겨질 것이다. vue에서는 반복된 코드를 줄여주고 캐싱해주는 computed가 있지만 이것은 각각의 컴포넌트에서 적용이 된다. store에서 computed의 역할을 해주는 것이 getters이다. src/stor..
-
Vuex 기초배우기 #2 (state)front-end/Vue.js 2022. 2. 22. 10:22
state는 data vuex의 store는 자주 사용할 데이터들을 관리하는 상태 관리 라이브러리이다. (게임에서 창고 같은 거, 어디서나 필요한 것들을 꺼내쓸 수 있다) 먼저 AllUsers.vue에 있는 allUsers 배열은 사용자들의 정보를 담고 있었다. store로 보내기 딱 좋다. Allusers.vue의 data()에서 allUsers 배열을 store로 옮긴다. src/store.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { allUsers: [ { userId: "hoza123", password: "123", name: "Hoza", addre..
-
Vuex 기초배우기 #1front-end/Vue.js 2022. 2. 22. 10:21
유튜브 강의 중 Vuex에 관해 괜찮은 것이 있길래 정리해보았다. 사용자 정보를 입력하고 전체 사용자에 관한 목록을 출력하는 단순한 코드이다. /src/App.vue //네비게이션바 home Home person Users Application //라우팅할 페이지 //푸터 © 2021 /router.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: () => import(/* webpackChunkName: "a..
-
실무에서 바로 쓰는 Frontend Clean Code 리뷰front-end/기타 2022. 2. 22. 10:17
토스 공식 유튜브에 기재된 개발자 컨퍼런스를 참고하여 작성함 클린코드라 하면 '명확한 이름', '중복 줄이기'를 먼저 말한다. 실무에선 이 외에도 조금 더 섬세하게 코드를 정리하는 스킬이 필요하다. 리액트를 기반으로 코드를 리뷰하며 자바스크립트를 이해하고 있다면 충분히 볼 수 있는 간단한 코드로 진행된다. 1. 실무에서 클린 코드의 의의 단순한 자기 만족 이상으로 실무에서 클린 코드가 의미 있는 이유는 무엇일까? '그 코드는 안건드리는게 좋다' 라는 얘기를 종종 듣게된다. 흐름 파악이 어렵고, 도메인 맥락 표현이 안 되어 동료에게 물어봐야 알 수 있는 코드로 이해할 수 있다. 이런 코드는 개발할 때 병목이되고 유지보수가 어려우며 심하면 기능 추가 등의 확장이 불가능한 상태로 빠지게된다. 또 성능이 안 좋..
-
리베이스(rebase)를 사용해서 트리 정리하기Git & Sourcetree 2022. 2. 22. 10:10
rebase 사용해 보기 병합(merge) 처럼 두 브랜치를 합칠 때 사용하며, 소스트리에서는 '재배치'라는 명령이다. 알아보자 우선 병합(merge)를 사용한 케이스이다. rebase 브랜치와 etc 브랜치에서 각각 작업을 진행하였고, 같은 파일을 다른 내용으로 수정하였다. main에서 각각의 브랜치를 병합(merge)하게 되면 충돌이 일어난다. 충돌난 파일을 수정하면 해결이된다. 😎rebase를 사용해보자 etc 브랜치를 병합하고 rebase 브랜치로 체크아웃 후 합치고 싶은 브랜치(여기서는 main)에서 재배치를 한다. 파일 내용은 겹치기 때문에 충돌은 일어난다. 해결해주자. 변경사항을 스테이지에 올리고 아까 전 충돌로 인해 재배치가 중단되었기 때문에 다시 재배치를 요청한다. 병합과는 다르게 분기 ..
-
커밋 덮어쓰기(commit --amend)와 스태시(stash)Git & Sourcetree 2022. 2. 22. 10:09
갑작스럽게 체크아웃이 필요하다면 어떻게 해야할까? 내가 현재 작업 중인 브랜치에서 작업 내용이 아직 완료되지 않았고, 협업으로 인해 반드시 다른 브랜치로 이동하여서 급하게 핫픽스 등 다른 작업을 수행해야한다면? 테스트를 위해 임의의 진행 상황을 만들어보자. 내가 작업하던 test 브랜치에서 작업물을 아지 커밋하지 않았다. 이 상태에서 main 브랜치로 돌아가면? 에러가 발생한다. 브랜치를 만들고 체크아웃을 통해 변경하려고 하면 현재 작업 디렉토리가 깨끗해야한다. 이러한 경우 '임시 저장' 기능을 떠올리기 마련이다. git 에서의 임시 저장을 알아보자. 😎 커밋 덮어쓰기 (commit --amend) 급하게 다른 브랜치에서 작업을 해야하는 경우 작업중이던 내용을 임시 저장해야한다. 작업 중이던 내용이 미완..
-
SpringBoot와 Vue.js로 게시판 구현하기 CRUD(스프링부트, Vue, MySQL)back-end/SpringBoot 2022. 2. 22. 10:08
SpringBoot + Vue.js + MySQL 기존에 Vue를 공부했었기에 SpringBoot와 연동시켜 게시판을 구현해보았다. 스프링부트를 공부하다보면 서적이나 블로그 등에서 thymleaf나 mustache와 같은 템플릿을 사용하는 법을 알려준다. 하지만 내가 사용할 프론트엔드 프레임워크는 Vue.js이기 때문에 이를 사용할 것이다. 나처럼 스프링부트와 Vue.js를 연동하는데 어려움을 겪었던 사람들에게 도움이 되길 바란다. (사실 알고보면 서로 다른 프로젝트를 생성하여 통신하기에 익히고 나서는 왜이렇게 헤맸었나 생각이 들 정도이다.) 기본적으로 스프링부트를 어느정도 알고 Vue사용법을 안다는 가정하게 게시글을 작성한다. https://start.spring.io/ 스프링 이니셜라이즈로 스프링부트..
-
SpringBoot 게시판 구현 #2 - 1 (스프링 부트 시큐리티 + OAuth2)back-end/SpringBoot 2022. 2. 22. 10:08
스프링 부트에서는 인증과 권한에 관련된 스프링 부트 시큐리티 기능을 사용할 수 있으며, 기본 틀 안에서 원하는 대로 인증, 권한 처리를 편리하게 관리할 수 있다. 즉, 보안문제는 크게 신경 쓸 것 없이 핵심 로직만 개발하면 된다. 일반적인 인증은 사용자명과 비밀번호로 이루어지면 OAuth2(페이스북, 구글, 카카오 등) 인증 방식을 통해 회원 가입을 생략할 수 도 있다. 2.0 버전부터는 스프링 시큐리티 내부에 OAuth2 API가 포함되는 등 구조가 바뀌게 되었으니 특별히 스프링 부트 1.5 버전부터 확인하며 전체적인 적용 방식을 익혀보자. 스프링 부트 시큐리티 스프링 부트 시큐리티에서 가장 중요한 개념은 인증(authentication)과 권한부여(authorization)이다. 인증은 사용자(클라이..