바탕화면 정리 #161990 더보기 코딩테스트를 준비하는 머쓱이는 프로그래머스에서 문제를 풀고 나중에 다시 코드를 보면서 공부하려고 작성한 코드를 컴퓨터 바탕화면에 아무 위치에나 저장해 둡니다. 저장한 코드가 많아지면서 머쓱이는 본인의 컴퓨터 바탕화면이 너무 지저분하다고 생각했습니다. 프로그래머스에서 작성했던 코드는 그 문제에 가서 다시 볼 수 있기 때문에 저장해 둔 파일들을 전부 삭제하기로 했습니다. 컴퓨터 바탕화면은 각 칸이 정사각형인 격자판입니다. 이때 컴퓨터 바탕화면의 상태를 나타낸 문자열 배열 wallpaper가 주어집니다. 파일들은 바탕화면의 격자칸에 위치하고 바탕화면의 격자점들은 바탕화면의 가장 왼쪽 위를 (0, 0)으로 시작해 (세로 좌표, 가로 좌표)로 표현합니다. 빈칸은 ".", 파일이..

개발 중인 여름방학 프로젝트의 사용자 경험을 증가시키기 위해 스켈레톤 UI 추가해볼 것이다. 현재 상황 먼저, 현재 나의 상황이다. 네트워크를 느리게 설정하여 확인해보겠다. 그림을 보여줘야 하는 부분에서, api를 호출 중일 때 로딩 스피너가 보이고, (임의로 둠) 사진이 뜰 때 흰색 그림이 보인 후 그림이 다 보여지는 경우 있음 스켈레톤 UI란? 실제 콘텐츠가 들어갈 자리를 잠시 대신하게 되는 빈 껍데기이다. 출처 : https://ui.toast.com/weekly-pick/ko_20201110 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기 스켈레톤 컴포넌트가 무엇인지 알고 있는가? 스켈레톤 컴포넌트는 데이터를 가져오는 동안 콘텐츠를 표시하는 컴포넌트이다. 사용자는 콘텐츠를 기다리다가 ..

공원 산책 #172928 더보기 문제 설명 지나다니는 길을 'O', 장애물을 'X'로 나타낸 직사각형 격자 모양의 공원에서 로봇 강아지가 산책을 하려합니다. 산책은 로봇 강아지에 미리 입력된 명령에 따라 진행하며, 명령은 다음과 같은 형식으로 주어집니다. ["방향 거리", "방향 거리" … ] 예를 들어 "E 5"는 로봇 강아지가 현재 위치에서 동쪽으로 5칸 이동했다는 의미입니다. 로봇 강아지는 명령을 수행하기 전에 다음 두 가지를 먼저 확인합니다. 주어진 방향으로 이동할 때 공원을 벗어나는지 확인합니다. 주어진 방향으로 이동 중 장애물을 만나는지 확인합니다. 위 두 가지중 어느 하나라도 해당된다면, 로봇 강아지는 해당 명령을 무시하고 다음 명령을 수행합니다. 공원의 가로 길이가 W, 세로 길이가 H라고..

붕대 감기 #210137 더보기 문제 설명 어떤 게임에는 붕대 감기라는 기술이 있습니다. 붕대 감기는 t초 동안 붕대를 감으면서 1초마다 x만큼의 체력을 회복합니다. t초 연속으로 붕대를 감는 데 성공한다면 y만큼의 체력을 추가로 회복합니다. 게임 캐릭터에는 최대 체력이 존재해 현재 체력이 최대 체력보다 커지는 것은 불가능합니다. 기술을 쓰는 도중 몬스터에게 공격을 당하면 기술이 취소되고, 공격을 당하는 순간에는 체력을 회복할 수 없습니다. 몬스터에게 공격당해 기술이 취소당하거나 기술이 끝나면 그 즉시 붕대 감기를 다시 사용하며, 연속 성공 시간이 0으로 초기화됩니다. 몬스터의 공격을 받으면 정해진 피해량만큼 현재 체력이 줄어듭니다. 이때, 현재 체력이 0 이하가 되면 캐릭터가 죽으며 더 이상 체력을 회..

