전체 글28 [GraphQL] #1. Apollo Server 지난 번 REST API를 공부하면서 GraghQL이란 무엇인지 짧게 알아볼 수 있었는데 효율적인 방법이라고 생각이 들었고, 많은 회사에서 GraphQL을 사용하는 것을 알게 되었습니다. 그래서 이번에는 직접 쿼리를 짜보고 통신이 어떻게 이루어지는지 알아보기로 하였습니다~! 🤗 GraphQL 통신 구현을 위한 셋팅, GraphQL Server 생성, GraphQL Client 생성 이렇게 3개로 나누어 포스팅 할 예정입니다. 이번에는 GraphQL에 대해 소개와 Server 셋팅을 하고, 간단하게Query와 Mutation을 구현해보도록 하겠습니다. 그 전에 그래프큐엘 공식문서를 한번 보시고 오면 더 이해할 수 있습니다! 길이가 길지 않고 직접 예시 쿼리를 작성해 볼 수도 있기때문에 연습하기에도 매우 편.. 2021. 8. 9. 웹팩으로 Vue 만들기 + ( Error 🪓 ) Vue를 처음 사용하게 되었는데, 웹팩에 대한 개념도 공부하며 Vue를 설치해 보기로 하였습니다. 웹팩으로 설치하면서 패키기 제이슨과 웹팩에 대한 개념을 한뎁스 더 나아가 이해할 수있었고, 오류를 해결하며 오류해결에 대한 두려움을 조금 더 극복하게 되었습니다.. 1. Node.js, npm 설치 먼저 준비해햐 할 것은 node js를 미리 설치해 두어야 합니다. 그럼 npm이 자동으로 깔립니다. (-v로 버전과 설치 여부를 알 수 있습니다.) 프로젝트를 만들고 싶은 폴더로 간 후 npm init을 하면 여러가지 설정이 나오는데, package에는 프로젝트 name을 써줍니다. 그렇게 설치를 하면, package.json 파일이 만들어집니다. package.json을 쉽게 설명하자면, '내가 쓰고있는 남의.. 2021. 8. 6. [프리온보딩코스] 2차 과제 후기 과제 소개 2번째 과제는' 고객들이 원하는 상품 목록'을 보여주기 위한 기능을 구현하는 과제였다. 간단히 요약하면 상품 목록에서 --> 상품 상세 페이지를 선택하면 --> 이력이 추가되고 --> 이력에서 브랜드, 가격순, 최신순 필터로 제품 확인 이다. User Story 만들기 메인 페이지까지 3개의 페이지를 4명이서 나눠서 구현했어야 했기 때문에 'User Story'라는 것을 만들어보게되었다. 유저스토리를 만들어서 과제를 이해하고, 분담하는 것을 목적으로 하였다. 👉 내가 만든 User Story # US - 사용자가 ~하면 ~한다 # 상품상세 프로세스 - 메인 페이지에서 상품을 누르면 상품상세페이지가 나온다. - 제품의 정보와 '랜덤상품 조회', '관심 없음' 버튼을 보여준다. - '랜덤상품 조회.. 2021. 8. 1. Next Rise~~🌝 NextRise에 다녀왔다~ 취업을 준비하면서 스타트업 채용설명회를 연다고 해서 채용설명회를 듣기 위해 갔는데 사실 이렇게 큰 행사인지 몰랐다.😳 와서 느낀 점은 개발자 문화가 정보를 공유하고 함께 성장하기 위해 오픈하는 것이 좋은 문화라고 생각했는데, 우리나라 스타트업 기업 문화도 이와 비슷하다는 점이다. 세션이 끝날때 쯤 보았지만 당근마켓, 왓챠, 야놀자에서 초기의 스타트업 창업자들을 위해 자신들이 어떤 점에 초점을 두고 성장했는지 등을 이야기하는 세션도 있었다. 그 밖에도 다양한 세션이 많았는데 (듣지는 않았지만)이렇게 기술과 정보를 공유하고 서로 각자의 성장을 위해 참여하는 모습에 스타트업에 대한 호감이 더 커졌다. 나는 아직 개발자로 커리어를 시작하지 못하였고 취업준비생으로 참여하였지만, 나중에.. 2021. 6. 29. this this? 공부를 하면서도 뭔가 애매한 개념 this. 그래서 핵심부터 말하고 더 자세하게 설명하도록 하겠습니다. this의 값은 함수를 호출할 때(호출하는 방법에 의해) 결정되는 것이고, 호출한 객체가 바로 this이다. 그리고 예외적으로 this를 호출과 무관하게 묶어줄 수 있는(고정시킬 수 있는)함수가 bind이다.(ES5) 자바스크립트에서 this는 샐행 컨텍스트가 생성 될 때 호출되고, 실행 컨텍스트는 함수를 호출할 때 생성됩니다. 그럼 this는 함수가 호출될 때 결정되는 것이라 할 수 있습니다. 이제는 자세하게 this가 어디서 어떻게 호출되는지 아는 것이 중요합니다. 다양한 상황에 따라 this가 어떤 것을 바라보게 되는지 알아보겠습니다. 상황에 따라 달라지는 this 전역 공간에서 thi.. 2021. 6. 24. HTTP, HTTPS의 차이점 HTTP http는 웹서버와 클라이언트 사이에서 문서를 전송하기 위해 사용하는 프로토콜(=규약, 약속) 입니다. HTTP는 클라이언트가 서버로 요청, 서버가 클라이언트로 응답을 하는 과정으로 정보를 교환합니다. 그런데 이HTTP는 기본포트인 80번 포트를 사용하는데, 여기에서는 단순한 텍스트만 주고 받기 때문에 정보가 보안처리 없이 그대로 전송되고, 이는 해킹과 정보 유출의 문제점을 가지고 있습니다. 그래서 우리는 정보를 암호화하여 연결하여, 서버와 브라우저 사이에서 안전한 암호화 연결을 할 수 있는 HTTPS를 사용합니다. HTTPS HTTPS는 HTTP + Secure 의 약자입니다. HTTPS는 내가 어떤 사이트에 보내는 정보를 특정 서버만 알아볼 수 있는 텍스트로 변경하여 통신합니다. HTTPS는.. 2021. 6. 23. 실행 컨텍스트 실행 컨텍스트 실행 컨텍스는 자바스크립트에서 가장 중요한 핵심 개념으로, 자바스크립트의 동적 언어로서의 성격을 잘 파악할 수 있는 개념입니다. 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아둔 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 -> 이를 콜 스택에 쌓아 올렸다가 -> 가장 위에 쌓여있는 컨텍스트롸 솬련있는 코드들을 실행합니다. (여기서 동일한 환경은 하나의 실행 컨텍스트를 구성할 수 있는 방법으로, 함수를 실행하는 것) 위의 이미지와 함께 보면서 스택 구조를 생각해보면, 한 실행 컨텍스트가 콜 스택의 맨 위에 쌓이는 순간(4번째 컵), 즉 어떤 실행 컨텍스트가 활성화 되는 순간에 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 .. 2021. 6. 21. 함수형 프로그래밍 프로그래밍 패러다임 프로그래밍 패러다임은 프로그래밍을 할 때 원하는 목표에 따라 적절한 방법과 기법을 활용하도록 합니다. 잘 알려진 최신의 패러다임은 아래의 것들이 있습니다. 명령형 프로그래밍 - 무엇을 할 것인지 보다, 어떻게 할 것인지 설명하는 방식 (How), 알고리즘을 명시하고 목표는 명시 안함 절차 지향 프로그래밍 객체 지향 프로그래밍 선언형 프로그래밍 - 어떻게 할건지 보다 무엇을 할건지를 설명하는 방식 (What), 알고리즘 명시하지 않고 목표만 명시 함수형 프로그래밍 위 3가지 패러다임만 놓고 본다면 절차지향 프로그래밍 -> 객체 지향 프로그래밍 -> 함수형 프로그래밍 순으로 발전하고 있습니다. 객체지향 프로그래밍 객체지향 프로그래밍은 프로그래밍에서 필요한 데이트를 추상화시켜 상태와 행위를.. 2021. 6. 19. 이전 1 2 3 4 다음
