프론트엔드 개발자 엄성준

먼저 500 Error가 발생한 원인은 간단합니다. const { data } = useSWR( latitude && longitude ? `/api/posts?latitude=${latitude}&longitude=${longitude}` : null ); Next.Js의 SSR 방식은 클라이언트 단에서 useSWR을 통해서 API Call을 호출하기 전에 즉 브라우저에 화면을 그려주기 전에 미리 초기 값({latitude: null, logintude: null})으로 백엔드에 호출을 해서 화면을 그리는 방식이기 때문에 param의 latitude, logintude의 값이 null로 전달되어서 발생한 문제입니다. 위도와 경도를 구하는 useCoords 함수는 초기값으로 각각 {latitude: nu..

import { useRouter } from "next/router"; import { useEffect, useState } from "react"; export default function useUser() { const [user, setUser] = useState(); const router = useRouter(); useEffect(() => { fetch(`/api/users/me`).then((response) => response.json().then((data) => { if (!data.ok) { return router.replace("/enter"); } setUser(data.profile); }) ); }, [router]); return user; } 먼저 useEffe..

이전에 제로베이스에서 팀프로젝트를 구현할 때 이메일로 인증번호를 받아서 로그인하는 과정을 구현한 적이 있습니다. 이 때는 백엔드에서 이메일 인증 관련 로직을 처리해서 어떻게 구현했는지 정확히 알지 못했습니다. 그래서 이번 기회에 구현을 하게 되었는데 문제점이 생겼습니다. 처음에 SendGrid를 통해서 이메일 인증관련 로직을 처리하려고 하였으나 SendGrid에 회원가입을 하자마자 access관련 문제가 파바박 하고 터지고 구글 검색과 수많은 댓글을 통해서 알아낸 점은 SendGrid에 가입해 성공하여도 추가로 요구하는 정보도 만고 인증을 하려면 수많은 절차를 거쳐야 한다는 점을 알게 되었습니다. 그래서 찾아낸 다른 방법이 nodeMailer입니다. 먼저 nodeMailer를 사용하기 전에 저는 제 네이..

React hook form을 통해서 onValid 된 data를 fetch를 통해서 pages / users / enter.tsx에 요청을 보냈다. const onValid = (data: EnterForm) => { // console.log(JSON.stringify(data)); fetch("/api/users/enter", { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json", }, }); }; 이 때 headers에 적힌 "Content-Type" : "application/json"문장이 없으면 enter.tsx에서 req즉 request의 body에 접근했을 때 undefiend가..

먼저 darkMode를 브라우저의 설정대로 적용할 것인지 사용자가 임의로 버튼을 만들어서 class상태를 통해 적용할 것인지를 정해야 합니다. tailwind.config.ts or tailwind.config.js 파일에서 darkMode 속성이 media일 때는 브라우저의 설정대로 적용, class일 때는 사용자가 임의로 조정이 가능한 상태입니다. import type { Config } from "tailwindcss"; const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: ..

2023년 11월 기준 node -v 관련 오류가 난다면 node -v 18 이상을 설치하시면 정상 작동됩니다. 기존에 16v이 설치되어 있었는데 따른 작업 필요 없이 아래의 링크에 가서 LST버전 다운로드하시면 정상 작동됩니다. LTS 관한 정보는 검색해서 참고하시면 좋을 것 같습니다. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org

최근 제가 만들고 배포한 포트폴리오 프로젝트가 잘 배포되어 있는지 확인을 해보았는데 아래와 같이 오류가 발생하는 중이었습니다. 이 문제를 해결하기 위해 network tab을 봤을 때 notion에서 이미지를 가져오는데 이때 이미지가 aws로 배포되어 있는데 도메인에 변경이 있는 듯했습니다. 그래서 network tab에 잡힌 도메인 주소를 next.config.js에 추가해 주었다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: [ "prod-files-secure.s3.us-west-2.amazonaws.com", // 추가 한 도메인 "s3.us-west-2.amazonaws.com", "images...

이력서 제출을 통한 좌절을 뒤로하고 포트폴리오로 제출한 Vercel 링크가 잘 작동되는지 수시로 확인을 하는데 이번에는 새로운 오류가 나타났다. 진행했던 프로젝트들의 대표이미지가 불러와지지 않았던 것이다. 그래서 바로 긴급 수정에 들어갔다. 문제는 크게 어렵지 않았다. console에 찍힌 문제점을 구글에 검색하니 공식문서에 따르면 version 13부터는 기존에 코드에 있던 layout, objectfit 등을 삭제하라는 말이었다. 그래서 아래와 같이 코드를 수정하니 정상적으로 작동을 하게 되었다. 이력서에 제출한 포트폴리오 링크인데... 앞으로는 더욱 수시로 확인하고 공식문서를 잘 읽어봐야겠다!

지원한 회사에서 빠른 시간 내에 불합격 처리를 받은 경험을 통해 이력서에 문제가 있을 수 있다는 의문이 들었습니다. 제가 발견한 문제점과 개선 사항을 아래와 같이 정리했습니다. 자기소개 내용 강화 - 이력서에서는 프론트엔드 기술에 너무 초점을 맞추었다고 생각하여, 전공자로서 대학교 시절에 습득한 Spring Boot, SQL Developer, 네트워크 관련 경험과 지식 등을 강조하는 내용을 추가했습니다. 기술 스택 강화 - 지원한 회사에서 Next.js를 자격 요건으로 요구하는 경우가 많았으므로, 기존에 학습한 Next.js와 TypeScript, Tailwind CSS를 활용하여 인사 담당자를 위한 포트폴리오를 개발했습니다. 이 포트폴리오를 Velcel을 이용해 배포한 링크를 첨부하였습니다. 포트폴리..