#register

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

react 중첩 라우팅 관련

현재 회원가입 페이지를 만들고 있습니다. 간단하게 설명드리자면 회원가입 페이지는 약관동의 -> 정보 입력 -> 완료 페이지 세 페이지로 이루어 지는데요, 이를 라우팅 할 때 고려할 수 있는 방법이 1. 현재 페이지를 state로 관리하며 컴포넌트만 바꿔준다. 2. 중첩 라우팅을 사용해 /register/terms ... 등으로 구현한다. 3. url hash를 사용해 다른 페이지를 구현한다. 정도가 있는것 같습니다. 이런 경우, 개발자님들은 어떤 구현 방식을 선호하시나요?

NestJs에서 SRP

안녕하세요 Nest.js를 공부 중인 학생입니다. 이번에 공부한 내용들을 가지고 사이드 프로젝트를 하던 중 SRP와 관련한 의문이 생겨 질문남깁니다 ㅠㅠ nestjs를 공부할 때 컨트롤러는 유저와 서비스를 이어주는 역할이고 서비스는 비즈니스 로직을 담당하는 것이라고 배웠습니다. 그리고 컨트롤러는 너무 커지지 않도록 하는 것이 좋다고 들었습니다. 이를 고려해서 코드를 짜다보니 한 서비스 내에 너무 많은 로직이 몰리는 듯한 느낌이 들었습니다. 여러 모듈로 분리하고 필요한 서비스를 하나의 서비스 내에 몰아서 사용하다보니 의존성이 커지고 재사용성이 없다고 느껴졌습니다.. 그래서 SRP를 고려하여 코드를 짜려다 보니 하나의 서비스는 하나의 기능만을 담당해야 하고, 그렇게 구현한 서비스들을 컨트롤러에 주입하여 사용하는 것이 맞다고 하더군요.. 그렇게 코드를 짜다보니 이번엔 컨트롤러가 너무 비대해지고, 정작 비즈니스 로직을 담당한다던 서비스 쪽은 너무 작아져서 재사용하기도 애매하고 오히려 불필요하다고 느껴질 정도입니다. 사진 속 코드가 바로 그 예시입니다. 이메일 인증이 필요한 회원가입 기능을 구현하는 코드이고 플로우는 다음과 같습니다. 입력받은 이메일, 이름, 전화번호에 해당하는 유저가 존재하는지 확인 -> 없다면 해당 유저 정보를 DB에 저장 -> 이메일 인증에 사용할 token 생성 후 DB에 저장 -> 이 token을 입력받은 이메일로 발송 위 기능 구현을 위해 auth serrvice, users service, email service로 분리하였습니다. 하지만 보시다시피 컨트롤러에 오히려 로직이 몰려있는 느낌이고, 정작 auth service 내의 register 함수는 전달받은 token과 userId를 바탕으로 DB에 저장하는 로직만을 담당하게 됩니다.. 이렇게 짜는게 정말 맞는지 아니라면 피드백 부탁드립니다 ㅠㅠ

코딩 강의에 나온 내용을 어떻게 사용할지 전혀 모르겠습니다

안녕하십니까 선배님들! - 현 상황 Code with mosh라는 사이트에서 자바스크립트 강의를 듣고 있습니다. 기본적인 문법은 끝냈고, prototype, polymorphism, getter and setter 등 — 강의 제목상 intermediate level로 추정되는 — 을 배우고 있습니다. 저세한 상황을 말씀드리면 저는 28살 비전공자이며, 공부한지는 한 달 반 정도 되었습니다. 하루에 8시간 자리에 앉아서 6시간은 집중해서 하고 있습니다. 그동안 이런저런 강의(드림코딩, 해외 유튜버 무료 강의)도 듣고 codewars라는 사이트에서 문제도 풀어보았습니다(7kyu - 23문제, 6kyu - 10문제). login-register page, modal, toast, snake game 등의 튜토리얼도 열 개 정도 만들어봤습니다. react 튜토리얼도 찍먹 해보았고, Chatgpt를 이용해서 아무것도 모르지만.. mongodb와 연결하여 회원가입, 로그인 기능까지 구현해보았습니다. 지금 듣고 있는 강의가 끝나면 리액트(+타입스크립트) 강의를 들을 예정이고, 그 다음은 NEXT.js 강의를 들어볼 생각입니다. 언어 공부하는 건 되게 재밌습니다. - 고민 1. 초반에 쉬운 문법은 사용할 구석이 되게 많아보였는데 지금 배우고 있는 내용을 접목할만한 실습 예제를 못 찾고 있습니다. 그래서 현재 배우는 내용은 그냥 아~ 그렇구나 정도로 넘기고 있습니다. 언제쯤 부트캠프나 작게라도 협업 프로젝트를 해야할지 궁금합니다. 2. 저는 컴퓨터 공학적 지식, 수학적 지식이 전혀 없습니다. 딴에는 필수는 아니라고 하시지만, 코딩 면접에서 치루게 될 문제(백준, 프로그래머스 예제들)을 보면 수학적 지식이 꽤나 중요하게 작용할 것으로 보입니다. 또, 면접에서 공학적 내용에 대해 질문할텐데 이 부분은 어느 정도 레벨까지 올려아할지 궁금합니다. 지금 문법 공부에만 하루 6시간을 쓰고 있는데 더 할애해서 공학적 지식과 수학 공부를 해야할지 고민됩니다. (사실 8시간을 앉은 자리에서 집중하려고 하니 꽤나 힘듭니다ㅠㅠ) 긴 글 읽어주셔서 감사합니다.

react-hook-form 정규표현식 관리 방법

안녕하세요, react-hook-form을 사용해서 프로젝트를 하고있습니다. 정규표현식을 react-hook-form에서 사용할 때 다양한 방법이 있는 것으로 아는데 보통 어떻게 구현하시나요? register함수에 pattern props를 사용하거나 ex) input 태그에 ...register({pattern:~}) yup라이브러리를 사용해서 match 함수를 쓰는 방법정도 찾아본 것 같습니다!