프론트엔드에서 s3에 이미지 파일을 업로드하고, 업로드한 url을 가져와서 미리보기를 통해 렌더했다. 근데 요청도 잘 오는데 , s3주소에 들어가보면 깨진 이미지로 보이고, UI에도 렌더가 깨진이미지로 되어있었다.  s3주소에서 깨진이미지여서 s3에 저장할때 (이미지를 업로드할때)문제가 있을거라고 생각했는데 구글링한 후 한글 파일 이름 때문이라는것을 알게되었다. 찾아보니, 'cat.jpg' => 'https://s3버킷주소.../cat.jpg''고양이.jpg' => 'https://s3버킷주소.../%EA%B3%A0%EC%96%91%EC%9D%B4.jpg'이런식으로 파일이름을 받아서url주소로 인코딩하는 과정에서 한글을 저렇게 바꾸어 놓는것이였다.  그래서 한글이름을 그대로 사용하려면, 인코딩된 주소를 ..

🤔 이미지 업로드란?이미지 업로드는 사용자가 자신의 컴퓨터나 스마트폰에서 선택한 이미지를 웹 서버나 클라우드 스토리지(AWS S3 등)에 보내 저장하고, 저장된 이미지의 주소(URL)를 받아오는 작업입니다. 사용자 → 클라이언트(브라우저) → 서버 → 스토리지(AWS S3) → 서버 → 클라이언트🧠 1. 전체 흐름 이해하기이미지 업로드 기능은 이렇게 동작해요:이미지 선택: 사용자가 이미지를 선택합니다.미리보기: 선택한 이미지를 화면에 미리 보여줍니다.업로드: 이미지를 서버에 업로드합니다.서버 응답: 서버에서 이미지 URL을 반환받습니다.저장: 이미지 URL을 저장해서 나중에 사용할 수 있도록 합니다.📌 주요 파일들hooks/ useImagePreview.ts → 이미지 상태 관리 (미리보기, 선택 ..

https://www.freecodecamp.org/news/react-context-for-beginners/ React Context for Beginners – The Complete Guide (2021)React context is an essential tool for every React developer to know. It lets you easily share state in your applications. In this comprehensive guide, we will cover what React context is, how to use it, when and when not to use context, and lots mor...www.freecodecamp.org 리액트 co..

아직도 이해가........잘... 그래서 한번 하나하나 이해해보자... 로그인을 하면 생성되는 ? uid를 리덕스 스토어에 저장을 하고, 해당 유저의 급여내역을 보여주는데, 리덕스에 저장되어있던 uid로 조회를 한다. 그리고 유저는 ex) 12월의 급여내역을 보면서 해당 월의 정정신청을 할 수 있는데, 정정신청 내용을 파이어베이스로 보내야하고, 정정 신청 내역에서 요청한 내역들을 불러와서 조회할 수 있어야한다.  loginAuthSlice const initialState: LoginState = { uid: null, isLogined: false,};const loginAuthSlice = createSlice({ name: "loginAuth", initialState, reducers: { s..

FirebaseFirebase는 인증 상태를 관리하고, 사용자의 정보를 Firebase Authentication 및 Firestore에서 가져옵니다.onAuthStateChanged 메서드를 사용하여 인증 상태(로그인, 로그아웃)를 감지합니다.ReduxRedux는 인증 상태와 사용자 데이터를 전역적으로 관리하여 다른 컴포넌트에서 쉽게 접근할 수 있게 합니다.Firebase에서 가져온 데이터를 Redux 상태로 업데이트합니다. 흐름으로는 Step 1. Firebase Authentication 상태 감지Firebase의 onAuthStateChanged를 사용하여 사용자의 로그인 상태를 확인합니다.로그인된 사용자가 있다면 user.uid를 가져옵니다.uid를 사용하여 Firestore에서 사용자 정보를 ..

React.FC란?Function Component의 줄임말로 React + TypeScript 조합으로 개발할 때 사용하는 타입함수형 컴포넌트 사용 시 타입 선언에 쓸 수 있도록 React에서 제공하는 타입React.FC 사용해보기 type UserProps = { name: string;}; const Profile: React.FC = ({name}) => { 안녕하세요, {name}님 );export default Profile;React.FC를 사용하는 경우 위와 같이 props의 타입을 Generics로 넣어서 사용한다. React.FC 사용을 지양해야 하는 이유우선 지난 문서이긴 하지만 CRA에서 기본 템플릿에 FC를 빼야한다는 PR이 올라왔고, 그것이 실제로 반영되었다고 한다. 그 이유는..

경고위의 에러 문구는 리액트는 DOM 요소에서 해당 property를 인식하지 않는다. 의도적으로 사용자 정의 속성으로써 DOM에 표시하려면 buttonDisplay 대신 소문자 스팰링을 써라. 라는 말을 하고있다. React에서는 Dom 요소로 props로 전달되는 값들이 유효한 HTML 속성이여야 하는데, 그렇지 않은 속성을 사용하니 경고문구가 나오는 것이다. 더보기➕React에서 DOM 요소로 전달되는 props가 어떻게 처리되는지 살펴보자ㅏㅏReact에서 props와 HTML DOM1. React의 props와 HTML 속성React에서 작성한 컴포넌트의 props는 DOM 요소의 속성으로 전달됩니다.예를 들어, 아래 코드는 className과 value가 HTML 속성으로 전달됩니다:여기서 cl..

왜 그동안 한번도 만들어보지 않았던거지?? 생각해보면..mui 가 있기때문에 만들생각안하고 가져다 쓰기만 했다. 이번 기회에 이왕이면 커스텀으로 만들어보자.>!!! 동작예상:  사용자가 셀렉트 박스를 클릭하면 옵션이 드롭다운 형식으로 나타나고옵션을 클릭하면 선택된 값이 업데이트되고 드롭다운이 닫힌다.React 컴포넌트 설계 상태(State): 어떤 데이터가 동적으로 변경되는가?isOpen: 드롭다운 열림/닫힘 상태.selectedValue: 현재 선택된 값.Props: 외부에서 전달되는 데이터는 무엇인가?label, options, placeholder, value, onChange 등.상태 관리isOpen:사용자가 셀렉트 박스를 클릭하면 열림(true) 또는 닫힘(false) 상태로 변경.useStat..

일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다.하지만 때때로 이런 tree구조가 불편함을 가져다주기도 해서, 이럴 때 부모-자식 관계를 유지하지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있다.  대표적인 예로 modal은 부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야한다.이러한 상황에서 portal을 통해 독립적인 구조와 부모-자식 관계를 동시에 유지할 수 있다면, z-index 등 부모 컴포넌트의 제약에서 벗어날 수 있다. 1. portal로 modal 구현하기2. dim영역 클릭시 모달 닫기3, 브라우저 뒤로가기 방지-> 이벤트 처리  1. portal로 modal 구현하기  Porta..

https://www.acmicpc.net/problem/20546문제 요약목표: 두 투자자, 준현이와 성민이의 투자 전략 중 어떤 것이 더 높은 수익률을 내는지 비교한다.제공 정보:초기 현금14일 동안 매일 변하는 주식 가격 리스트투자 전략:준현이의 "BNP" 전략:주식을 살 수 있으면 최대한 많이 산다.한 번 산 주식은 절대 팔지 않는다.성민이의 "TIMING" 전략:주식 가격이 3일 연속 상승하면 보유 주식을 전부 판다.주식 가격이 3일 연속 하락하면 보유 현금으로 최대한 많이 산다.결과 계산:14일째 (마지막 날) 각자의 총 자산을 계산합니다.자산 = 남은 현금 + (보유 주식 수 × 마지막 날 주식 가격) 문제를 풀기 위한 가정투자 제한:주식을 매수할 때는 가진 돈으로만 사고, 빚을 내지 않습니..

https://www.acmicpc.net/problem/14467문제닭이 길을 건너간 이유는 과학적으로 깊게 연구가 되어 있지만, 의외로 소가 길을 건너간 이유는 거의 연구된 적이 없다. 이 주제에 관심을 가지고 있었던 농부 존은 한 대학으로부터 소가 길을 건너는 이유에 대한 연구 제의를 받게 되었다.존이 할 일은 소가 길을 건너는 것을 관찰하는 것이다. 존은 소의 위치를 N번 관찰하는데, 각 관찰은 소의 번호와 소의 위치 하나씩으로 이루어져 있다. 존은 소를 10마리 가지고 있으므로 소의 번호는 1 이상 10 이하의 정수고, 소의 위치는 길의 왼쪽과 오른쪽을 의미하는 0과 1 중 하나다.이 관찰 기록을 가지고 소가 최소 몇 번 길을 건넜는지 알아보자. 즉 같은 번호의 소가 위치를 바꾼 것이 몇 번인지..

husky ?허스키는 커밋을 남기기 전, 푸시하기 전 등 코드 스타일 및 테스트 통과 여부를 확인할 수 있게 해주는 라이브러리이다.컨벤션을 미리 정해두었음에도 잊어버리는 것이 사람이기에, 이러한 휴먼 에러를 방지에 유익하다. husky적용한 순서1. git 초기화 Husky는 Git 저장소에서만 작동한다..프로젝트가 Git 저장소로 초기화되지 않았다면 먼저 초기화해야한다.git init  2. husky 설치npm install husky --save-dev 설치하면 .husky폴더가 자동 생성된다. 3. package.json에 prepare 스크립트 추가 및 실행 "scripts": { "prepare": "husky install"} 추가해주고 실행하려고 npm run prepare 했을때"hus..

각 페이지에 들어가면 적어뒀던 md 파일 내용이 보이게 해보자 1. post 데이터를 가져와야하는 경로목록을 가져오기 md파일 경로들을 가져와야 하는데 가져올때getStaticPath를 이용해서 id를 가져온 다음에 아이디를 이용해서 그에 맞는 데이터들을 가져오는 것이다.  먼저, lib/post.ts에 getAllPostIds 함수를 구현하여 Markdown 파일들의 경로를 가져옵니다. 그런 다음, Next.js의 getStaticPaths를 이용해 각 파일에 대한 경로를 사전 생성합니다.   /lib/post.ts//md파일을 데이터로 바꾸는 함수import fs from "fs"import path from "path"import matter from "gray-matter"const postsDi..

(설명추가 예정) 1. 설치 방법npx create-next-app ./ --typescript 2. Pre-renderingnext는 모든 페이지를 pre-rendering 한다.이 의미는 모든 페이지를 위한 HTML을 Client 사이드에서 자바스크립트로 처리하기 전에, "사전에" 생성한다는 것이다.이렇게 하기 때문에 SEO 검색엔진 최적화가 좋아진다.  프리렌더로 테스트할때 브라우저에서 js를 사용 못하게 해주면 프리렌더 테스트 가능해진다.  자바스크립트를 disable해줘야한다. https://developer.chrome.com/docs/devtools/javascript/disable?hl=ko 자바스크립트 사용 중지  |  Chrome DevTools  |  Chrome for Develop..

일단 확장자를 전부 JS -> ts로 변경해준다.1. 목표: Redux 상태와 디스패치에 타입 추가Redux 상태(state)와 디스패치(dispatch)에 타입을 추가하여, 다른 곳에서 이를 사용할 때 타입을 명시적으로 지정하지 않아도 TypeScript가 타입을 추론할 수 있게 설정해보자   const {products}= useAppSelector((state)=> state.cart); 이런식으로 우리가 쓰고있는데, state에다가 타입을 넣어줘야한다. console.log(store.getState()) 하면 모든 값들이 온다.2. RootState와 AppDispatch 타입 정의RootStateexport type RootState = ReturnTypetypeof store.getState..