yoon-arc의 코딩 일지

목차 (눌러서 이동 가능)📪 모아 모아(MoaMoa) - SNS 서비스🧠 권한 설정 - 작성자가 아닌 소유자를 기준으로!🧠 비즈니스 컴포넌트로 RSC로, SSR 극대화하기 - 상세 데이터는 조건부 fetch!🧠 캐싱에 관한 고민 . . .🚩 소감 한마디 📪 모아 모아(MoaMoa) - SNS 서비스지난 몇 달간 진행한 프로젝트 모아모아(Moa Moa)는 Spotify API를 기반으로 음악이 첨부된 편지를 주고받을 수 있는 온라인 네트워킹 서비스로, 사용자는 편지를 작성하고 다양한 옵션으로 편지지와 편지 오브제를 커스터마이징 할 수 있다.이번 포스팅은 프로젝트를 진행하며 겪었던 많은 고민 중, 편지 권한과 데이터 조건부 fetch에 관한 내용을 적어보려 한다 🙃(해당 이슈 PR 링크 : h..

목차(눌러서 이동 가능)📌 문제 핵심 논리📌 코드 흐름📌 전체 코드 보기 이번 포스팅에서는 백준 1362번 펫 문제를 다뤄보겠습니다. 전체 코드는 글 최하단에 첨부 되어있습니다!문제 링크 : https://www.acmicpc.net/problem/1362 📌 문제 핵심 논리solved.ac 기준 브론즈 2 문제기 때문에 제한 조건도 넉넉하고 별도의 알고리즘 없이 단순 구현으로 쉽게 해결할 수 있는 문제입니다.종료 조건이나, 사망 조건 처리 위치에 신경을 쓰면 큰 어려움 없이 해결 할 수 있습니다 :) 적정 체중(o), 초기 체중(w)이 주어지고 콘솔 F(증가), E(감소)에 따라 숫자 n만큼의 값을 증감시키며 시뮬레이션을 진행합니다.체중이 0 이하가 되면 사망(RIP)가 되며, 이 다음 ..

목차 (눌러서 이동 가능)⚙️ 링크 복사 기능 (Clipboard API / execCommand)⚙️ SNS 공유하기 기능    📌 페이스북 공유    📌 X(트위터) 공유    📌 라인 공유    📌 카카오톡 공유    📎 사전 설정    📎 SDK 초기화(스크립트 로드)    📎 layout.tsx 스크립트 적용    📎 공유 API 종류 및 템플릿 설정    📎 최종 구현 및 결과✅ 마무리이번 포스팅에서는 NextJs 15 앱라우터와 타입 스크립트를 활용한링크 클립보드 복사 기능과 SNS 공유하기 기능을 구현해보도록 하겠습니다! 글이 상당히 길어, 원하는 부분이 따로 있으신 경우 네비게이션을 통해 이동하는 걸 권장드립니다 :) 📌 현재 링크 복사하기 (클립보드 복사)HTTPS ..

