전체 글

오늘은 제가 자주 겪었던 실수에 대해서 같은 실수를 반복하지 않기 위해 블로그 글을 작성하게 되었습니다 !! 코드를 작성하다 보면 정말 사소한 실수로 시간을 뺏기는 일이 자주 있는데요 .. ! 오늘은 흔히 리스트를 렌더링 할 때 사용하는 map() 에서 발생한 실수와 이를 방지하기 위한 개념 설명 들어갑니다 !! 문제 코드 {books.map((book) => { ;})}이 코드에서 어떤 점이 실수일까요  ?  정삭적으로 보이는데 왜 안나올까요 ? 결론부터 말하자면 : return 을 안했기 때문입니다. 자바스크립트에서 화살표 함수는 중괄호 {} 를 쓰면 명시적으로 return 을 써야하고 소괄호를 쓰면 암묵적으로 return 이 동작합니다.  잘못된 예시  : {} 사용 (return 없음 ){boo..

오늘은 실제 프로젝트에 적용한 React DnD에 대해 설명하고자 블로그를 쓰게 되었습니다. 이번 글에서는 react-dnd를 사용하여 칸반보드에서 이슈를 드래그하고 보드 간에 이동하는 기능을 구현하는 방법을 설명하겠습니다. (드래그 앤 드롭에 대한 설명은 전 포스트에 자세히 작성되어있습니다 !! ) 1. 프로젝트 구조간략한 프로젝트 구조는 다음과 같습니다BoardList ├── Board │ ├── BoardHeader │ ├── BoardContent │ │ ├── Issue │ ├── AddItemButton 각 컴포넌트의 역할:BoardList: 여러 개의 Board를 포함하는 최상위 컨테이너Board: 하나의 칸반 보드를 나타내며, 이슈 목록을 관리B..

현재 칸반보드를 구현 중이며, 드래그 앤 드롭 기능을 구현하기 위해 HTML5 Drag and Drop API를 공부하고 정리하였습니다. HTML5 Drag and Drop API는 기본적인 개념을 익히기에 적합하지만, 모바일 환경에서 기본적으로 지원되지 않는 한계가 있습니다. 따라서 실제 프로젝트에서는 React DnD와 같은 라이브러리를 활용하는 것이 더 적합하다고 합니다.이 글에서는 HTML5 Drag and Drop API의 기초 개념과 동작을 학습한 내용을 정리하였습니다!  드래그 앤드 드롭(Drag and Drop) 이란? 드래그 앤드 드롭(Drag and Drop)은 사용자가 화면 상의 요소를 선택하여 끌어다 놓는 방식으로 인터페이스와 상호작용할 수 있는 기능입니다. 이는 웹 애플리케이션에서..

문제 설명N×M의 행렬로 표현되는 맵이 있다. 맵에서 0은 이동할 수 있는 곳을 나타내고, 1은 이동할 수 없는 벽이 있는 곳을 나타낸다. 당신은 (1, 1)에서 (N, M)의 위치까지 이동하려 하는데, 이때 최단 경로로 이동하려 한다. 최단경로는 맵에서 가장 적은 개수의 칸을 지나는 경로를 말하는데, 이때 시작하는 칸과 끝나는 칸도 포함해서 센다.만약에 이동하는 도중에 한 개의 벽을 부수고 이동하는 것이 좀 더 경로가 짧아진다면, 벽을 한 개 까지 부수고 이동하여도 된다.한 칸에서 이동할 수 있는 칸은 상하좌우로 인접한 칸이다.맵이 주어졌을 때, 최단 경로를 구해 내는 프로그램을 작성하시오.입력첫째 줄에 N(1 ≤ N ≤ 1,000), M(1 ≤ M ≤ 1,000)이 주어진다. 다음 N개의 줄에 M개의..

올해 첫눈과 함께 오블완 챌린지 마지막 날을 맞이했네요!!!작년부터 기술 블로그를 운영해 와서 글을 쓰는 것 자체에는 큰 부담이 없었지만, “꾸준히” 3주간 블로그를 작성한다는 것은 조금 부담스럽게 느껴졌어요. 하지만 하루하루 쓰다 보니 어느새 3주가 흘렀고, 결국 챌린지도 성공했습니다! ㅎㅎ 짝짝짝 👏오늘은 마지막 날인 만큼, 오블완 챌린지가 저에게 어떤 의미였는지 정리해 보고 싶어요!  오블완 챌린지를 왜 도전하게 되었나 ? 올해 9월부터 본격적으로 취업 준비를 시작했어요. 졸업은 2023년에 했지만, 더 높은 목표를 위해 부트캠프를 수강하고, 여러 프로젝트를 진행하고, 자격증도 따고, 코딩 테스트 준비까지 하면서 준비 기간이 길어졌던 것 같아요. (사실 대학 시절에는 이 길이 나와 맞지 않다고 생..

Next.js 공식문서 6장 '데이터베이스 설정'을 따라하던 도중 여러 문제에 직면했다. 순조롭게 레포지토리 생성 및 vercel 배포까지 완료하였는데 데이터베이스를 연동하는 과정에서 에러가 발생해 이것 저것 찾아보면서 나와 비슷한 고민을 하고 있는 사람들을 위해 오늘 포스트를 작성해보겠다.  현재 공부중인 공식문서는 6장 데이터 베이스 설정이다. https://nextjs.org/learn/dashboard-app/setting-up-your-database Learn Next.js: Setting Up Your Database | Next.jsSetup a database for your application and seed it with initial data.nextjs.org 모두 순조롭게 깃허..

Next.js는 Link 컴포넌트를 제공하여 클라이언트 사이드 네비게이션을 가능하게 하며, 페이지 전환 시 사용자 경험을 대폭 향상시킵니다. 또한, 이번 학습에서는 활성화된 링크를 표시하는 방법도 함께 작성해보겠습니다.  1. Link 컴포넌트: 클라이언트 사이드 네비게이션기존 HTML의 태그를 사용하면 페이지 이동 시 전체 새로고침이 발생합니다. 하지만 Next.js의 Link 컴포넌트를 사용하면 클라이언트 사이드에서 페이지가 전환되며, 새로고침 없이 빠르고 매끄러운 전환이 가능합니다.import { UserGroupIcon, HomeIcon, DocumentDuplicateIcon,} from '@heroicons/react/24/outline';import Link from 'next/lin..

문제 설명리코쳇 로봇이라는 보드게임이 있습니다. 이 보드게임은 격자모양 게임판 위에서 말을 움직이는 게임으로, 시작 위치에서 출발한 뒤 목표 위치에 정확하게 멈추기 위해 최소 몇 번의 이동이 필요한지 말하는 게임입니다. 이 게임에서 말의 이동은 현재 위치에서 상, 하, 좌, 우 중 한 방향으로 게임판 위의 장애물이나 게임판 가장자리까지 부딪힐 때까지 미끄러져 움직이는 것을 한 번의 이동으로 정의합니다. 다음은 보드게임판을 나타낸 예시입니다. ("."은 빈 공간을, "R"은 로봇의 처음 위치를, "D"는 장애물의 위치를, "G"는 목표지점을 나타냅니다.) ...D..R .D.G... ....D.D D....D. ..D.... 이때 최소 움직임은 7번이며 "R" 위치에서 아래, 왼쪽, 위, 왼쪽, 아래, 오..

문제 설명 자연수 x를 y로 변환하려고 합니다. 사용할 수 있는 연산은 다음과 같습니다. x에 n을 더합니다 x에 2를 곱합니다. x에 3을 곱합니다. 자연수 x, y, n이 매개변수로 주어질 때, x를 y로 변환하기 위해 필요한 최소 연산 횟수를 return하도록 solution 함수를 완성해주세요. 이때 x를 y로 만들 수 없다면 -1을 return 해주세요. 제한사항 1 ≤ x ≤ y ≤ 1,000,000 1 ≤ n 입출력 예xynresult1040521040301254-1입출력 예 설명 입출력 예 #1 x에 2를 2번 곱하면 40이 되고 이때가 최소 횟수입니다. 입출력 예 #2 x에 n인 30을 1번 더하면 40이 되고 이때가 최소 횟수입니다. 입출력 예 #3 x를 y로 변환할 수 없기 때문에 -..