자바스크립트23 [AJAX] AJAX란? Ajax(Asynchronous Javascript And Xml) 빠르게 동작하는 웹 페이지를 만들기 위한 개발 기법이다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있고 백그라운드 영역에서 서버와 통신하여 그 결과를 웹 페이지의 일부분에만 표시할 수 있다. 이 때 서버와 데이터를 주고받을 수 있는데 대표적인 데이터는 JSON, XML, HTML, 텍스트 등이 있다. Ajax의 장점 웹 페이지 전체를 다시 로딩하지 않고도 웹 페이지의 일부분만을 갱신할 수 있다 웹 페이지가 로드된 후에 서버에 데이터 요청을 보내거나 받을 수 있다 다양한 UI 구현(동적인 페이지 구현)이 가능해 진다 Ajax의 단점 페이지의 이동이 없기 때문에 히스토리 관리가 안된다 반복적인 데.. 2022. 1. 29. IM 29일차 TIL(promise) Promise 프로미스(Promise)란 자바스크립트 비동기 처리에 사용되는 객체로 어떤 코드를 실행이 완료되기 전에 다음 코드를 수행되는 특성이다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시하기 위해 사용된다. 프로미스는 3가지 특징을 가진다. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태 Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태 pending(대기)는 new Promise() 를 호출하게 되면 대기 상태가 된다. new Promise(function(res, rej){ }); 콜백 함수로는 resolve, reject를 받는다. fulfilled(이행.. 2020. 6. 9. [node.js]서버 구축하기 Express Express 는 Node.js의 프레임워크의 일종으로 간편하게 웹서버를 구축할 수 있다. 우선 Express를 설치해보자. $ npm install express --save Express로 서버생성을 하기 위해서 다음과 같이 구성하면 된다. const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`)) 그리고 Router로 request를 처리해주면 http://localhost:.. 2020. 5. 22. IM15일차 초보개발자 TIL(fetch) 클라이언트에 관련된 과제를 진행하였다. fetch를 이용하여 data를 받아와 client에 구현될 수 있도록 하는 작업이었다. fetch API 는 리소스 취득을 위한 인터페이스이다. ES6의 사용이 많아짐에 따라 fetch API의 사용도 증가하는 추세이다. fetch(URL) .then(res => res.json()) .catch(err => console.log(err)) fetch함수를 이용하여 URL을 받아고 .then을 이용해 callback함수를 실행한다. .catch를 사용하여 에러가 발생하였을때 핸들링 해주면 된다. 다만 fetch함수 만으로 data를 바로 사용할 수 없다. res에는 body가 담겨져 나오는데 이거 자체는 스트림이고 완전히 data를 가져오는 것이 아니다. 그렇기 .. 2020. 5. 20. [Javascript]Object.create() & ES6 프로토타입을 상속받는 방법에는 추가적인 방법이 더 있다. 그중 하나는 Object.create() 를 사용하는 방법과 ES6 두가지가 존재한다. Object.create() 사용 Object.create() 는 포로토타입의 객체 및 속성을 그대로 가져오는 메소드로, 상위클래스의 메소드를 하위클래스 메소드로 가져올 수 있다. 다만 상위클래스의 constuctor가 복사되어 오기 때문에 하위클래스 constuctor를 따로 지정해 주어야 한다. 이전 포스팅에서 사용했던 예제를 이용해 보겠다. function Player(name, team, position){ this.name = name this.team = team this.position = position } player.prototype.homer.. 2020. 5. 12. Object Prototypes prototype 프로토타입은 흔히 '시제품'이나 '견본'의 의미를 뜻하며, 자바스크립트 내에서는 객체의 속성이 아닌 객체의 프로토타입 속성으로 정의된다. 즉, 객체의 원형으로 하나의 틀이라고 생각하면 된다. 자바스크립트는 흔히 프로토타입 기반의 언어라고 부르며, 모든 객체와 속성을 받는 템플릿으로 프로토타입 객체를 가진다고 할 수 있다. 상위 프로토타입 객체로 상속받기 위해 연결하는 것은 프로토타입 체인이라고 부른다, 프로토타입 속성에서 파생된 객체를 __proto__ 로 접근이 가능 하다. prototype 예제 프로토타입을 이해하기 위해서 우선 프로토타입의 예제를 통해서 알아보자. function player(name, team, position){ this.name = name this.team .. 2020. 5. 10. [Javascript] Scope Scope란 지역적인 뜻을 내포하고 있으며, 쉽게말해 어떤 블록({})이나 함수를 만들었을 때 그 범위에 해당되는 것을 의미하기도 한다. 우리가 변수를 선언할때 흔히 var / let / const 이 3가지를 쓰고 있으며, 이 3개는 각각 다른 특징을 가진다. 우선 첫번째로 var 에 대해서 설명하고자 한다. var는 해당 함수 레벨 scope에서 변수로서 정의되어 작동한다. 예를 들어 var abs = 10 function numb () { var abs = 20 console.log(abs) } console.log(abs) // 10 numb() // 20 함수내에서 정의된 값은 함수가 생성되면 그 값을 받고, 함수 밖에서 경우에는 함수 밖(전역)에서 정의한 값을 받는다. 하지만 블록 레벨 sco.. 2020. 5. 1. git workflow & conflict 해결 이전에 git 과 github 사용 법에 대해 배워왔다. 이번에는 pair programming을 위한 workflow를 배워보도록 하자. 그전에 우선 git workflow가 어떻게 이루어지는 지를 알아야 한다. git workflow github에서 fork를 하고 my repo에서 git clone을 하게 되면 local로 작업을 불러들일 수 있다. working directory에서 코딩작읍을 한 이후 git add를 통해 staging area에 저장되고 git commit을 하여 해당 작업에 대한 메세지를 넣어 local repo로 옮겨진다. 이상태에서 git push origin master를 입력하여 my repo로 넘어간다. 새로운 브랜치를 만들어 진행하기 위해서는 git checkout.. 2020. 4. 29. 5주차 초보개발자 TIL 4주간의 PRE course가 끝나고 개인 학습 시간을 가지는 한주 였다. 화요일 이때까지 배워왔던 중요한 부분에 대한 test를 진행하였다. 코플릿 문제를 비롯하여 알고리즘, array 메소드, DOM , 재귀 함수를 이용한 문제들이었다. 가장 어려웠던 문제는 array 메소드였다. 아직까지 map메소드와 reduce메소드에 대한 이해가 많이 부족하구나 하는 걸 느꼈다. 시험이 끝난 이후 다시 한번 map과 reduce 메소드에 대한 내용을 다시 한번 되짚어 보고, 더 부족한 점이 없는지 확인 하는 시간이 되었다. 5주차 한주동안 부족한 부분이 무엇인지 더 찾아보고 다음주 진행 되는 Immersive course에서 뒤 떨어지지 않도록 준비를 해야 겠다는 생각이 드는 주차였다. 2020. 4. 23. 이전 1 2 3 다음
