TutleKing Story

Spring 에서 controller 의 역할을 하는 모듈로서, vue-router 라는 라이브러리를 설치하여 사용한다.router 와 routes 설정이 필요하다.전역으로 router 를 사용하기 위해서는 createApp 으로 등록이 필요하다 : a 태그를 대신해서 사용하는 커스텀 컴포넌트 : url에 맵핑된 컴포넌트 표기란전역 등록import { createApp } from 'vue';import App from './App.vue';import router from './router';createApp(App).use(router).mount('#app');routes// src/router/index.jsimport HomeView from '@/views/HomeView.vue';import..

Non-Prop 속성Non-Prop 속성 (= fallthrough 속성)props 혹은 event에 명시적으로 선언 되지 않은 속성 혹은 이벤트를 의미속성 상속컴포넌트가 단일 루트 요소 라면, 루트 요소에 자동으로 추가이때 기존 class 나 style 이 있었다면 병합됨중첩되어있다면, 그 아래 컴포넌트 까지 fallthrough 속성이 닿는다중간에서 해당 속성을 props 이나 emit 하고 있다면 comsume 되어 닿지 않는다.속성 상속 비활성화inheritAttrs: false속성 상속을 비활성화하는 일반적인 시나리오는 루트 노드 이외의 다른 엘리먼트에 속성을 적용해야 하는 경우fallthough 속성을 제어하고자 하는 곳에서 $attrs 로 접근속성을 넘길때 ab-bar로 썼다면 $attrs[..

vue 스타일 가이드 - 필수 사항https://ko.vuejs.org/style-guide/rules-essential.html컴포넌트에는 합성어를 사용해야함HTML 컴포넌트와 겹칠 수 있음.컴포넌트 data는 function 으로 사용function 의 return 값은 object 여야함// badexport default { data: { foo: 'bar' }}// goodexport default { data () { return { foo: 'bar' } }}// 뷰 인스턴스는 예외new Vue({ data: { foo: 'bar' }})Props 정의최소한 type 설정은 필수, 더 상세하면 좋음// badprops: ['status']// good..

디렉티브 (directives = 지시어)v-접두사가 있는 특수 속성종류 v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-on (단축표기 @) * 중요v-bind (단축표기 :) * 중요v-modelv-slot (단축표기 #) * 중요v-prev-oncev-cloakv-memo (v3.2+)디렉티브 구성디렉티브(directives) : v- 접두사가 있는 특수 속성으로, 디렉티브의 값(value)이 변경될 때 특정 효과를 반응적으로 DOM에 적용하는 것을 말함전달인자(Argument) : 일부 디렉티브는 디렉티브명 뒤에 콜론(:)으로 표기되는 전달인자 수식어(Modifiers) : 수식어는 점(.)으로 표시되는 특수 접미사이벤트v-on 사용 -> @로 축약// 인라인 핸들러..

Vue.js #1Vue 란?Vue 는 User Interface 개발을 위한 자바스크립트 프레임워크 HTML, CSS, JavaScript를 기반으로 복잡한 UI 까지 개발 가능 핵심기능선언적 렌더링 (Declarative Rendering) : 템플릿 구문{{데이터}}을 활용하여 출력반응성 (Reactivity) : JS 상태 변경을 자동으로 추적 및 변경시, DOM을 효율적으로 업데이트 컴포넌트UI 를 재사용할 수 있도록 정의한 것 JS 뿐 아니라 HTML, CSS 도 캡슐화 하여 재사용 가능 컴포넌트 만드는 법 : 정의 -> 등록 -> 사용컴포넌트 정의문자열 템플릿 : HTML, CSS, JS를 string 으로 선언 Single File Component (SFC) : 빌드 도구(Webpack, ..

반응형 기초https://ko.vuejs.org/guide/essentials/reactivity-fundamentals.html반응형 상태 설정data 옵션을 사용하여 컴포넌트 반응형 상태 선언data 에서 return 한 변수들은 this로 접근해야한다.컴포지션 API : reactive (객체일때), ref (원시값 일때 사용)data에 포함하지 않고 this 에서 데이터를 선언 및 사용 할 수 있지만, 아래와 같은 warning 을 받는다.Property "abc" was accessed during render but is not defined on instance.메서드 선언컴포넌트 인스턴스에 메서드를 추가하기 위해서는 methods 옵션을 사용arrow function 사용 주의 (참고2)반..

너무나도 빠르게 1년이 지나갔습니다. 스타트업 초기 멤버로 시작한 첫 회사를 관두고 NHN 아카데미를 거쳐 백엔드 개발자까지의 여정이 지나고보니 순식간이네요  현재 결재서비스개발팀 이라는 곳에 속해서 결재선, 병렬협조, 기록물 등록대장 과 같은 생전 처음 듣는 단어들에 익숙해지며 도메인 지식을 조금씩 축적하고있습니다. 제가 속한 팀은 특이하게 사외/사내에서 여러 시스템을 개발하고 운영하고 있어  ant build + java 1.5 환경 부터 spring boot 3.xx + java 17 까지 너무나도 폭 넓은 기술 스펙트럼을 경험하고 있고, 개발부터 운영까지 담당하여 '처음 구현할 때 제대로 안하면 나중에 힘들다' 라는 기술부채의 타격까지 맛보고있습니다.   최근에는 대표님께서 법인이 앞으로 나아가야..

LDAP(Lightweight Directory Access Protocol) 이란? 분산 디렉터리 서비스에 접근하기 위한 표준 프로토콜 디렉터리 서비스는 계층 구조로 조직화된 데이터를 저장하고 검색하기 위한 서비스를 제공 주로 조직의 사용자, 그룹, 자원과 같은 정보를 관리하기 위해 사용 특징 디렉터리 서비스: 정보를 계층 구조로 저장하여 검색이 용이하도록 함. ou / cn 등의 식별자를 통해 디렉토리 내에서 검색이 용이하도록 함 경량: 단순하고 빠른 성능을 갖춘 프로토콜. LDAP이 경량인 이유 : 단순한 메세지 형식의 프로토콜, TCP/IP 통신이라 데이터 전송에 발생하는 오버헤드가 최소화, 데이터 인덱싱을 통해 검색이 용이해짐 클라이언트-서버 모델: LDAP 클라이언트가 LDAP 서버에게 정보를..

전자공학도로 대학교를 졸업 후에는 main안에 모든 동작 코드를 넣고 동작하면 만사 ok이 인 프로그래밍을 해왔다. 그렇게 스타트업을 들어가니 어떤 제품을 개발해내긴 했어도 for문과 if 문의 향연, 그리고 찍먹한 class의 사용 정도였다. 찍먹 정도로 class를 사용하면서 이게 바로 "객체지향"?? 이러면서 뭔가 해낸 기분이 들었다. 그렇게 스타트업을 그만두고 NHN academy 에서 자바와 스프링을 익히며 내가 아는 프로그래밍에 대한 지식은 그냥 리셋했다. 딱히 도움이 되는 지식들이 없었기 때문에, 처음부터 다시 배웠다. 집에서 부트캠프 강의장까지 버스에서 남궁성님의 자바의 정석 동영상을 계속 보며 다녔고, 수업시간에 말씀해주시는 강사님들의 말씀을 놓치지 않으려고 잠을 깨기 위해 허벅지를 때리..

자바 백엔드 신입으로 업무를 진행하는 와중에 이거는 알아야지~ 라고 듣는 부분들이 해당 책에서 많이 나온다는 것을 알고 바로 공부해야겠다 마음을 먹었네요! 아이템 1. 생성자 대신 정적 팩토리 메서드를 고려 // from : 인자를 받아 해당 타입의 인스턴스로 변경 Date d = Date.from(instant); // of : 인자를 받아 적합한 타입의 인스턴스로 반환 Set faceCards = EnumSet.of(JACK,KING); // valueOf : from + of BigInteger prime = BigInteger.valueOf(Integer.MAX_VALUE); // instance, getInstance : 명시한 인스턴스를 반환 // create, newInstance : 새로운..