전체 글

[React] Checkbox 상태관리하기

[React] Checkbox 상태관리하기 이번 포스팅에서는 React에서 체크박스 UI 를 만들고 컴포넌트 간 상태관리를 하는 방법을 예제와 함께 설명할 예정입니다. 개요 Checkbox UI 만들기 Checkbox 하나 선택 상태관리 Checkbox 전체선택 상태관리 요약 및 추가 사항 참고: 예제 코드 환경은 React, styled-component를 주로 하며, 스타일 코드는 생략되어 있습니다. 스타일 코드를 포함한 전체 프로젝트 코드는 여기에서 보실 수 있습니다. 1. Checkbox UI 만들기 Checkbox는 html의 input 태그에 타입을 체크박스로 지정해 만들 수 있습니다. 체크박스만 만든다면 아래와 같이 작성 가능합니다. 우리는 리스트와 전체선택에 체크박스를 모두 포함시켜야 합니..

[React] Context API 와 Redux 비교하기

[React] Context API 와 Redux 비교하기 리액트에서 전역 상태를 관리할 때 많이 쓰는 Context API 와 Redux를 사용법과 장단점 위주로 비교해 보겠습니다. 개요 전역 상태 관리는 언제 할까? Context API의 특징 Redux의 특징 요약 및 결론 1. 전역 상태 관리는 언제 할까? 상태 관리는 View 중심으로 이루어진 React Component에서 변하는 값에 대한 상태를 관리한다고 할 수 있습니다. 우선, React의 useState를 이용하면 지역 상태 관리를 할 수 있습니다. 이를 사용하는 컴포넌트 안 혹은 props로 전달할 때만 하위 컴포넌트에서 사용할 수 있습니다. 모든 상태 관리를 useState만을 이용하여 진행할 수도 있습니다. 하지만 여러 컴포넌트에..

[React] 환경설정 제대로 알고 하기 (without CRA) ②

[React] 환경설정 제대로 알고 하기 (without CRA) ② 지난 포스팅에서는 CRA 없이 React 기반 환경설정을 하기 위해 필요한 기본 라이브러리와 Babel을 설정해 보았습니다. 이번 포스팅에서는 webpack 설정을 개발/배포로 나눠서 하는 방법을 설명하려고 합니다. 1편 보기: https://egg-programmer.tistory.com/259 목차 webpack config와 scripts 설정 기본 라이브러리 설치 production 모드 환경설정 공통 환경설정 및 webpack merge 1. webpack config와 scripts 설정 이제 webpack.config.js 파일을 생성해 Webpack 실행 규칙을 작성하면 됩니다. 이 포스팅에서는 package.json의 ..

[카카오프로젝트100] 기술아티클 10일차

[카카오프로젝트100] 기술아티클 10일차 카카오프로젝트100 - 하루에 한 개, 기술 아티클 읽기에 참여하며 인증한 글들을 10일차씩 끊어서 블로깅합니다. 1일차: React 컴포넌트를 커스텀 훅으로 제공하기 - LINE Engineering 요약 일반적으로 체크박스가 있는 리스트를 구현한다면 컴포넌트를 분리하더라도 그에 대한 상태값은 props로 계속 전달되는 불편함이 있습니다. 커스텀 훅을 사용하게 되면 ‘컴포넌트 로직 자체를 분할하거나 재사용’할 수 있기 때문에 상태값을 관리할 때 더 간단하게 처리할 수 있게 됩니다. 느낀점 재사용 컴포넌트를 만들 때도 custom hook을 사용하면 로직을 더 분리해서 사용할 수 있을 것 같습니다. 컴포넌트를 분리할 때 불편함을 느꼈던 지점이었는데 이런 아티클을..

[카카오프로젝트100] 하루에 한 개,기술 아티클 읽기를 시작합니다.

[카카오프로젝트100] 하루에 한 개,기술 아티클 읽기를 시작합니다. 카카오 프로젝트 100은 100일동안 매일 특정 주제에 대해 실행하고 인증하며 습관을 기르게 해 주는 프로젝트입니다. 프로젝트 소개글 링크: https://project100.kakao.com/project/4623/introduce 참여 계기 카카오 프로젝트 100을 알게 된 것은 링크를 보고 나서부터였습니다. 참여하고 싶다는 생각이 막연히 있었는데, 마침 우연한 기회에 9월 6일에 모집이 마감된다는 것을 보고 빠르게 신청하게 되었습니다. 참여 방법 아래와 같이 기술 아티클 링크와 자기만의 요약을 올려서 인증할 수 있습니다. 좋은 점은, 공개적으로 올리게 되면 아티클을 다른 참여자 분들과 공유하고 소통할 수 있어서 더 자세하게 다른 ..

