전체 글
-
[React / 에러 핸들링] Modal컴포넌트 만들기React 2022. 2. 8. 02:30
모달 컴포넌트 스크롤을 막으면서 발생한 문제에 대한 기록입니다. 첫 번째 문제 e.preventDefault()와 e.stopPropagation()을 통해 이벤트를 막는 방법으로 스크롤을 막아야겠다는 생각을 했습니다. 하지만 어림도 없이 스크롤은 잘 되었습니다. 고민을 하다 실행 시점에서의 문제가 있다는 것을 깨닫게 되었습니다. mdn한글 문서를 보게 된다면 scroll은 view나 element가 스크롤될 때 scroll이벤트가 발생한다라고 되어있습니다. 정말 모호한 말이 아닐 수가 없습니다. 영어로 된 mdn을 보게 된다면 scroll event라고 명시가 되었는데, The scrollevent fires when an element has been scrolled. 즉, 요소가 스크롤된 다음 이벤..
-
[프로그래머스] 모음 사전 js 풀이프로그래머스 2022. 2. 5. 13:01
문제 https://programmers.co.kr/learn/courses/30/lessons/84512 코딩테스트 연습 - 모음사전 사전에 알파벳 모음 'A', 'E', 'I', 'O', 'U'만을 사용하여 만들 수 있는, 길이 5 이하의 모든 단어가 수록되어 있습니다. 사전에서 첫 번째 단어는 "A"이고, 그다음은 "AA"이며, 마지막 단어는 "UUUUU"입니 programmers.co.kr 한 칸에 올 수 있는 문자의 수는 총 5개입니다. 위의 사진에서 맨 끝에 올 수 있는 개수는 5개임을 알 수 있습니다. 하지만 AAAA에서 AAAE로 네 번째 칸이 변하는데 필요한 수는 6입니다. 맨끝은 5개가 필요하지만 네번째 자리 수 까지 변화시키려면 1을 추가로 더해야 합니다. 즉 6이 필요한 것이죠. 그..
-
[React / 에러 핸들링] useClickAway훅 만들기React 2022. 2. 4. 23:03
원티드에서 진행하는 프리온보딩 코스 과제를 하면서 컴포넌트 외부에 있는 클릭 이벤트를 감지하는 작업이 많아졌습니다. 따라서 내가 원하는 컴포넌트 외의 영역에 클릭 이벤트가 발생한다면 원하는 동작을 하는 useClickAway라는 훅을 만들게 되었습니다. 사실 동작 자체는 굉장히 간단했습니다. 초기 코드 아래는 제가 처음에 만든 코드입니다. import { useEffect, useRef } from 'react'; export const useClickAway = (awayEvent: () => void) => { const ref = useRef(null); const callback = (e: MouseEvent) => { const element = ref.current; if (!element) ..
-
[leetcode] 2번 Add Two Numbers / javascriptleetcode 2022. 2. 1. 13:35
문제 보기 https://leetcode.com/problems/add-two-numbers/ Add Two Numbers - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com l1과 l2를 더해 새로운 리스트를 만드는 문제입니다. 사실 문제 자체는 간단하지만 예시와 결과가 겉보기에 모두 배열로 되어있어 런타임 에러가 계속 발생했습니다. 하지만 자세히 본다면 아래와 같은 정의를 볼 수 있습니다. /** * Definition for singly-linked list..
-
[프로그래머스] 프렌즈4블록 js 풀이프로그래머스 2022. 1. 26. 12:52
문제 링크 주어진 m과 n이 크지 않기 때문에 주어진 조건에 맞게 잘 구현을 해주면 됩니다. 풀이 function solution(m, n, board) { // board가 문자열로되어있는 일차원 배열이기 때문에 2차원 배열로 바꿔줍니다. board = board.map((row) => Array.from(row)); while (true) { const find = []; // 2x2로 같은 것이 있는지 검색합니다. // 예를 들어 현재 y, x가 1,1 이라면 2,2까지 검색을 하기 때문에 경계값을 m과 n에서 1을 빼주어야 합니다. for (let y = 0; y < m - 1; y += 1) { for (let x = 0; x < n - 1; x += 1) { const pick = board[..
-
[JavaScript] 25 Beginner JavaScript Project Ideas 첫번째 만들기JavaScript 2022. 1. 25. 22:41
첫 번째 프로젝트 살펴보기 눌러서 확인해보세요! 클릭을 할 때마다 랜덤으로 배경색이 변하는 페이지입니다. 프로젝트 설정하기 저는 린트를 한번 맛본 이후로 빠져나오지 못하는 삶을 살게 되었습니다... 따라서 eslint와 prettier를 설치하기로 했습니다. 또한 scss를 적극적으로 활용하고 싶었습니다. 하지만 scss를 사용하기 위해서는 트랜스파일링이 필요합니다. 때문에 webpack이나 parcel을 사용해 번들링을 할 필요가 있었습니다. parcel이 가볍게 쓰기에는 훨씬 편하기 때문에 parcel를 사용해서 번들링을 진행하였습니다. 25 Beginner JavaScript Project 에서 계속 사용할 lint 설정하기 .pretterrc { "printWidth": 100, "tabWidth..
-
[React] dropdown(selectBox) 시멘틱하게 만들기React 2022. 1. 24. 22:59
시행착오 select컴포넌트를 만들어야겠다고 마음먹은 후에 어떻게 만들어야 될지 많은 삽질을 했습니다. 하지만 가장 중요하게 생각했던 부분은 보이스오버가 잘 되는지, 시맨틱한 마크업인가? 를 생각하면서 개발하는 것이었습니다. 하지만 어디서부터 시작해야할지 감도 잡히지 않았고, 계속 만들고 갈아엎기의 연속이되었습니다. 왜 계속 갈아엎게 되나 생각을 하다보니 bottom-up 방식으로 만들다 보니 정작 내가 사용을 할 때 불편한 부분들이 계속 발견되었기 때문입니다. top-down으로 생각해보기 계속 selectBox먼저 만들다 보니 이런 문제가 생겼다고 생각이 들어 어떻게 내가 이 컴포넌트를 사용하고 싶은지부터 생각해보고, 그려보기로 했습니다. 어떤 Option이 선택되었는지 상위 컴포넌트에서 알아야 하기..