javascript
-
[TIL] Timer 만들기IT 지식 2020. 12. 6. 15:49
이번 프로젝트를 진행하면서 제가 직접 타이머를 만들어야 했습니다. 라이브러리를 쓰지 않고 직접 만들어보려고 하니, 너무 오래 걸리고 쉽지 않았습니다. 지금 현재도 완벽하게는 작동하지 않지만, 그래도 그럭저럭 움직이는 타이머를 만들어보고 나니 저처럼 직접 타이머를 만들어야 하는 분들이 있을 것 같아, 제가 타이머를 만들던 과정을 남겨놓고 코드를 남겨 놓으면 다른 분들에게 도움이 될 것 같아 이번 포스팅을 작성하게 되었습니다. 해당 타이머는 React를 활용해서 만들었습니다. 1. 초기 타이머 맨 처음 만든 타이머는 setTimeOut 함수를 통해 만들었습니다. Date 객체를 활용하여 현재 시각이 매 초 찍히게 만들었고, 시작시간을 state로 기록하여 현재 시각에서 시작 시간을 빼주는 방식으로 로직을 생..
-
[TIL] Date 객체에 대해 알아보자IT 지식 2020. 11. 29. 16:07
제가 요즘 진행하고 있는 프로젝트에서 스탑워치를 만들어야 하는 일이 생겼습니다. 그래서 그 방법을 공부하던 중 자바스크립트의 Date 객체를 알게 되어 이에 대해 정리할 겸 이번 포스팅을 작성하게 되었습니다(후에 스탑워치 코드에 대해 서 포스팅 할 예정입니다). 1. Date 객체 Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. Date 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 유닉스 타임스탬프를 사용합니다. // 출처: MDN(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date) Date 객체는 위의 설명처럼 시간의 특정 지점..
-
[TIL] axios 사용법IT 지식 2020. 11. 29. 14:45
오늘은 브라우저와 node를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 axios의 사용법에 대해 알아보도록 하겠습니다. 1. Axios는 무엇인가요?? axios는 앞서 말씀드렸던 것처럼 브라우저와 node를 위한 비동기 통신 라이브러리입니다. axios를 활용하기 전에는 주로 fetch함수를 통해 백엔드와 통신을 했었는데요, axios의 등장 이후로는 axios를 활용한 통신이 주를 이루고 있다고 합니다. 제가 주로 사용하는 react 뿐만 아니라 vue를 비롯한 다양한 UI 라이브러리에서도 axios를 활용한 백엔드 통신을 많이 활용한다고 합니다. 2. axios의 특징 1) 운영 환경에 따른 유연성 앞서 말씀드렸다시피 axios는 브라우저 또는 node를 위한 비동기 통..
-
[what is?] node.js 가 뭔가요?IT 지식 2020. 11. 22. 14:11
오늘의 포스팅은 요즘 핫한 언어 중의 하나인 자바스크립트, 그중에서도 자바스크립트를 기반으로 한 플랫폼인 node.js에 대해 알아보는 시간을 가지도록 하겠습니다. 1. node? 처음 들어보는데요? node의 출현에 대해 이야기하자면 자바스크립트에 대한 이야기가 필요합니다. 자바스크립트는 원래 브라우저에서만 작동하는 언어였습니다. 제어할 수 있는 대상이 웹에 한정되어 있다 보니, 그 시대 웹 개발자들은 많이 무시받기 일쑤였다고 합니다. 그러던 중 2008년 구글이 크롬 웹브라우저에서 자바스크립트의 성능을 개선하기 위한 V8엔진을 개발하게 된 것입니다. node.js의 창시자인 Ryan Dahl은 이 V8을 활용하여 웹에서 뿐만이 아니라 컴퓨터 자체를 제어할 수 있는 node.js를 개발하게 됩니다. 이..
-
[TIL] Day 33. 비동기 처리와 콜백함수IT 지식 2020. 11. 20. 19:54
이번에 새롭게 노드를 공부하게 되었습니다. 그런데 노드를 공부하기에 앞서 promise에 대한 개념이 필요하다고 하더군요. 그래서 promise에 대해 공부하려고 보니, 이번엔 사전 지식으로 비동기 처리와 콜백함수에 대한 개념이 필요하다는 것을 알게 되었습니다(개발의 세계는 끝이 없어라...). 그래서 오늘은 제가 공부한 비동기 처리와 콜백함수에 대한 개념을 정리해보는 시간을 가져보도록 하겠습니다. 1. 비동기 처리가 뭔가요? 비동기 처리란 특정 코드의 실행이 끝날 때까지 다른 코드들이 대기하며 기다리는 것이 아니라, 계속해서 코드를 읽어 나가며 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미합니다. console.log('1') console.log('2') consol..
-
[TIL] Day 32. export default의 의미에 대해IT 지식 2020. 11. 17. 11:36
우리가 react로 코딩을 하다보면 많은 경우에 우리가 쓴 코드를 다른 코드에서 활용하기 위해 import 해오는 경우가 많습니다. 우리가 다른 파일을 import 해오기 위해선 해당 js 파일에서 export를 해주는 것이 중요합니다. 그때 코드의 마지줄에 'export default' 라는 단어를 붙이는 경우가 많습니다. 지금까지는 그냥 아무생각 없이 써왔지만, 오늘 문득 왜 그런 단어를 붙이는지 궁금해졌습니다. 그래서 오늘 포스팅은 이에 대한 얘기를 해보려고 합니다. 1. export 우리는 꼭 default 라는 단어를 export 앞에 붙이지 않아도 코드를 다른 곳으로 보내 활용할 수 있습니다. const hello = "Hello World!" export {hello}; 이런 식으로 코드를 ..
-
[What is?] 타입스크립트가 뭔가요?IT 지식 2020. 11. 1. 19:38
오늘 포스팅에서는 자바스크립트의 상위 호환으로 알려져 있는 타입스크립트에 대해 다뤄보도록 하겠습니다. 1. 타입스크립트? 더보기 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로 소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다. 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. (From 위키백과) 타입스크립트는 마이크로 소프트에서 개발한 오픈소스 프로그래밍 언어 입니다. 타입스크립트는 자바스크립트의 슈퍼셋이기 때문에 자바스크립트에서 사용할 수 있는 모든 기능을 사용할 수 있습니다. 이로 인해 ES6 문법을 사용하기 위해 Bab..
-
1차 프로젝트 후기(in Wecode)에세이 2020. 11. 1. 17:06
목차 1. 시작하기 전 2. 프로젝트 진행 중 3. 후기 및 개발자가 되어 간다는 것. 1. 프로젝트를 앞두고... 위코드에서의 한 달 살이가 지난 후 드디어 처음으로 프로젝트를 진행하게 되었다. 각자가 하고 싶은 프로젝트에 대해 발표하고 나서 투표과정을 거친 후 클로닝할 사이트와 팀원이 발표 되었다. 그때까지만 해도, 기대보다는 우려가 많이 앞섰다. 위코드에서 처음 했던 레플릿 과제는 진행순위로 보면 항상 하위권이었고, 인스타그램을 클로닝하는 프로젝트인 위스타그램에서도 추가 기능 구현까지 한 많은 동기들에 비해 나는 기초 기능구현도 버거웠기 때문이다(결국 추가기능 구현은 시도조차 하지 못했다). 그런 상황에서 제대로 된 사이트를 클론한다는 것이 걱정되었다. '제대로 사이트를 구현하지 못해 제대로 된 포..