사용자를 고객으로
실전형 프론트엔드고객이 믿을 수 있는 웹 경험, 어떻게 만들까?
안녕하세요.
소프트웨어를 쉽고 빠르게 만들기 위해 소프트웨어를 즐겨 활용하는 석지인입니다(TypeScript, Next.js, TailwindCSS, shadcn/UI, JetBrain Junie). 저 역시, 복잡한 기술을 쉽게 이용할 수 있는 프론트엔드로 사용자의 문제를 풀고 싶습니다.
프론트엔드는 비즈니스 가치를 보여줌으로써 사용자를 고객으로 만듭니다. 방법에 얽매이지 않고 사용자를 고객으로 만드는 프론트엔드를 위해 노력하겠습니다.
코드 스니펫
TypeScript와 Next.js로 어떤 문제를 해결하셨습니까?
타입 안정성과 서버 사이드 렌더링을 통해
사용자 경험과 개발 생산성을 향상시켰습니다.
// Example TypeScript code
type User = {
id: string;
name: string;
email: string;
};
const fetchUser = async (id: string): Promise<User> => {
const response = await fetch(`/api/users/${id}`);
return response.json();
}기술 스택
제가 사용하는 주요 기술과 도구들
JavaScript (ES6+)
동적인 프론트엔드 개발을 위해 ES6+ 이상의 최신 EcmaScript를 사용했습니다. CommonJS와 ESM을 사용하는 설정 파일을 다룰 수 있습니다.
React.js
리액트 동작 원리의 하이드레이션을 조절하기 위해 여러 훅을 사용했습니다. 라이브러리 코드로 TypeScript와의 조합 원리를 파악했습니다.
Next.js
서버를 공격으로부터 보호하기 위해 next api를 프록시로, next auth 세션을 인증방법으로 사용해 민감정보의 브라우저 노출을 피했습니다. SEO 등 최적화를 위해 서버사이드 렌더링과 정적 사이트 생성, 앱 라우터의 레이아웃을 활용했습니다.
HTML5 / CSS3
마크업 태그를 이용한 LCP 단축, 스크립트 로드 조절, 무한 스크롤 요소 선택 등으로 활용했습니다.
프론트엔드
TypeScript95%
React90%
Next.js85%
Tailwind CSS90%
Redux80%
React Query85%
UX를 위한 프론트엔드 설계
사용자 경험을 위한 프론트엔드 개발 측면의 설계 & 실험을 담고 있습니다.
저는 이런 사람이에요
자주 묻는 질문
궁금한 점이 있으신가요? 아래에서 답변을 확인하세요
함께 일해요
새로운 프로젝트나 채용 기회가 있으신가요? 언제든지 연락주세요!