Taak-e's Dev-Log

항해99 13주차 Weekly I Learn(실전 프로젝트 마무리주차)

What I Learned - 프로젝트 마무리 후 배포 배포는 AWS Amplify 를 이용한 무중단 배포를 하여 git에 push를 하여 업데이트 한 내용이 바로바로 사이트에 중단 없이 배포가 가능하게 하여 유저들의 피드백을 빠르게 반영하여 수정할 수 있는 배포 방식을 선택했다. - 배포 후 유저들의 피드백 다양한 피드백을 받았지만 홈페이지 디자인에 대한 아쉬움 가장 많은 비중을 차지했다. 사용법이 어렵다라는 의견도 많았다 => 기획 때 우리는 어디에 뭐가 있는지 알고 기획을 한것과 달리 사용자들은 알고 있는 정보가 없기때문에 UI/UX를 고려해서 개발한다는 것은 다시 한 번 많은 고민을 필요로 하는 것임을 깨달았다. 그 외 다양하게 업데이트 해주었으면 하는 사항들이 있었으며, 이번 프로젝트에서 기획이..

항해99 12주차 Weekly I Learn(실전 프로젝트 5주차)

What I Learned - 기획단계에서 생각하지 못한 아주 많은 예외 처리...!! 페이지를 만들 때 리스트, 데이터가 있다고 생각하고 와이어프레임을 짜고 기획을 하다보니 데이터가 없을 때 보여줄 화면에 대한 기획이 많이 부족했고 그로 인해 배포전에 자잘한 예외처리들이 많이 있었다... 기획 단계에서 예외처리를 UX/UI를 고려해서 더욱 꼼꼼하게 해줘야 좋을 것 같다. 로그인 시 메인페이지에 내 모임이 있으면 보여주지만 없다면? => 모임 생성을 추천하는 화면을 추가 구성 마이페이지에서 내 모임, 가입한 모임이 없을 때 보여줄 화면? => 모임 페이지로 이동시켜 모임 가입을 유도 책 검색시 책 정보가 없어서 입력 없이 스터디를 생성할 때 보여질 화면? => 책 기본 이미지를 출력하도록 함 화면에서 제..

항해99 11주차 Weekly I Learn(실전 프로젝트 4주차)

What I Learned - 웹에디터를 이용한 스터디 노트 기능을 만들어 보자 Toast UI 라는 웹에디터를 이용해 스터디 노트를 작성할 수 있게 해서 스터디 내용을 기록하도록 기획했다. Floala, react quill, Toast UI 세 웹에디터를 비교했고 개발자 친화적이면서 공식문서를 좀 더 보기 쉬운 NHN에서 만든 Toast UI를 사용하기로 했다. - base64 형태의 데이터를 DB에 바로 저장할 때 문제 1. DB에 이미지를 넣는다면? 서버에 이미지를 직접 넣지 않는 이점이 있다. 경우에 따라 텍스트를 DB에 넣어놓고 불러와 화면에 형식으로 뿌리면 매우 간단한 구현이 가능하다. 2. 이미지 랜더링 브라우저가 이미지 랜더링 시, base64로 표현할 경우 문서 로딩과 동시에 함께 로딩..

항해99 10주차 Weekly I Learn(실전 프로젝트 3주차)

What I Learned - 도서 검색 기능을 개발해보자 카카오 developers 에서 제공하는 검색 api 를 이용하기로 했다. api 에서 제공하는 책 정보를 바탕으로 독서 스터디를 생성할 때 창을 벗어나지 않고 간편하게 사용할 수 있는 검색 기능을 만들자. 기능 개발을 하면서 기술적으로 막혔던 부분은? - 페이지네이션 or 무한스크롤에 대한 고민 UI/UX 를 고려한 개발을 기획하면서 작은 창에 페이지네이션이나 무한스크롤을 집어넣을지에 대한 고민을 했지만 목적성을 따졌을 때 충분히 검색어를 활용하면 20개의 목록 안에 정보를 받아 낼 것이라고 생각하여 서비스를 이용하면서 사용자들의 요청에 따라 추가 업데이트를 검토하기로 했다. 3주차를 진행하면서 느낀점 기능을 개발하는 것도 중요하지만 이 기능을..

Javascript ES6 전체적으로 살펴보기

1. let & const 변수를 선언할 때 사용 let (is like new var) ⇒ 값을 수정할 수 있는 변수를 선언할때 (variable values) const ⇒ 한번 지정하면 절대 변하지 않는 값(상수)를 선언할 때 사용(constant values) let myName = 'Max'; myName = 'Mike'; console.log(myName) // "Mike" const myName = 'Max'; myName = 'Mike'; console.log(myName) // TypeError : Assignment to constant variable. 2. Arrow Functions 키워드 function을 생략했기 때문에 일반적인 함수보다 짧다. JS에서 갖고 있었던 this 키..

항해99 9주차 Weekly I Learn(실전 프로젝트 2주차)

What I Learned - 다중 선택이 가능한 카테고리를 개발해보자 각기 다른 색을 가진, 그리고 클릭시 색이 바뀌는 버튼 검색 선택옵션에서 다중 선택을 하여 선택한 값들이 서버로 요청 시 넘어갈 수 있도록 상태관리가 필요한 버튼 - 실전 프로젝트를 하면서 기술적으로 막혔던 부분은? 1. Mui Modal 안에서 스타일컴포넌트로 커스텀한 Input radio Button 동작 안되는 현상 Mui 프레임워크에서 Modal 기능을 가져다 쓰는데 Modal 창 안에서 label htmlFor 을 통한 radio button이 동작을 하지 않는 현상 발생 (스타일 컴포넌트 Input type="radio" 와 label 속성을 줌) DataList=[ {name="카테고리이름", hex="컬러값"}, {....