본문 바로가기

전체 글

 (75)
Why use .jsx 현재 근황 5월에 연이 닿아 입사하게 된 회사에서 정신없이 일하느라 블로그 관리가 너무 소흘했던 것을 2021년이 되어서야 새삼 느끼게 되었다. 내부 일정, 상황 속에서 여러가지를 느끼며 개발하고 있는 와중에도 레거시에 흔들리지 않기 위해 항상 코드의 근거를 찾고 기본 개념을 잊지 않기 위해 노력해왔고, 이들을 시간을 내어 다시 정리하며 앞으로 나아가기로 다짐하여 오랜만에 다시 글을 적는다. ( 오랜만이라 정해진 틀 없이 의식의 흐름대로 적어보기로 한다. ) 왜 이런 주제를 다루게 되었을까 ? 사실 이런 주제는 처음 리액트를 접할 때부터 알아야하는게 아닌가 싶지만, 보통 토이프로젝트의 기본 틀을 잡을 때에는 기본 개발 템플릿인 create-react-app 을 사용했고, 또는 구글링을 통해 접한 코드들에..
What is REST API API란 ? API는 Application Programming Interface의 약자로, 응용프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제공할 수 있게 만든 인터페이스이다. 그렇다면 이를 활용한 REST API란 무엇일까 ? REST API ? 그렇다면 REST API란 무엇일까 ? 여기서 REST는 REpresentational State Transfer의 약자로 이는 웹에 존재하는 자원에 고유한 URI를 부여해 활용하는 방식으로 자원에 대한 주소를 지정하는 방법론을 말한다. 간단히 말하면, 자원을 주고받는 것을 어떻게 미리 알릴 것인지에 대한 것이다. REST API의 구성 REST API는 3가지 요소로 구성이 되어있는데 이는 자원(RESOURCE) - URI ..
GraphQL로 Redux Local 동작 대체하기 요즘 관심이 가는 기술 중에서 REST API를 대체할 수 있는 기술이라고 하는 GraphQL에 대해서 공부해보았다. 아무래도 REST API를 사용할 때보다 Front-end 측의 자유도가 높아진다는 말을 듣고 흥미가 생겼는데 이보다 더 흥미가 생긴 점은 Redux를 대체할 수 있다 는 것이였다. 따라서 이전에 toy-project로 진행하던 Infinite-Scroll 실행 코드를 GraphQL로 대체해보기로 했다. 시작하며 ... 지금부터 소개하는 프로젝트의 구조는 지극히 개인적인 구조이며, 틀린 점이 있을 수 있을 수 있습니다. (틀린 점이 있다면 누구든지 구원해주시길 ...) 한가지 더 당부하고 갈 내용은 Local 동작만을 제어해보는 것이다. 여기서 내가 생각하는 Local 동작으로는 기본 S..
Data type Type? 오늘 주제인 Javascript의 Data type에 대해 알아보기 전에 Type이란 무엇이고, 이를 왜 나누어서 사용하는 것인지에 대해 간단히 알아보자. 먼저 위의 내용에 접근하기에 앞서 poiemaweb에서는 '프로그래밍' 의 정의로부터 설명을 시작한다. 프로그래밍은 변수를 통해 값을 저장하고 참조하며 연산자로 값을 연산, 평가하고 조건문과 반복문에 의한 흐름제어로 데이터의 흐름을 제어하고 함수로 재사용이 가능한 구문의 집합을 만들며 객체, 배열 등으로 자료를 구조화하는 것이다. 여기서 주목해야 할 부분은 프로그래밍은 변수를 통해 ~~~ 한다는 점이다. 그렇다면 변수 란 무엇일까 ? 변수는 값의 위치(주소)를 기억하는 저장소이다. 여기서의 값의 위치 란 메모리 상에서의 위치로, 메모리 상에..
Koa + MongoDB + Apollo Server + Graphql 연동하기 시작하며 ... 요즘 공부하는 것중 Redux를 대체할 수 있는 Apollo + GraphQL 을 활용해서 새로운 프로젝트를 만들어보려고 하는데 프론트 위주로 공부하다보니 아무래도 백엔드는 다룰 줄 아는게 한정적인 것이 현실 ... 일단은 이전 프로젝트에서 다뤄봤던 Koa + MongoDB + Mongoose 를 백엔드로 잡고 이를 연동하기로 함. 둘러보면 Koa랑 MongoDB를 연동하시는 개발자분은 별로 못봐서 과정을 글로 남기기로 했음. 코드 설명 1. 프로젝트 생성 일단 프로젝트를 시작하기 위해 프로젝트를 만들어준다. mkdir mongo-apollo-project cd mongo-apollo-project yarn init 2. 사용해야하는 모듈 세팅 이후 사용해야하는 모듈을 설치해준다. yar..
[부록] Shallow Merge VS Deep Merge 글을 시작하며 ... 개인적인 프로젝트를 진행하던 도중 lodash 라이브러리의 merge를 알게되었고 기존에는 Shallow와 Deep 을 생각하면 Copy 밖에는 몰랐는데 이번 계기를 통해 shallow merge와 deep merge에 대해 알아보게 되었음. Shallow Merge 일단 Shallow Merge란, Shallow Copy, Deep Copy 에서의 Shallow Copy와 비슷한 개념으로 객체의 내부값을 상세히 비교하여 병합하는 것이 아니라 객체를 비교하여 일치하는 key값이 존재할 경우, 그 value값을 바꿔치기 하는 방식 이다. 이를 실행할 수 있는 방법을 두가지가 있는데 지금부터 알아보자. Object.assign 첫번째 방법으로는 Object 객체의 내장 메소드인 assi..
[부록] Cookie, Web Storage 개념 Cookie와 Web Storage에 대해 알아보기 전에 어떤게 먼저인지를 알아야한다. Cookie는 기본적으로 HTTP의 특성을 보완하기 위해 나온 존재다. 그렇다면 일단 기본적으로 HTTP 의 특성에 대해서 간단히 짚고 넘어가보자. HTTP의 특징 1. 비연결성 클라이언트와 서버가 한번 연결은 맺은 후, 클라이언트 요청에 대해 서버가 응답을 마치면 연결을 해제한다. 이러한 특징에는 장, 단점이 존재하는데 장점 으로는, 연결을 계속해서 유지하지 않기 때문에 리소스를 절약하여 더 많은 연결을 할 수 있다는 점인데 HTTP는 기본적으로 인터넷 상의 불특정 다수를 대상으로한 통신 환경을 기반으로 설계되었기때문에 서버와 다수의 클라이언트가 연결을 계속 유지해야한다면, 과도한 리소스가 발생한다. 따라서 H..
[ES6] Generator 개념 먼저 Generator 란 직역해보자면 생성기 라는 의미를 가지는데 실제 역할은 이터러블을 생성하는 함수 이다. 이번에는 매우 생소한 개념이기 때문에 예제 코드부터 보고 가보자. function* threeStep() { console.log('one step'); yield 1; console.log('two step'); yield 2; console.log('three step. The End!'); } // 함수 표현식으로도 가능! let threeStep = function* () { // Something ... } 위의 함수가 기본적으로 Generator 함수를 만드는 방식이다. 여기서 기존의 함수와 다른 부분을 찾아보자면 * 와 yield 를 찾을 수 있겠다. 그렇다면 이들은 어떤 역..

티스토리툴바