min

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 태그 시스탬 도입 : 코드 리뷰 사이트를 만들 때 중요한 것은 게시글을 보고 어떤 글인지 지레짐작이 가능해야 한다는 점이다. 실제로 많은 게시글 사이트의 경우에는 태그라는 시스탬을 통해서 이 글이 대충 어떤 글인지에 대한 지레짐작이 가능하도록 만들어놨다. 따라서 나도 태그 시스탬을 통해서 위 문제를 해결하려고 하였다. 태그 시스탬을 도입하면서 가장 어려웠던 부분은 onKeyDown 이벤트 핸들러였다. 태그 시스탬의 동작원리는 다음과 같다. input에 문자열을 입력한다. input에 엔터키를 눌렀을 때 해당 문자열을 태그로 변환한다. 변환한 태그를 태그목록에 추가한다. 위 과정을 보면 onKeyDown 헨들러가..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 페이지네이션 버튼 구현 페이지 네이션 버튼 구현을 진행하면서 굉장히 어려웠던 점은 좌우 방향표를 눌렀을 때 현재 위치에 따라 disabled 또는 abled 처리를 진행해야 한다. 이는 정말로 어려운 것이었다. 왜냐하면 상위 부모 컴포넌트에 이에 대한 로직을 작성하고 이를 자식에게 props로 넘겨줘서 이 props에 따라서 조건부 css를 해야 하기 때문이다. 그래서 나는 이를 해결하기 위해서 부모 컴포넌트인 review list 컴포넌트에다가 로직을 다음과 같이 작성했다. const onClickPages = (number) => setCurrPage(number); const onClickPrevPages..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 다뤄볼려고 한다. 1. 반응형.... 정말 하.... 재밌다 ㅎㅎ : 내가 만든 프로젝트 한계점은 여러 사용자의 유저들이 이 프로젝트를 사용할 수 없다는 것이다. 즉 데스크탑을 기준으로 프로젝트를 보여주기 때문에 테블릿 , 모바일 환경에서 들어오는 사람들은 이 프로젝트를 보지 못한다. 그래서 나는 이 프로젝트의 사용성을 높이기 위해서 반응형을 구현했다. 반응형을 구현할 때 사용한 css 전처리기는 scss 였는데 이 scss가 굉장히 간단해서 생각보다 반응형을 구현하는데 어렵지 않았다. 실제로 반응형을 위한 로직은 다음과 같다. $breakpoint-mobile: 335px; $breakpoint-tablet: 758px; $breakpoint-..