개발자 님의 블로그에 오신 것을 환영합니다

안녕하세요. 이 블로그는 웹 프론트엔드 개발을 중심으로 한 기술 블로그입니다.

React, Next.js, TypeScript, CSS 등 다양한 기술 스택을 다루며, 학습한 내용과 실제 프로젝트에서 마주친 문제를 정리합니다.

• ㅇㅇㅇㅇ

  • ㅇㅇㅇ

    ㅇㅇㅇㅇㅇ

    ㅇㅇㅇㅇㅇ

    console.log("ddd");
    

코드 블럭 테스트ㅎ

//javascript
import { useState } from "react";

export default function App() {
  const [ state, setState ] = useState<number>(1);

}

//js
import { useState } from "react";

export default function App() {
  const [ state, setState ] = useState<number>(1);
}

//java
public class App {
    private int state = 1;

    public int getState() {
        return state;
    }

    public void setState(int newState) {
        this.state = newState;
    }

    public static void main(String[] args) {
        App app = new App();
        System.out.println("초기 상태: " + app.getState());
        app.setState(5);
        System.out.println("변경된 상태: " + app.getState());
    }
}

//c
#include <stdio.h>

int state = 1;

void setState(int newState) {
    state = newState;
}

int getState() {
    return state;
}

int main() {
    printf("초기 상태: %d\n", getState());
    setState(5);
    printf("변경된 상태: %d\n", getState());

    return 0;
}

블로그 소개

이 블로그는 다음과 같은 목적을 가지고 운영됩니다.

• 프론트엔드 지식 정리

• 개발 중 마주친 에러 및 해결 방법 기록

• 새로운 기술 트렌드에 대한 개인적인 해석과 사용 후기

• 코드 품질 향상을 위한 리팩토링 사례 기록

사용 기술 스택

• **React**: 함수형 컴포넌트와 훅 기반 개발

• **Next.js**: 정적 사이트 생성(SSG), 서버 사이드 렌더링(SSR), API 라우팅 등

• **TypeScript**: 정적 타입을 통한 안정성 확보

• **Tailwind CSS / Styled Components**: 다양한 스타일링 접근

• **ESLint / Prettier / Husky**: 코드 스타일 및 품질 관리

이미지 기반 링크 예제

아래 이미지를 클릭하면 [MDN 공식 문서](https://developer.mozilla.org/)로 이동합니다.

[](https://developer.mozilla.org/)

또한, 프론트엔드의 배포 환경에 필수적인 Vercel 관련 링크는 다음과 같습니다.

[](https://vercel.com/)

최근 학습 주제

• React 19 Preview 기능

• Next.js 15 App Router 전환기

• TanStack Query 5 구조 변화

• GraphQL + Apollo 클라이언트 적용기

• Zustand vs Recoil vs Jotai 실전 비교

• CSS-in-JS 성능 비교 및 적용 기준

프로젝트 사례

1. 블로그 프로젝트

• 기술 스택: Next.js, TypeScript, Tailwind CSS, Notion API

• 특징:

  • Notion을 CMS로 사용하여 마크다운 기반 콘텐츠 작성

  • 다국어 지원 및 SEO 최적화

  • 다크모드 및 접근성 대응

2. 사이드 프로젝트: 커뮤니티 앱

• 기술 스택: React Native, Expo, Firebase

• 특징:

  • 실시간 채팅

  • 사용자 인증 및 프로필 관리

  • 푸시 알림 기능

결론

개발자는 기록하고 공유하는 과정에서 성장합니다.

이 블로그는 그 성장의 증거이며, 앞으로도 실험과 고민, 실패와 성공의 흔적을 남길 예정입니다.

좋은 정보가 되기를 바랍니다.

[Google로 이동](https://google.com)

또는 이 이미지를 클릭해서 이동:[](https://google.com)

동영상 임베드 테스테 ㅎㅎ..

[아하하하](https://www.youtube.com/watch?v=OAfD8n0Mzqg)