그럴만두!

맥북에서 톰캣 설치하고 실행을 해보자!! 먼저 톰캣을 설치한다. https://tomcat.apache.org/download-80.cgi Apache Tomcat® - Apache Tomcat 8 Software Downloads Welcome to the Apache Tomcat® 8.x software download page. This page provides download links for obtaining the latest versions of Tomcat 8.x software, as well as links to the archives of older releases. Unsure which version you need? Specification versions tomcat.apach..

맥북 초보자 sts깔기 레츠고 sts를 깔건데 먼저 https://spring.io/tools Spring Tools 4 is the next generation of Spring tooling Largely rebuilt from scratch, Spring Tools 4 provides world-class support for developing Spring-based enterprise applications, whether you prefer Eclipse, Visual Studio Code, or Theia IDE. spring.io 여기에 들어가서 해당하는 os의 툴을 설치해준다. 설치 완료 워크스페이스 설정까지 해주면 sts는 설치 완료이다. 다음 중요한 것. java설치 여부이다. 사실 ..

Promise? 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 프로미스는 왜 필요할까? 왜냐하면 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하는데, 일반적으로 웹 어플리케이션을 구현하 때 서버에서 데이터를 요청하고 받아오기 위한 api를 사용한다. api가 실행되면 데이터를 받아오기 위한 요청을 하는데 데이터를 받아오기도 전에 데이터를 받아온 것 처럼 화면에 데이터를 표시 하려한다면 오류가 발생한다. 이와같은 문제점을 해결하기 위해서 프로미스를 쓰는 것이다. Promise 의 상태 Pending(대기) - 비동기 처리 로직이 아직 완료되지 않은 상태 new Promise(); new Promise(function(resolve, reject){ }); Fullfilled(이행) - 비..

Vue의 생명주기에는 4가지가 있다. 1. Creation(생성) 단계 2. Mounting(장착) 단계 3. Updation(수정) 단계 4. Destrucion(소멸) 단계 https://vuejs.org/guide/essentials/lifecycle.html Lifecycle Hooks | Vue.js vuejs.org 1. Creation(생성) 단계 - beforeCreate() : 라이프사이클 중 가장 맨 처음 실행되며, 컴포넌트가 DOM에 추가되기 전이게 때문에 DOM에 접근하게되면 에러 발생 - created(): data() 변수와 events 메서드가 활성화 되어 접근할 수 있음 이 단계에서는 템플릿과 가상 DOM에는 접근할 수 없다. 2. Mounting(장착) 단계 - before..

회사랑 세 블럭 떨어진 전경련회관으로 파견나온지 어느새 벌써 한달이 지나고 있다..!! 그런 기념으로 구내식당 식단 빅데이터를 모아보자 전경련와서 먹었던 첫 밥👍 고갈비는 고등어 갈비를 말하는 단어인걸 알게 된 점심 배신..이야.. 냉짬뽕이었나..!? 쏘쏘 나가사키 부대찌개 굿 중복이라고 메로나도 줬다💚 흠 얘는 이름이 기억이 안남!!!! 아마듀 그럴만두국 김치볶음밥!!! 마쉬써 이 날은 회사분들과 점심회식 한 날 생어거스틴 여의도점! 존맛탱이요 알밥과 모밀!! 맛도리 비냉! 음 쏘쏘! 코로나 방역때매 구내식당 운영 안한 날 오히려 좋아 불닭 먹어버림 눈꽃치즈 뭐.. 그런거였는데! 암튼 맛있었음! 짜장면 맛있었어.. 곰탕이었나 돼지국밥이었나.. 암튼 국밥임 맛있! 감자탕볶음밥이 뭐야ㅋ 했눈데 나름 그 맛..

Vuex란? 다양하고 복잡한 컴포넌트들을 효율적으로 관리하는 라이브러리 Vuex는 어플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워지기 때문에 필요하다. Flux? MVC패턴의 복잡한 데이터 흐름을 해결 할 수 있는 새로 나온 패턴으로 데이터의 흐름이 여러개로 갈리지 않고, 단방향으로만 처리된다. Vuex 설치 및 등록하기 npm i vuex@3.6.2 npm 방식으로 설치를 해준다. https://vuex.vuejs.org/installation.html Installation | Vuex Installation Direct Download / CDN https://unpkg.com/vuex@4 Unpkg.com provides NPM-based CDN links. The ..

Enum 이란? : 특정 값들의 집합을 의미하는 자료형. 집합의 데이터 타입. 숫자형 이넘과 문자형 이넘으로 구분된다. enum Shoes{ Nike = '나이키', Adidas = '아디다스' } // 별도의 값을 지정하지 않으면 숫자형 이넘으로 된다. 지정하지 않으면 0부터 시작 var myShoes = Shoes.Nike; 이넘으로 정의 된 애들은 별도의 값을 지정하지 않으면, 첫번째 값은 0으로 할당되고 다음부터는 1씩 증가하는 값을 가진다. (숫자형 이넘) 알아볼 수 없으니 TypeScript Playground에서 돌려보자 콘솔에 찍히는 걸 볼 수 있다. 예제를 한번 보자 이넘으로 Yes와 No를 지정해준다면 함수활용에 있어서 의미는 같지만 값이 다른 애들을 걸러줄 수 있다.

유니온 타입은 간단히 말하면 하나의 타입 이상을 쓸 수 있게 하는 것이다. function logMessage(value: string | number ){ if(typeof value === 'number'){ //value의 타입을 number로 정의 any라면 어떤 타입이 들어오는지를 볼 수 없지만 유니온은 명시가 되어있기 때문에 바로 사용할 수 있음 value.toLocaleString(); } if(typeof value === 'string'){ value.toString(); } throw new TypeError('value must be string or number'); } ' | ' or 연산자와 비슷한 애로 타입을 골라서 쓸 수 있다는 것이다. any로 타입을 정의 했을 때는 어떤 ..

타입스크립트의 기본타입에는 12가지가 있다. 1. String 2. Number 3. Object, 4. Boolean 5. Array 6. Tuple 7. Enum 8. Any 9. Void 10. Null 11. Undefined 12. Never String 일경우에는 let name: string = 'mandoo'; 변수명 옆에 타입을 써줘야 한다. Number일 경우에는 let age: number = 25; 이런식으로 타입을 지정해주면 된다. 몇 가지만 더 살펴보자면 Array let arr: number=[1,2,3] Tuple let arr:[string, number] = ['mandoo', 25] tuple은 이렇게 각 요소의 타입을 지정할 수 있다. Any let name:any =..

TypeScript란?? 타입스크립트는 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 컴파일이 필요하다. TypeScript 를 왜 쓸까? 에러를 사전에 먼저 방지하고, 개발 생산성을 향상시키기 위해서 점점 많이 쓰는 추세이다. 에러의 사전방지 fucntion add(a,b) { return a + b; } 이런 자바스크립트를 타입스크립트는 function add(a: number, b: number){ return a+b; } 이렇게 타입을 지정해 준다는 것이다. 실제로 사용을 해보게 되면 이렇게 개발함에 있어서 가이드를 해주는 느낌이다. (에러를 방지하기 위함) 타입스크립트를 시작할 때 거의 필수적으로..