profile
멋진 개발자가 될테야
post-thumbnail

[넘블] 1회차 로그인 모듈 만들기 회고록

넘블 이라는 곳에서 "쿠팡 클론코딩" 이라는 주제로 챌린지를 시작했다.실무와 가장 근접하게 좋은 코드 작성이 포커스라서 도움이 될것같아서 신청했다.우선, 1회차는 로그인 관련된 로직을 클래스로 묶어서 프론트엔드에서의 객체지향에 대해 고민해보는 회차이다.보통 프론트엔드

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

[React] 렌더링 최적화, 리팩토링으로 성능향상🎯 시켜보자

프로젝트로 만든 "칭찬이 필요해" 웹사이트의 첫 페이지에서 여러 사람의 글을 모아볼 수 있다. 그리고 이렇게 맘에 드는 기록에 칭찬버튼을 누를 수 있다. 그런데 한번 누를때마다 너무 느려서 Profiler를 통해 성능을 측정해보았다. 리팩토링 전 성능측정 크롬

2022년 6월 26일
·
1개의 댓글
post-thumbnail

[HTTP] Options 요청은 뭘까?

프로젝트에서 API서버를 따로 생성하여 프론트엔드와 통신했다. 그런데 요청한 메소드 이전에 Request Method: OPTIONS 요청이 네트워크탭에 있는 것을 확인했다. 통신 Type도 XMLHttpRequest (XHR) 가 아닌 preflight으로 되

2022년 6월 26일
·
0개의 댓글
post-thumbnail

응집도있는 컴포넌트 설계란?

\[B3] 우리는 응집도에 대하여 이야기할 필요가 있다넘블 챌린지 중, 챌린지 호스트님께서 방향을 잡는데 좋은 영상을 추천해주셨다.그리고 내가 리액트로 개발한 페이지의 성능측정을 해보았는데, 컴포넌트가 제대로 나눠져 있지 않아서 성능저하가 일어나고 있었다. 성능개선을

2022년 6월 21일
·
0개의 댓글
post-thumbnail

[JavaScript] Tower of Hanoi

모의면접에서 라이브 코테에서 뜬끔없이 하노이탑을 구현해보라는 요구를 받았다.재귀연습에 아주 기초적인 문제인데 생각해보니 한번도 구현해보지 않았던.. 이 점이 실수였다.항상 기초에 충실하자!문제는 워낙 유명하니, 여기 프로그래머스 문제에서 확인할 수 있다.전혀 감이 오지

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

[JavaScript] 155. Min Stack

오늘 라이브코딩을 했는데, 알고리즘 구현을 요구하는 문제가 아닌 좀 창의적인 문제 해결을 원하는 문제였다. 개인적으로 참신한 발상이 맘에 들어 포스팅한다. Problem Min stack 문제는 단순히 Stack클래스를 구현하면 된다. 다만, 새로운 메서드가 추가되

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

[JavaScript] 743. Network Delay Time

다익스트라를 사용하여, 출발노드(k)에서 모든 노드로가는 최소값을 구하는 문제이다. 각 노드로 가는 최소값을 dp에 저장하고, 이 중에서 가장 큰 값이 가장 오래걸리는 시간이 될것이다.이런 자료구조가 되게 만들어준다.이 때, 출발지에 이어진 모든 노드들까지 가는 최소비

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

[JavaScript] 72. Edit Distance

72. Edit Distance 풀이 두 스트링일 같게 만드는데 최소한의 연산 횟수를 구하는 문제이다. 추가, 삭제, 교체 이렇게 3가지 연산이 가능하다. 잘 생각해보면 이것도 순차적으로 char을 하나씩 추가해가며 이전 결과를 활용할 수 있다. 1. 이전 결과

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

[JavaScript] 583. Delete Operation for Two Strings

LCS를 구할 수 있다면 바로 풀수있는 문제다!두 스트링이 같아지기 위해, 최소한만 삭제하라는 문제인데, 두 스트링의 LCS를 구하고, 각각 LCS와 얼마나 차이가 나는지만 계산하면 된다.이전 포스팅 \[JavaScript] 1143. Longest Common Sub

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

[JavaScript] 1143. Longest Common Subsequence

위와 같은 어레이를 만들어서 가장 끝에 위치한 값이 답이 될것이다.예를들어, dp2이 의미하는 것은 "ac"와 "ab"의 LCS이다.위 테이블에서 dp2=1 이 나오는 이유는 a 하나만 공통이기 때문이다.인덱스 실수를 하지않기 위함이다.https://leetc

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

