개발/부록 (7) 썸네일형 리스트형 실제 프로젝트에서의 활용 예시를 곁들인 Deep Link Deep Dive 글을 시작하며... 사내에서 개발하는 스니커즈, 명품 제품에 대한 모델정보를 보여주는 지면에 공유하기를 다루게 되었습니다. 앱 내 웹뷰로의 진입을 가능하게 하기 위해 일반적인 링크가 아닌 딥링크를 사용하게 되었고, 그 과정에서 일반적인 링크과 딥링크가 어떻게 다른지, 또 딥링크에는 어떤 종류가 있으며 어떠한 특징들을 가지고 있는지를 이해하고 상황에 맞는 방식을 선택하는 과정을 소개하고자 합니다. 링크 먼저 링크가 무엇인지에 대해 한번 돌아보겠습니다. 사전적 의미는 다음과 같습니다. 링크, 또는 하이퍼링크(Hyperlink)는 웹 페이지, 문서 또는 다른 리소스를 서로 연결하는 참조입니다. 사용자가 링크를 클릭하거나 탭할 때, 그들은 링크된 새로운 주소로 이동하게 됩니다. 링크는 인터넷의 기본 구성 요소 .. 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.. 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.. Ctrl +Z, Ctrl +C in Linux 글을 시작하며 ... 이건 언제 한번 진행중이던 로컬 프로젝트를 Ctrl + C 가 아닌 Ctrl + Z 로 종료하게 되었는데 언뜻 보기에는 종료된 것 처럼 보였지만 포트가 살아있는 것을 보고 의아해하며 찾아본 후기입니다. 그래서 둘의 차이는 ? 두 명령어를 사용할 때 모두 Terminal 상에서는 종료가 되는것 처럼 보인다. 하지만 Ctrl + Z 를 누를때는 재시작 시에 해당 포트가 사용중, Ctrl + C 를 누를 때에는 포트가 사라져서 원활한 재시작이 가능하다. 그렇다면 이 둘의 차이는 무엇일까 ? Ctrl + Z : 해당 프로세스 정지 Ctrl + C : 해당 프로세스 종료 그렇다면 정지동작이 있다면 다시 실행 동작도 있지 않을까 ? 다시 실행하기 위해서는 정지 동작을 눌렀을 때에 위의 그림에서.. 이전 1 다음
