일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- Redux
- react
- updater
- rendering
- imagePreview
- 개발
- 채팅방
- CI/CD
- 브라우저 렌더링
- Github Actions
- qwe
- 스파르타코딩클럽
- setstate
- 동기
- useEffect
- 항해99
- 7기
- previousState
- 접근 제한 라우팅
- socket.io
- route
- Preview
- routing
- S3
- 미리보기
- 후기
- 비동기
- 라우팅
- FileReader
- 배포
- Today
- Total
목록전체 글 (105)
삐옹
어제부터 6주 간의 실전 프로젝트가 비로소 시작되었다. 디자이너님과의 프로젝트 주제 선정에서 작은 의견차이가 있었는데, 당연한 일이다. 각자가 가진 열망이나 니즈는 다르니까. 처음 만난 디자이너님이었기에 어떻게 대해야할지, 어떤 식으로 진행을 해나가고, 디자이너님의 영역을 건들지 않는 선에서 우리의 뜻을 전해야하는지 많이 어려웠다. (미팅 시간도 충분치 않았음 ) 하지만 다행히도 의견이 맞춰졌고 오늘 기획과 와이어프레이밍 부분에서 꽤나 값진 진전이 있었다. 실시간 채팅 토이프로젝트를 위한 socket.io 와 자바스크립트 기본을 다져가고있다. 이번 프로젝트에 실제로 들어갈 기능이라 실시간 채팅을 공부하는게 재미있다. 배운 것 드림코딩 1. Bubbling, Capturing: 이벤트가 자식-> 부모로 전..
스펙 React, Redux toolkit, middleware 상황 axios로 받아온 값을 화면에 렌더링 해주려고 하니 자꾸만 값이 undefined라고 뜬다. 받아온 값은 콘솔에 잘 뜨는데 대체 뭐가 잘 못된걸까. 시도 이 에러가 뜨는 경우는 받아온 값이 아직 다 받아지기 전에 화면에 뿌려주려고 할 떄 빈번히 일어난다. 그래서 3가지를 먼저 시도해보았다. 1. &&연산자와 조건문 const PostDetail = () => { const params = useParams(); const boardId = Number(params.postId); const dispatch = useDispatch(); const post = useSelector((state) => state.postReducer);..
서론 진행 중인 프로젝트에 업로드 할 파일의 이미지를 미리보여주는 기능을 넣어 보고싶어서 내용을 알아보다가, 단순히 코드 복붙을 하고 싶지않아 정리하게 되었다. Web API 인 FileReader라는 객체를 이용하여 구현해보았다. React에서 이미지 미리보기 마크업 ... const [imgSrc, setImgSrc] = useState(""); return( 이미지업로드 {imgSrc && } { encodeFileToBase64(e.target.files[0]); }} /> ) ... 동작원리 onChage함수 안에서 e.target.files를 콘솔에 찍어보면 선택된 파일의 목록(FileList)이 나온다 fileList를 자바스크립트에서 파일에 접근할 수 있도록 한다 file 객체를 읽어서 b..