제너레이터 함수
redux-saga를 사용방법을 보다보면 제너레이터 문법이 등장한다.현재는 redux thunk만을 사용하고 있지만 saga로 전환을 고민하고 있기에 제너레이터 문법에 대해 우선 학습하고자 한다.그렇다면 제너레이터 문법이란 제너레이터 함수 라는 특별한 문법으로 생성되는
면접 질문
브라우저 저장소는 크게 웹스토리지와 쿠키로 나. 우선 쿠키는 클라이언트 로컬에 위치한 작은 파일 4kb의 작은 값만 저장할 수 있으며 서버에 데이터를 요청시 자동으로 header에 삽입되어 전송. 시간을 지정해서 저장하면 브라우저를 종료하더라도 해당 시간까지 쿠키가
Webpack
webpack에 대해 정리를 해보려고한다.웹팩이 빌드 툴로서 파일들을 합쳐주고 최적화 해준다는것 정도만 알고 있었고 webpack의 원리에 대해 알아볼 기회가 없었다.이번에 vanilajs로 만든 프로젝트를 번들링해볼 겸 webpack을 정리하고 공부해보려고 한다.정리
Atomic design
react를 공부하면서 자주 보이는 용어중 하나는 바로 Atomic design Parttern이다.Atomic design일종의디자인 시스템을 만드는 하나의 방법론으로 가장 작은 컴포넌트를 원자 단위로 설정하고이를 바탕으로 상위 컴포넌트를 만들어 재사용을 최대화하는
React 성능 최적화하기
React에서 성능 최적화는 가장 중요한 요소 중 하나이다.토이프로젝트를 위해 최적화를 하는 방법을 찾아보다 React Developer Tools에 있는 Profiler라는 기능을 알게되었다, React Developer Tools은 오픈소스 React JavaScr
React Infinite scroll 구현하기 wtih IntersectionObserve
현재 토이프로젝트로 가드너를 위한 사이트를 만들고 있는데, 식물 검색결과를 가져오는 부분에서 무한 스크롤 구현 파트가 필요했다.사실, 처음에는 일반스크롤도 구현된 상황이었다. 식물 검색결과, 여러 기관에서 데이터를 가져오는데, 사진-설명만 다르고 품종이 같은 식물정보가
shouldComponentUpdate 와 React.memo
프로젝트를 최적화하기 위해 여러가지 방법을 찾아보다가 shouldComponentUpdate 라는 메서드를 처음 알게되었다.shouldComponentUpdate란?컴포넌트의 prop이나 state가 변경될때, 변화가 있는지를 확인하고 렌더링 여부를 결정할 수 있다.
React와 Redux (2)
상태를 읽어오기 이제 컴포넌트에서 저장소를 구독하고 데이터를 가져올 차례이다. 사실 redux만 사용한다면 구독을 위해서는 subscribe라는 함수를 사용한다. 예시로 구독자 함수를 만들고 해당 구독자를 연결해보자. 위와 같이 코드를 작성하면 redux는 subs
React와 Redux (1)
여태까지 개발을 하며 사실 redux를 반드시 써야한다! 라는 경험은 사실 드물었다. 전역으로 상태 관리를 해야하는 경우 대부분 contextAPI로 해결되었기때문이다. 사실 사용하면서도 빈번한 렌더링때문에 걱정이 된 적도 있었으나ㅎㅎ.. 전역 상태 관리 로직을 모두
[프로그래머스] 124 나라의 숫자
문제:https://programmers.co.kr/learn/courses/30/lessons/12899난이도 : level2문제 접근 :10진법 숫자를 124진법으로 변환하는 문제이다. 1,2,4 세개의 숫자이므로 3진법 변환과 유사하다.그런데 해당 문제는
웹과 인증
웹 개발을 하다보면 인증에 관한 이야기를 많이 들을 수 있다. 세션, 토큰 등등...그 종류도 매우 다양하다. 그러나 사실 인증이 없어도 개발은 가능하고 모두 동작한다. 그렇다면 왜 그렇게 인증에 신경을 쓰고 보안을 위한 수 많은 기술들이 등장하는 것일까?인증이 필요한
[프로그래머스] 위장
문제:https://programmers.co.kr/learn/courses/30/lessons/42883?language=javascript카테고리 : 해시주어진 의상 정보에서 서로 다른 옷의 조합의 수를 세는 문제이다.경우의 수로 생각하면 단순한 문제이다.
[프로그래머스] 큰 수 만들기
문제:https://programmers.co.kr/learn/courses/30/lessons/42883?language=javascript카테고리 : 그리드문제 접근 :주어진 숫자에서 k개의 숫자를 제거했을때 만들 수 있는 모든 숫자 중 가장 큰 수를 구하
[알고리즘] 런너기법
런너기법이란 연결리스트를 순회하며 두개의 포인터를 사용하는 기법이다. "부가 포인터"라고도 한다. 연결리스트에서 주로 사용되며 연결리스틑 순회할때 두개의 포인터를 사용하는 방법이다. 하나의 포인터는 빠르게 증가하고 하나의 포인터는 느리게 증가하여 병합지점, 중간지점 ,
[LeetCode] 148. Sor List
https://leetcode.com/problems/sort-list/submissions/주어진 단일연결리스트 데이터를 오름차순으로 정렬하는 문제이다.주어진 시간복잡도는 O(n logn) 이며 공간복잡도는 O(1)이다.시간복잡도가 O(n logn)이므로 합
[자료구조] 접행렬, 인접리스트
그래프는 노드(정점)과 엣지(간선)으로 이루어진 집합이다.무방향그래프란 노드의 방향없이 그려진 그래프로 양방향 그래프라고 하기도한다. 만약 입력이 (1,2)이면 1번노드와 2번노드를 연ㄴ결한 간선이 있다고 판단한다. 방향 그래프란 간선의 방향이 있는 그래프이다.입력이
[백준] 2981번 검문 javaScript
: n개의 데이터가 주어질 때 n개의 원소들을 M으로 나누었을때 나머지가 모두 동일한 M을 구하는 문제이다. M은 1보다 커야하며, 가능한 M을 모두 찾아야한다.사실 for문을 모두 돌리면 해결이 가능할 것 같았다. 그러나 주어진 N의 범위가 천만을 넘어가므로 브루스포
[자바스크립트] call과 apply
메소드를 사용하다보면 가끔 ReferenceError가 뜨며 참조할 수 없다고 나올때가 있다.경험상 90%가 인수를 제대로 넘기지 않았거나 this를 잃어버린 상황이다.객체 내 메소드를 사용할때 this를 제대로 바인딩시키는게 매우 중요하다.메소드 내 this가 제대로
[알고리즘] 순열, 조합, 부분집합
알고리즘을 학습하다가 순열, 조합, 부분집합이 비슷한 로직을 가지고 있으며 헷갈릴 수 있겠다는 생각이 들었다.아직 다양한 문제유형은 풀지못했지만, 현재 학습한 범위까지 한번 정리를 하고자한다.순열이란?: 서로 다른 n개의 원소에서 r개를 중복없이 순서에 상관있게 선택