Next.js로 블로그 프로젝트를 시작했다면, 이제 진짜 “블로그 같은 기능”을 만들어볼 차례죠.바로 Markdown(.md) 파일을 블로그 글처럼 렌더링하는 기능입니다.Markdown은 개발자들이 가장 사랑하는 문서 형식 중 하나입니다. 이 글에서는 Next.js 프로젝트에서 Markdown 파일을 읽고, 글 목록과 상세 페이지를 구성하는 방법을 차근차근 설명드릴게요.📁 1. posts 폴더 만들고 .md 파일 생성하기먼저 프로젝트 루트에 posts 폴더를 만들고, Markdown 포스트 파일을 작성합니다.my-blog/├── posts/│ ├── hello-world.md│ └── nextjs-guide.mdhello-world.md 예시:---title: "Hello, World!"date..

개발을 하다 보면, 내 성장과 배움을 기록하고 싶은 순간이 오죠.이전까지는 Notion이나 Tistory에 글을 써왔다면, 이번엔 직접 나만의 블로그를 만들면서 개발 실력을 한 단계 더 높여보는 건 어떨까요?Next.js는 정적 사이트 생성(SSG), 서버 사이드 렌더링(SSR), API 라우팅까지 가능한 만능 프레임워크입니다. 이 글에서는 Next.js를 활용해 나만의 블로그를 만드는 첫걸음을 함께 시작해보겠습니다.🚀 1. 프로젝트 생성 및 초기 세팅npx create-next-app my-blog --typescriptmy-blog: 프로젝트 디렉토리 이름 (원하는 이름으로 설정)--typescript: 타입스크립트 사용. 요즘은 거의 기본!설치가 완료되면, 아래 명령어로 개발 서버를 실행할 수 있..

모든 사용자가 앱을 직접 켜는 건 귀찮다.홈 화면에서 바로 현재 날씨를 확인할 수 있다면 얼마나 편할까?이번 글에서는 Flutter로 날씨 앱을 만들 때, 위젯처럼 보이는 요약 날씨 UI를 앱 첫 화면 혹은 특정 영역에 표시하는 방법을 정리해본다.📌 목표 UI 구성아래와 같은 구성으로 간단한 날씨 요약 카드를 만들자:현재 위치 또는 선택된 도시현재 온도 + 날씨 상태작은 아이콘 또는 애니메이션┌────────────────────────────┐ │ 🌤 Seoul │ │ 24°C | Clear Sky │ └────────────────────────────┘🌐 날씨 데이터 불러오기Future> fetchWeather(String city) as..

기온을 보는 방식은 지역마다 다르다. 한국과 대부분의 국가는 섭씨(°C)를 사용하고, 미국은 화씨(°F)를 사용한다.이번 글에서는 Flutter 날씨 앱에서 사용자가 섭씨/화씨 단위를 전환할 수 있는 기능을 직접 구현해본다.🌡️ OpenWeather API의 단위 지원OpenWeather API는 단위를 간단한 파라미터로 조절할 수 있다.units=metric // 섭씨units=imperial // 화씨아무 단위도 지정하지 않으면 Kelvin(기본값)으로 반환되니 반드시 설정해줘야 한다.⚙️ 단위 설정 상태 관리앱 전체에서 사용할 수 있도록 enum과 상태 변수를 관리하자.enum TempUnit { celsius, fahrenheit }TempUnit currentUnit = TempUni..

여러 도시의 날씨를 확인하고 싶은 사용자를 위해 즐겨찾기 기능은 필수다.이번 글에서는 Flutter 앱에서 여러 도시를 저장하고, 각 도시의 날씨 정보를 리스트 형태로 나열해주는 UI를 만들어본다.📦 도시 리스트 저장 구조 설계List favoriteCities = ['Seoul', 'Tokyo', 'London'];간단한 리스트로 도시 이름을 저장하고, SharedPreferences 등을 통해 로컬 저장도 가능하게 만든다.➕ 도시 추가 UI 만들기TextEditingController _cityController = TextEditingController();TextField( controller: _cityController, decoration: InputDecoration( label..

기온, 상태, 습도 같은 날씨 데이터는 숫자로도 표현할 수 있지만, 아이콘과 애니메이션이 함께할 때 훨씬 직관적이고 감성적이다.이번 글에서는 Flutter에서 날씨 상태별 아이콘과 Lottie 애니메이션을 적용해 UI를 생동감 있게 만드는 방법을 알아보자.🌤️ OpenWeather 날씨 코드 이해하기OpenWeather API는 상태에 따라 icon 또는 main 값을 반환한다:"weather": [ { "main": "Rain", "description": "light rain", "icon": "10d" }]이 값을 기반으로 이미지 또는 애니메이션 리소스를 연결한다.📌 날씨 상태별 아이콘 매핑String getWeatherIcon(String main) { switch (ma..