목차(눌러서 이동 가능)📌 문제 핵심 논리📌 코드 나눠서 설명📌 전체 코드 보기 이번 포스팅에서는 백준 13305번 주유소 문제를 다뤄보겠습니다.전체 코드는 글 최하단에 첨부 되어있습니다!(문제 링크 : https://www.acmicpc.net/problem/13305) 📌 문제 핵심 논리이번 문제는 O(N²) 이하의 시간 복잡도로 해결해야 서브태스크까지 통과할 수 있습니다. 다행히 그리디 알고리즘을 사용하면 간단히 해결할 수 있습니다. 핵심 아이디어는 간단합니다: 1. 처음 출발 도시의 기름값으로 최소 비용을 초기화한다. (첫 번째 도시는 무조건 다음 도시로 가기 위해 주유해야 하므로 최저가와 관계없이 이용합니다.)2. 이후 도시를 순서대로 지나면서 최저가 도시의 기름값과 비교하여 더 싼 값..

개발 중 메인 브랜치애서 최신 코드를 pull 받아야 하는 상황이 종종 발생합니다. 이때 변경 사항을 커밋하기는 애매하고, 그냥 놔둔 상태에서 브랜치를 변경하려 하면 경고 메세지가 뜹니다. 이런 상황에서 쓸 수 있는 명령어가 git stash입니다. 차례대로 경고가 뜨는 이유, git 저장소 영역 관계, git stash와 관련 명령어를 차례대로 살펴보겠습니다.필요한 명령어만 빠르게 보고 싶다면 바로 아래로 스크롤해주세요! ⚠️왜 커밋하지 않은 변경사항이 있으면 경고가 뜰까?커밋하지 않은 변경사항이 있는 상태에서 브랜치를 바꾸거나 최신 코드를 pull 받으려하면 다음과 같은 경고가 뜹니다.이는 git이 변경 내용을 잃어버리지 않도록 보호하기 위한 조치입니다.변경사항을 커밋하지 않은 상태에서 다른 브랜..

이번 포스팅에서는 백준 1063번 문제 풀이를 다뤄보겠습니다.(문제 링크 : https://www.acmicpc.net/problem/1063)먼저 코드를 흐름에 따라 나누어 설명하고, 포스팅 제일 하단에 전체 코드를 첨부하겠습니다 :) 핵심은 주어진 명령에 따라 킹의 위치와 돌의 위치를 올바르게 업데이트하는 것입니다.전체적인 논리 흐름은 다음과 같습니다.1.입력 및 이동 방향 설정 킹, 돌, 명령 횟수 입력 8가지 이동 방향을 딕셔너리에 저장2.범위 체크 함수 체스판 범위 내의 좌표인지 확인하는 함수 정의3.초기 좌표 계산 입력받은 문자열 위치를 숫자 좌표로 변환하여 킹과 돌의 초기 위치 설정4.명령문 수행 각 명령어에 따라 킹을 이동시키고, 돌과 충돌 시 돌도 함께 이동 이동 후 범위 체크를 통해 잘..

현재 진행 중인 사이드 프로젝트에서 사용자 친구 목록 기능을 구현하고 있던 중 데이터를 받아 오기 위해API 요청을 보냈을 때, 넘겨받은 값이 null이라  401 Unauthorized 에러가 뜨는 상황을 마주하게 되었습니다..(서론이 있어서 해결법이 궁금하신 경우 포스팅 제일 하단으로 이동해 주세요!)   🏃‍♂️‍➡️ 문제점 파악하기 & 시도한 방법에러 코드를 통해 세션에 문제가 있다는 것을 알 수 있었지만 클라이언트, 서버 양쪽 모두콘솔에서 세션을 출력하면 값이 정상적으로 반환됐기 때문에 처음에 조금 당황스러웠습니다. 혹시 몰라 API 엔드포인트에 직접 접근했을 때 데이터가 정상적으로 반환되는 걸 확인하고작성했던 코드를 재차 확인하며 API 자체의 문제는 아니라 판단했습니다.// app/api/..

이번 포스팅에서는 백준 1759번 문제 암호 만들기 풀이를 다뤄보도록 하겠습니다. 전체 코드는 페이지 제일 하단에 있습니다!문제 링크 : https://www.acmicpc.net/problem/1759   문제에서는 길이가 L인 암호를 C개의 문자 중에서 뽑아 만들되, 아래의 조건들을 만족해야 합니다 : - 최소 1개의 모음(a, e, i, o, u) 포함- 최소 2개의 자음 포함- 증가하는 순서로 배열될 것(abc는 가능하지만 acb, bac, cab 등은 불가능)  📌  풀이 아이디어저는 이번 문제를 풀 때 itertools 모듈에 있는 combinations 함수를 활용했습니다.Combinations는, 주어진 이터러블에서 n개의 원소를 뽑아 만들 수 있는 모든 조합을 반환하는 함수입니다.(순서..

이번 포스팅에서는 Next.js 15에서 동적 라우팅 관련 변경 사항에 대해 다뤄보겠습니다. 📌 변경 사항의 핵심최근 Next.js 15에서는 일부 동적 API들이 동기적으로 작동하던 방식에서 비동기 처리 방식으로 변경되었기 때문에,이전 버전에서는 문제 없이 작동하던 코드들도 예상치 못한 에러 메세지를 다수 띄울 수 있습니다. params, searchParams, cookies(), draftMode(), headers()와 같은 API들이 이제 비동기 방식으로 동작하기 때문에 버전 업그레이드 후 사용할 거라면 꼭 공식 문서를 정독하는걸 추천드립니다.공식 문서에 의하면 향후 버전에서도 위의 API들은 계속 비동기적으로 작동할 예정이라 합니다.   이전 버전에서는 아래 코드가 문제 없이 작동했지만,Ne..

이번 포스팅에서는 25.01.30일에 이뤄졌던 리트코드 weekly contest 434 2번 문제를 다뤄보도록 하겠습니다.(리트코드3433번 문제 )전체 코드는 포스팅 제일 하단에 정리되어 있습니다.   해당 문제는 입력된 이벤트를 기반으로 사용자들의 온라인/오프라인 상태를 관리하고,특정 시점에서 언급된 사용자의 횟수를 계산하는 것이 핵심입니다. 특정 알고리즘을 사용하지 않고 상태 변경 업데이트, 언급 처리 로직 & 조건 체크 만으로도 풀이가 가능하다 판단했습니다.문제를 푸는 내내 가장 중요하게 생각한 총 세가지 부분은 아래와 같습니다.이벤트 (events[]) 정렬: 먼저 타임스탬프를 기준으로 이벤트를 정렬하고 -> 동일한 타임스탬프에서는 "OFFLINE" 이벤트가 우선 처리되도록 정리유저 상태 관리..