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

음식물 피하기 #1743 더보기 음식물 피하기 성공다국어 한국어 시간 제한메모리 제한제출정답맞힌 사람정답 비율 2 초 128 MB 19737 9366 7420 47.494% 문제 코레스코 콘도미니엄 8층은 학생들이 3끼의 식사를 해결하는 공간이다. 그러나 몇몇 비양심적인 학생들의 만행으로 음식물이 통로 중간 중간에 떨어져 있다. 이러한 음식물들은 근처에 있는 것끼리 뭉치게 돼서 큰 음식물 쓰레기가 된다. 이 문제를 출제한 선생님은 개인적으로 이러한 음식물을 실내화에 묻히는 것을 정말 진정으로 싫어한다. 참고로 우리가 구해야 할 답은 이 문제를 낸 조교를 맞추는 것이 아니다. 통로에 떨어진 음식물을 피해가기란 쉬운 일이 아니다. 따라서 선생님은 떨어진 음식물 중에 제일 큰 음식물만은 피해 가려고 한다. 선..

많은 서비스에서 헤더를 고정시키는 기능을 사용한다. 아래는 인프런 사이트인데, 스크롤을 내리면, 1번 헤더 : 가장 상단에 있는 교육 / 커리어 / 기업 서비스 / 지식공유 참여 부분은 따라오지 않고, 그 아래 위치하는 , 2번 헤더 : 인프런 / 강의 / 로드맵 / 멘토링 / 커뮤니티 탭이 있는 부분만 스크롤을 따라 이동하는 것을 알 수 있다. 이 기능이 궁금해서 개발자도구의 요소 탭으로 확인해보았다. 스크롤을 해서 1번 헤더가 사라지고, 2번 헤더가 고정되는 순간에, 2번 헤더에 sticky 속성이 생기는 것을 확인할 수 있었다. position : sticky 요소를 부모 요소 내에서 스크롤될 때 상대적인 위치로 유지하다가 특정 임계값에 도달하면 고정된다. 부모 요소에 대한 상대적인 위치 지정이 있..

내가 보려고 정리하는 리액트 애플리케이션에 카카오톡 공유 기능 추가하는 법 ! KaKao Developers 애플리케이션 추가등록 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 사용자에게 보여질 앱 아이콘과 앱 이름, 사업자명을 작성하고나면, 앱 아이디와 앱 키들을 확인할 수 있다. 플랫폼 등록하기 나는 React로 개발했으므로, 좌측 메뉴 플랫폼 > Web 플랫폼 등록에 들어간다. 본인이 배포한 도메인을 넣어주면 되고, 개발 모드에서 로컬에서 테스트 가능해야 하기 때문에 로컬 주소도 넣어준..

전쟁-전투 #1303 더보기 전쟁 - 전투 문제 전쟁은 어느덧 전면전이 시작되었다. 결국 전투는 난전이 되었고, 우리 병사와 적국 병사가 섞여 싸우게 되었다. 그러나 당신의 병사들은 흰색 옷을 입고, 적국의 병사들은 파란색 옷을 입었기 때문에 서로가 적인지 아군인지는 구분할 수 있다. 문제는 같은 팀의 병사들은 모이면 모일수록 강해진다는 사실이다. N명이 뭉쳐있을 때는 N2의 위력을 낼 수 있다. 과연 지금 난전의 상황에서는 누가 승리할 것인가? 단, 같은 팀의 병사들이 대각선으로만 인접한 경우는 뭉쳐 있다고 보지 않는다. 입력 첫째 줄에는 전쟁터의 가로 크기 N, 세로 크기 M(1 ≤ N, M ≤ 100)이 주어진다. 그 다음 두 번째 줄에서 M+1번째 줄에는 각각 (X, Y)에 있는 병사들의 옷색이 ..

단어 변환 #43163 더보기 문제 설명 두 개의 단어 begin, target과 단어의 집합 words가 있습니다. 아래와 같은 규칙을 이용하여 begin에서 target으로 변환하는 가장 짧은 변환 과정을 찾으려고 합니다. 1. 한 번에 한 개의 알파벳만 바꿀 수 있습니다. 2. words에 있는 단어로만 변환할 수 있습니다. 예를 들어 begin이 "hit", target가 "cog", words가 ["hot","dot","dog","lot","log","cog"]라면 "hit" -> "hot" -> "dot" -> "dog" -> "cog"와 같이 4단계를 거쳐 변환할 수 있습니다. 두 개의 단어 begin, target과 단어의 집합 words가 매개변수로 주어질 때, 최소 몇 단계의 과정을 거..