태그 목록
전체보기 (88)React(23)typescript(10)JavaScript(9)API(6)router(5)node.js(4)heroku(4)자바스크립트(4)hook(3)Contact Form(3)CSS(3)error(3)최적화(2)promise(2)vanilla javascript(2)scss(2)catch(2)파라미터(2)배포(2)MERN(2)화살표 함수(2)비동기(2)spa(2)Crawling(2)IntersectionObserver(2)State(2)express(2)라이브러리(1)프레임워크(1)useHistory(1)http(1)리액트(1)react router dom(1)ScrollWidth(1)반응형(1)MEVN(1)nodemailer(1)모듈(1)validation(1)vue(1)try(1)getBoundingClientRect(1)신입사원 무지(1)arguments(1)알고리즘(1)getServerSideProps(1)debounce(1)탐욕법(1)fizzbuzz(1)await(1)서버(1)git to mp4(1)useEffect(1)useState(1)Rubber duck debugging(1)scrollLeft(1)모바일퍼스트(1)async(1)Flex(1)useParams(1)포트폴리오(1)webpack(1)body parser(1)스크롤이벤트(1)deploy(1)https(1)emailJS(1)json(1)mongodb(1)JAM Stack(1)에러 일지(1)context(1)react-query(1)goBack(1)media query(1)useMemo(1)함수(1)this(1)News Picker(1)axios(1)Outlet(1)500 에러(1)html(1)미디어쿼리(1)useLayoutEffect(1)명령형(1)격자판(1)CurrentTarget(1)form(1)concurrently(1)Then(1)HoC(1)useLocation(1)이중 반복문(1)getStaticProps(1)next.js(1)static page(1)어워드(1)Map(1)Props(1)hash(1)Page Speed Insights(1)redux(1)500 error(1)set(1)mean(1)생성자(1)카카오 API(1)github page(1)503(1)function(1)선언형(1)중첩라우팅(1)type assertion(1)크로스브라우징(1)mixin(1)배열(1)cors(1)component(1)BEM(1)useFetch(1)link(1)greedy(1)lodash(1)push(1)
post-thumbnail

러버덕 디버깅 (Rubber duck debugging)

블로그에 배운 지식을 공유하고 깨달은 점을 회고하는 것이야말로 러버덕 디버깅의 한 방법이다. 플랫폼이 러버덕 역할을 하는 셈이다.이름에서 알 수 있듯이 러버덕 디버깅은 고무 오리를 사용하여 문제가 있는 부분을 디버깅하는 것을 말한다. (꽥) 예상치 못한 동작을 일으키는

약 15시간 전
·
0개의 댓글
post-thumbnail

JAM Stack 정리

JAM Stack의 JAM은 JavaScript, API, Markup의 약자로 웹 개발 방법론(=철학=아키텍처)의 하나이다. SPA는 모든 리소스를 한 번에 가져오기 때문에 초기 진입 속도가 비교적 느리다. 또한 처음에는 그저 하나의 빈 페이지이기 때문에 SEO에 취

2일 전
·
0개의 댓글
post-thumbnail

[에러 일지] 'EventTarget' 형식에 '...' 속성이 없습니다. ts(2339)

이벤트에 타입 적용 시 event.target에 어떤 속성이 없다는 에러가 종종 발생한다.이럴 때에는 event 파라미터에서 모든 타입을 해결하려고 하지 말고, event와 target을 분리해서 각각의 타입을 지정해주면 된다.event의 타입과 target의 타입을

6일 전
·
0개의 댓글
post-thumbnail

[에러 일지] Changes not staged for commit

git status로 git 프로젝트 상태를 확인하는데 한 폴더가 자꾸 stage되지 않는다는 경고가 출력되었다.심지어 commit된 new file 목록에도 client가 포함되어 있다. 그런데 왜 자꾸 stage되지 않았다는 경고가 표시되는 것일까?해당 문제가 발생

2022년 5월 15일
·
0개의 댓글

[React] 리액트 쿼리 사용하기

React Query란? 리액트 애플리케이션에서 서버의 state 가져오기, 캐싱, 동기화, 업데이트를 쉽게 구현할 수 있게 도와주는 리액트 훅이다. React Query 사용 이유 리액트에서 state를 관리하는 라이브러리들은 비동기 작업에 친화적이지 않다. 이는

2022년 5월 14일
·
0개의 댓글

[LeetCode] 35. Search Insert Position (JavaScript)

Given a sorted array of distinct integers and a target value, return the index if the target is found. If not, return the index where it would be if i

2022년 5월 12일
·
0개의 댓글

[LeetCode] 20. Valid Parentheses (JavaScript)

Given a string s containing just the characters '(', ')', '{', '}', '' and '', determine if the input string is valid.An input string is valid if:Open

2022년 5월 12일
·
0개의 댓글

[LeetCode] 14. Longest Common Prefix (LCP) - JavaScript

Write a function to find the longest common prefix string amongst an array of strings.If there is no common prefix, return an empty string "".가장 긴 공통

2022년 5월 11일
·
0개의 댓글

[LeetCode] 13. Roman to Integer (JavaScript)

Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M.I : 1V : 5X : 10L : 50C : 100D : 500M : 1000로마 숫자를 정수로 출력하는 프로그램을 구현

