오늘 한일 특정 Board의 container와 card 를 불러오기 위한 endPoint는 "boards/:id" 이다. id값을 클라이언트 라우팅 값으로 넣어 주기위해서 router parameter를 사용하였다. router parameter React router를 사용한 컴포넌트는 기본적으로 history, location, match 3가지의 props를 전달 받습니다. history : push, replace 를 통해 다른 경로로 이동시키거나 앞 뒤 페이지로 전환이 가능하다. location : 현재 경로에 대한 정보를 지니고 있다. (location.pathname => url 의 path / location.search => 쿼리스트링의 정보) match : 해당 컴포넌트가 어떤 라우트..

오늘 한일 signin 을 했을 때 token 값이 바로 적용이 되지 않았다. render 과정에서 생긴 문제 인것 같았다. this.setState({success: result.success}) sessionStorage.setItem("token",result.token) alert(result.message) setState로 먼저 render가 돼고 sessionStorage에 값을 저장해 주기 때문에 바로 적용이 되지 않았던 것이다. sessionStorage.setItem("token",result.token) alert(result.message) this.setState({success: result.success}) 이렇게 순서를 바꿔 주어 해결을 하였다. react lifecycle에..

오늘 한일 로그인/ 로그아웃/ 회원가입 API 들을 연결 시켜 주었다. 로그인 부분에서 많은 시간을 보내었다. 각 페이지 마다 로그인이 되면 해당 유저의 이름을 보여주려고 했다. 그래서 App.js 에서 값을 내려주는게 좋다고 생각하여 App.js 에서 login 함수를 만들어 내려주었다. 하지만 email을 작성할때 계속 페이지가 새로 render가 됐다. App.js 의 state 값이 변하는 것 이기 때문에 App.js 자체가 render가 되면서 페이지가 계속해서 render가 되어 버리는것 같았다. 그래서 token 을 사용하기로 하였다. singin.js 에서 로그인을 하고 받은 token로 App.js에서 해당 유저의 name 값을 받아와 뿌려주는 방법을 사용해보기로 하였다. 그런데 이 to..

오늘한일 프론트 디렉토리 구조를 대략적으로 만들어 보았다. 기본적인 Route를 걸어주고 UI 라이브러리로 무엇을 사용할지 고민했다. 사용해본 경험이 있는 엔트 디자인을 써볼까 했는데 엔트 디자인은 나의 css실력이 부족해서 인지 기본 디자인에서 변경을 하기가 어렵고 뭔가 유연하지 못하다는 느낌을 많이 받았다. 머테리얼UI, 시멘틱UI 등을 고민하다가 bootstrap을 사용해 보기로 하였다. bootstrap을 적용하면 자동으로 반응형 웹으로 구현이 되었다. 그리고 reactstrap이라는 라이브러리가 있는데 Bootstrap 컴포넌트별로 React 컴포넌트가 구현되어 더욱 React스러운 개발이 가능하다고 한다. reactstrap 설치/기본 설정 설치 방법 npm install --save boot..

오늘 한일 API에서 container와 card를 한 번에 불러오도록 만들어야 했다. sequelize 쿼리문에서 include를 사용하여 join을 시킬 수 있었다. containers.findAll({ include: [ { model: cards, attributes: ['cd_name'] } ] }); cards 부분의 컨테이너 이동에 대한 API 가 조금 부족한 것 같다. front 부분을 만들어서 직접 실행시켜 보면서 수정을 해야 될 것 같다. 프런트 플로우를 만들었다. overflow라는 툴을 사용해 보았다. 이 툴을 처음 사용해 보았는데 내가 항상 찾아 헤매던 것이었다. 어떻게 구현을 해야 될지 의문이 있는 부분이 있어 검색을 통해 알아보아야 할 것 같다.

오늘 한일 Rest API를 나는 endpoint 만 보고도 이 API가 어떤 역할을 하는지 알 수 있게 만드는 것이라고 생각하고 있었다. users/add , users/delete 이런 식으로 명시하면 된다고 생각했지만 이것을 잘못된 방법이였다. URI는 행위가 나타나면 안 되고 동사보다는 명사로 지정해야 한다고 한다. REST(REpresentational State Transfer)란, "웹에 존재하는 모든 자원(이미지, 동영상, DB 자원)에 고유한 URI를 부여해 활용하는 것이다. HTTP 메서드 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현한다. URI는 정보의 자원을 표현해야 한다. (리소스명은 동사보다는 명사를 사용) GET – 조회 PUT..