기록하고 싶은 것들

오늘은 동적계획법(dp)에 대해서 배웠고 관련 문제를 풀었다. DP라고 하는 알고리즘은, 탐욕 알고리즘과 같이 작은 문제에서 출발한다는 점은 같지만, DP는 모든 경우의 수를 조합해 최적의 해법을 찾음 두 가지 가정이 만족하는 조건에서 사용 Overlapping Sub-problems : 큰 문제를 작은 문제로 나눌 수 있고, 이 작은 문제가 중복해서 발견 Optimal Substructure : 작은 문제에서 구한 정답은 그것을 포함하는 큰 문제에서도 같다. 즉, 작은 문제에서 구한 정답을 큰 문제에서도 사용 가능 DP 문제 예시 문제 자신이 감옥에 간 사이 연인이었던 줄리아를 앤디에게 빼앗겨 화가 난 조지는 브레드, 맷과 함께 앤디 소유의 카지노 지하에 있는 금고를 털기로 합니다. 온갖 트랩을 뚫고 ..

오늘은 proxy에 대해서 공부하였고, 실습을 진행하였다. proxy 프록시(Proxy)란 '대리', '대신'이라는 뜻을 가지며, 프로토콜에 있어서는 대리 응답 등에서 사용하는 개념이다. React 앱에서 브라우저를 통해 API를 요청할 때, proxy를 통해 백엔드 서버로 요청을 우회하여 보내게된다. 백엔드 서버는 응답을 React 앱으로 보내고, React 앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달한다. 이렇게 되면 출처가 같아지기 때문에 브라우저는 이 사실을 눈치 채지 못하고 허용하게 된다. Proxy 실습 api는 책의 정보를 제공하는 서버, api2는 todo의 정보를 제공하는 서버 my-app은 클라이언트 부분이다. 이를 이용해서 my-app부분에 책의 정보와 todo의 정보를 불러..

오늘은 Github Action을 통한 배포를 진행해 보았다. 1. 배포에 앞서서, 새로운 레포지토리를 생성하였다. 이 때 public으로 만들어야 Github Action을 무료로 사용할 수 있기 때문에, 주의해서 생성해준다. 나는 github-action-practice 라는 이름으로 레포지토리를 생성해주었다. 2. 새로운 레포지토리를 생성했다면, 연결시키고 싶은 코드를 push 시켜준다. 나는 기존 레퍼런스를 클론받은 뒤, 새로운 레포지토리를 원격 레포지토리로 등록 후 push를 진행하였다. 기존 레퍼런스 클론 git clone {기존 레퍼런스 주소} # 디렉터리 이동 cd {클론된 레퍼런스} # 새로운 리포지토리를 원격 리포지토리로 등록 git remote add myRepo {새로운 리포지토리 ..

오늘은 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..

오늘은 코드분할, React.lazy()와 Suspense에 대해서 공부하였다. 코드분할이란? 코드를 해석하고 실행하는 정도가 느려졌는지 파악해서, 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오는 아이디어 이를 통하여 대규모 프로젝트의 앱인 경우에도 페이지의 로딩 속도를 개선 가능 React.lazy()와 Suspense() React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것이다. Rect.lazy() 통해 컴포넌트를 동적으로 import를 할 수 있어, 사용 시 초기 렌더링 시간을 줄 일 수 있다. 하지만 단독으로 쓰일 수는 없고, React.Suspense 컴포넌트의 하위에서만 React.lazy로 감싼 컴포넌트를 사용할 수..

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

오늘은 CSS 애니메이션에 대해서 배웠다. @keyframes 라는 키워드를 활용하여 애니메이션 효과를 나타내는데, 우선 css 키프레임 블록을 생성한 뒤, 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 불러와서 사용을 한다. 회전하는 키프레임 예시 @keyframes lotate { 0% { transform : rotate(0deg) } 50% { transform : rotate(180deg) } 100% { transform : rotate(360deg) } } /* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */ /*3초 동안 lotate 애니메이션이 재생*/ #logo { animation : lotate..

오늘은 반응형 웹에 대해서 공부하였다. 반응형 웹이란? 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여, 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 미디어 쿼리 미디어 쿼리는 특정 조건이 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..