자바스크립트
-
[2019.04.08] 이머시브 7일차, DanceParty 스프린트 시작핵인싸 개발자의 길/코드스테이츠 Immersive Course 2019. 4. 9. 00:15
오늘부터 매 주 오전 Self Asseccement를 풀게 되었다. 오늘 오전에 친 시험은 Tree구현. 제한시간은 1시간...대다수가 문제를 제출하지 못하였다...(나는 했다ㅋ)오전부로 Data Structure 스프린트가 끝나고, 페어리뷰, 스프린트 리뷰를 진행한 후에 오후부터 새로운 스프린트 Dance Party에 들어갔다.Dance Party... ㅇ_ㅇ;...이름을 왜 댄스파티라고 했는지는 모르겠다. # DataStructure 스프린트를 진행하며 받은 페어리뷰자신의 생각을 이해하기 쉽게 설명하는 것이 좋았다. 나는 설명을 잘하나보다. 이전 페어리뷰때도 설명부분에서 장점을 받았다. 단점은 딱히 받지 않았다.왠지 이번 스프린트에서는 내가 목이 아파서 힘이 안나니까 조급한 행동이 강제로 억제되었나보..
-
[2019.04.08] __proto__, prototype, constructor 관계개발 블로깅/Javascript 개념 2019. 4. 8. 15:54
쉽게 내 방식대로 정리한 설명 prototype 은 var Human = function () {this.name}; 과 같이 틀로 쓰는 녀석에게 속성을 정의하는 것 (함수만 prototype을 가지고 있음)__proto__ 는 var john = new Human(); 에서 나온 john 인스턴스에 속성을 부여하는 것.(인스턴스만 __proto__를 가지고 있음) 더 쉽게 생각해서, prototype은 붕어빵 틀 자체에 기능을 추가하는 것. __proto__는 붕어빵에, 그 추가했던 기능 # 1 방식1234567891011121314var Human = function(){ }Human.prototype.sleep() = function(){};var Student = function(){ } Stud..
-
[2019.04.06] this, setTimeout Check point정리개발 블로깅 2019. 4. 7. 14:06
# 11234567891011var name = "Window";var alice = { name:"Alice", sayHi:function(){ alert(this.name + "say hi"; }};var bob = {name : "Bob"};setTimeout(function(){ alice.sayHi();}, 1000);cs 9번째 줄에서 function() {} 으로 감싸주고 실행시키기 때문에 1초뒤에 실행됨. 1초 뒤에 alice의 속성인 sayHi 함수를 실행시키므로 this는 Alice.# 2123456789var name = "Window";var alice = { name: "Alice", sayHi: function() { alert(this.name + " says hi"); }};..
-
[2019.03.27] 전개 연산자 개념개발 블로깅/Modern script 2019. 3. 27. 11:50
배열을 조금 더 직관적으로 사용할 수 있는 방식인 전개 연산자라는 개념이 있다. # 전개연산자123456const add = (a, b, c) => { return a + b + c;} var arr = [1, 2, 3];console.log(add(...arr)); // 6cs위와 같이 배열 변수를 분해하지 않고 그냥 할당해버리는 방식이다. 1234var arr1 = [3, 4, 5];var arr2 = [1, 2, ...arr1, 6, 7]; console.log(arr2); // [1,2,3,4,5,6,7]cs이렇게 값을 순차적으로 하나씩 넣는 작업을 쉽게 할 수도 있다. 그냥 괄호 [] 껍데기를 벗겨서 넣어버린다는 개념으로 생각하면 이해가 쉽다. ... 키워드가 구조분해할당 방식에서도 쓰이므로 헷..
-
[2019.03.27] 구조분해할당 개념개발 블로깅/Modern script 2019. 3. 27. 11:42
ES6로 넘어오면서, 배열과 object를 조금 더 쉽게 다루는 방식이 있다.구조분해 연산자, 전개연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한번에 처리할 수 있도록 해준다. # 구조분해할당 - 배열 구조 분해12345var a, b, rest;[a, b] = [10, 20]; console.log(a); // 10console.log(b); // 20cs 12345var x = [1, 2, 3, 4, 5];var [y, z] = x; console.log(y); // 1console.log(z); // 2cs 위와 같이 변수 초기화 선언할 때 표현하면, 배열을 분해하여 순서대로 각 자리에 들어가게 된다.12345var a, b;[a = 5, b = 7] = [1]; ..
-
[2019.02.22] React로 Twittler 작업 완성..(하루만에..대박!)핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 23. 01:07
대박...오늘 아침까지 리액트 첫번째 프로젝트 작업한거 개념 정리하고, preCoure 과제로 진행했던 트위틀러를 똑같이 리액트 방식으로 구현해 보았다.솔직히 내일까지는 걸릴 줄 알았는데, 오늘 점심부터 작업해서 방금 구현을 다 끝냈다! # 기존의 과제 때 구현했던 페이스북 형식의 twittler를 React 방식으로 구현한 모습 외관 상으로는 변경된 점이 당연히 없다. 정말 많이 변한 부분은 안의 소스코드 내용이다. # 리액트로 작성한 소스코드 기존의 html, css, javascript로만 작성했던 것을 거의 뒤집어 엎었다. 리액트 방식으로 작업을 하니 코드 구조가 전체 다 바뀌고, 데이터를 주고받는 형식, 렌더링 방식 등이 전부 달라서...작업 중에 정말 많이 헷갈렸다. 그래도 첫번째 작업한 전화..
-
[2019.03.22] React로 작업한 첫번째 프로젝트를 진행해보며..핵인싸 개발자의 길/코드스테이츠 Pre Course 2019. 3. 22. 14:16
이머시브 수강 전에 리액트를 어느정도 다뤄보는게 좋을 것 같아서 미리 공부를 하고 프로젝트를 진행해 보았다.리액트는 앵귤러처럼 프레임워크가 아니라 라이브러리 형식으로 붙여서 사용하는거라 쉬울 줄 알았는데, 역시나... 뭐든 쉬운건 없나보다..처음 리액트를 접할 때 기초개념을 잡아야 하는 부분이 의외로 많았다.. # 기초개념을 다져야 했던 부분ES6문법렌더링 개념과 방식가상의 DOMprops와 state 블로그와 영상을 엄청나게 뒤져보며 공부하고 코드를 끄적여 본 다음에, 프로젝트를 따라서 작업해 봤다. # 첫번째로 작업한 프로젝트 '전화번호부' 이름과 전화번호를 클릭하여 등록 버튼을 누르면 밑의 리스트에 해당 내용이 추가가 된다. 검색할 이름을 입력박스에 입력을 하면 실시간으로 리스트가 렌더링 되어 해당..
-
[2019.03.13] 순차적으로 추가되는 연속 콜백함수 구현개발 블로깅 2019. 3. 13. 14:56
오늘 AMA시간에 클로저 관련된 문제를 더 풀어보고자, 클로저 관련 문제를 어디서 구할 수 있나 여쭤보니까, 엔지니어분께서 한 문제를 풀어보라고 제시해주었다. # 함수를 호출하는 방식과 해당 결과값1234567var call = recursive(); call(1); // 1call(1)(2); // 2call(1)(2)(3); // 6call(1)(2)(3)(4); // 10...cs # 처음에 이 문제를 접하고 생각이 들었던 문제풀이방식 한번씩 호출이 될 때마다 카운트를 증가를 시켜야한다. (콜백함수가 늘어나야하기때문에..)카운트만큼 return 값을 콜백함수로 넘겨줘야한다.반복적인 행위이므로 recursive하게 구현해야한다. # 해당 문제에 대한 알고리즘 구현 소스코드1234567891011121..