[건강] 목표는 건강한 체중 감량! 실현 가능한 4주 플랜
·
기타 (Others)/개발 & 일상 (Development & Life)
체지방과 체중을 감량하고 싶지만 어디서부터 시작해야 할지 막막한 경우가 많죠.특히 30대가 되면 신진대사가 느려져 이전보다 살이 더 쉽게 찌고, 빼는 건 어려워진다는 것을 직접 느끼게 됩니다.하지만 올바른 식습관과 운동 계획, 생활 습관 변화만 실천한다면 건강하고 효과적으로 목표를 이룰 수 있습니다.오늘은 30대 여성 기준으로 한 달 동안 체지방을 줄이고 체중을 감량할 수 있는 구체적인 방법을 공유해보겠습니다. 1. 현실적인 체중 감량 목표 설정하기무리하지 않은 다이어트가 더 오래 지속되고 건강에 이롭습니다. 한 달 동안 2~4kg 감량을 목표로 하면 건강하고 지속 가능한 변화를 기대할 수 있습니다.왜 2~4kg일까?체지방 1kg을 줄이려면 약 7,700kcal를 소모해야 합니다. 이를 달성하기 위해 하..
[부동산] 부동산 취득세, 계약일이 기준일까? 잔금일이 기준일까?
·
기타 (Others)/부동산
부동산을 매수할 때 가장 많이 묻는 질문 중 하나는 바로 "취득세는 계약일을 기준으로 하나요, 잔금일을 기준으로 하나요?"입니다. 계약서를 쓴 날을 생각하는 분들도 있고, 잔금을 치른 날로 계산해야 한다는 이야기도 있습니다. 혼란을 정리하기 위해 취득세 과세 기준을 정확히 알아봅니다. 취득세란 무엇인가요?취득세는 부동산, 차량 등 재산을 취득할 때 부과되는 지방세입니다. 여기서 '취득'이란 단순한 계약 체결이 아니라, 사실상 소유권이 넘어가는 행위를 뜻합니다.'사실상 소유권 이전'이라는 표현은 법률적으로 굉장히 중요합니다. 약속만으로는 취득으로 보지 않고, 잔금을 모두 지급하고 실질적인 지배권이 넘어가는 것을 취득으로 봅니다. 계약일과 잔금일, 과연 어떤 날이 기준이 될까?구분설명계약일매매에 대한 의사 ..
[사이드프로젝트] 프론트엔드 애플리케이션에서 소셜 로그인 구현 시 도메인 간 쿠키 문제 해결 방안
·
개발 단계 (Development Stage)/개발 (Development)
안녕하세요, 오늘은 프론트엔드 애플리케이션에서 소셜 로그인을 구현하는 과정에서 마주한 도메인 간 쿠키 문제와 그 해결 방안에 대해 상세히 공유해 드리고자 합니다.문제 상황React 기반의 프론트엔드 애플리케이션에 소셜 로그인 기능을 구현하는 과정에서 다음과 같은 문제가 발생하였습니다.사용자가 소셜 로그인을 완료한 후에는 정상적으로 로그인 성공 메시지가 표시되고 홈 화면으로 리다이렉트 되었습니다.그러나 페이지를 새로고침하거나 다른 페이지로 이동할 경우, 로그인 상태가 유지되지 않아 사용자가 다시 로그인해야 하는 불편함이 있었습니다.브라우저의 개발자 도구 콘솔에서는 다음과 같은 오류 메시지가 확인되었습니다.This attempt to set a cookie via a Set-Cookie header was ..
[사이드프로젝트] 카카오 소셜 로그인 아키텍처의 진화: 프론트엔드 주도 방식에서 백엔드 위임 방식으로
·
개발 단계 (Development Stage)/개발 (Development)
1. 서론안녕하세요. 소셜 로그인은 현대 웹 애플리케이션의 필수 요소가 되었습니다. 특히 국내에서는 카카오 로그인이 사용자 편의성을 크게 높이는 핵심 기능입니다. 이 글에서는 카카오 소셜 로그인 구현 아키텍처의 진화를 자세히 살펴보고, 각 방식의 장단점을 분석하겠습니다. 코드 예시와 흐름도를 통해 두 방식의 차이점을 명확히 이해할 수 있도록 도와드리겠습니다.2. 이전 방식: 프론트엔드 주도 카카오 로그인프론트엔드 주도 방식은 인증 흐름의 대부분을 프론트엔드에서 처리하는 방식입니다. 이 방식에서는 카카오 SDK를 직접 초기화하고, 인증 코드 요청부터 토큰 교환까지 프론트엔드에서 담당합니다.2.1 구현 흐름2.2 코드 구현 예시2.2.1 카카오 SDK 초기화// SocialLoginList.tsxuseEff..
[사이드프로젝트] React 앱에서 카카오 소셜 로그인 구현하기
·
개발 단계 (Development Stage)/개발 (Development)
안녕하세요! 오늘은 React 애플리케이션에서 카카오 소셜 로그인을 구현하는 방법에 대해 공유하려고 합니다. 프로젝트에서 카카오 로그인을 적용하면서 경험한 내용을 바탕으로 작성했습니다.목차준비 사항카카오 개발자 계정 및 앱 설정프로젝트에 카카오 SDK 추가하기카카오 로그인 버튼 컴포넌트 구현인증 코드 처리를 위한 콜백 페이지 구현라우팅 설정백엔드 연동발생 가능한 문제 및 해결 방법마치며1. 준비 사항카카오 소셜 로그인을 구현하기 위해 다음과 같은 기술 스택을 사용했습니다.ReactTypeScriptViteReact RouterAxios2. 카카오 개발자 계정 및 앱 설정먼저, 카카오 개발자 사이트에 접속하여 계정을 생성하고 앱을 등록합니다.앱 등록 및 설정 단계: 카카오 개발자 사이트에 로그인하고 "내 ..
[사이드 프로젝트] 회원 탈퇴 기능 구현을 통해 배운 React 상태 관리와 사용자 경험 개선 이야기
·
개발 단계 (Development Stage)/개발 (Development)
안녕하세요.오늘은 최근 진행한 회원 탈퇴 기능 구현 과정에서 경험한 기술적 고민과 해결 과정, 그리고 그 속에서 배운 점들을 공유드리고자 합니다. 프로젝트 배경처음 회원 탈퇴 기능을 구현하라는 요청을 받았을 때, 단순히 API 연동만 하면 되는 간단한 작업이라 생각했습니다.하지만 실제 구현 과정에서 마주한 다양한 고민들이 있었습니다. :-)초기 요구사항 분석회원 탈퇴 전 주의사항 안내비밀번호 재확인진행 중인 예약이 있는 경우 탈퇴 제한이러한 요구사항들을 단순히 기능적으로만 구현하는 것이 아니라, 어떻게 하면 사용자에게 더 나은 경험을 제공할 수 있을지 고민했습니다.기술적 도전과 해결 과정1. 상태 관리의 진화처음에는 이렇게 단순한 로컬 상태로 시작했습니다.const Withdrawal = () => { ..
[LeetCode] DFS? BFS? 전화 키패드 문제로 마스터하는 두 가지 알고리즘
·
개발 이야기 (Development Story)/개발 일상 (Developer Daily Life)
전화 키패드 숫자 조합, 쉽게 알아보기일상에서 쓰는 전화 키패드에서 숫자 2~9는 보통 다음과 같이 문자들을 가집니다.2 → "abc"3 → "def"4 → "ghi"5 → "jkl"6 → "mno"7 → "pqrs"8 → "tuv"9 → "wxyz"예를 들어, "23"이라는 숫자 문자열이 있다면2 → "abc"3 → "def"이렇게 두 숫자가 가리키는 문자들을 각각 조합해 "ad", "ae", "af", "bd", "be", "bf", "cd", "ce", "cf" 총 아홉 개의 결과를 얻을 수 있습니다.┌─────────────┐│ index = 0 │ digits[0] = '2' → "abc"│ current="" │└─────────────┘ │ │ [3가지 문..
[React] React Query와 Storybook: "No QueryClient set" 오류 해결 방법
·
개발 분야 (Development Area)/프론트엔드 (Frontend)
안녕하세요, 여러분.로그인 페이지를 구현하는 과정에서 스토리북을 실행했을 때 다음과 같은 에러 메시지를 마주하게 되었습니다  이 에러는 QueryClientProvider가 설정되지 않았기 때문에 발생하는 문제입니다. 실제 애플리케이션에서는 src/main.tsx 파일에서 QueryClientProvider로 App 컴포넌트를 감싸기 때문에 문제가 되지 않지만, 스토리북에서는 컴포넌트가 QueryClientProvider로 감싸지지 않으면 React Query를 사용할 수 없습니다. 이제 React Query의 핵심 요소인 QueryClient와 QueryClientProvider에 대해 알아보고, 스토리북 환경에서 발생하는 이 문제를 어떻게 해결할 수 있는지 함께 살펴보겠습니다. 1. React Que..
[일본어 가사 번역] tuki - アイモライモ (Aimoraimo)
·
기타 (Others)/일본어
아이모라이모 (Aimoraimo)?아이모라이모(アイモライモ)는 일본어로 사랑(아이, 愛)과 거짓말(라이, Lie)을 조합해 만든 단어입니다. 이 곡의 제목은 단순히 사랑의 아름다움만을 노래하지 않고, 관계 속에서 느껴지는 불완전함, 때로는 거짓말로 얼룩진 복잡한 감정을 동시에 담아냅니다. 인간관계는 단순히 완벽한 사랑만으로 이루어진 것이 아니라, 서로 다른 두 사람이 부딪히며 만들어내는 감정의 조각들로 이루어져 있습니다. 그렇기에 '아이모라이모'라는 단어는 이 곡을 온전히 이해하는 데 중요한 키워드라고 할 수 있죠.  가사 해석「もしもし今何してた?」“여보세요? 지금 뭐하고 있었어?”「髪を乾かしてたとこ」“머리를 말리던 중이었어.” 「特に用は無いんだけれど、声が聴きたくて」“사실 할 말은 없지만, 네 목소리가 ..
[101] 웹 브라우저의 동작 원리: DOM, CSSOM, 그리고 BOM
·
학습 & 성장 (Learning & Growth)/개발 공부 (Development Study)
💡 이 게시글은 제가 웹 개발을 처음 시작했을 당시 노션에 정리해 두었던 내용을 바탕으로 작성되었습니다. 🌱 입문자 관점에서 보기 쉽게 작성한 기초 수준(101)의 글이니, 넓은 마음으로 이해해 주시면 감사하겠습니다! 😊 안녕하세요, 여러분. 오늘은 웹 브라우저가 HTML, CSS, JavaScript를 처리하는 과정을 이해하는 데 중요한 개념인 DOM(Document Object Model), CSSOM(CSS Object Model), BOM(Browser Object Model)에 대해 이야기해보겠습니다.이 개념들은 웹 페이지가 어떻게 렌더링되고, JavaScript를 통해 어떻게 변경되는지를 이해하는 데 매우 중요합니다. 1. DOM(Document Object Model): 문서 객체 모델..
vanillinav
'분류 전체보기' 카테고리의 글 목록