👊 과제 제출까지 2일 남았다... 빨리!!!!!
집중도 1~5 (4.3)
' 고작 좋은 습관 연속으로 다시 가져간 지 7일 정도밖에 안 됐는데 상태가 이전보다 더 빠르게 좋아지고 있다. 오늘 오전~ 저녁 먹기 전까지의 시간에 집중도가 진짜 미쳤었다!!. 근데도 집중도 점수가 오늘도 4.3인 이유는 저녁 10시부터의 집중력이 뭔가 아쉬워서?다. 항해 시작했을 땐, 저녁 9시 끝나는 시간까지 집중력이 원하는 정도로 유지되면 좋아하고 만족했었는데 이젠 9시 이후가 탐난다. // 점심 먹고 중국어 공부 시간 끝나고 바로 코딩하는 게 아닌 저녁에 해야 할 책 읽기를 잠깐 했었는데.. 음 되게 좋은 것 같다. 집중력이 낮아질 저녁 시간에 습관을 지켜야 한다는 부담감이 줄어드니 꾸준히 가져가야 할 습관을 쉽사리 놓칠 거 같지가 않다. 굿. '
6/7 화
기억할 것
-
액션생성함수, 액션타입를 리듀서 페이지에 만든 후, useEffect로 액션함수를 실행시켜 리듀서로 값을 받고 싶은 페이지에서 리듀서 페이지에 있는
액션함수에게 디스패치 보내고 거기서 액션함수<미들웨어>가 작동하고 미들웨어 끝부분에 디스패치를 써서 위의 액션 타입을 이용하여
리듀서에게 타입을 보내줘 리듀서를 작동시킨다. !!!!!!!
-
!!!! async를 거치면 promise가 되고 await 은 뒤에 있는 promise로 된 것의 값을 보이게 해준다.
-
!! 반응형 홈페이지란?
반응형 홈페이지란 접속자(사용자)의 화면 크기에 반응(Response) 한다고 해서 반응형 홈페이지라고 부르게 되었습니다.(Responsive Web)
아하 그래서 태형님이 width, height 등 다 px로 고정이 아닌 %로 하시는 거구나. ( 모바일, 컴퓨터로 봐도 내가 원하는 대로 보이기 위해 )
// 찾아보니 리액트 훅으로 손쉽게 해결하더라 그 리액트훅 찾아서 어느정도 다 만들고 사용하여 반응형 웹페이지로 만들자
오늘 할 일
-
근영님이 스타일 컴포넌트 하신 방법에 대한 얘기 다시 떠올리기. 기능 구현 먼저하고 그런 식으로 css 관리할 것 !!!!!!
-
!! 내일 팀과제 발표 diy 내일 해야함 ( 5시 ! ) useeffect를 하자! < useeffect를 해서 내 머릿 속 리액트가 굴러가는 흐름을 그리고 팀원에게 도움이 되자 >
-
!! 내일 cs 발표 준비 해야함....
-
navbar 구현 %%%%%%%%해결
-
일단 post 부터 만들고 거기서 내용 추가하고 홈 화면에 데이터 가져와보자 ! %%%%%%%%해결
-
CRUD 구현 %%%%%%%%반만 해결
-
위에 껄 다 했다면 이제 CSS 들어가면 됌 ( 여기서 스타일 컴포넌트 디테일하게 다루는 법을 알아야함 !! ) 일단 과제 완성하고 그 다음에 내가 만든 것에서 어느 css가 스타일 컴포넌트로 더 효율적이게 만들 수 있었나 뜯어 고쳐볼 것 &&
-
!! 회원가입에서 각자 프로필에 이미지까지 넣었으니 이건 이제 getdoc해서 가져오면 됌 !! 저번에 했던 거임
( 하... 뭔가 내가 정확히 모르는 걸 명확하게 말할 순 없겠지만 아마... 어떤 걸 매니저님 처럼 리듀서 파일에 넣어두고
어떤 것들을 컴포넌트에서 useeffect로 디스패치하고 어떤 걸 데이터만 빼와야하는지를 모르는 것 같다.
이건 빨리 과제 끝내고 매니저님 강의 영상 보고 내꺼 코드들 자리 옮기면서 내 머릿 속 로직을 정리하자. !! ) %%%%%%%%해결 -
!! 리액트 심화 강의에서 상태관리에 내가 4번에서 원하던 것들이 있는지 한 번 봐보자. x
-
아ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ 확장 프로그램 잘못 깔았다가 bg 색이 안 먹힌다......... %%%%%%%%해결
-
내일 발표!!!!!!!!!!
-
??!! 폰트 넣는 법 알아내기 &&
-
매니저님이 미들웨어 이용해서 어떻게 전체 틀 짜는지 녹화된 영상 먼저 빠르게 보고 만들어보자 %%%%%%%%해결
-
??!! useEffect(()=>{ 가 언제 있어야 하고 필요없느지 정보를 추가할 땐 필요없는 거 같고 &&
로드할 땐 필요한 듯 왜 두 상황에 차이점이 존재하는지??
해야할 것
-
!! 홈 화면에서 슬라이드로 옆으로 돌리면서 내가 올렸던 북들 돌려볼 수 있게 만들기, 이걸 carousel이라고 하는구나!!! &&
( https://react-bootstrap.netlify.app/components/carousel/ ) -
!! globarstyle( ) 이거에 대해서 공부할 것 너
~~~무 유용하다. ( 폰트를 모두 적용, 색상을 모두 적용 등 ) &&
고민, 질문
-
??!! 매니저님에게 부트스트랩의 Container를 만약에 따와서 쓴다고 했을 때 그것의 위치가 맘에 안 들어서 조정을 하려한다면
무조건 class 넣어서 조정해줘야하는가? 이에 대한 질문은 매니저님이 말씀하시는 방향이 css 파일을 웬만하면 안 만들고 스타일컴포넌트로
간단하게 조지는 걸 추구하는 것 같다라고 생각해서 여쭤보는 것임 class 넣어서 하는 내 방식이 구시대적인 불필요한 것들을 추가시키는 게 아닐까? 란 생각 떄문 &&
-
?? !!! 리액트 실행 시키고 무슨 문제 때문에 그러는지 모르겠느데 css가 먹혔다가 안 먹혔다가 계속 그럼 그냥 내 문제인지 알았느데
그런 현상을 몇 번이고 보니 내 문제가 아닌 컴퓨터상의 문제가 있는 거 일 수 있겠구나 싶음 %%%%%%%%해결 ( 그래서 부트스트랩을 안 쓰려고 하는 것임. 제한된 스타일을 제공하니 )
-
?? !! async의 정확한 역할, 얘는 await 없이 혼자 쓸 수 있음 근데 await은 async 없음 못 씀
-
?? !! forEach((doc) => {
// console.log(doc.data());
detail_list.push({ id: doc.id, ...doc.data() }); forEach 배열 함수 그 안에 콜백 넣은 게 무슨 의미인지? && 콜백 또 보기
오늘 배운 것
-
async만 쓰면 값이 promise로 나옴 그치만 await을 쓰면 프로미스를 반환하는 값이 나옴 그러므로
async만 쓰는 건 되는데 await만 쓰는 건 안 됨 왜냐? 프로미스 자체가 존재하지 않는데 프로미스 값을 어케 반환하나? %%%%%%%해결 위에
-
싱글쓰레드 ( 일꾼 한 명이라는 뜻 ---> 자바스크립트는 한 번에 돌아감 그래서 비동기 통신이 필요한 것.)
과제 전략
-
사용자 지정 레이아웃이 다음 페이지에서 보여야함.
즉 각 레이아웃 별로 새로운 페이지가 보이게 만들어야함.
( 샘플대로 하면 너무 홈 화면에서 보이는 내용이 너무 통일성이 없으니 레이아웃 기능을 넣는 게 핵심이니
레이아웃 선택으로 인해 그 사람이 정한 책 이름이 왼쪽에 세로로 or 위에 일반적인 형태로 보이는 두가지를 사용자에게
제공하자. ) -
배경을 내가 생각한 형광등 사진으로 하고 그 중앙에 carouser?인가 머시기 넣고 그 왼쪽에
( https://codingnoona.thinkific.com/courses/take/3/lessons/34267568-13 ) 이거 11분에 해당하는 것 처럼 해서
왼쪽에 쓸 글씨를 부각하자. <왼쪽이 점점 어두워지게 >
-
홈은 아까 내가 생각한 대로 하고 레이아웃 구성은 하나를 선택해서 디테일하게 볼 때
그때 위엔 사진 아래 컨텐츠인데 거기서 왼쪽에 제목 or 위에 제목 or 오른쪽 제목 선택지를 주자
그 선택지를 누를 때 제목의 위치가 변하지만 그와 동시에 컨텐츠( 글 )의 위치 또한 같이 변한다.!
