개발자
-
[2019.04.14] fetch API의 개념, 그리고 다시 정리해본 Promise개발 블로깅/Modern script 2019. 4. 14. 18:05
서버와의 비동기 요청방식 fetch라는 것이 있다. 오잉? 비동기 요청방식은 Ajax 아니야? 맞다. fetch는 Ajax의 방식 중 하나이다. 그것도 최신 방식! 나는 지금까지 Ajax라는 것이 있는 건 줄 알았고, 그냥 써보기만 했다. 근데 사실 비동기 방식의 유래도 있었다. # 비동기 서버 요청의 초기 방식 XML Http Request 왠지 자바에서 서버 통신할 때 많이 본 듯한... 초기에 비동기 요청방식을 사용하려면 저렇게 많은 코드의 틀이 필요로 했다. 그러나 그 코드를 줄이고 간편하게 사용하고자 해서 이후에 나온 것이 Ajax이다. # 비동기 방식 Ajax란? 그리고 Ajax 방식 중 최신기술인 fetch API 이 틀에서 바로 사용 가능! 참고로 fetch API는 promise 방식의 ..
-
[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.04.05] 이머시브 5일차, 두번째 스프린트 DataStructure 페어프로그래밍핵인싸 개발자의 길/코드스테이츠 Immersive Course 2019. 4. 5. 21:44
어제는 DataStructure Part1 스택, 큐, 오늘은 Part2인 Binary Search Tree, Tree, Linked List, Graph를 페어 프로그래밍 했다. 토요일 오후5시까지 HashTable 마저 구현하면 된다. 자료구조를 오랜만에 이렇게 코딩을 해볼 줄이야.. 그런데 자바스크립트에서는 oop 방식이 많이 다르다보니, 구현방식이 많이 생소했다. 원래면 class node를 작성하고 객체를 하나하나 만들어서 작성을 했을텐데, 자바스크립트에서는 인스턴스에다가 속성과 메소드를 전부 추가시켜주고 반환을 하는 방식으로 작성했어야 했다. 이머시브 과정을 하면서 정말 페어프로그래밍을 진득하게 하게 되는 것 같다... 그래도 다들 재밌게 코딩을 하시는 것 같아서 나도 괜히 뭔가 들뜨고 재밌게..
-
[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로만 작성했던 것을 거의 뒤집어 엎었다. 리액트 방식으로 작업을 하니 코드 구조가 전체 다 바뀌고, 데이터를 주고받는 형식, 렌더링 방식 등이 전부 달라서...작업 중에 정말 많이 헷갈렸다. 그래도 첫번째 작업한 전화..