일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 접근 제한 라우팅
- 후기
- 항해99
- 배포
- routing
- 7기
- 개발
- FileReader
- 브라우저 렌더링
- Github Actions
- route
- Redux
- setstate
- 채팅방
- 스파르타코딩클럽
- previousState
- socket.io
- updater
- 라우팅
- CI/CD
- useEffect
- 비동기
- S3
- Preview
- 미리보기
- rendering
- qwe
- react
- 동기
- imagePreview
- Today
- Total
목록2022/06 (24)
삐옹
Show me your place 초기목표는 무엇이었는가? 게시글을 올리고 좋아요, 댓글, 스크랩 기능을 쓸 수 있는 기본적인 sns 서비스 구현. 실제 어떤 일이 일어났는가? 구현 성공 게시글 작성, 댓글 작성 기능 구현 *댓글은 새로고침해야 업데이트가 이루어진다?! 구현 실패 게시글과 댓글의 수정, 삭제 기능은 아예 손도 못 댔다.. 마이페이지(내가 쓴 글과 스크랩한 게시물 확인 가능) 초기목표와 실제 결과의 차이는 왜 발생되었는가? 기본 기능을 구현하는데 시간을 많이 할애했다. 백엔드에서 이미지를 업로드하는 부분이 막혔다고 나도 마음이 붕 뜬것이 한 몫 했다. 모든 api의 시작점이 되는 게시물을 작성, 조회하는 기능을 빠르게 만들었으면 좋았겠지만, 그 시간에 mockAPI로 알맞은 요청값들을 미리..
const DetailComment = ({ boardId }) => { const [newComment, setNewComment] = useState(""); const [commentArray, setCommentArray] = useState([]); const updateComment = (e) => { setNewComment(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); const currentKey = localStorage.getItem("jwt-token"); if (newComment === "") { alert("내용을 입력해주세요"); } else { axios .post( `http://3.39.223..
오늘은 axios를 통해 서버에서 가짜 데이터를 불러와 메인페이지와 상세페이지에 뿌려주는걸 성공했다. 메인페이지를 성공하니 도미노처럼 상세페이지도 생각보다 쉽게 성공했다. 이 시간까지 안 잔 보람이 있는 하루. 서버 구현에 대한 부담이 줄다보니 과제를 하면서 아쉬운 부분들이 점점 더 눈에 들어오기 시작했다. 라우팅, 컴포넌트 재사용, 폴더 구조에 대한 부분들을 잘 배워서 꼭 리팩토링해보고 싶다. 오늘 배운 것 login 상태에 따라 다른 화면 보여주기 해결법 Nested routing + Outlet 동적라우팅 해결법 Url parameter + useparams [url접근 억제] https://velog.io/@hyewonkkang/react-router-dom-%EA%B6%8C%ED%95%9C-%E..
만만히 봤다. 백엔드의 기능요청 제안은 매우매우 조심히 신중하게 받아야 한다는걸 알게되었다. 다른 팀들에 비해서도 많았던 api기능들을 그래도 열심히 하면 되겠지 라고 생각했는데 개뿔. 게시물 올리는 페이지에서 여러 이미지 파일의 url가지고 오는걸로만 4시간은 썼다. 왜 아까 잘 되던 코드가 불통이 되어 버린 것일까. 분하다. 내일 계속. 오늘 배운 것 react에서 Img파일 업로드하기 1. type="file"의 input을 만든다. 2. 여러 이미지를 추가하려면 multiple 필수. 업로드 가능한 이미지 파일 지정은 accept 속성에서 한다. 3. fomr 안에 있는 input들의 값은 formData로 관리할 수 있다.(텍스트, 파일 등) *단 가져온 formData의 값은 빈 객체로 뜬다...
Axios : Promise Api를 활용해 브라우저의 비동기 통신을 돕는 라이브러리. 사전 필수지식 XMLHTTPRequest : XMLHTTPRequest 객체 Fetch API Promise *동기, 비동기가 없다고? 구글에 동기비동기라고 검색만해도 수두룩하게 나오니 이 글에선 다루진 않을 것이다.
1. 회고 1) 리액트 심화 주차 개인 과제 결론부터 말하자면 미완성으로 제출을 했다. 로그인과 회원가입, 게시물 작성 페이지들의 기능 구현까지는 성공해냈다. 제출 시간을 훌쩍 넘긴 새벽까지 게시물 정보들을 DB에서 가져와 화면에 뿌려주는 부분에서 막혔다. 시간이 좀더 있었다면 완성 할 수 있었을거라고 스스로 위안하며, 새벽까지 골머리 앓다가 결국 세상의 모든 번뇌를 내려두고 제출을 했다. 아쉬움이 많았던 과제였지만 DB서버와 프론트가 어떻게 통신하는지 큰 그림을 이해하는데 도움이 되었던 시간이었다. 2) 첫 협업 이틀 전부터 첫 협업을 시작했다. 백엔드 3명, 프론트 2명이 하나의 프로젝트에 착수하여 1주일 동안 팀으로 작업한다. 필요한 API를 설계하고, 와이어 프레이밍을 하고, 뷰를 만들고 분업을 ..
내가 담당한 페이지들의 UI를 만들었다. PR 날리면 충돌 많이 나진않겠지.. 페이지별로 짰으니까 많인 없길 바란다. 백엔드와 협업을 시작하니 소통해야 할 부분도 알아야 할 것들도 확실히 많다. 특히 서버에 보내는 요청과 응답에 대해서 주말에 잘 알아놔야겠다. 어떻게 백엔드와 프론트엔드가 소통하는지 큰 그림을 이해하는 것도 필수. 요즘 바쁘다는 핑계로 자꾸 회고, 알고리즘 풀이와 정리, CS를 게을리하고 있다. 밸런스 맞게 성장해야된다고. 그래도 CS랑 알고리즘 스터디 덕분에 여자처차 꾸준히 하고있긴하다. 회고 안하면 다 소용없어!
1주차 때 했던 미니프로젝트의 완벽한 연장선이다. 처음으로 백엔드와 협업을 하는 기회이기 때문에 잘 하고 싶은 마음이 크면서도, 너무 무리한 기능 구현은 하지 말자는 생각이 동시에 든다. 그래도 재밌을 것 같다! 오늘은 백엔드분들과 와이어 프레이밍을 짜보고 구현할 기능들의 API에 대해서 내용 공유해보는 시간을 아주 오랫동안 가졌다. 확실히 꼼꼼히해 놓는 만큼 후반에 가서 웃게 되겠지!
현재 상태 게시물 등록을 위해 유저가 기입해야하는 정보들을 Writepost 페이지 내에서 state로 모두 받아오는데 성공. 하고싶은 것 redux를 이용해 state를 관리하면서 firebase에 저장된 게시글 데이터를 화면에 뿌려주기. 해야할 것 state로 관리 중인 유저의 기입 정보들을 전역 상태관리를 위해 Redux를 쓴다. addDoc을 이용해 state를 적절한 doc에 추가.(firebase) usedispatch hook을 이용해 화면에 docs 뿌려주기.(firebase) 시도한 것 고민할 것 redux를 무조건적으로 지양하는건 또 좋지 않다고 하던데. 아마도 props에 의한 데이터의 이동이 별로 없을 땐, 굳이 redux를 쓰지 않아도 괜찮다는 말 같다.(팩트 확인 요망) 그래서 ..
참 바빴던 주차였다. 초반에 리액트 기본내용 공부하다가 주말지나고 과제를 하려니까 조급했던 것 같다. 딴거말고 과제 구현에 먼저 달려들어볼껄 하는 아쉬움이 크다. 하지만 어제 "살 팔다 개발자" 김병욱 멘토님의 특강에서 들은 이야기 덕분에 완성하지 못 했다는 사실이 그만큼 큰 실망감으로 다가 오진 않는다. 일희일비하지 말기. 내가 좋아하는 말이다. 어느것에도 휘둘리지말고 나를 믿고 계속 정진하면 된다. 그거면 끝이다. 과제 완성 결국 못함. 3일을 밤 샜는데..(중간에 잠도 많이 잤다 밤새는건 무리야) 다이소에서 커다란 화이트 보드를 하나 샀다. 공부를 하다가 화이트 보드에 계속해서 큰 플로우를 그려보려 노력한다. 복잡하고 뒤죽박죽이던 내용들이 차근차근 정리된다.