분류 전체보기

[카카오프로젝트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..