2022년 5월 11일
·
0개의 댓글

[코딩테스트] 백준 2839 - 설탕 배달 (자바스크립트)

상근이는 요즘 설탕공장에서 설탕을 배달하고 있다. 상근이는 지금 사탕가게에 설탕을 정확하게 N킬로그램을 배달해야 한다. 설탕공장에서 만드는 설탕은 봉지에 담겨져 있다. 봉지는 3킬로그램 봉지와 5킬로그램 봉지가 있다.상근이는 귀찮기 때문에, 최대한 적은 봉지를 들고 가

2022년 5월 10일
·
0개의 댓글

[프로그래머스] 영어 끝말잇기 (JavaScript)

1부터 n까지 번호가 붙어있는 n명의 사람이 영어 끝말잇기를 하고 있습니다. 영어 끝말잇기는 다음과 같은 규칙으로 진행됩니다.1번부터 번호 순서대로 한 사람씩 차례대로 단어를 말합니다.마지막 사람이 단어를 말한 다음에는 다시 1번부터 시작합니다.앞사람이 말한 단어의 마

2022년 5월 9일
·
0개의 댓글
post-thumbnail

[코딩테스트] KAKAO - 크레인 인형뽑기 (JavaScript)

📎 크레인 인형뽑기게임개발자인 "죠르디"는 크레인 인형뽑기 기계를 모바일 게임으로 만들려고 합니다."죠르디"는 게임의 재미를 높이기 위해 화면 구성과 규칙을 다음과 같이 게임 로직에 반영하려고 합니다.게임 화면은 "1 x 1" 크기의 칸들로 이루어진 "N x N" 크

2022년 5월 4일
·
0개의 댓글

[코딩테스트] 백준 1764 - 듣보잡 (JavaScript) #해시(hash)

김진영이 듣도 못한 사람의 명단과, 보도 못한 사람의 명단이 주어질 때, 듣도 보도 못한 사람의 명단을 구하는 프로그램을 작성하시오.첫째 줄에 듣도 못한 사람의 수 N, 보도 못한 사람의 수 M이 주어진다. 이어서 둘째 줄부터 N개의 줄에 걸쳐 듣도 못한 사람의 이름과

2022년 5월 4일
·
0개의 댓글
post-thumbnail

[알고리즘] 봉우리 개수 구하기 (JavaScript)

지도 정보가 (N\*N) 격자판에 주어집니다. 각 격자에는 그 지역의 높이가 쓰여있습니다. 각 격자 판의 숫자 중 자신의 상하좌우 숫자보다 큰 숫자는 봉우리 지역입니다. 봉우리 지역이 몇 개 있는 지 알아내는 프로그램을 작성하세요.격자의 가장자리는 0으로 초기화 되었다

2022년 5월 2일
·
0개의 댓글

[JS] ES6 - 이터러블 개념과 Map(), Set()

ES5까지는 객체의 순환을 위해서는 length에 의존해야 했다. ES6부터는 이터레이터가 등장하면서 더이상 length에 의존하지 않고, 이터레이터를 이용한 순환이 가능해졌다. 이터러블 객체에는 문자열, 배열, Map, Set이 있다.이터러블(iterable) : 객

2022년 4월 24일
·
0개의 댓글

[JS] 비동기 모듈 함수 리턴값 가져오기

모듈이 비동기로 동작하는 함수일 경우 모듈 리턴값을 외부 함수에 가져오려고 하면 아마도 undefined만 출력될 것이다.외부 함수에서 모듈을 동기적으로 다룰 수 있도록 코드를 변경해주면 된다.모듈에 Promise를 생성하고, Promise의 콜백 함수에서 비동기 작업

2022년 4월 20일
·
0개의 댓글
post-thumbnail

[프로그래머스] 신고 결과 받기 (JavaScript)

2022 KAKAO BLIND RECRUITMENT신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다.각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다.신고 횟수에 제한은

2022년 4월 20일
·
0개의 댓글
post-thumbnail

[프로그래머스] 탐욕법(Greedy) - 큰 수 만들기 (JavaScript)

어떤 숫자에서 k개의 수를 제거했을 때 얻을 수 있는 가장 큰 숫자를 구하려 합니다.예를 들어, 숫자 1924에서 수 두 개를 제거하면 19, 12, 14, 92, 94, 24 를 만들 수 있습니다. 이 중 가장 큰 숫자는 94 입니다.문자열 형식으로 숫자 number

2022년 4월 19일
·
0개의 댓글
post-thumbnail

[React] Page Speed Insights 진단과 성능 최적화

구글에서 제공하는 Page Speed Insights는 페이지를 진단해주고 해당 페이지의 문제점이 무엇인지 상세하게 알려준다. 사이트의 성능을 최적화를 위해 진단하는 용도로 사용하는 걸

2022년 4월 15일
·
0개의 댓글
post-thumbnail

GIF to MP4 이미지 최적화하기

gif는 생각보다 용량이 큰 리소스이기 때문에 성능 최적화를 위해 gif는 항상 고려되는 요소이다.하지만 동적인 이미지를 포기하고 싶지 않다면 mp4로 변경해서 사용해보자.GIF to MP4, MP4 to GIF 사이트convertezgifconvertioGIF는 압축

2022년 4월 15일
·
0개의 댓글