[HackerRank][Javascript] Queues: A Tale of Two Stacks

문제 - Queues: A Tale of Two Stacks 문제 설명 여러 라인으로 입력되는 것을 타입에 따라 다르게 작동하는 큐, 스택을 구현하는 문제 나는 Lifo인 스택으로 구현하였다. 변수 q에 라인 개수를 담는다. q를 기반으로 반복문을 돌며 타입에 따라 다른 명령어를 실행한다. 1일 때: 주어진 숫자를 arr에 push한다. 2일 때: arr의 가장 앞의 숫자를 shift하여 삭제한다. 3일 때: arr의 가장 첫 요소를 콘솔로 출력한다. 성공 코드 // 한 줄씩 읽게 하기 위한 코드 let inputString = ''; let currentLine = 0; process.stdin.on('data', inputStdin => { inputString += inputStdin; }); pr..

[HackerRank][Javascript] Balanced Brackets

문제 - Balanced Brackets 문제 설명 괄호들이 짝이 맞는지 확인하는 문제 1번 풀이 주어진 괄호인 {[()]}의 여는 괄호들을 닫는 괄호로 하나씩 치환해 배열에 추가한다. 닫는 괄호가 나오고 배열의 마지막 문자와 같으면 배열에 pop하여 삭제한다. 위의 두 조건에도 들지 않으면 짝이 맞지 않는 것이므로 NO를 반환한다. 여는 괄호의 숫자가 많을 때 NO를 반환하기 위해 마지막에 남은 문자의 개수로 YES와 NO를 판단하여 반환한다. 2번 풀이 opens와 closes들을 배열로 묶고, 객체를 사용해 닫는 괄호는 key로, 여는 괄호는 value로 묶는다. 반복문을 돌며 1번 풀이와 동일하게 여는 괄호이면 배열에 추가한다. 닫는 괄호가 나오면 pop하여 짝이 맞는지를 만들었던 객체를 통해 판..

[React] Infinite Scroll과 Skeleton Loading 만들기

[React] Infinite Scroll과 Skeleton Loading 만들기 아무리 빠른 인터넷 환경이라고 해도 수백 개, 1,000개 이상의 데이터를 받는 데에는 시간이 오래 걸립니다. 오늘 포스팅에서는 많은 데이터를 하나의 페이지에 랜더링해야 할 때 어떻게 지연 로딩을 할 수 있는지 알아보겠습니다. 개요 Infinite Scroll과 Skeleton Loading은 무엇일까? 자바스크립트에서 지원하는 Observer API Intersection Observer를 자세히 알아 보자. Infinite Scroll 만들기 Skeleton Loading 만들기 1. Infinite Scroll과 Skeleton Loading은 무엇일까? Infinite Scroll Infinite Scroll, 즉 ..

DOM, Event 기초 지식 정리

DOM, Event 관련 기초 지식 이번 포스팅에서는 Javascript에서 웹 개발을 할 때 필수적으로 알아야 할 기초 지식을 질답 방식으로 간단하게 정리해 보았습니다. 1. 버블링이란? / 캡처링이란? / 둘의 차이 및 사용법 버블링은 특정 요소에서 이벤트가 발생했을 때 상위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다. 캡처링은 버블링과 반대 방향인 상위 요소에서 하위 요소로 이벤트가 전달되는 이벤트 전파 방식입니다. 버블링은 하위 요소에서 이벤트를 등록하면 상위까지 이벤트가 전파되는 기본 속성을 통해 사용할 수 있고, 캡처링은 addEventListener에서 capture: true라는 옵션을 부여해 사용할 수 있습니다. stopPropogation: 위와 같은 이벤트 전파를 막는 web A..

DOM과 브라우저 동작방식

DOM과 브라우저 동작방식 DOM 문서 객체 모델 HTML, XML 문서의 프로그래밍 Interface 문서의 구조화된 표현 제공 프로그래밍 언어가 DOM 구조에 접근 가능한 방법 제공 문서 구조, 스타일, 내용 변경 가능하게 도움 웹페이지 : 일종의 document Object로 구성되어 있음 구성 요소: property, method, event 웹페이지의 객체지향 표현 DOM API(함수묶음정도) 제공 브라우저 동작방식 브라우저는 어떻게 동작하는가 Naver D2 https://d2.naver.com/helloworld/59361 https://poiemaweb.com/js-browser (브라우저 동작원리) 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 랜더링 엔진 기본동작 과정..

