WeCode
-
[TIL] 로컬 스토리지, 세션 스토리지 그리고 쿠키IT 지식 2020. 12. 6. 16:47
지금 진행 중인 프로젝트에서는 쿠키를 사용하여 데이터를 활용한 적이 있습니다. 이 전의 프로젝트에서는 로컬 스토리지에 데이터를 담았던 적이 있구요. 하지만 이렇게 활용하다보니, 도대체 로컬 스토리지와 쿠키의 차이점이 뭘까?라는 의문이 들었습니다. 오늘의 포스팅은 바로 이 의문점을 해결하는 것으로 이루어져 있습니다. 1. 브라우저의 데이터를 컴퓨터에 기록하는 방식 로컬 스토리지, 세션 스토리지 그리고 쿠키는 모두 인터넷을 하면서 발생하는 데이터를 컴퓨터에 기록하는 방식입니다. 이 중에서 로컬 스토리지와 세션 스토리지는 HTML5 에서 추가된 저장소라고 합니다. 그렇다면, HTML5 이전에는 어디에 데이터를 저장했을까요? 눈치 빠른 분들은 아셨겠지만, 바로 쿠키에 저장했다고 합니다. 1) 쿠키 쿠키는 만료 ..
-
[TIL] Timer 만들기IT 지식 2020. 12. 6. 15:49
이번 프로젝트를 진행하면서 제가 직접 타이머를 만들어야 했습니다. 라이브러리를 쓰지 않고 직접 만들어보려고 하니, 너무 오래 걸리고 쉽지 않았습니다. 지금 현재도 완벽하게는 작동하지 않지만, 그래도 그럭저럭 움직이는 타이머를 만들어보고 나니 저처럼 직접 타이머를 만들어야 하는 분들이 있을 것 같아, 제가 타이머를 만들던 과정을 남겨놓고 코드를 남겨 놓으면 다른 분들에게 도움이 될 것 같아 이번 포스팅을 작성하게 되었습니다. 해당 타이머는 React를 활용해서 만들었습니다. 1. 초기 타이머 맨 처음 만든 타이머는 setTimeOut 함수를 통해 만들었습니다. Date 객체를 활용하여 현재 시각이 매 초 찍히게 만들었고, 시작시간을 state로 기록하여 현재 시각에서 시작 시간을 빼주는 방식으로 로직을 생..
-
[TIL] 스키마에 대한 정리IT 지식 2020. 11. 29. 18:08
이번주 node 수업을 들으면서 처음 들어본 개념이 있었습니다. 바로 스키마 라는 것이었는데요, 저를 제외한 다른 분들은 스키마에 대한 개념을 알고 들으시는 듯 했지만, 저는 잘 모르는 개념이었기에 이렇게 한 번 정리를 해야 다른 백엔드 수업을 들을 때, 어려워하지 않겠구나 라는 생각이 들어 이번 포스팅의 주제로 선정하기로 했습니다. 1. 스키마란? 스키마를 한마디로 정의한다면 '데이터베이스의 구조와 제약조건에 대한 전반적인 명세를 기술한 것'이라고 할 수 있습니다. 이를 좀 더 자세하게 풀이한다면, 개체의 특성을 나타내는 속성(attribute)과 속성들의 집합으로 이루어진 개체(entity), 개체 사이에 존재하는 관계에 대한 정의와 이들이 유지해야할 제약 조건들에 대해 기술한 것이라고 할 수 있습니..
-
[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}; 이런 식으로 코드를 ..