min

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 1. 테블릿 사이즈 반응형 사이트 만들기 : 반응현 사이트를 만들면서 가장 어려웠던 점은 테블릿 사이즈일 때 어떤 디자인으로 해당 사이트를 보여줄 것인지가 가장 어려웠다. 그 다음으로 어려웠던 부분은 테블릿 사이즈일 때 마진 값과 패딩 값을 어떻게 맞출 것인지 였다. 그래서 나는 이문제를 해결하기 위해서 flex라는 속성을 통해서 해결했다. 정확히 말하자면 flex-grow , flex-shrink , 기본값을 통해서 화면이 줄어들 때 줄어드는 화면 비율에 맞춰서 자동적으로 사물의 크기도 배치되도록 만들었다. 그리고 요소들간의 간격은 gap이라는 속성을 통해서 해결했다. 이 gap을 통해 각 요소들의 간격을 맞추고 ..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 페이지네이션 테스트 코드 : 페이지네이션 테스트 코드를 작성하면서 어떻게 테스트를 해야 할지에 대한 궁금중이 많았다. 여기서 궁금중을 설명하기 위해서 한가지 예시를 들겠다. 만약 페이지가 1~100개까지 있다고 하자. 이때 1~100개를 다 클릭했을 때 확인하는 테스트 코드를 작성하는 것이 맞을 것인지 아님 다른 방법이 있는지에 대한 궁금중이 있었다. 나는 이 부분을 다음과 같이 해결했다. 만약 1~100까지가 있다면 3가지만 체크하면 모든 것을 체크할 수 있을 것이라고 생각한다. 첫번째 : 첫번째 페이지를 눌렀을 때 이전 페이지는 disabled , 다음 페이지는 abled처리가 이루어지는지 두번째 : 첫번..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. flex 정말 너란 친구는..... 최고야....! 오늘의 가장 큰 주제는 css에서 flex였다. css에서 flex란 정말 중요한 개념이다. 사물들을 배치하는데 있어서 즉 정렬 하는 데 있어서 중요한 속성이다. 특히 비율과 관련된 부분이 flex 핵심인데 이번 프로젝트에서는 그 비율과 관련해서 여러 이슈가 있었다. 내가 프로젝트를 보면 다음과 같은 페이지가 구현되어야 한다. 여기서 가장 큰 문제는 저 3개의 비율을 어떻게 조정할 것인가 였다. 특히 저 큰 박스가 가운데에 있고 나머지 2개의 박스가 양옆에 가로로 배치되어야 한다. 이때 나는 저 3개의 박스를 담는 하나의 박스를 만들고 이 하나의 박스에서 3..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눠볼려고 한다. 1. test code and tdd 이번에 코드 리뷰 사이트를 만들면서 가장 시간을 많이 든 부분은 디버깅이었다. 어떤 기능을 만들면 해당 기능이 정상적으로 작동하는지를 확인하기 위해서 일일히 테스트를 진행했던 것이 가장 시간이 많이 든 부분이었다. 그래서 나는 이번 기회에 테스트를 자동화할 수 있으면 좋을 거 같다는 생각이 들었다. 그래서 테스트 코드에 대해서 알아봤으며 테스트 자동화에 대해서 찾아보았다. 그래서 오늘은 테스트코드 작성과 tdd에 대해서 알아볼려고 한다. 먼저 tdd란 데스트 주도 개발이다. tdd의 흐름은 다음과 같다. RED : 실패하는 테스트 코드를 작성한다. (즉 내가 만들려고 하는 기능..

오늘은 코드 리뷰 사이트를 만들면서 어려웠던 점들에 대해서 같이 이야기를 나눌려고 한다. 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-..

오늘은 코드 리뷰 사이트를 만들면서 개인적으로 어려웠던 부분들에 대해서 같이 이야기를 나눠볼려고 한다. 1. 코드 리뷰 사이트 매인 페이지 디자인 수정 : 사실상 어제까지 만든 코드 리뷰 사이트에서 가장 수정해야 하는 부분은 메인 페이지 디자인이었다. 그 이유는 다음과 같다. 첫번째 ux적인 측면에서 사용자가 볼 수 있는 자료가 별로 없다는 점이다. 어제까지 만든 코드 리뷰 사이트에는 사실상 사용자가 볼 수 있는 정보가 한정적이었다. 태그도 자신이 선택한 태그를 넣을 수도 없었으며 답변이 되고 있는지 아님 안되고 있는지도 확인할 수 없었다. 따라서 유저가 이 사이트를 볼 때 이 사이트가 코드 리뷰 사이트인지 한 눈에 살펴보기에 굉장히 어려웠다는 점이다. 그래서 나는 디자인을 다음과 같이 수정했다. 위 사..