Today Hailie Learned

✔️EC2 기본 세팅 1. 우선 EC2 인스턴스를 생성한다. 연결 누르기 $ bash $ cd ~ 2. 인스턴스에 개발 환경 구축하기 $ sudo apt update 패키지 매니저가 관리하는 패키지의 정보를 최신 상태로 업데이트하기 위한 명령어 3. nvm, npm을 설치하여 개발 환경을 구축하기 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash touch ~/.zshrc export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")" [ -s "$NVM_DIR/nvm.sh..

►배포 자동화 파이프라인 : 소스 코드의 관리부터 실제 서비스로의 배포 과정을 연결하는 구조. 1. Source 단계 : 원격 저장소에 관리되고 있는 소스 코드에 변경 사항이 일어날 경우, 이를 감지하고 다음 단계로 전달하는 작업을 수행 2. Build 단계 : Source 단계에서 전달받은 코드를 컴파일, 빌드, 테스트하여 가공한다. 이 단계를 거쳐 생성된 결과물을 다음 단계로 전달하는 작업을 수행한다. 3. Deploy 단계 : Build 단계로부터 전달받은 결과물을 실제 서비스에 반영하는 작업을 수행한다. ►CI/CD 파이프라인 ✔️ 지속적 통합 (CI : continuous integration) 팀 구성원이 각자의 작업을 자주 통합하는 소프트웨어 개발 방식. Code : 개발자가 코드를 코드 저..

Warning: A component is changing a controlled input of type number to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 문제 원인 useState 안의 값으로 title, amount 값 이렇게 2개를 받는데, onChange 함수에서는 각각 하나씩만 설정해주고 있다. 그래서 이 에러창이 나오는 것 같다. 해결방법 다른 값은 바꿀 필요가 없기 때문에 ..

Lighthouse란? 사이트를 검사하여 성능 측정을 할 수 있는 도구이고, 개선책도 제공해주는 자동화 툴이다. - 구글에서 개발한 오픈소스이고, 성능, 접근성, PWA, SEO 등을 검사 한다. - Chorme DevTools, CLI, 노드 모듈 등 다양한 경로를 통해 사용 가능하다. - 검사 결과에 따른 리포트를 생성해주어, 점수가 낮은 지표를 한눈에 알아볼 수 있다. 1. 구글 개발자 도구에서 lighthouse 탭에서 검사 가능 2. Node CLI 에서 실행하기 - 전역 모듈로 설치 npm install -g lighthouse - 검사 실행 lighthouse - 모든 옵션 보는 명령어 lighthouse --help 👇 크롬에서 본 백준 페이지의 Ligthhouse 👇 👇 크롬에서 본 정..

GraphQL 구조 서버에서 데이터를 조회하는 경우, REST API의 경우 GET 요청을 했다면, GraphQL에서는 query를 이용해서 원하는 데이터를 요청한다. 데이터를 Create, Update, Delete 와 같이 수정한다면, GraphQL에서는 mutation를 이용한다. 더 나아가 GraphQL에서는 subscription이라는 개념으로 실시간 업데이트를 구현할 수 있다. ✔️ 쿼리 (query) = 데이터 조회하기 ✻ 필드 예시1) 👇요청👇 { pizza { name } } 👇응답👇 { "data" : { "pizza":{ "name" : "bulgogi pizza" } } } GraphQL은 서버에 요청할 때 예상했던 대로 응답받는다. (왜냐면 서버는 GraphQL을 통해 클라이언트가..

✔️ GraphQL이란? Graph + Query Language의 줄임말이다. (API를 위한 쿼리 언어) GraphQL은 Facebook에서 처음으로 개발했고, 오픈 소스로 제공된 쿼리 언어이다. 트리 구조로 쿼리 결과를 받기 위해 그래프를 탐색하는 쿼리 언어이다. ✔️ GraphQL의 특징 - HTTP를 통해 API 서버로 요청을 보내고 응답을 받는다. - 응답을 받을 때 데이터 결과를 JSON 형식으로 받는다. - GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있다. - GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사한다. ✔️ 그래프에서 트리 추출하는 방법 query { 책(ISBN이 "9780674430006")..

대부분의 웹앱에는 인증 DOM이 필요하다. 인증 DOM =Authentication DOM 사용자가 로그인해야만 접근 가능한 구역이 있다. 1. 리액트 앱에서 인증이 작동하는 원리 2. 사용자 인증의 예시 (가입, 로그인, 로그아웃, 로그인 시 보호된 리소스에 접근하는 법) 3. 사용자가 페이지 떠나도 로그인 유지해주는 기능 & 자동 로그아웃 기능 웹사이트에서 인증이 필요한 이유 => 보호해야 할 정보가 있다!! 유저 비밀번호, 데이터베이스에 저장된 데이터 및 미인증 사용자의 접근이 제한된 페이지에 리액트 앱이 요청을 보낼 때 그 요청을 받는 API 엔드 포인트가 그런 데이터에 속한다. 프로필 페이지 자체에도 접근 제한 + 요청받는 API 엔드포인트에도 접근 제한 걸어야 한다. 인증이 어떻게 작동할까? ..

이번 문제에서는 (3), (4), (5), (6)위치에 들어갈 값을 구하는 프로그램을 작성하는 것이었다. 내가 생각한 해결 방법은 (1)에 (2)의 자리수 별 숫자를 곱하는 것이었다. 그래서 (2)에 들어간 숫자를 하나씩 뽑아와야했다. 타입이 숫자인 경우 split을 사용할 수 없기 때문에 숫자에 ''를 더해서 문자로 만들어주고, split('')을 사용해서 배열로 만들고, 배열을 풀어주는 방식을 썼다. 그리고 여기서 자릿수는 세자리 수로 정해져 있기 때문에 구조분해 할당을 써서 깔끔하게 썼다. const [a, b, c] = (num2 + "").split("").map(Number); 👇전체 코드👇 const fs = require("fs"); const [num1, num2] = fs .readFi..

캐시란 많은 시간이나 연산이 필요한 작업의 결과를 저장해두는 것 (일시적인 데이터를 저장하기 위한 목적으로 존재하는 고속의 데이터 저장 공간이다. ) 첫 작업 이후에 이 데이터에 대한 요청이 있을 경우, 데이터의 기본 저장 공간에 접근할 때보다 더 빠르게 요청을 처리할 수 있다. 캐싱을 사용하면 이전에 검색하거나 계산한 데이터를 효율적으로 재사용할 수 있다. 기본 스토리지 계층인 SSD, HDD에 액세스하는 것이 아니라서 데이터 검색의 성능을 높인다. 캐시의 데이터는 일반적으로 RAM과 같이 빠르게 액세스할 수 있는 하드웨어에 저장되며, 소프트웨어 구성 요소와 함께 사용될 수 있다. 캐시의 장점 - 애플리케이션 성능 개선 - 데이터베이스 비용 절감 - 백엔드 부하 감소 - 예측 가능한 성능 캐시가 사용되..

가비지 컬렉션이란 프로그램에서 더 이상 사용하지 않는 메모리를 자동으로 정리하는 것. => JAVA, C#, JAVASCRIPT 등이 있다. 가비지 컬렉션 방법 ✔️ 트레이싱 : 한 객체에 flag를 두고, 가비지 컬렉션 사이클마다 flag에 표시 후 삭제하는 mark and sweep 방법 객체에 in-use flag를 두고, 사이클마다 메모리 관리자가 모든 객체를 추적해서 사용 중인지 아닌지를 표시(mark)한다. 그리고 표시되지 않은 객체를 삭제(sweep)하는 단계를 통해 메모리를 해제한다. ✔️ 레퍼런스 카운팅 : 한 객체를 참조하는 변수의 수를 추적하는 방법 객체를 참조하는 변수는 처음에는 특정 메모리에 대해 레퍼런스가 하나뿐이지만, 변수의 레퍼런스가 복사될 때마다 레퍼런스 카운트가 늘어난다...