하루 한 걸음, 개발 블로그

import { category } from '../../utils/code'; ... {Object.entries(category).map((item) => ( {item[1]} category는 이렇게 객체이다. export const category = { 0: "커리어고민", 1: "취업/이직", 2: "회사생활", 3: "인간관계", 4: "개발", 5: "IT/기술", 6: "UI/UX", }; 객체에는 map을 쓸 수 없으므로 객체를 배열로 바꿔야 한다. Object.entries(category) category를 객체로 바꾼다는 의미 map key props drilling https://abangpa1ace.tistory.com/255 [JS / Web공통] 링크복사 및 SNS 공유버튼..

사진 미리보기 삭제 구현 const [imageSrc, setImageSrc] = useState(''); ... // preview 삭제 { setImageSrc(null); }; ... https://taehoblog.netlify.app/react/previewimg/ [React] Preview Image - 이미지 미리보기 오늘은 컴퓨터에 있는 이미지를 업로드 하고 싶을 때, 미리보기를 구현해 보려고 한다. 준비하기 파일업로드를 위해서는 form태그의 를 이용해야한다. multipart/form-data에 대해서는 찾아보길 바란 taehoblog.netlify.app 사진 미리보기 삭제 - 삭제 버튼 기본 상태값 false 안 보임 -> 이미지 업로드 버튼 누르면 삭제 버튼이 보이고 -> pre..

Write page 만들기 이미지 프리뷰 만들기 https://nukw0n-dev.tistory.com/30 리액트에서 이미지 미리보기 만들어보기 (React Image Preview) 서론 HTML의 input 태그로 이미지를 핸들링할 때 현재 선택한 이미지를 미리 보고 싶은 경우가 있다. 라이브러리를 통해 구현할 수도 있지만 어떤 방식으로 구현할 수 있을까 고민해보았다. Web API nukw0n-dev.tistory.com 사진 업로드 input type="file" css https://helloinyong.tistory.com/275 input type="file" 커스터마이징 하는 방법 Input File 태그의 기본적인 사용 File 필드를 사용하기 위해선 일반적으로 input type="f..

⭐️ 깃 협업 1. dev에서 내가 작업할 branch 만들기 ex) feature/topbar 2. 로컬 feature/topbar 에서 작업 3. 작업 완료 시 내가 올릴 파일들만 + 선택하고(왼쪽 source control 메뉴에서 하는 것) 이 싸이클을 반복하는 것임 깃 커밋 메시지 잘못 쓴 경우 1. vs code source control 에서 커밋 내역 되돌리기 2. remote 와 local 커밋 내역이 다르므로 그냥 push 하면 오류남 git push -f origin feature/topbar -f force 옵션은 유의해서 사용하기! 공통 컴포넌트만들 때 적용하고 싶은 속성이 있으면 props로 넘겨주기! 코드 한 줄을 생각하고 고민해서 쓰자! 유효성 검사 - 미리 상의가 필요함! ..

📌 폰트 적용 방법 1. 폰트 다운로드 받아서 적용 - assets 안에 fonts 폴더 oft 폰트 파일 넣기 - font.css 파일에 @font-face{} 넣기 *여기서 font-family 이름을 쓰기 쉽게 바꿔도 됨 2. 웹 폰트 적용 - index.html 안에 link href rel 쓰기 - GlobalStyle.js 의 body 안에 fontfamily 쓰기 import reset from 'styled-reset'; import { createGlobalStyle } from 'styled-components'; const Globalstyle = createGlobalStyle` ${reset} *{ box-sizing: border-box; } body{ font-family: '..

댓글 업데이트 commentList.jsx 수정 전 const handlePatch = () => { dispatch(patchComment({ comment, id: params.id })); }; 수정 후 const handlePatch = (comment) => { dispatch( patchComment({ id: comment.id, detailId: comment.detailId, comment: content, }) ); }; content는 새롭게 수정한 comment 내용임. 객체 자체를 갈아끼우는 것이므로 그 형식에 맞게 id, detailId(게시글 id), comment 모두 적어야 함! 수정 전 { handlePatch(); }} > 수정 후 {comments && comments..

createRoot 도 결국 하나의 함수이고 parameter 로는 domNode 를 넘기게 된다. root 라는 아이디를 가지고 있는 Dom 요소를 직접 가져와서 그 하위에 과 같은 하위 컴포넌트들을 렌더링시켜줌 render 함수 안에서 업데이트가 필요한 컴포넌트를 탐색함 컴포넌트의 형태에 맞는 함수를 호출하고 그 결과를 저장한 다음, JSX 문법을 다른 형태로 변환한 뒤 변환되어있는 것에 내장된 함수를 호출해서 최종적으로는 객체를 만들게 됨.

WIL KEYWORD - Axios axios instance, axios intercepter, fetch vs axios import axios from 'axios' // axios 인스턴스를 생성합니다. const instance = axios.create({ baseURL: 'https://api.hnpwa.com', timeout: 1000 }); /* 1. 요청 인터셉터 2개의 콜백 함수를 받습니다. */ instance.interceptors.request.use( function (config) { // 요청 성공 직전 호출됩니다. // axios 설정값을 넣습니다. (사용자 정의 설정도 추가 가능) return config; }, function (error) { // 요청 에러 직전 ..

미니 프로젝트 시작 yarn 설치 명령어 yarn 이렇게 하나의 명령어만 쳐도 그 안의 모듈을 같이 설치해준다. main branch 를 clone 한 후 깃허브에서 dev branch 를 만들면 remote dev branch 가 생긴다. git branch -r 내 vs code 에서 해당 폴더의 원격 브랜치를 확인하면 origin/HEAD -> origin/main origin/dev origin/main 이렇게 확인할 수 있다. 이제 내 local branch에 remote branch dev를 가져와야 한다. git pull origin dev 그러나 내 local branch에 dev가 생기지 않았다. 나의 yarn version 과 remote 에서 설치된 yarn version 이 달랐기 ..

어제 오늘 만났던 수많은 오류들... - .get(`http://localhost:3001/comments`) 여기서 url 을 ‘’로 썼는데 백틱으로 `` 써야 했음 - comments인데 comment로 써서 몇 시간 날리기 - console 창에 뜬 아래의 오류 A non-serializable value was detected in an action, in the path: `payload` -> 미들웨어 추가하니 해결됨 그런데 getDefaultMiddleware 이렇게 보임.. middleware: getDefaultMiddleware({ serializableCheck: false, }), https://guiyomi.tistory.com/116 Redux Toolkit - A non-ser..