삐옹

어제부터 6주 간의 실전 프로젝트가 비로소 시작되었다. 디자이너님과의 프로젝트 주제 선정에서 작은 의견차이가 있었는데, 당연한 일이다. 각자가 가진 열망이나 니즈는 다르니까. 처음 만난 디자이너님이었기에 어떻게 대해야할지, 어떤 식으로 진행을 해나가고, 디자이너님의 영역을 건들지 않는 선에서 우리의 뜻을 전해야하는지 많이 어려웠다. (미팅 시간도 충분치 않았음 ) 하지만 다행히도 의견이 맞춰졌고 오늘 기획과 와이어프레이밍 부분에서 꽤나 값진 진전이 있었다. 실시간 채팅 토이프로젝트를 위한 socket.io 와 자바스크립트 기본을 다져가고있다. 이번 프로젝트에 실제로 들어갈 기능이라 실시간 채팅을 공부하는게 재미있다. 배운 것 드림코딩 1. Bubbling, Capturing: 이벤트가 자식-> 부모로 전..

지난 주에 겪었던 많은 시행착오와 고민들 덕분인지 진행이 보다 수월하다. 어 이거 어제도 쓴 내용인가? 오늘은 내게 담당된 뷰를 구현하고, 나보다 좀더 많은 부분을 담당했던 팀원이 담당했던 로그인과 회원가입 부분을 도맡아서 진행 중 이다. 모달창으로 로그인, 회원가입 기능을 만들기로 했다. 구현 중에 조금 애를 먹었지만 부딫히는 문제들에 하나 씩 접근하며 풀어나가 결국 해결했다. 어쩔지 모르겠을땐 화이트보드 앞으로가서 그려보면 도움이 많이 된다. 내일은 널널하게 쉬다가 저녁부터 해야지. 내일 저녁에 WIL쓰고 기술, 오류정리도 해야된다.. 하기싫어...도 해야지 ^^

오늘은 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..