소소한 코딩일지

Image Preloading Preload는 페이지를 전환하면 바로 데이터를 볼 수 있도록 미리 데이터를 로드하는 방식. pokedex의 퀴즈에서 문제로 제시되는 이미지가 다음이 이미지로 넘어갈 때마다 새로 로드하기 때문에 이미지에 따라 아래 선택지 보다 늦게 로드되거나, 화면이 순간 깜빡하는 현상이 발생한다. 이를 해결하기 위해서 preload를 적용하여 현상을 해결해보았다. 문제를 생성하는 곳에서 useEffect(() => { const imageList: HTMLImageElement[] = []; pokemonQuestion.forEach((question) => { const image = new Image(); image.src = `https://raw.githubusercontent.c..

Pokedex라는 개인 프로젝트를 업데이트하고 배포하는 과정에서 발생한 에러이다. 에러 상황 vercel에서 배포하는 과정에서 Toggle과 관련된 컴포넌트를 찾을 수 없다는 에러였다. Toggle 컴포넌트는 업데이트 과정에서 다른 컴포넌트들과 파일 이름 포맷이 달라서 파일명 (toggle -> Toggle)만 수정해준 부분이었다. 에러를 보고 작업 폴더에서 Toggle 폴더의 경로를 점검했지만 이상한 점을 확인할 수 없었다. 해결 방법 Error: Can't resolve 'remark' in '/vercel/workpath0/lib' · Discussion #18176 · vercel/next.js Seems I am getting a compile error as shown in the title...

나는 function Modal() {} 로서 컴포넌트를 선언하는 함수형 컴포넌트를 주로 사용해 왔다. 이번에 타입 스크립트를 사용을 연습하면서 React.FC라는 것을 처음 보게 되었다. 컴포넌트를 선언하면서 사용하게 되었는데 정확한 사용법을 알고 싶어서 이번 블로그 글을 작성하게 되었다. FC 타입 React.FC는 함수형 컴포넌트의 타입을 선언할 때 사용한다. React.FC 와 같은 식으로 안에 props에 대한 타입을 선언해줌으로써 사용할 수 있다. interface Props { content: string } const Modal: React.FC = ({ content }) => ( { content } ) FC 타입이 정의되어있는 코드를 보면 type FC = FunctionCompone..

🔥 서적을 바탕으로 한 내용 정리 느낌이 강한 문서입니다. 이런 방식을 사용하는구나 정도로만 알고, 이 내용이 원칙이 아님을 알립니다. 🙇 코드를 작성하면서 변수, 함수명을 짓는 부분은 항상 고민이 되는 부분이다. 뭔가 길게 쓰면 가독성이 떨어질 거 같고, 짧게 쓰면 당상 쓰기엔 편하지만 어떤 변수인지 정확하게 알기 힘들 수도 있고… Clean Code 와 개발자의 글쓰기라는 서적을 읽으면서 Name Convention에 대한 내용을 정리해보려고 한다. 아래 블로그 글은 오픈소스에 작성된 함수, 변수, 클래스의 네이밍을 분석한 내용을 담고 있다. 한 번 살펴보면 재밌을 것(?) 같다. 오픈소스의 네이밍 특징들 위 블로그에서도 마찬가지지만 이름을 짓는 방식은 어느 특별한 방식이 있는 것이 아니라 우리가 알..

Error 내용 기존에 설치한 의존성과 관련하여 설치하려는 패키지와의 충돌 때문에 발생하는 이슈이다. 해결 방법 위 이미지에도 나와있는 방법으로 해결할 수 있었다. 문제 해결도 해결이지만 두 가지 명령어가 각각 어떤 동작을 하는지 잘 모르니 정리가 필요했다. Fix the upstream dependency confilct, or retry this commend with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution. 번역) 업스트림 종속성 충돌을 수정하거나 --force 또는 --legacy-peer-deps를 사용하여 이 권장 사항을 다시 시도하여 잘못된 종속성 확인..

프로그래머스 '다리를 지나는 트럭' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 다리를 지나는 트럭 트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 programmers.co.kr ● 문제 간단 설명 다리를 지나는 순서와 무게가 정해져 있는 트럭 배열에 대해서 다리의 무게 한도를 넘지 않는 선에서 모든 트럭이 다리를 지나게 되는 시간을 구하는 문제 ● 문제 해결 방향 다리를 지나는 순서가 정해져 있어서 고민할 부분이 적은 문제였던 것 같다. 문제에서 정의한 대로 시간을 1씩 증가시키면서 다리에 차가 없을 경우나 다리의 무게 한도에 가능한 트럭일 경우..

프로그래머스 '더 맵게' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 더 맵게 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같 programmers.co.kr ● 문제 간단 설명 배열 내 요소 모두 특정 스코빌을 넘을 때까지 가장 작은 값과, 두 번째로 작은 값을 조합하고, 모든 요소가 특정 값(K)을 넘었을 때, 조합한 횟수를 return 하는 문제 ● 문제 해결 방향 처음에는 문제 설명에서 주어진 대로 값을 정렬하고, k값과 비교하고, 작은 수 2개를 조합하는 과정을 반복하는 코드를 작성했다. 정확성 부분에서는 쉽게 통과할 수 있었지만, 효율성 부..

프로그래머스 '가장 큰 정사각형 찾기' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 가장 큰 정사각형 찾기 [[0,1,1,1],[1,1,1,1],[1,1,1,1],[0,0,1,0]] 9 programmers.co.kr ● 문제 간단 설명 주어진 2차원 배열에 대해서 4개의 영역으로 나누었을 때 한 영역 내부에 요소가 모두 1이거나 0일 경우 그 영역을 1이나 0으로 치환한다. 4개의 영역의 크기가 1이 될 때까지 나누는 과정과 치환하는 과정을 반복한다고 할 때 반복이 모두 끝났을 때 0과 1의 개수를 구하는 문제. ● 문제 해결 방향 우선 무작정 완전 탐색을 활용할 수 밖에 없었다. row, col 의 길이중 짧은 길이를 maxLength로 두고 점점 사이즈를 줄여나가면서 row, col에서 직사각형..

프로그래머스 '쿼드 압축 후 개수 세기' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 쿼드압축 후 개수 세기 [[1,1,0,0],[1,0,0,0],[1,0,0,1],[1,1,1,1]] [4,9] [[1,1,1,1,1,1,1,1],[0,1,1,1,1,1,1,1],[0,0,0,0,1,1,1,1],[0,1,0,0,1,1,1,1],[0,0,0,0,0,0,1,1],[0,0,0,0,0,0,0,1],[0,0,0,0,1,0,0,1],[0,0,0,0,1,1,1,1]] [10,15] programmers.co.kr ● 문제 간단 설명 주어진 2차원 배열에 대해서 4개의 영역으로 나누었을 때 한 영역 내부에 요소가 모두 1이거나 0일 경우 그 영역을 1이나 0으로 치환한다. 4개의 영역의 크기가 1이 될 때까지 나누는 ..

프로그래머스 '정수 삼각형' 문제 풀이입니다. 문제 링크 코딩테스트 연습 - 정수 삼각형 [[7], [3, 8], [8, 1, 0], [2, 7, 4, 4], [4, 5, 2, 6, 5]] 30 programmers.co.kr ● 문제 간단 설명 피라미드 모양으로 제시된 숫자 문자열이 있다. 가장 꼭대기에서부터 바닥으로 내려오는 경로 중에서 거쳐간 숫자의 합이 가장 큰 경로를 구하는 문제이다. ● 문제 해결 방향 다음 행에 대한 경로를 모두 구하도록 하고, 마지막 경로까지 갔을 때 합을 담고 있는 배열의 최댓값을 return 해주었다. 처음에는 다음 경로로 이동할 때 합이 가장 큰 곳으로만 이동하여 다른 경로에 대한 합을 구하지 않고 해결하려고 했다. 하지만 다음 경로로 이동할 때 두 경로의 값이 동일하..