14버전이 되면서 라우팅 방식이 바뀐 Next.js 14 의 페이지 라우팅와 동적 라우팅, 404페이지 변경방법을 알아보고자 한다. 라우팅의 경로에 해당하는 파일들은 page.* 가 파일이름이 되어야 한다. 루트경로( / ) 가장 루트 경로는 src/app/page.tsx 폴더이름경로 ( /about ) /about 경로에 해당하는 페이지를 만들고 싶다면, src/app/about/page.tsx 동적라우팅 (/about/:id) about/ 뒤에 아이디가 오는 페이지를 만들고 싶다면, src/app/about/[id]/page.tsx 타입스크립트에서는 params의 타입을 지정해주지 않으면 에러가 난다. 바인딩 요소 'params'에 암시적으로 'any' 형식이 있습니다.ts(7031) 아래처럼 타입을..

Next.js 14버전으로 포트폴리오를 제작하려고 한다. 이번 기회에 Next.js 14를 차근차근 익히고 싶다. 포트폴리오는 내 개인 프로젝트이니까, 궁금했거나 하고 싶었던 기능이나 기술 들을 활용할 예정이다. 그 과정에서 겪는 것들을 블로그에 정리하면 좋을 것 같아서 글을 작성해보고자 한다. 첫번째 게시글은 Notion api에 대한 글이다. Notion을 DB처럼 쓸 수 있도록, Notion api를 사용해보겠다. 평소 Notion을 항상 켜두며 작업할 정도로 자주 쓰는데 , Notion api가 있다는 것을 처음 알았다. 🙀 하드코딩으로 포트폴리오 내부 내용을 작성하기 보다는, 내가 변경하거나 추가하고 싶을 때 Notion에서만 직접 수정하면 되어서 이 방법을 선택하게 되었다. API 통합 생성하..

문제상황 이제 배포를 거의 앞두고 있고, 기획자 분과 디자이너 분께서 QA 리스트를 작성하고 첫 QA를 진행했다. 그 중 나온 문제 하나 .. 일기 작성의 내용 부분에서 우리가 내용의 글자 수를 80자로 제한하기로 했고, 해당 textarea에 maxLength를 80로 주어서 잘 작동되는 것을 확인했다. 그런데, 아래와 같이 작동이 안된다는 피드백이 있었다. 나 확인했는데 .. ? ? 그리고 나서 내가 해보니까 안된다... 근데 한글에서만 안된다. 아마도 개발 단계에서 워낙 이것저것 테스트해보다보니, 아무거나 입력하면서 테스트를 했는데, 그때 한글을 pc에서 안해봤던 것 같다. 모바일에서 한글이 잘 제어가 되길래 잘 되는 줄 ... 알았다. 위처럼 한글에서는 80자를 넘어도 1글자가 더 입력이되어, 아..

이 기능을 뭐라고 딱 한단어로 표현할 지 모르겠으나, 게시글 생성과 수정을 어떻게 구별 ? 에 초점을 두고 게시글을 작성하도록 하겠다. AI 그림일기 다이어리를 구현 중인데, 다이어리 작성(생성) 기능과 수정 기능이 존재한다. 두 기능 사용 시 사용자에게 보여주는 화면 틀(입력 폼)은 같으나, 생성 시에는 모든 데이터들이 기본값으로 초기화 된 상태이고, 수정 시에는 기존에 있던 데이터들이 입력 폼 안에 채워진 상태로 사용자에게 보여주게 된다. 이렇게 생성/수정 구현은 많은 페이지들에서 확인해 볼 수 있다. 이 기능이 가능하려면 같은 코드를 사용하지만, 생성/수정에 따른 구분이 가능하도록 프로그램에게 알려주어야 한다. 기존 생성 페이지 뒤에 수정하고자 하는 데이터의 아이디값을 넘겨서 해당 데이터를 받아와서..