[React + TS + styled-component] 다크모드 적용하기

[React + TS + styled-component] 다크모드 적용하기 화면 노출이 증가함에 따라 다크모드를 지원하는 운영체제와 사이트가 증가하고 있습니다. 이번 포스팅에서는 React + TypeScript + styled-component 환경에서 custom hook을 사용해 다크모드를 적용하는 방법을 얘기하려고 합니다. 전체 코드: Github Link 예제 데모 링크: Demo 개요 전체 구조 스타일 테마 타입 정의 및 객체 생성 테마 모드를 관리하는 custom hook 작성 custom hook을 사용하여 토글 버튼 생성 1. 전체 구조 이번 포스팅에서 주로 사용하는 코드의 구조는 아래와 같습니다. 전체 환경설정은 Github 링크에서 확인하실 수 있습니다. . ├── src │ ├── ..

[HackerRank][Javascript] Mark and Toys

문제 - Mark and Toys 문제 설명 주어진 금액으로 가장 많이 살 수 있는 장난감의 개수를 구하는 문제 가장 많은 개수를 구하기 위해서는 작은 금액으로 여러 개를 구매해야 한다. 따라서 prices 배열을 오름차순으로 정렬한다. 주어진 금액인 k가 prices를 뺐을 때 0보다 작으면 원래 값을 리턴하고, 그게 아니면 price를 빼고 개수를 1 늘려 준다. reduce를 사용해 값을 계산하고 리턴한다. 성공 코드 function maximumToys(prices, k) { prices.sort((a, b) => a - b); const calcMax = (result, v) => { if (k - v < 0) return result; k -= v; return result + 1; }; re..

[HackerRank][Javascript] Bubble Sort

문제 - Bubble Sort 문제 설명 버블 소트를 한 결과를 문장으로 출력하는 문제. 버블 소트는 정렬 알고리즘 중에 가장 쉬우면서 시간복잡도가 큰 알고리즘이다. 이중 반복문 안에서 값의 크기 비교를 통해 swap하면서 개수를 센다. 반복문 결과를 template literal로 저장해 콘솔로 출력하면 된다. 성공 코드 function countSwaps(a) { let count = 0; for (let i = 0; i a[j]) { let temp = a[i]; a[i] = a[j]; a[j] = temp; count++; } } } let result = `Array i..

[HackerRank][Javascript] Common Child

문제 - Common Child 문제 설명 Dynamic Programming를 사용해 LCS(Longest Common Substring)를 구하는 문제 문제 풀이법 접근부터 어렵고 예외 처리가 힘들어서 풀이 설명 및 DP, LCS에 대해 공부하고 풀이를 진행했다. LCS를 알고 있었다면 응용 문제는 아니라서 그렇게 어려운 문제는 아닌 것 같다. 빈 배열을 선언한다. 자바스크립트에서 동적 2차원 배열을 사용하기 위해서는 배열 안에 배열을 선언해야 하기 때문에 일단 1차원 배열로 선언한다. LCS를 구하기 위해 0부터 입력 문자열의 길이까지 이중 반복문을 돈다. 초기값을 0으로 지정해 사용하기 위해 s1.length - 1까지가 아닌 s1.length까지 반복문을 돈다. 1번에서 말한 2차원 배열 선언하..

[HackerRank][Javascript] Special String Again

문제 - Special String Again 문제 설명 문자열에서 대칭되는 문자열 개수를 찾는 문제 time limit으로 계속 풀지 못해 솔루션을 보고 이해하는 방식을 택했다. 문자열을 반복문을 돌면서 나타나는 빈도수가 consecutiveLetters에 저장된다. consecutiveLetters는 index가 0일 때이거나 연속 문자가 등장할 경우 추가시면서 저장한다. consecutiveLetters를 기준으로 s[i + j] 값을 비교하며 조건에 만족하면 count가 1씩 추가되게 한다. 여기서 aaaa와 같이 같은 문자열이 반복되면 else문에 들어오지 않아서 while문에 들어오지 않고 length를 저장해 개수를 구하게 된다. while문이 끝나게 되면 현재의 문자 값으로 consecut..