[JavaScript] 300. Longest Increasing Subsequence

숫자들을 순회하면서, 해당값까지 가능한 LIS길이를 dp어레이에 저장한다.해당 인덱스 이전값을 순회하면서 가장 긴 값을 찾아 1 증가시켜준다. 나보다 작은값이 없어서 LIS갱신이 불가능한 경우에도 "나 자신"으로 이루어진 길이1짜리 LIS가 존재하므로 max초기값 0에

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

[JavaScript] 673. Number of Longest Increasing Subsequence

DP에는 해당인덱스를 포함한 LIS 길이를 저장하고,count에는 그 LIS와 같은 길이의 LIS가 몇개가 있는지 저장한다.max에는 가장 긴 LIS 길이를 저장하고, 이 LIS길이를 가지고 있는 인덱스의 count의 총합이 정답이 된다.count의 총 합을 정답으로

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

[JavaScript] 139. Word Break

문제푸는데 화가났으므로 칙칙한 배경ㅠ우선 s길이가 1이거나 S: s.lengthW: wordDict.lengthslice와 indexOf하는데에 s길이만큼 시간이 소요되므로 O(SW) \* O(S) 만큼 소요된다.time O(S^2 \* W), space O(S)

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

[JavaScript] 413. Arithmetic Slices

413. Arithmetic Slices DP문제인데 DP테이블까지 만들건없고 변수 두개로 가능하다. DP 길이 3이상의 등차수열(?)의 갯수를 알아내야하는 문제이다. 예외처리로 숫자가 3개가 안되면 바로 0으로 끝내버리고 시작함 3개가 기준이니까 한개전꺼랑 두

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

[JavaScript] 5. Longest Palindromic Substring

dp로 풀수있고, dp의 공간복잡도 개선을 위해 투포인터로 풀수있다.2d 배열을 DP 저장소로 사용한다.다만, 대각선 오른쪽만 사용한다. 공간절반이 버려지는 셈이라 비효율적이다.모두 초기값 0으로 설정해두고 오른쪽 아래부터 왼쪽위로 순회한다.현재 인덱스 i와 j에 대해

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

[vercel] fork한 레포 자동최신화 + vercel로 자동배포하기

프로젝트를 진행했던 깃허브 레포지토리는 organization 레포지토리였다.초기에 배포가 쉽고 간단한 vercel을 사용해 배포하기로하고, 프로젝트를 진행했는데 organization레포지토리는 유료제(정확히는 정해진 기간만 무료)인걸 나중에 알았다.그래서 개인 레

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

[Next.js] redux store hydrate 중복 저장 이슈

리덕스 로거를 보면, 액션에서는 분명데이터가 data/GET_PUBLIC_TASKS가 38개, data/GET_GOALS_BY_IDS가 9개로 배열에 저장되어있다.원하는 동작은 비어있는 initial store에, 이 값을 저장하는 것 이었는데 prev state를 보

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

[Next.js] Vercel 배포 중 오류 해결하기

^^...;; 나름 신중히 검토하고 1차배포했다고 생각했는데 빌드과정에서 오류폭탄남 하나씩 해결해보자... ❌ pages폴더 내에 styled파일이 있는 경우 next.js 프레임워크의 경우, pages파일안에 있는 루트대로 페이지를 생성해주는 아주 편한 기능을 가

2022년 3월 25일
·
0개의 댓글

[웹 접근성] tabindex적용해서 div에 outline 표시하기

웹 접근성 개선을 위해 focus되어있는 요소에 outline을 넣는 작업을 하고있었다.대부분 클릭 가능한 요소들은 button으로 만들게되는데, 재사용 컴포넌트로 만든 chip 컴포넌트가 예외였다.chip컴포넌트는 onClick 프롭을 옵셔널로 전달받는데, 전달받을

2022년 3월 21일
·
0개의 댓글
post-thumbnail

submit event handler에 debounce를 적용하여 서버와의 통신 최소화하기

현재 구현되어있는 상황은 다음과 같다.input에 포커스되어있는 상황에서 enter를 누르거나, submit버튼을 누르면 onsubmit이벤트가 발동되어 서버에 저장되도록 구현했다. 그리고 성공적으로 데이터베이스에 저장되었다면 snackbar형식으로 알림을 띄워준다.이

2022년 3월 21일
·
0개의 댓글