매일 꾸준히

기존 노션클로닝 과제를 뜯어고치던 와중.. 나는 npx serve - s을 이용해 개발환경을 띄우고 있었다. 그럼 npx serve -s는 뭐고 어떻게 동작했었지..?를 묻게 된다. (언젠가 배웠던 것 같은데 까먹은 거 같기도) 바로 npm에 들어가 해당 패키지가 뭔지 살펴봤다. npx-server는 Node.js기반의 정적인 웹 서버 도구이다. -s를 이용해 SPA환경에서 지원도 해준다. 문제는 기존 코드의 props가 흩뿌러져 있는 문제 떄문에 이를 redux로 이용해 마이그레이션하는 과정에서 발생했다. redux를 설치하고 다음의 코드를 적었을 떄 이런 오류가 발생했다. import { legacy_createStore } from 'redux'; import editorChild from './e..

언제 useCallback을 쓰고 어느 시점에 useMemo를 써야할까요? 이 주제에 관해 정리해보려고 합니다. (먼저 useCallback 훅부터 정리를 하고 가려고 합니다.) (막연하게 성능 최적화를위해 useCallback과 useMemo를 쓴다고만 알고 있었던..) 리액트에서는 useCallback과 useMemo라는 훅이 존재합니다. 공식문서에 따르면 두 훅은 다음과 같은 상황에 사용된다고 합니다. useCallback useCallback은 함수를 기억했다가 재사용가능하도록 도와주는 훅입니다. 리액트에서 부모 컴포넌트가 랜더링 될떄, 하위 자식 컴포넌트들도 랜더링이 일어납니다. 이 과정에서 useCallback으로 함수의 불필요한 생성을 방지 할 수 있습니다. 이처럼 useCallback을 사..

문제를 보면 주어진 요구사항은 크게 4가지로 나뉜다. 장르별로 최대 2개씩까지만 앨범에 들어간다. 속한 노래가 많이 재생된 장르를 먼저 수록한다. 장르 내에서 많이 재생된 노래를 먼저 수록한다. 장르 내에서 재생횟수가 같은 노래끼리는 고유번호가 낮은 노래를 수록한다. 장르별로 구분을 해야하기 떄문에 Map을 사용할 수 있다. map의 키로 장르를 선택하고 값으로 해당 장르의 재생횟수, 고유번호 리스트를 선택할 수 있다. 입출력 예 문제에서 예를 들어보자. 처음 클래식이라는 장르가 보인다. map에 {클래식,{500번,처음 고유번호인0}}을 저장한다. 다음으로 Pop이라는 또 다른 새로운 장르가 보인다. 마찬가지로 map에 {팝,{600번,고유번호 1}}을 저장한다. 다음으로 클래식이라는 이미 존재하는 장..

빅오 표기법 빅오표기법의 수학적 정의는 다음과 같다. f(n)의 알고리즘 시간 효율성이 있고 n0보다 충분히 큰 값 n을 넣을떄, f(n)의 런타임 시간이 최악의 경우에도 점근선인 k*g(n)을 넘을 수 없다. 이때 빅오 표기법을 사용해 O(g(n))이라고 나타낸다. 빅오 표기법은 크게 2가지 특성이 있다. 1. 상수항 무시 빅오 표기법에서 데이터 입력값은 충분히 크다고 가정하고, 알고리즘의 효율성도 데이터의 크기에 따라 영향을 받기 때문에 상수항 같은 사소한 부분은 무시한다. 예를들어 O(2N) -> O(N)과 같이 상수항은 무시하고 표기한다. 2. 영향력 없는 항 무시 가장 영향력이 큰 항 외에 영향력 없는 항들은 무시된다. 예를 들어O(n^2 + 2n + 1) -> O(n^2)과 같이 영향력이 지배..

브라우저에 URL을 입력하면 무슨 일이 일어날까? - 웹 사이트가 우리한테까지 보이기까지 , 무슨 작업이 일어날까? 과정별로 찬찬히 알아보자. 1. URL을 해석한다. (Uniform Resource Locator) URL은 protocol,host,port,path,query,fragment로 구성되어있다. - 프로토콜(protocol) URL의 시작 부분에는 , 해당 자원에 접근하기 위해 사용되는 프로토콜이 명시된다. 예를 들어 , 웹 페이지에 접속할떄는 https프로토콜을 사용하고, 파일 전송을 위해서는 File Transfer Protocol 프로토콜을 사용할 수 있다. 그럼 웹에서 사용되는 https프로토콜은 무엇일까? http와 https프로토콜 HTTP hyper text transfer p..

