차곡차곡 쌓기 차곡차곡 쌓기

1. 내가 작성한 로그인 상태 유지 버튼 HTML 삽입 미리보기할 수 없는 소스 내가 만들 때는 그냥 체크 되는 것만 생각해서 checkbox가 아니라 그냥 이미지로만 넣고 JS로 토글을 넣어줘서 체크되게끔 만들었다. 2. 교안을 보고 다시 만들어 본 것 HTML 삽입 미리보기할 수 없는 소스 checkbox를 커스텀 할 수 있다는 것을 처음 알았고, CSS로만 구현할 수 있다는 것에 놀랐다. CSS로만 구현하려고 했을 때 :focus를 줘서 이미지를 변경시켰지만 다시 눌러도 해제되지 않아서 포기하고 JS를 구글링해서 찾았었다... 신비로운 CSS의 세계... https://velog.io/@sabit97/input-checkbox-%EC%BB%A4%EC%8A%A4%ED%85%80 input checkb..

1.useEffect란? React 컴포넌트에서 부작용을 관리하는 Hook. 부작용의 예로는 데이터 가져오기, DOM 직접 업데이트, 타이머 등이 있다. useEffect는 두 개의 인수를 사용할 수 있다. 두번째 인수는 선택사항. useEffect(, ) 2. 사용 법 import { useEffect } from "react"; 먼저 useEffect Hook을 import 해온다. function Timer() { const [count, setCount] = useState(0); useEffect(() => { setTimeout(() => { setCount((count) => count + 1); }, 1000); }); return I've rendered {count} times!; } ..

(+ 저는 리액트에서 사용하였습니다.) 1.URL.createObjectURL() 이 뭐지? 주어진 객체를 가리키는 URL을 DomString으로 반환. 해당 URL은 자신을 생성한 창의 document가 사라지면 함께 무효화 됨. 2. 사용법 const objectURL = URL.createObjectURL(object) object 객체 URL을 생성할 File, Blob, MediaSource 3. 내가 활용한 방법 우선 input을 만들어 준다. (나는 input은 보이지 않게 하고 label 클릭 시 input이 작동하도록 했다.) // 이미지 미리보기 function handleImgPreview(e) { setPreview(URL.createObjectURL(e.target.files[0]..

form에 너무 많은 input이 있었는데 하나하나 useState로 관리하기 싫었고 사실 그렇게 작성하면서 이게 좋은 방법인가? 하는 의문이 생겼다. 그러던 와중에 이 글을 발견했는데, 이 글을 보고 따라하니 여러개의 input을 하나의 state로 관리할 수 있어서 좋았다! const [inputs, setInputs] = useState({ receiver: '', phone_number1: '', phone_number2: '', phone_number3: '', zip_code: '', address1: '', address2: '', address_message: '', }); 우선 inputs를 만들고 초기값을 객체로 줬다. const { receiver, phone_number1, phon..

시작에 앞서 https://styled-components.com/docs/basics#adapting-based-on-props 이 문서에 있는 내용을 바탕으로 작성하였습니다. 1. styled-componeent란? CSS-in-JS 스타일링 프레임 워크 2. 특징 및 이점 📌 페이지에 렌더링 되는 구성 요소를 추적하고 스타일만 자동으로 넣어준다. 코드 분할과 같이 사용하면 사용자가 필요한 코드를 최소한으로 로드할 수 있다. *코드 분할 : 런타임에 여러 번들을 동적으로 만들고 불러오는 것 ( 가장 좋은 방법 import() 문법 사용하기 자세한 내용) 📌 클래스 이름 버그가 없다. 스타일에 대한 고유한 클래스 이름을 생성. 중복 또는 철자 오류에 대해 걱정할 필요가 없음. 📌 쉽게 CSS를 삭제할 ..

전에 youth-gallery 팀 프로젝트를 할 때는 매번 baseURL과 headers를 적어줬었던 것 같다. 헷갈리기도 하고 혹시 잘못 적어 어이없는 오류가 발생할 수 있기 때문에 이번 개인 프로젝트에서는 axios.create()를 사용하기로 했다. 1. 간단한 소개 const instance = axios.create({ baseURL: 'https://some-domain.com/api/', headers: { 'X-Custom-Header': 'foobar' }, timeout: 1000, }); 위의 예제처럼 만들어주면 되는데... 엄청 간단했는데 왜 알고 있었는데 전에는 사용하지 않았을까 싶은 마음이 든다. 2. 내가 활용한 방식 우선 나는 토큰을 포함한 것과 토큰 없이 baseURL만 있..

1. 간단한 소개 useState Hook을 사용하면 함수 구성 요소의 상태를 추적할 수 있다. 내가 주로 사용했을 때는 값을 변경시키고 그걸 반영해야할 때 자주 사용했다. ex) 버튼을 누르면 true 혹은 false로 바뀌어야 할 때, 버튼을 누르면 1씩 증가 2. 사용법 우선 이 Hook을 사용하려면 import 해와야 한다. import { useState } from 'react'; export default function App() { } import 해왔다면 import { useState } from 'react'; export default function App() { const [count, setCount] = useState(0) } const [변수명, count를 갱신할 수 ..

상품을 등록할 때 이미지도 서버에 전송해야하는데, 어떻게 해도 제대로 보내지지 않아서 엄청난 삽질을 했다. 1. 내가 한 어이없는 실수 // 미리보기 이미지 const handleImageInput = (e) => { setPreview(URL.createObjectURL(e.target.files[0])); }; 이건 이미지 미리보기를 구현한건데 이 값을 그대로 보내려고 했다… blob:http://주소/cb21c13b-1944-42ad-8aa4-94611177989a 이렇게 나와서 또 다른 실수를 하고야 마는데 … 앞에 blob:을 자르고 보내려고 한다 🤦‍♀️ (당연히 보내질리가…) 뭔가 FormData 를 사용해야하는 것은 알겠는데 … 명확하게 어떻게 사용해야할지 몰라서 굉장히 많은 방황을 했다...