익명의 개발노트

1. 보여지는 화면의 구성이 같고, 보여지는 데이터가 다른 경우 1) 공통 컴포넌트 하나 생성 후 API콜 부분 분기처리 2) 템플릿 부분 v-if문으로 보여지는 화면 분기처리 (1) 를 사용하여 분기처리해도 되고, 바로 태그에 v-if 달아서 분기처리 해도 됨. 3) 데이터 받아와서 저장하는 부분 분기처리 2. 부모컴포넌트에서 하위 컴포넌트 데이터 전달시 1) props이용하거나, 자식에서 데이터 생성 => props로 데이터 내려주는 게 드라이한 설계 3. Slot을 이용하여 표시 1) react의 children같은 기능, 1번같이 데이터가 일부 다른데 수정하기 애매한 경우 Slot으로 써도 되고 애초에 Slot을 이용해도 좋음. 2) 하위 컴포넌트에 화면 받아서 보여주고 싶은 부분을 slot으로 ..

1. 동적 라우팅 1) 페이지 전환시 기존 정보 가지고 가는 라우팅 기술 2) 라우터에 가지고 갈 정보를 표시해주고, 실제 라우터 링크에서 값을 표기해 줌 { path:'/user/:id', component: UserView, }, 아래와 같이 사용할 경우에는 라우터에 위와 같이 표기안해주어도 된다. { path:'/user', component: UserView, }, //클릭시 페이지 이동시키고 싶을때 라우터 링크사용 2. v-html 1) 서버로부터 받아오는 내용에 HTML이 포함되어있는경우 사용 {{fetchedItem.content}} 3. 트랜지션 1) 뷰에서 트랜지션 기능을 기본으로 제공해 준다. 2) 트랜지션 이름 기준으로 css가 prefix되어 있기 때문에 트랜지션 이름 변경시 css..

OSX 모하비 이후부터는 zsh가 bash를 대신해서 default 터미널로 사용됩니다. 설치순서 1. brew 먼저 설치 한다. /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. iterm2 를 다운받아 설치 https://www.iterm2.com/ iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain www.iterm2.com..

1. 파일마다 태그 상단에 /*eslint-disable*/ 주석을 단다. 2. vue-cli 공식문서에서 lintOnSave 검색 => 제일 바깥에 vue.config.js 파일만들고 아래 사진과 같이 설정해준다. 3. Script단에서 components: { ToolBar } import한 후 template 단에서 라고 사용해도 되고(strong한 방법), 식으로 사용해도 된다. 두번째는 mac 기준으로 option버튼 누르고 클릭하면 해당 컴포넌트파일로 바로 이동가능하다. vscode자체 기능.(essential 한 방법)

1. 타입스크립트는 무엇인가? 자바스크립트에 타입을 도입한 자바스크립트이며, 자바스크립트의 상위 집합(Super set)이다. 2. 왜 사용하는가? 시스템 규모가 커짐에 따라 시스템의 복잡도가 늘어나는데, 이럴때 정적타입의 타입스크립트가 빛을 발휘한다. (1) 빠른 버그 발견가능 : 실행되기 전에 상당수의 오류 잡아낼 수 있다. (2) 컴파일러 및 코드 에디터가 코드를 실행하지 않고도 프로그램에 대해 훨씬 더 많은 정보를 알 수 있다. (3) 자바스크립트는 간단한 실수조차 실제 코드를 실행해 봐야 잡아 낼 수 있는 반면, 타입스크립트는 실행전에 잡을 수 있다. => 안전하게 코드를 작성할 수 있다. 3. 기본타입 1) boolean const a: boolean = true; 2) number const..

구분 장점 단점 언제사용? 어레이 검색, 중간꺼 삭제, 맨뒤에 넣는 것은 빠름 순서가 있으니 인덱싱이 있음 1.앞으로 넣거나, 중간에 넣는 것은 느림 2.크기가 고정이라 크기가 꽉차면 늘려줘야한다 (js에서는 알아서 해결해줌) 단순 읽기(read) 및 쓰기(write) 작업이 많은 데이터에 좋다. ex) ui>li 리스트 저장 링크드 리스트 1.메모리를 동적할당하기 때문에 크기를 미리 지정할 필요가 없다. 2. 배열에 비해 추가, 삭제가 용이하다. 1.배열에 비해서 클래스로 저장해버리기때문에 메모리 를 더 먹음 2. 배열에 비해서 느림(인덱스로 찾는 방식이 아닌 연결 주소로 찾아가는 방식) 리사이징과 수정, 삭제 많을 때, ex) 주식 시세정보, 기본적으로 리스트 저장할때 배열을 쓰지만, 링크드 리스트가..

하나의 큰 어플리케이션을 여러개의 작은 어플리케이션으로 쪼개어(쪼갯을때 스스로 구동이 가능해야함) 변경과 조합이 가능하도록 만든 아키텍쳐 각각 구동되어야함 각각 배포가능 서비스간 의존성 적어야함 1. MSA 장점 배포 관점 서비스 별 개별 배포 가능 ( 배포 시 전체 서비스의 중단이 없음) 요구사항을 신속하게 반영하여 빠르게 배포할 수 있음 확장(scaling) 관점 특정 서비스에 대한 확장성이 용이함. 클라우드 사용에 적합한 아키텍쳐. 장애(failure) 관점 장애가 전체 서비스로 확장될 가능성이 적음 부분적 장애에 대한 격리가 수월함 쪼개져있기때문에 신기술 적용이 유연 2. MSA 단점 서비스가 커짐에 따라 복잡도가 증가할 수 있음. 성능 - 서비스 간 호출 시 API를 사용하기 때문에, 통신 비용..

서비스 지향 아키텍처란 대규모 컴퓨터 시스템을 구축할 때의 개념으로 업무상의 일 처리에 해당하는 소프트웨어 기능을 서비스로 판단하여 그 서비스를 네트워크상에 연동하여 시스템 전체를 구축해 나가는 방법론이다. 위 예시처럼 기존에 완성된 기능(고객정보 조회, 대출심사, 계좌이체, 대출내역관리) 들을 새롭게 조합(신용대출)하여 하나의 업무를 구현하는 방식이다.

1. restful api에서 delete method를 이용해서 게시물을 지울때 게시물의 번호를 url로 넘기고, audit 기능 구현을 위해 사용자의 IP를 파라미터로 보내려고 했다. 그런데... 파라미터로 넘겼는데, 서버단에서 작동하지 않는다.. 구글링 결과 > 공식 스펙상으로 DELETE 메소드에서도 바디에 메세지를 담아 보내는걸 금지하고 있지는 않은데 암묵적으로 서버에서 무시하도록 되어 있는거 같습니다. 주로 헤더에 파라미터를 추가하는 방법으로 사용하라고 나와있네요. 그래서 사용자 IP주소값을 헤더에 추가해서 보냈더니, 해결.. 위 사항에 대해서 수정! 서버가 작동안하는게 아니라, 내가 잘못 보냈.. 이런식으로 하면 보내진다. HTTP 스펙에 대해 이해가 부족했다. 공부하자.

1. 리액트의 리덕스 개념이며, 전역으로 데이터 관리를 위해서 사용함. 데이터 관리를 위해 단방향으로 관리하도록 설계되어있다. 기본적으로 store에 직접 접근하여 state 값을 변경할 수 있으나,(아래와 같이) Parent counter : {{ $store.state.counter}} + 그럴 경우 코드의 중복이 많아서 데이터에 접근할 때는 getters을 이용하여, 데이터에 접근한다. //store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export const store = new Vuex.Store({ state: { counter: 0 }, getters: { getCounter: function(state){ retu..