이전에 했던 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을 사용하면 첫번째 값만 넘어가졋다. 그래서 변수를 설정하여 해장 변수에 값을 담아준 다음 렌더하..

fake 데이터를 사용하여 글들을 불러왔다.

프로젝트의 로고와 헤더 부분을 만들었다. 바디 부분의 그리드를 col-6으로 나누었다.

오늘 한일 PWA에 대한 글을 번역하게 되었다. PWA는 웹의 장점과 앱의 장점을 합쳤다고 한다. 번역을 하면서도 딱히 단점을 찾아 볼 수 없었다. 이건 무조건 적용을 시켜야 겠는데?? 라는 생각이 들었다. PWA의 장점 개발, 유지 비용의 절감: 단일 코드베이스에서 지원되는 여러 플랫폼이 있다. 쉬운 배포: 앱 스토어를 통해 배포하는 과정을 거칠 필요가 없다. 사용자 참여: 앱을 닫은 후에도 고객과 다시 교류하기가 더 쉽다. store 수수료 없음: 응용 프로그램의 store는 매출의 30%를 유지한다. 더 작은 크기: PWA는 종종 1MB 미만으로 짧은 시간 안에 다운로두 된다. 더 큰 도달 범위: 검색 가능성과 SEO 영향이 더 높기 때문에 PWA는 일반 기본 앱과 비교할 때 도달 범위가 증가했다...

오늘 한일 영문자료 번역 스터디에서 우리가 번역한 자료들을 공유할 수 있는 웹사이트를 제작하는 프로젝트를 시작하였다. 서버비가 들지 않도록 서버단이 없이 만들기로 하였다. 자료는 git hub 저장소에 정장을 해두고 있었는데 리엑트에서 이 gut hub 저장소 파일을 렌더 하는 것이 가능했다. 우리가 번역한 글을 공유하는 것이 목적이었기 때문에 위의 방법을 채택하였다. 댓글 기능은 discuss를 사용하기로 하였다. 이 프로젝트에서 사용할 스택은 react, react hooks, typescript, stlyed component, sndt desgin, discuss 이다. 프론트 프로토 타입을 제작하였고 나는 메인 페이지를 맡아서 진행하기로 하였다. typescript와 styled componen..