공부!

공부!/웹개발

Intro To The Node.js (유데미31~32)

그동안 javascript를 동작시키기 위해선, html의 script 태그에 src="app.js" property를 추가하여 브라우저를 통해 코드를 돌리고, 콘솔창에 뜨는 결과물을 확인했어야 했다. Node.js는 브라우저 없이 javascript 파일을 돌리는 툴이다. 최근 몇 년 들어서 매우 가파른 상승세를 보이고 있다고 한다. (그동안 노드를 몇 번 다룬 적이 있긴 했는데 '브라우저 없이 js를 돌리는 툴'이라는 정의는 처음 배웠다. 신기..) 현재 듣고 있는 강의에서 설명하는 내용 위주로 node.js의 겉핥기 내용을 정리해보도록 하겠다. 🌱 PROCESS 간단히 말하자면 브라우저의 window, python이나 기타 프로그래밍 언어의 sys같은 global object. process.arg..

공부!/웹개발

Axios를 이용한 TV show 이미지 검색!

axios의 기본 사용법은 fetch와 비슷하다. 다만 json형태를 조금 더 간단하게 받고 이용하기 위해 + syntax의 간편함을 이용하기 위해! 사람들이 axios를 조금 더 많이 이용하는 것이다. axios.get(`api_url`, config) 형태로 우리가 원하는 json 데이터를 받아 사용할 수 있으니 간편하지 않나? get을 통해 받은 promise 객체를 통해 .then().catch()를 해도 되지만, 역시 await과 try-catch 블락을 통해 데이터 및 에러 핸들링을 하는 것이 가장 간편한 방법인 것 같다. 유데미에서 예시로 보여준, tv show Web API를 이용하여 어떤 키워드를 검색하고, 그 키워드에 맞는 이미지를 출력하는 사이트를 간단히 만들어보도록 하겠다. api의..

공부!/웹개발

Promise에 대하여(유데미 섹션 27)

지금까지 유데미 섹션에서 가장 어려웠고, 한편으로는 그동안 자바스크립트를 공부하면서 이해하기 힘들거나 애매하게 넘어갔던 부분을 제대로 해소했던 섹션이었다. 복습도 좀 제대로 해주고자 한다. 🌱CALL STACK 우리가 작성한 코드가 여러개의 function call을 요구할 때, 자바스크립트는 call stack 위에 함수를 올려놓고 스택 처리 방법(FIFO)으로 주어진 function call을 진행한다. 호출된 함수를 스택 제일 위에다 두고, 그 함수를 처리한 뒤, 방금 처리한 함수를 스택 위에서 삭제하는 방식이다. 다음 코드는 삼각형의 세 변의 길이가 주어졌을 때 그 삼각형이 직각삼각형임의 여부를 알려주는 함수(isRightTriangle)를 콜하는 과정이다. const multiply = (x, ..

공부!/웹개발

Event에 대하여(udemy 섹션 25)

중요한 내용인 것 같아 수업내용 이외에 블로그에 전체적인 수업 흐름을 기록하고자 한다. Events : Respondingto user inputs and actions. 브라우저가 user events를 통해서 'listen for'할 수 있는 이벤트의 종류는 매우 많다. (clicks, drags, hovers, scrolls, form submission, key press, mouse wheel, copying&pasting, screen resizing..) 유저가 web page에 무언가를 더함에 따라 웹페이지는 그것에 반응하여 유저에게 웹페이지의 콘텐츠를 보여준다. "in respond to"라는 단어를 강조하심.. event listen엔 여러가지 방법이 있는데, 일단 아래 html예시를 ..

김부추
'공부!' 카테고리의 글 목록 (8 Page)