본문 바로가기

코딩이야기45

[Flutter] Mac M2 개발환경 셋팅하기 (Unable to get list of installed Simulator runtimes. 오류) flutter에서 환경 셋팅을 하다보면 생기는 Xcode 오류입니다.빠르고 간단하게 설명하면 xcode에 simulator를 다운받지 않은 상태라서 생기는 오류인데 간단하게 해결할 수 있습니다.  1.  Xcode를 실행 -> window 메뉴 ->  Devices and Simulators를 클릭합니다. 2. Simulators를 클릭 후 왼쪽 하단의 [+]를 눌러줍니다  3. Download more simulator runtimes..를 누르면 나오는 창에서 휴대용 기기 ios버전이 보일텐데 오른쪽에 [get]을 눌러서 다운받습니다.  4.다운로드가 완료되면 터미널을 다시 실행시키고 flutter doctor를 입력합니다.  짜잔! 성공입니다. 여러분은 저처럼 고생하지 마시고 빠르게 해결하세요~~ 2025. 4. 8.
[React] useFormStatus를 사용한 pending 상태 추적 useFormStatus란?React 18에서 도입된 서버 컴포넌트에서 비동기 폼 처리 상태를 관리하는 데 사용폼 제출 중, 폼 제출이 완료되었을 때 등의 상태를 추적useFormStatus 훅은 자신이 위치한 컴포넌트가 폼의 자식이 되어야 하며, 부모 폼의 상태를 감지할 수 있어야 합니다. Button 컴포넌트에 적용export default function Button({ large = false, //기본값 onClick, type, text, ...rest}: ButtonProps) { const { pending } = useFormStatus(); //useFormStatus를 이용하여 부모 form의 pending상태를 알아냄 //useFormStatus는 form의 자식만 쓸.. 2024. 9. 9.
[Next.js] 로그인 하지 않은 사용자의 강제 접속 이슈 (feat.middleware) 문제 상황로그인 하지 않은 사용자가 url을 통해 강제 접속이 되는 보안 이유가 발생하였습니다.ex) 로그인을 한 유저에게만 다른사람의 프로필 페이지나 게시글을 보게 하려고 했는데 게시글 id, 유저 id를 알아내어 url을 통해 강제로 접속 가능한 이슈 이것을 해결하기 위해 Next.js에서 제공해주는 middleware를 사용하였습니다.  middleware란? Next.js 12부터 도입된 기능으로, HTTP 요청이 서버로 전달되기 전에 특정 작업을 수행할 수 있게 해줍니다.미들웨어를 사용하면 요청을 처리하거나 응답을 가로채서 변경할 수 있으며,API 라우트와 페이지의 로직을 더욱 세밀하게 제어할 수 있습니다.  파일 경로 : 프로젝트의 루트 디렉토리 (최상단)파일 이름 : middleware.js.. 2024. 9. 9.
[React] Input 컴포넌트에서 useRef 오류가 날 때 문제 상황 input과 오류 메세지를 컴포넌트로 만들어서 사용하였고 input에 오류 메세지가 뜨면 useRef로 포커스가 되게 하려고 했으나 포커스가 적용되지 않고 오류 메세지가 나오는 현상 input 컴포넌트"use client";interface InputProps { label: string; name: string; kind?: "text"; errors?: string[]; [key: string]: any; //input으로 오는 모든 props를 받게 해놓음}export default function Input({ label, name, errors = [], kind = "text", //kind의 기본값은 text이고 나머지값들은 객체로 받아옴 ...rest //inp.. 2024. 9. 9.