위상정렬은 먼저 비순환 방향 그래프 DAG에서만 사용 가능합니다. 그래프 이론에서 DAG는 노드와 노드간의 방향성을 가진 간선으로 구성된 그래프를 의미합니다. 각 간선이 하나의 노드에서 다른 노드로 방향을 가지며, 일방통행을 합니다. 또한 그래프 내에서 절대 사이클이 없는 것을 의미합니다. 즉, DAG는 방향성이 있고 사이클이 없는 그래프라고 볼 수 있습니다. 위상정렬 위상정렬은 순서가 정해진 작업을 차례대로 수행할때 순서를 결정해주는 알고리즘입니다. 예를 들어서, 라면을 끓이기 위해 물을 먼저 끓어야 합니다. 이때 물을 먼저 끓인다 -> 라면을 끓인다 라는 작업간의 선행 순서가 존재하고 이 선행 순서를 정해주는 알고리즘입니다! 또한 그래프에는 진입차수(In-Degree)와 진출차수(Out-Degree)..

이 글은 프론트엔드 데브코스를 준비 하고 있는사람들이나 관심있는 분들을 위한 글입니다. 일단 제가 프로그래머스 프론트엔드 데브코스를 지원한 이유는 크게 3가지였습니다. 1. 자바스크립트를 잘 안다는 착각 자바스크립트에 대해 책을 깊게는 아니지만 (코어자바스크립트, 모던 자바스크립트..) 읽어봤습니다. 호이스팅, var vs let,const 등 여러 개념을 공부해서 자바스크립트에 대해 이정도면 잘 아는거 아니야..?라는 생각을 갖고 있었습니다. 우매함의 봉우리의 고점을 향해있던 쯤에, 프로그래머스의 과제테스트 전형을 연습삼아 응시해봤습니다. 사원 구축 테이블의 과제였는데, 나는 자바스크립트를 진짜 많이많이많이 모르구나..라는 생각을 과제를 치르고 나서 하게되었습니다. 간단한 페이지 라우팅부터, 상태 관리..

깃헙 페이지로 배포를 하고 있었고,import.meta객체를 이용해 로컬환경에서 환경변수를 했다. 다만 배포 환경에서는 (env파일이 깃에 올라기지 않는다는 가정하에는) 다른 방법의 환경변수 설정이 필요하다. firebase등등 보여줘서는 안되는 환경변수들을 배포 시에도 유지하기 위해서 깃헙 secrets을 이용해 환경변수를 관리할 수 있다. github Action secrets? 깃헙 레포의 action secrets는 환경변수를 암호화해서 저장할 수 있는 기능이다. 결과적으로 로컬환경에서는 .env파일을, github action을 이용한 배포 시에는 , action secrets를 이용해서 환경변수를 관리 할 수 있다. 먼저 github Action의 secrets를 저장하는 방법은 간단하다. 깃..

기존의 CRA에서 process.env로 환경변수를 관리했어서, vite + react의 환경에서도 process.env를 통한 환경 변수 관리가되지 않을까.. 하고 시도를 해봤지만 실패하였다. process.env가 뭐길래? process.env는 노드에서 사용하는 전역객체고, 환경변수를 저장하기 위한 객체이다. 리액트에서는 REACT_APP_키워드를 붙여서 환경변수를 관리한다. CRA를 통해 만든 리액트의 프로젝트에서는, 기본적으로 환경변수를 사용할 떄 .env파일을 사용한다. 이때 process.env객체에는 .env파일에 설정한 변수들이 자동으로 등록된다. 이떄 등록된 변수들은 자바스크립트에서 process.env객체를 통해 접근 할 수 있다! 공식문서에 따르면, 환경변수의 접두사를 VITE_로 ..

먼저 기존에는 입력 컴포넌트를 만들고 Props를 주입해서 사용하고 있었다. 키워드를 통해 검색 결과를 검색하는 기능을 구현하기 위해 위에서 정의한 컴포넌트를 사용했지만 , 입력할때마다 상태가 바뀌는 불편함이 존재하였다! 입력한 상태가 바뀔떄마다 입력값을 통해 검색 결과를 가져오기 떄문에 너무 과도하게 검색 결과가 바꾸는 문제도 발생했다. 입력을 할때마다 굉장히 불필요하고 많은 검색 결과를 찾고 있었고, 개선이 필요했다. 디바운스 이를 해결하기 위해 디바운스를 이용할 수 있다. 다바운스는 짧은 시간 간격으로 연속해서 발생하는 이벤트를 묶어, 과도한 이벤트의 호출을 방지하는 기법이다. 위의 경우 텍스트 입력 필드에 값을 입력할 떄마다 연속해서 검색 결과를 찾게 되는데, 사용자가 입력을 모두 끝냈을 떄 한번..