일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- CI/CD
- 개발
- Github Actions
- socket.io
- previousState
- Preview
- 7기
- react
- 라우팅
- 스파르타코딩클럽
- routing
- route
- qwe
- 채팅방
- updater
- 항해99
- 후기
- FileReader
- useEffect
- S3
- 비동기
- 접근 제한 라우팅
- 동기
- rendering
- setstate
- 배포
- Redux
- 브라우저 렌더링
- imagePreview
- 미리보기
- Today
- Total
목록분류 전체보기 (105)
삐옹
만만히 봤다. 백엔드의 기능요청 제안은 매우매우 조심히 신중하게 받아야 한다는걸 알게되었다. 다른 팀들에 비해서도 많았던 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일을 밤 샜는데..(중간에 잠도 많이 잤다 밤새는건 무리야) 다이소에서 커다란 화이트 보드를 하나 샀다. 공부를 하다가 화이트 보드에 계속해서 큰 플로우를 그려보려 노력한다. 복잡하고 뒤죽박죽이던 내용들이 차근차근 정리된다.
심화주차 팀과제 1번 확실히 알고 넘어가기 Q1) s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요? 내가 이해한 것 : SPA의 동작방식에 의하여 첫 페이지를 로딩하기 위해서 설정해놓은 어떤도메인.com으로 가야만 서버에서 그에 필요한 정적파일()들을 받아온다. -> 이거 솔직히 이해안감 Custom Hook 왜 쓸까? 중복 로직 제거 어떻게 쓸까? 자바스크립트 함수에서 같은 로직 공유할 떄 다른 함수로 분리하는 것과 똑같다. 중복 로직이 담긴 컴포넌트를 분리하는데 Hook 또한 함수이기 때문에 인자를 넘기는 등의 같은 방법을 사용할 수 있다. 상태를 리턴한다 커스텀 훅의 이름은 use로 시작해야한다. 각 커스텀 훅의 state는 독립..
리액트 숙련 주차가 시작되었다. 시간이 정말 정말 빠르게 흐른다. 이번 주까지는 자바스크립트 기본을 다져놓으려 한다. 리액트만 주구장창 보자니 자바스크립트랑 소원해진 느낌이 들어서 빠르게 드림코딩의 브라우저101강의를 훑어보고있다. 웹 애플리케이션에 대한 전반적인 내용을 훑어주는 강의라 지금 같을 때 꼭 나에게 필요한 강의이다. 브라우저가 어떻게 HTML파일을 읽어오는지, DOM, CSSOM, Render tree에 대해서 배웠다. 옛날엔 너무나 혼란스러웠던 내용들이 이젠 '아~ 이래서 이걸 쓰는구나' 하며 짐짓 이해를 하는 내 모습이 대견하게 느껴졌다. 성장을 하고 있긴한가보다. 예쁜 분홍색깔 찾음: #E0529D 배운 것 Javascript Compiler vs interpreter Compiler ..
리액트 숙련 주차 개인과제와 팀과제 제출을 했다. 마지막에 firebase 쪽에서 에러가 나서 1시간 넘게 고군분투하다가, 결국 다른 분들의 도움을 받아 해결한 뒤 제출했다. 옛날에 결제했던 엘리님의 자스 강의 복습 중. 엘리님 강의가 이렇게 재밌었나? 배운 것 [Firestore] firebase에 포함된 서비스, NoSQL 클라우드 DB 구조 : Collection(document의 집합), Document(JSON) [Javascript] 브라우저 사이즈 Window.size.width Window.size.height : 모니터 창 크기 window.outerWidth window.outerHeight : 브라우저 크기(탭, 스크롤바 포함) window.innerWidth window.innerH..