글 목록 에서 이미지를 출력하기 위해 어떻게 해야 하나 고민을 하였다. 1. 제목에 글의 카테고리를 달아서 해당 부분을 읽어 디폴트 이미지를 출역한다. ex) react_how use to react 제일 앞 부분 react를 읽어와 저장되 있던 react 디폴트이미지를 출력 2. fs을 사용하여 json 파일을 만들때 파일 내용의 제일 첫 이미지를 json 파일에 추가하여 출력하기 간단하게 첫번째 방법을 사용하려고 하였지만 같은 이미지들이 반복적으로 나열되는 것이 보기가 좋지 않아서 두번째 방법을 사용하였다. fs.readFile(`./Assets/${name}/${filename}`, "utf8", function( err, data ) { try { if (err) throw err; const r..

오역자들 프로젝트의 전체적인 부분에 대한 중간 점검을 진행 하였다. 우선 1차 완성 범위를 어디까지로 할지 정하였다. 그리고 해당 파일의 title로 분류를 하기 때문에 title 규칙을 정확하게 정하였다. 프로젝트 진행도를 체크하였고 완성도가 낮다 하더라도 우선 빠르게 배포하는 것을 목표로 잡았다.

스타일드 컴포넌트를 사용하여 반응형 UI를 만드는 방법에 대해서 번역을 해보았다. 크기마다 각각의 breackpoint를 준다. 최대 크기 768px 화면은 **xs** 최대 크기 992px 은 **sm** 최대 크기 1200 은 **md** 저것 보다 큰 모든것은 **lg** 만약 우리가 column의 범위를 md 6으로 설정했자면 당신은 기기 에서 ```javascript width: 50%;```를 얻을 것이다. 만약 당신이 screen의 너비가 992px를 초과하고 md의 column 범위를 설정하지 않는다면 우리는 너비를 설정하지 않을 것이다. 이 방법으로 column은 항상 다음으로 작은 열 범위의 너비를 가지거나 아무것도 설정 되지 않은 경우 100%가 된다.

프로젝트의 페이지를 꾸미는데 css의 부족함을 느끼고 css와 styled-component에 대한 강의를 들었다. 이를 토대로 그래도 꽤나 볼만한 UI를 만들어 보아야 겠다.

이전에 했던 Trello 프로젝트의 에러를 수정 하였다. 로그인 할 경우 상단 왼쪽 name 버튼이 로그인한 사람의 이름으로 바뀌지 않는것이 문제였다. 렌더가 제대로 이루어지지 않아서 생긴 문제였다. 원래 user 컴포넌트에서 해당 부분의 데이터를 스테이트로 받았지만 그 부분을 App에서 받아주는 것으로 변경을 하였다. signin 컴포넌트에서 로그인이 되면서 App의 스테이츠 값이 변경되고 그 값을 userinfo 컴포넌트로 내려주는 식으로 만들었다.

서버가 없기 때문에 json 파일로 저장되어 있는 제목과 작성자 정보를 바로 import하여 뿌려주었다. 리엑트에선 map을 사용해야 했기 때문에 객체 형식인 json을 배열로 바꿔줄 필요가 있었다. Object.entries 란 함수를 사용하였고 이 함수는 객체를 배열로 바꿔준다. let obj = {a:1} let arr = object.entries(a) console.log(arr) // ["a",1] var articleArr = Object.entries(articleData) render 부분에서 map을 돌려 바로 넘겨 주었는데 return 을 사용하지 않으면 값이 넘어 가지 않았고 return을 사용하면 첫번째 값만 넘어가졋다. 그래서 변수를 설정하여 해장 변수에 값을 담아준 다음 렌더하..