본문 바로가기

TIL

 (30)
추가 + 삭제 기능 코드 수정완료 전에 사용하였던 코드는 버튼을 누르면 제목이나 내용을 입력할 수 있는 form을 오픈하고 입력을 완료하면 저장버튼을 눌러 form이 닫힘과 동시에 입력한 내용이 추가되도록 구현하였다. 하지만 전반적인 코드를 수정하는 와중에 기존의 코드가 동작하지 않아 form과 input을 이용한 기초형식의 코드를 작성하여 스타일이 그렇게 이쁘진 않지만 동작은 확실히 되도록 수정을 완료하였다. 지금은 기능을 구현하는데 집중을 해야할 것 같아 전체적으로 완벽히 기능들이 동작하면 그때 코드를 수정하는 방식으로 진행을 해야 할 것 같다. 지금 현재 바꿔놓은 코드로 구현한 상태이다. 전에는 이런 식으로 했었다.(결국 동작이 안되서.......)
기능 구현 코드 수정 기존에 작성해 놓았던 코드들을 전면수정하였다.(지금 몇개가 작동을 이상하게 하지만.....) 기존 코드는 오로지 기능만 구현하기 위해 작성한 코드였는데 지금은 조금 더 수월하게 기능들이 작동하도록 하였다. 서버를 사용하지 않고 새로고침 동안 데이터가 유지되어야 하기 때문에 브라우저의 로컬 스토리지(local storage)에 저장하는 방법을 사용하였다. 저장은 하는데 삭제하는 방법을 몰라 조금 헤매긴 했지만 지금 현재 서버의 데이터 베이스를 쓰고있지 않는 관계로 우선 이렇게 하였다. 그리고 한가지 문제점이 있다면 기존에는 보드의 이름을 입력하고 추가버튼을 누르면 열렸던 form이 닫히는데 지금 그게 안 닫히고 있다. 여러가지 코드를 가지고오고 내가 작성한 코드와 조립하면서 어딘가에 문제가 생긴 것 같은데..
List, Card 삭제기능 원래라면 서버에서 api를 구성하여 프론트와 연결하는 작업을 해야 맞지만 프론트와 연결하는 과정에서 여러가지 문제가 생겨 그나마 덜 복잡한 프론트 쪽으로 넘어와 삭제기능을 추가하기로 하였다. 카드를 삭제하는 기능은 카드 각각의 id를 이용하여 삭제하면 간단한 문제지만 리스트를 삭제하는 과정에서 복잡하였다. 리스트도 해당하는 id만 지우면 되는 문제인 줄 알았는데 카드들도 포함되어 있어 전체를 삭제하는 과정이 잘 안되 지금 해결하고 있는 중이다. 기존에 만들었던 것과 비교하자면 그림으로는 x 버튼 하나 생긴거?????ㅎㅎㅎㅎㅎ 우선 기능적으로 문제가 발생해 오늘은 이 기능을 해결하고 끝낼 듯하다.
Mongoose + Mongdb를 이용한 기초서버만들기 오늘은 서버쪽을 만들어보았다.(우선 기초서버만.....) 기초서버를 완성시키고 하나씩 추가하면 아마 서버가 내가 원하는 서버가 완성되지 않을까 싶다.ㅎㅎㅎㅎ 원래는 mysql을 사용하려고 했지만 정보가 많이 부족했고 새로운 것에 대해 도전해보고 싶다는 생각도 들어 Mongoose를 사용하게 되었다. 처음에는 뭔소리야하고 생각이 들었지만 막상 하다보니 새로운 것을 익히는게 재미가 있었고, 하나하나 완성되어 가는 느낌이 좋았다. 진~~짜 기초인 부분부터 차근차근 해나가야 전처럼 코드가 안 꼬이지 않을까........ 블로그에는 작성하지 않았지만 사실 지금까지 해왔던거를 다 날려먹었다는거ㅎㅎㅎㅎ(저장하자!!) 지금은 서버를 만들고 실행만 시켜봤는데 내일은 내가 만든 클라이언트 쪽과 연결 해보는 걸 해보겠다.
React-Router + client side routing 회원가입, 로그인 오늘은 회원가입과 로그인 페이지를 만들었다. 기본적인 폼은 예시로 나와있는 폼을 가져와 내가 만든 코드에 맞게 수정하여 페이지를 만들었다. 먼저, client-side-routing에 대해 설명하기 전에 SPA에 대해 잠깐 말하자면 단일 페이지 어플리케이션으로 모던 웹의 패러다임이며, 기본적으로 단일 페이지로 구성되어 있는 구조를 말한다. SPA는 처음에 모든 정적 리소스들을 처음에 한번 내려받는데 여기서 server-side-routing을 하게되면 모든 요청시 새로고침을 하게된다. 이 과정에서 불필요한 데이터도 요청을 보내기 때문에 페이지가 렌더링 되는데 시간이 더 걸리게 된다. 이러한 불편사항을 해결하기 위해서 이번 프로젝트에서는 client-side-routing를 사용하여 새로고침을 하지않고 필..
Trello Login 페이지(프론트엔드) 주말동안의 휴식으로 머리 아프던게 한결 나아지긴 했지만 아직 백엔드 쪽은 어렵기도해서 그나마 할 줄 알겠는 부분을 하자라는 마인드로 오늘은 프론트엔드 부분 중에서 Login페이지를 구현하였다. 아직 서버 쪽과 연결은 하지 않아서 로그인이 되거나 회원가입이 되는 기능은 없지만 기본적인 틀만 가지고 구현하였다. 오늘도 마찬가지로 전체적인 css는 구글을 참고하여 맘에 드는 걸로 사용하였고, 전체적인 ui는 일전에도 기록하였듯이 material ui를 사용하였다.(확실히 그냥 쓰는 것보다 있는 것을 사용하니 깔끔함) 이메일과 비밀번호를 가지고 로그인 할 수 있도록 해놓았고, 오른쪽 아래에 로그인 버튼과 왼쪽 아래에 회원가입 버튼을 만들어 조금 더 사용하기 편하도록 구현하였다. 내일은 회원가입 페이지를 구현하고..

티스토리툴바