기록하고 싶은 것들

오늘은 GraphGL에 대해서 공부하였다. 많이 들어는 봤지만, 정확하게 어떤 기술인지 몰랐는데 이번 기회를 통해 새롭게 알게 되었다. GraphQL 오픈 소스로 제공된 쿼리 언어 Server API 를 통해 정보를 주고받기 위해 사용하는 Query Language를 뜻함 사용 이유는? GraphQL은 그래프 형태로 관계를 생각하는 것에서 출발하여, 클라이언트 요청에 따라 유연하게 트리 구조의 JSON 데이터를 응답하는 방식으로 구성되었기 때문에 고정된 자원이 아닌 클라이언트 요청에 따라 유연하게 자원을 가져올 수 있다는 점이 가장 큰 이유 GraphQL VS REST API REST API의 한계 - Overfetch: 필요 없는 데이터까지 제공함 - Underfetch: endpoint 가 필요한 정..

오늘은 컴퓨터 구조와 운영체제에 대해서 공부하였다. 아무래도 전공 내용이 엄청나다 보니 오늘은 가장 중요한 부분들을 압축해서 배웠다. 컴퓨터 구조 컴퓨터는 입력장치(Input), 출력장치(Output)가 갖춰져 있고, 내부에는 연산을 하기 위한 중앙처리장치(CPU), 저장을 하기 위한 주 기억장치와 보조 기억장치를 가지고 있음 중앙처리장치 CPU의 내부 구성은 크게 산술/논리 연산 장치(ALU)와 제어 장치, 레지스터로 구성되어 있음 CPU의 구조와 기능 CPU는 명령어 인출과 명령어 해독하는 기능을 하며, CPU 의 내부 구성은 크게 산술/논리 연산 장치(ALU), 제어 장치와 레지스터 로 구성 캐시나 메모리로부터 읽어 온 데이터는 레지스터(Register)라는 CPU 전용의 기억장소에 저장되며, AL..

오늘은 Custom Hooks에 대해서 공부했다. Custom Hooks란? 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용 가능하게 만드는 것을 의미한다. 즉, 반복되는 로직을 하나로 묶어 재사용하기 위함이다 여러 url을 fetch 하는 경우 동일한 로직으로 작동되며 상태 변경을 반복되는 경우가 있다. custom hooks를 이용하면 반복되는 로직을 하나의 함수로 뽑아내어 재사용이 가능해진다. custom hooks의 장점 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점 (e.g. useSomething) Custom Hooks 예시 적용 전 // Log..

오늘은 반응형 웹에 대해서 공부하였다. 반응형 웹이란? 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여, 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 미디어 쿼리 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는 구문 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용 가능 media 미디어 타입 (조건(너비 및 높이)) { (CSS 입력하는 부분) } --예제 @media screen (max-width: 400px) { body { color: red; } } 실습 예시 import styled from "styled-components"; im..

오늘은 Section4로 들어간 첫날이자 자료구조에 대해 학습한 첫 날이었다. 기초적인 자료구조인 Stack과 Queue에 대해서 배우고 실제로 구현해 보는 예제를 진행하였다. Stack 먼저 들어간 데이터는 제일 나중에 나오는 LIFO(Last In First Out) 혹은 FILO(First In Last Out)의 특징을 가짐 class Stack { constructor() { this.storage = {}; this.top = -1; // 스택의 가장 상단을 가리키는 포인터 변수를 초기화 합니다. } size() { return this.top+1; } // 스택에 데이터를 추가 할 수 있어야 합니다. push(element) { this.top += 1; this.storage[this.to..

오늘은 OAuth에 대해 배우고, 관련 실습을 진행하였다. OAuth 인증을 중개해주는 메커니즘 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 (ex google, github, facebook 로그인) 실습 구현 단계는 아래와 같다 우선 실습전에, https://github.com/settings/developers 위의 링크에서 OAuth 앱을 등록해 주었다. 개발환경에서 진행했기 때문에, Authorization callback URL을 (http://localhost:3000)로 리디렉션하였다. 그리고 ClientId와 ClientSecret을 서버에 저장하여 사용하였다. 로그인 클라이언트 Login.js 로그인 버튼을 클릭시, GitHub로부터 사용..

문제 axios.delete로 logout url에 accessToken을 같이 보내주었는데, 서버에서 요청을 받기는 하지만, accessToken을 인식하지 못하는 에러가 발생했다. return axios .delete("http://localhost:4000/logout", { accessToken }) .then((res) => setIsLogin(false)); 다른 api에서 동일하게 사용했던 방법이 막히고 해결했다고 생각했던 부분에서 또 막히니 당황스러웠다. 그렇게 또 한 시간을 코드의 이상한 부분을 찾다가, 문득 delete api 에 body를 보내주나? 라는 의문이 들어서 검색을 해보았다. stackoverflow에서 비슷한 상황을 찾을 수 있었다. 해결 방법 DELETE의 경우 conf..

오늘은 토큰에 대해서 배웠고, 토큰을 이용한 로그인, 로그아웃 실습을 진행하였다. 실습 중에서 가장 어려움을 겪었던 부분이 있었는데, 그 부분을 간단히 적어보려고 한다. 토큰 웹 보안에서의 토큰은 인증과 권한 정보를 담고 있는 암호화된 문자열 의미 이를 이용해 특정 애플리케이션에 대한 사용자의 접근 권한을 부여가 가능하다 오늘 진행한 실습의 전체적인 과정과 유사한 이미지이다. 이중에서 오늘 가장 어려움을 겪었던 부분은 F, G, H 부분이다. 이 부분에 대해서 설명을 하자면, accessToken이 만료된다면 refreshToken을 이용하여서 다시 accessToken을 얻어온 뒤, 클라이언트로 보내는 과정이다. 이 과정에서 어려웠던 점은 조건 분기를 적절하게 해야되는 것이었다. 쿠키로부터 받아온 ac..

오늘은 Redux 상태관리 실습의 추가적인 기능을 구현해보았다. actions/index.js action 부분에서는 Action 객체를 생성하는 액션 생성자 사용하여서 코드를 작성하였다. addCart의 경우는 새롭게 추가될 itemId를 받아서 itemId와 1개의 수량을 나타내는 payload 객체, 알맞은 타입을 반환해주었다 removeFromCart의 경우는 삭제에 필요한 itemId를 받아서, itemId를 나타내는 payload 객체와, 알맞은 타입을 반환했고, setQuantity의 경우 수정할 itemId와 수량을 받아서, itemId와 수량을 나타내는 payload 객체와 알맞은 타입을 반환해 주었다. pages/ShoppingCart.js Action 객체를 Reducer로 전달해 주..

오늘은 리덕스를 이용하여 상태관리를 해보는 실습을 진행하였다. 시작하기에 앞서서, 한 곳에 모든 코드를 작성하지 않고, Redux코드를 action, reducers, store 디렉토리로 분리해주면서 코드를 작성했다. Store.js 리덕스 확장프로그램을 사용할 경우 발생하는 에러를 방지해주는 composeEnhancers를 선언해주고, createStore 메서드를 활용해 Reducer를 연결하며, composeEnhancers 로 에러를 방지해주며 Store를 생성해준다. inititalReducer.js Dispatch에게서 전달받은 Action 객체의 type값에 따라서 상태를 변경시키는 함수를 작성한다. 카트에 item을 추가하는 ADD_TO_CART, 카트에서 item을 제거하는 REMOVE..