티스토리

T3ch

검색하기

블로그 홈

T3ch

bubobubo003.tistory.com/m

코딩을 기록하고 공유하는 페이지 피드백도 환영합니다

구독자: 1

방명록 방문하기

주요 글 목록

Spring boot에서 Http request 비동기 요청하기 Spring boot로 http request 코드를 개발할 때 비동기 처리로 요청 및 처리하기위한 내용입니다. 동기방식으로 호출하게되면 앞에 호출된 request의 응답이 완료될 때까지 다음요청이 실행되지 못하게되므로 여러개의 request를 보내는 상황에서는 더 높은 효율을 보여줍니다. 이 글에선 http 라이브러리는 okhttp3 를 사용합니다. build.gradle에 의존성 추가 implementation 'com.squareup.okhttp3:okhttp:3.10.0' 코드작성 (비동기 요청) public class Helloworld { private void asyncOkHttp() { // http 요청하려는 URL 리스트가 있다고 가정 List requestUrls = new Array.. 공감수 0 댓글수 0 2023. 10. 26.
Spring MVC의 비동기처리 (ThreadPoolTaskExecutor 사용) Spring MVC에서 프로세스는 기본적으로 동기식 처리로 이루어집니다. 코드 한줄한줄 차례대로 실행이 완료된 후 넘어갈 수 있다는 뜻이죠. 보통 이걸 Blocking 이라고 하고 반대가 되는 말은 Non-Blocking 이라고 합니다. 코드가 차례대로 실행되기 때문에 코드 실행에 따른 결과 값을 보는게 명확한 장점이 있습니다. Node.js로 개발을 좀 해오다보니 (Node.js는 반대로 비동기처리가 기본 컨셉입니다.) Async에 대한 용어에 더 눈이가서 Spring 어노테이션중 @Async 어노테이션에 먼저 눈이 갔습니다. 어노테이션 하나만 추가하면 내가 원하는게 된다? @Async @Async는 Spring 프레임워크에서 비동기적인 메서드 실행을 지원하기 위한 어노테이션입니다. 이 어노테이션을 메.. 공감수 0 댓글수 0 2023. 8. 22.
NestJS로 프로젝트 만들어보기 - 4 (configuration 적용) 어느 언어이던간에 환경변수 값, 즉 configuration 이라는 모듈을 사용하게 되는데, Nest.js에서도 configuration 모듈을 제공해주고있으며, 해당 모듈은 dotenv 모듈을 기반해서 작동합니다. 공통으로 사용해야할 변수 값이거나 혹은 개발레벨 (프로덕션, 개발, 테스팅 등등..) 에 따른 다른 환경변수를 가져야하는 경우가 많으므로 프로젝트를 구성할 때 거의 대부분 셋팅하게 되는 모듈입니다. 이전에 포스팅한 데이터베이스 연결정보같은 경우도 config 파일로 따로 관리하는 경우가 많아서 해당 모듈을 먼저 셋팅하고 넘어가고자 합니다. 1. @nestjs/config 모듈 인스톨 $ npm i --save @nestjs/config or $ yarn add @nestjs/config ne.. 공감수 0 댓글수 0 2023. 2. 22.
NestJS로 프로젝트 만들어보기 - 3 (DB연동) 웹어플리케이션을 만들면서 가장 많이 필요로 하는 것중에 하나가 데이터베이스 연동인데, Nest.js에서도 공식적으로 데이터베이스 클라이언트 모듈을 제공해주고, Typescript의 ORM인 TYPE ORM을 사용할 수 있습니다. 이전 프로젝트에 데이터베이스를 연동시켜보겠습니다. 일단 데이터베이스가 필요할텐데, 보통 데이터베이스는 별도의 서버나 혹은 클라우드에서 제공하는 서비스를 원격으로 붙어서 사용하는게 일반적이나, 간단하게 테스트하는 용도이니만큼 DB도 도커를 사용하여 간단하게 띄워보도록 하겠습니다. (도커는 기본적으로 설치되었다는 가정하게 진행하겠습니다.) 1. MYSQL image 다운받기 $ docker pull mysql 버전을 따로기입하지 않고 image를 다운받으면 최신버전을 기준으로 mys.. 공감수 0 댓글수 0 2023. 2. 16.
NestJS로 프로젝트 만들어보기 - 2 (디렉토리구성) nest cli를 통해 기본적으로 만들어지는 프로젝트 구조를 이전에 학습해보았는데, 디렉토리 구조를 조금 더 다듬어보려고 합니다. 공식 문서에 나오는 구조를 최대한 지키되, 코딩하기에 좀 더 알아보기 쉽고 간편한 방법을 찾아보겠습니다. Nest js에서 기본적으로 필요한 구성은 아래와 같습니다. 간단히 역할을 설명하자면 controller : 라우트를 기술 service : 서비스에 필요한 메서드를 기술 module : Nest 프레임워크를 구동하는데 필요한 메타데이터를 제공 (Nest에선 적어도 하나의 root 모듈이 필요합니다) 보면 아시겠지만, 모든 기능들을 저 세 개의 파일에 다 넣을 순 없겠죠. 그럼 저걸 어떻게 나눌지를 보자면, 가장 기본적으로 저 세 가지의 분류대로 디렉토리를 나누는 방법이 .. 공감수 0 댓글수 0 2023. 2. 14.
NestJS로 프로젝트 만들어보기 - 1 (nestjs/cli) Node.js를 사용하고, Typescript를 배우던 와중에 접했던 프레임워크인 NestJS라는 물건을 사용하게 되었습니다. 기존엔 Express를 사용했었고, 그 안에 Typescript를 셋팅하여 프로젝트를 구성했던 것과는 다르게 이 프레임워크를 쓰게되면 기본적인 Typescript 셋팅부터 전체적인 구조까지 프레임워크 생성 커맨드를 통해 기본적으로 제공해줍니다. 공식 문서에서는 아래와 같이 소개합니다. 더보기 Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports Ty.. 공감수 0 댓글수 0 2023. 2. 10.
[javascript] - Promise bulk로 처리하기 javascript의 객체 중 Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. MDN의 설명으로 아래와같이 간단하게 요약할 수 있습니다. [출처] - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise Promise는 다음 중 하나의 상태를 가집니다. 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수도 있습니다. 이행이나 거부될 때, 프로미스의 then 메서드에 의해 대.. 공감수 1 댓글수 0 2023. 2. 10.
프로그래머스 > 코딩테스트 연습 > 해시 > 완주하지 못한 선수 문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participantcompletionreturn ["leo", "kiki".. 공감수 0 댓글수 1 2021. 9. 22.
Go lang으로 xml parser 구현 다른 언어에서도 흔히 할 수 있는 XML 파일 Parser를 Golang 을 가지고 구현해보았습니다. 전 보통 Node.js나 순수 javascript의 코드를 이용해 소량의 XML 파일을 파싱하여 사용했었는데 대랑의 XML 파일 분석을 하기에는 싱글스레드 기반인 Node.js 의 처리방식이 부적합하다고 생각하여 추후에는 Go 의 장점인 고루틴을 활용한 멀티쓰레드 기능을 활용하여 다수의 파일 XML 파일 파싱을 구현해보려 합니다. 아직 Golang 에 대한 사용법이 익숙치않아 이 소스코드는 단건 XML 파일에 대한 파싱을 구현하였습니다. 소스코드 구성은 main파일과 parser 파일로 굉장히 단순합니다. main 코드에서 parser 코드에 있는 함수를 호출하는 구조입니다. [utils/parser.g.. 공감수 1 댓글수 0 2021. 3. 20.
[Node.js + Vue] 브라우저에서 서버에 있는 파일 다운로드하기 Node.js와 Vue (물론 기본적인 html도 가능합니다) 를 이용하여 서버단에 있는 파일을 다운로드하는 코드샘플입니다. 기본적인 express 서버를 띄우는 설정이나 실행환경 셋팅은 제외하였습니다. [router.js] 1 2 3 4 5 const util = require('./util.js') router.get('/download',(req, res, next)=>{ util.download(req, res) }) Colored by Color Scripter cs 일단 기본적인 라우터 셋팅입니다. 단순하게 /download 라는 라우터로 진입했을 때 util.js 파일에 있는 download 함수를 실행시켜주는 코드입니다. [util.js] 1 2 3 4 5 6 7 8 9 10 11 expo.. 공감수 0 댓글수 0 2020. 11. 12.
Nuxt 사용 후기 일단 Vue js와 Nuxt에 대한 세부적인 내용이 없는 부분은 양해부탁드립니다. Nuxt를 사용하고나서 겪었던 장단점들을 적어보려 합니다. 직관적인 Vue 프레임워크 웹 개발을 쉽고 강력하게 만들어주는 오픈소스 프레임워크인 Nuxt.js로 여러분의 다음 Vue.js 애플리케이션을 만들어보세요. Nuxt 공식 홈페이지에 나와있는 대문 문구입니다. 위 말 그대로 Vue를 front-end 도구로 사용하기 쉽게끔 만들어진 framework입니다. 공식 홈페이지가 한글로 이미 번역이 되어있어서 자세한 설명은 공식 홈페이지를 참조하는게 가장 적합합니다. 이 글에선 직접 NUXT JS로 개발을 하면서 겪었던 내용들을 위주로 작성하였습니다. 기존의 Vue를 쓰면서 필요했던 작업들... 단편적으로 vue를 사용한다는.. 공감수 6 댓글수 0 2020. 6. 28.
8.7 sequelize 사용 환경 설정 변경(useable multiple database in sequelize) 사용하다보니 몇 가지 문제점이 있어서 해결방법은 추후에 업데이트하도록 하겠습니다. 원래는 혼자 공부목적으로 쓰다가 실무에서 적용하려다보니 기존에 쓰던 구조에서 변경의 필요성의 느껴졌습니다. 이유는 다음과 같습니다. 상용과 개발환경에 따라 사용하는 데이터베이스가 다릅니다. 하나의 프로그램에서 필요에 여러개의 데이터베이스 접근이 가능해야합니다. 개발서버DB와 상용서버DB가 완벽하게 일치하지 않기 때문에 entity 생성도 별개로 되어야합니다. 이전 챕터까지 진행했다면 sequelize 문법 사용이 가능한 js 파일들 (보통 entity라고 하는 것 같습니다.) 이 생성되었을 겁니다. 하지만 위와같은 제약사항을 해결해야한다면 index.js 파일부터 sequelize-auto 모듈을 사용하여 entity를 생.. 공감수 0 댓글수 0 2019. 10. 27.
Vue 삽질일기 오픈 블로그에 글을 쓰는게 굉장히 오랜만입니다. 취업하게 되면서 바빠지다보니 블로그 운영을 거의 못하게 되었습니다. 다시 블로그를 활성화시키기 위해 실무에서 개발하면서 경험했던 사항들을 써내려보고자 합니다. Vue의 기초부터 차례차례 적어가려는 이론학습 중심의 카테고리가 아닙니다. 어쩌다보니 회사에서 Vue를 쓰게 되어서 제대로 공부할 새도없이 바로 실전으로 부딪히게 되었는데, 그 과정속에서 했던 삽질들을 적어보려합니다. 물론 제 삽질이 근본적인 해결책을 제시해준다고 할 순 없고 말 그대로 현재 제가 처리하려는 상황을 해결하기 위한 임시방편이 될 수도 있습니다. 문제가 있다면 언제든지 댓글 남겨주시면 감사하겠습니다. 공감수 0 댓글수 0 2019. 10. 27.
8.6 sequelize-auto 모듈 사용하기 오랜만에 다시 글을 쓰게 됩니다. Sequelize를 쓸 일이 갑자기 생기게 되었네요~ 이전까지는 sequelize를 이용해 define 된 테이블 정보를 가지고 진행을 했었는데, 만약 Models 디렉토리에 제가 정의하지 않은 테이블이 있다면 그 테이블을 sequelize를 통해 사용할 수 있을까요? 흔히 말하는 DML구문은 sequelize 에서는 Model 객체에서만 있는 메소드 입니다. 이 말은 즉, models 디렉토리에 테이블 정보 파일이 있을 때 findOne이나 update 등과 같은 메소드를 사용할 수 있습니다. 근데 내부 DB에는 있는데 제 models 디렉토리에 그 테이블에 대한 js 파일이 없다면 결국 그 테이블은 조작이 불가능합니다. 예를들면 models 디렉토리안에 이 두개의 파.. 공감수 3 댓글수 0 2019. 3. 7.
9. generators 제너레이터란?: 이터레이터를 사용해 자신의 실행을 제어하는 함수. 일반적인 함수는 호출되면 그 함수가 종료될 때까지 제어권을 완전히 넘기게 되는데 제너레이터에서는 그렇지 않습니다. 특징1. 제너레이터는 언제든 호출자에게 제어권을 넘길 수 있습니다. 2. 제너레이터는 호출한 즉시 실행되지는 않습니다. 대신 이터레이터를 반환하고, 이터레이터의 next 메서드를 호출함에 따라 실행됩니다. 이 두가지 특징을 제외하고는 일반 함수가 동일하다고 설명하고 있습니다. 일단 제너레이터를 만드는 일반적인 예제를 하나 살펴보겠습니다. function* gen() { yield 1; yield 2; yield 3; } let g = gen(); // "Generator { }" => MDN에서 나오는 예제인데요 제너레이터는 .. 공감수 1 댓글수 0 2019. 1. 22.
프로그래머스 > 완전탐색 > 모의고사 문제 설명수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ... 2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ... 3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해주.. 공감수 1 댓글수 0 2019. 1. 11.
8. iterators + for..of for ... of 구문에 대해 알아보겠습니다. 기본적인 MDN의 정의는 이러합니다. for...of 문(statement)은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. 보통 for ...of문은 for ...in문과 비교를 하곤 하는데 중요한 차이점 하나만 짚고 넘어가겠습니다. let info = { 'name' : 'Lee', 'age' : 28, 'sex' : 'm' } for(let i in info){ console.log(i);//name age sex } for(let i of info) { consol.. 공감수 1 댓글수 0 2019. 1. 11.
프로그래머스 > 스택/큐 > 프린터 프린터 문제 설명일반적인 프린터는 인쇄 요청이 들어온 순서대로 인쇄합니다. 그렇기 때문에 중요한 문서가 나중에 인쇄될 수 있습니다. 이런 문제를 보완하기 위해 중요도가 높은 문서를 먼저 인쇄하는 프린터를 개발했습니다. 이 새롭게 개발한 프린터는 아래와 같은 방식으로 인쇄 작업을 수행합니다. 1. 인쇄 대기목록의 가장 앞에 있는 문서(J)를 대기목록에서 꺼냅니다. 2. 나머지 인쇄 대기목록에서 J보다 중요도가 높은 문서가 한 개라도 존재하면 J를 대기목록의 가장 마지막에 넣습니다. 3. 그렇지 않으면 J를 인쇄합니다. 예를 들어, 4개의 문서(A, B, C, D)가 순서대로 인쇄 대기목록에 있고 중요도가 2 1 3 2 라면 C D A B 순으로 인쇄하게 됩니다. 내가 인쇄를 요청한 문서가 몇 번째로 인쇄되.. 공감수 0 댓글수 0 2019. 1. 7.
7. let + const 이번에 알아볼 내용은 let과 const 입니다. 변수와 상수 선언 시에 쓰이는 키워드인데 ES6 이전에는 var 라는 키워드 하나로만 사용했었는데요, ES6에서 등장한 let 과 const는 어떤점에서 다른지 알아보도록 하겠습니다. ※ let : let은 변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언한다. 이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과 다른 점이다. var 키워드와 비교해서 설명을 하게 되는데, 그럼 var 키워드와 비교했을 때 어떤 차이점이 있는지 알아보겠습니다. 1. 중복선언 var x = 5; var x = 7; var x = 0; var 키워드로는 이렇게 써도 오류가 발생하지 않습니다. 근데 보통 이렇게 변수를 선언하.. 공감수 1 댓글수 0 2019. 1. 6.
6. default + rest + spread 이번에 다룰 내용은 default + rest + spread 입니다. 내용은 크게 어렵지 않습니다. 적어도 default는 프로그래밍을 하다보면 많이 듣던 말 중에 하나죠. Rest와 Spread 또한 기존에 ES5에서 사용했던 방법을 좀 더 간결하고 간편하게 작성하기 위한 새로운 연산자를 제공해주는 개념입니다. ❖ default: 기본 값이라는 뜻이죠. 자바스크립트에서는 기본 값이 없다면 undefined 라는 값을 갖고있습니다. 말 그대로 값이 없다는 뜻이죠. 하지만 때에 따라서 값의 입력이 없어도 기본 값을 정해줘야 하는 경우가 있을 겁니다. 1234567//ES5function inc(number, increment) { increment = increment || 1; return number.. 공감수 1 댓글수 0 2019. 1. 3.
5. destructuring 이번에 다뤄볼 주제는 destructuring 입니다. 일단 destructuring은 분해, 파괴 이런 의미로 쓰이는 단어인데요, MDN에서 검색해보면 구조 분해 할당 이라는 파트로 설명을 하고 있습니다. 기본 요약설명은 이렇습니다. ✔️구조 분해 할당구조 분해 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)입니다. 배열이나 객체같은 여러가지 데이터를 가지고 있는 자료형에 대해서 사용자가 원하는 속성 값을 사용하고자 할 때 유용하게 쓰입니다. 일반적인 문자열이나 숫자와 같은 자료형에서는 쓰이지 않고, 객체나 배열에 대해서 활용할 수 있는 방법입니다. ❖ 배열 디스트럭처링 : 배열.. 공감수 1 댓글수 0 2018. 12. 31.
4. template strings 이번에 소개할 부분은 template strings 입니다. 일명 "백틱" 이라고하는 ` (느낌표 왼쪽에 있는 문자) 를 사용합니다. 제가 가장 먼저 접했던 백틱의 기능은 여러 줄에 걸친 문자열을 표현하는 것이었습니다. Multi-line strings1234567var str = `동해물과 백두산이 마르고닳도록하느님이 보우하사 우리 나라만세무궁화 삼천리 화려강산대한사람 대한으로 길이보전하세`console.log(str)cs 이런식으로 하나의 문자열을 여러줄에 걸쳐서 표현이 가능합니다. 편리하긴 하겠지만 저렇게 긴 문자열변수를 쓸 일이 얼마나 있을까요? 다른 유용한 기능들을 살펴보겠습니다. Expression interpolation(표현식 삽입법)12345var month = 12var season =.. 공감수 1 댓글수 0 2018. 12. 24.
javascript로 끝말잇기 만들기 콘솔환경에서 실행되는 간단한 끝말잇기 게임을 javascript로 만들어 보았습니다. ES6문법을 익히기 위해 class를 이용해서 만들었고, 기타 다른 문법들도 ES6에서 나오는 문법들을 몇몇 사용해보았습니다. 컴퓨터와 끝말잇기를 대결하는 게임인데 컴퓨터는 dict.txt 파일에 있는 단어를 가지고 사용자를 상대합니다. 네이버 국어사전에 등재되어있는 단어들을 수록해 저장 해놓은 것인데 이게 정말 있는 말인가 싶은 단어들도 꽤 됩니다..ㅋㅋ 실행방법은 node endToEnd.js 로 터미널이나 콘솔환경에서 실행합니다. 텍스트 파일에 끝말잇기 규칙에 맞는 단어가 없을 시에는 프로세스가 종료됩니다. 기본 규칙은 이렇습니다. 1. 입력 가능 단어는 2글자이상입니다.2. 당연히 상대방이 입력한 끝말로 시작한 .. 공감수 1 댓글수 0 2018. 12. 24.
(2018년)KAKAO BLIND RECRUITMENT 오픈채팅방 문제 풀이 문제 설명오픈채팅방카카오톡 오픈채팅방에서는 친구가 아닌 사람들과 대화를 할 수 있는데, 본래 닉네임이 아닌 가상의 닉네임을 사용하여 채팅방에 들어갈 수 있다.신입사원인 김크루는 카카오톡 오픈 채팅방을 개설한 사람을 위해, 다양한 사람들이 들어오고, 나가는 것을 지켜볼 수 있는 관리자창을 만들기로 했다. 채팅방에 누군가 들어오면 다음 메시지가 출력된다.[닉네임]님이 들어왔습니다.채팅방에서 누군가 나가면 다음 메시지가 출력된다.[닉네임]님이 나갔습니다.채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다.채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다.채팅방에서 닉네임을 변경한다.닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다.예를 들어, 채팅방에 Muzi와 P.. 공감수 0 댓글수 0 2018. 12. 14.
3 enhanced object literals 이번에 다뤄볼 주제는 번역해보면 향상된 객체 리터럴(?) 이렇게 번역 될 듯 한데, 간단히 말하자면 객체를 만드는데에 있어서 조금 더 가독성 좋고 짧은 형태로 만들 수 있게끔 해주는 것입니다. 흔히 javascript를 사용할 때 데이터타입 종류를 신경쓰지 않는데 사실 이러한 new 연산자를 통해서 데이터 타입을 부여하는 것으로 시작을 해야하죠 이런 식으로요123456//숫자var num = new Number();//문자열var str = new String();//객체var obj = new Object();cs 그치만 보통은 이렇게 new 연산자를 사용하지 않고 바로 변수에 값을 담는게 일반적입니다. 123456//숫자var num = 1//문자열var str = "hello"//객체var obj .. 공감수 1 댓글수 0 2018. 12. 13.
2.2 class의 기본 선언 이전 포스팅에서 자바스크립트는 프로토타입 기반의 언어라는 말을 했었습니다. 그리고 es6에서 출현한 class 또한 이 기반 위에서 변화된 형태입니다. 그럼 기존의 프로토타입으로는 어떤식으로 클래스를 표현했는지 비교해보겠습니다.(이 글은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes 내용을 바탕으로 작성하였습니다.) class.js 12345678function Cat(name) { this.name = name;} Cat.prototype.speak = function () { console.log(this.name + ' makes a noise.');}; Colored by Color Scriptercs 이와같이 fun.. 공감수 1 댓글수 0 2018. 12. 5.
2.1 classes 이전 prototype 객체지향언어를 배울 때 항상 나오는 키워드 중 하나가 class 입니다. 저는 Java와 C++을 배울 때 접하게 되었는데 ES6에서 class의 사용이 가능해졌습니다. 하지만 여기서 짚고 넘어가야할 것이 있습니다. 프로토타입에 관한 개념인데요 MDN의 Class에 관한 글에 이런 말이 나옵니다. JavaScript class는 ECMAScript 6을 통해 소개되었으며, 기존 prototype 기반의 상속 보다 명료하게 사용할 수 있습니다. Class 문법은 새로운 객체지향 상속 모델을 제공하는 것은 아닙니다. JavaScript class는 객체를 생성하고 상속을 다루는데 있어 훨씬 더 단순하고 명확한 문법을 제공합니다. javascript 는 프토로타입 기반의 언어이다. es6에서 지원하는 clas.. 공감수 0 댓글수 0 2018. 12. 3.
1.3 화살표 함수에서의 arguments 화살표 함수의 특징 중 마지막입니다. 이전 포스팅에서는 this가 존재하지 않는다는 주제였는데 마지막으로는 arguments가 존재하지 않는다는 주제입니다. 기본적으로 javascript 에서는 arguments 라는 키워드가 존재하는데요 간단한 정의로는 arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.1234567891011function func1() { console.log(arguments[0]); // expected output: 1 console.log(arguments[1]); // expected output: 2 console.log(arguments[2]); // expected output: 3}func1(1, 2, 3);cs(출처 : https:.. 공감수 0 댓글수 0 2018. 12. 3.
1.2 화살표함수에서의 this 이전에는 화살표 함수의 기본적인 선언방법에 대해 알아보았습니다. 이번엔 화살표 함수의 또하나의 특징인 this에 대해서 알아보겠습니다. 기본적으로 this라 하면 다른 프로그래밍 언어를 했던 경험이 있다면 굉장히 많이 들어봤을 키워드입니다. public class Book { private String title; private String author; private int price; private String publisher; public Book(String title, String author, int price, String publisher) { this.title = title; this.author = author; this.price = price; this.publisher = pu.. 공감수 2 댓글수 2 2018. 11. 29.
1.1 화살표함수의 기본 선언 첫 번째로 화살표 함수에 대해서 알아보고자 합니다. 제가 ES6 문법을 접했을 때 가장 먼저 본 녀석 중에 하나 입니다. 기존의 자바스크립트에서도 그랬고, c언어나 자바에서도 함수라던지 반복문같은 하나의 덩어리의 프로세스는 늘 중괄호로 묶는 방법이었습니다. 그런데 ES6에서 화살표 함수라는 것이 등장하게 되었습니다. ❓어떻게 생겨먹었는가??기존의 함수작성방식과 비교해서 알아보겠습니다. 웹 상에서 크롬 개발자도구를 이용해서 테스트를 진행하겠습니다. html 폼을 하나 만들어서 자바스크립트 파일을 호출해서 작성하셔도 되고 그냥 크롬 페이지에서 직접 작성해도 상관 없습니다. arrow.html123456789101112 Arrow cs 이런 식으로 arrow.js 파일을 호출하는 아무 것도 없는 html 폼을.. 공감수 0 댓글수 0 2018. 11. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.