삐옹

오늘은 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의 값은 빈 객체로 뜬다...

내가 담당한 페이지들의 UI를 만들었다. PR 날리면 충돌 많이 나진않겠지.. 페이지별로 짰으니까 많인 없길 바란다. 백엔드와 협업을 시작하니 소통해야 할 부분도 알아야 할 것들도 확실히 많다. 특히 서버에 보내는 요청과 응답에 대해서 주말에 잘 알아놔야겠다. 어떻게 백엔드와 프론트엔드가 소통하는지 큰 그림을 이해하는 것도 필수. 요즘 바쁘다는 핑계로 자꾸 회고, 알고리즘 풀이와 정리, CS를 게을리하고 있다. 밸런스 맞게 성장해야된다고. 그래도 CS랑 알고리즘 스터디 덕분에 여자처차 꾸준히 하고있긴하다. 회고 안하면 다 소용없어!

1주차 때 했던 미니프로젝트의 완벽한 연장선이다. 처음으로 백엔드와 협업을 하는 기회이기 때문에 잘 하고 싶은 마음이 크면서도, 너무 무리한 기능 구현은 하지 말자는 생각이 동시에 든다. 그래도 재밌을 것 같다! 오늘은 백엔드분들과 와이어 프레이밍을 짜보고 구현할 기능들의 API에 대해서 내용 공유해보는 시간을 아주 오랫동안 가졌다. 확실히 꼼꼼히해 놓는 만큼 후반에 가서 웃게 되겠지!

참 바빴던 주차였다. 초반에 리액트 기본내용 공부하다가 주말지나고 과제를 하려니까 조급했던 것 같다. 딴거말고 과제 구현에 먼저 달려들어볼껄 하는 아쉬움이 크다. 하지만 어제 "살 팔다 개발자" 김병욱 멘토님의 특강에서 들은 이야기 덕분에 완성하지 못 했다는 사실이 그만큼 큰 실망감으로 다가 오진 않는다. 일희일비하지 말기. 내가 좋아하는 말이다. 어느것에도 휘둘리지말고 나를 믿고 계속 정진하면 된다. 그거면 끝이다. 과제 완성 결국 못함. 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..

항해톡은 늘 어렵다. 여전히 긴장도 많이 된다. 오늘 발표가 끝나고 영상을 녹화해서 돌려봤는데 보완해야할 부분이 명확히 보였다. 말 쓸데없이 띄어 말하지 말기, 더듬더듬 금지(이건 자신감 문제 같은데), 머릿 속이 하얘진게 보인다(연습 할 때 생각하면서 다음에 무슨 말을 할지 생각해보자) 배운 것 firebase(serverless, baas) firestore: firebase에 포함된 서비스, 확장성이 좋은 NoSQL 클라우드 서비스. 구조는 Collection(document의 집합), Document(JSON)가 있다. 순서 : Firebase 프젝 만들기 - firestore 설치, 설정하기 - firebase 연결하기 - 사용 MVC패턴 : 애플리케이션 개발에 있어서 유지보수, 관리, 확장성,..

배운것 React React Redux의 흐름 리덕스와 컴포넌트 연결 *useDispatch(수정해줘) ,useSelector(갖다쓸게) - action을 부른다 *??? - reducer *새로운 상태값 만들어 반환 - store *reducer (+ options)들을 combine 하여 createStore - 컴포넌트에서 데이터 사용 useRef useRef를 쓰는 이유는 관리하는 변수 값이 바뀐다고해서 컴포넌트가 리렌더링되지 않기 때문입니다. 고유한 값을 설정해야할 떄 유용합니다(이를테면 id 값을 설정 할 때).리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 수 있는 반면, useRef 로 관리하고 있는 변수는 설정 후 바로 ..