[Pre-Project 개발일지]-12

오늘은 시작 전 많이 오셔서 모일 수 있었다.
게더에 오시지 않은 분들도 있었지만 디스코드에서 활발하게 대화하고 계시기 때문에
뭔가 하시는 것 같았다.

진행해야 될 부분은 아무래도 유효성검사 후 알림(통과 = 회원가입 , 불통과 = 이유출력)과
페이지네이션을 위한 레이아웃 밑작업 정도가 있을 것 같다.
내일이 배포지만 아직 서버가 없어서 불안하긴 한 상황이다.

모달을 사용할까 싶었지만 일단은 다른 분들도 사용하는 alert을 이용했다.
메세지 줄 바꿈 부분이 prettier때문에 이상하게 저장되어 글 내부에 \n을 사용해 줄을 바꿔주니 깔끔하게 변경되는 모습을 확인할 수 있었다.

로그인을 다 처리하고나니 로그아웃은 구현하지 않았다는 사실을 알 수 있었다.
하지만 로그아웃 버튼자체가 숨겨져 있었기 때문에 그 부분을 구현할 생각을 못하고 있었고
시스템적으로도 아직 로그아웃이 지원되지 않기 때문에(서버) 당장 시도하기는 애매한 것 같다.

일단 페이지네이션은 api명세서에 비슷한게 있기 때문에 프론트에서 구현하는게 맞는 상황이고
로그아웃은 당연히 해야 하지만 햄버거 메뉴도 추가로 구현해야 하기 때문에 로그인이 되는 상황에서 건드릴 것 같다.

중간에 sidebar 부분이 걸려서 padding을 조정해준 후 페이지네이션 레이아웃을 시작하기 전 issue를 관리하려고 하다가 백엔드분들이 뭐 하시나 놀러가봤다가
로그인처리를 같이 테스트해보기로 했다.

명서세와는 명칭이 조금 변경된 부분이 있었는데 설정에서 default값으로 넘어가버려서
수정이 복잡해서 일단 변경된 명칭으로 진행했다.
이름을 변경하자 선언되지 않았다면서 작동은 정상적으로 되는 이상한 일이 있었는데
리액트를 중단시킨 후 다시 시행하자 정상적으로 시행됐다.

서버측과 다시 통신을 하려고 했지만 계속해서 CORS 오류가 나는 상황이었다.
기존에는 잘 작동했지만 회원가입만 안되는 것을 보면 뭐가 문제인지는 잘 모르겠다.
아마 get, post의 권한이 다른게 아닐까 추측만 되는데
백엔드의 서버는 다른 언어로 되어있기 때문에 관여하기 어려워 대응할 수가 없었다.

열심히 알아봤지만 대응할 수 있는 방법은 프록시 사용이 대부분인데
프록시를 사용할 경우 개발환경에서나 적용이 되고 실제 배포시에는 프록시가 적용되지 않기 때문에 큰 의미는 없는 것 같다..

심지여 현재 상태에서는 서버도 닫혀있기 때문에 더이상 테스트가 불가능해
다시 페이지네이션 레이아웃을 만들기 시작했다.

레이아웃을 잡으려고 보니 a태그에 일정한 css가 들어있을 뿐이고
그 a태그를 어떻게 mapping 해주느냐가 중요한 포인트 같았다.
이를 알고리즘 문제라고 가정하고 원하는 출력을 가장한 다음 
입력값도 상상해서 해결해야 할 것 같은데
여기서 요구하는 출력은
1.페이지의 숫자에 따라 총 페이지 숫자를 알 수 있어야 한다(최종 페이지 버튼)
2.현재 첫번째 페이지가 아닌 경우 맨 앞에 Prev라는 버튼이 있어야 하며 이는 현재 페이지의 한칸 왼쪽으로 이동한다.
3.현재 마지막 페이지가 아닌 경우 맨 뒤에 Next라는 버튼이 있어야 하며 이는 현재 페이지의 한칸 오른쪽으로 이동한다.
4.위에 (1)에서 언급한 최종 페이지 버튼을 누를 경우 맨 뒷 페이지로 이동해야하지만 이는 스택오버플로우에서도 제대로 구현되지 않은 상황으로 보인다.(실제 최종과 표기 최종이 다른 문제가 있어 페이지 이동이 에러가 뜨거나 실제 최종으로 이동됨 약 게시글 4845개+=15개 정도의 차이가 있는데(323p) 이는 삭제 또는 아이디값으로 관리하기 때문에 지워진 글 등의 문제로 보인다. 한마디로 id로 게시글 숫자를 관리하고 length로 하지 않는다는 의미?
하지만 구현할 수 있으면 하자
5.페이지가 4 이하일 경우까지는 /1~5페이지와 "..." 마지막 페이지/가 표기되지만
5페이지 이상일 때 부터는 1페이지 ... 현재-2, 현재-1, 현재, 현재+1, 현재+2 ... 마지막과 같은 형식으로 출력된다. (한마디로 현재 페이지에 따른 표기가 달라져야 한다는 뜻)

6.현재 페이지는 주황색 배경으로 감싸져있는데 현재 페이지만 클래스명 하나를 추가해줘야 한다는 의미이기도 하다.

요약하자면 1페이지, 2~4페이지, 5~마지막-5? 까지는 진행되야 한다. 진짜 의아한게 마지막 페이지는 prev / 1 / 나머지 5개 이모양인데 진짜 구현을 못해놔서 제대로 파악하기 힘들다.
페이지네이션의 마지막 부분의 코드를 정리하면 문제가 있는게 페이지 규모에 따라서 정리가 다른데 10페이지 언더인 경우 앞뒤가 충돌할 우려가 있다.
로그인 및 글 작성이 안되는 상황이기 때문에 더미데이터를 우리가 직접 만들 수 없는 상황이라 복잡하다.

일단 get요청을 통해 받아진 데이터를 보고 판단할 수 있을 것 같은데
이 부분은 레이아웃이 중요한게 아닌 것 같다.

다시 만들걸 생각해보자면
1.a태그들이 필요하다.
2.a태그들에 넣어줄 데이터도 필요하다.
3.a태그들에 넣어줄 클래스명, 문자/숫자, ID(value), 
4.생각해보면 태그들 위 상위 태그에는 flex를 줘서 내부 값들이 수평정렬되게 해야한다.
5.시작할 때는 1페이지가 기본이므로 1페이지로 둔 후 다른 페이지를 누를 경우 계산을 통해 페이지가 변경되게 하면 될 것 같다.(onClick)

페이지네이션의 앞 조건들을 만족시킨 상황까지 진전되었고
now라는 state를 통해 현재값을 지정하고 현재값과 같은 경우 className 부분에 Now가 들어가게 만들어 .Now로 추가적 css를 만질 수 있게 할 예정이며
각 기능들을 클릭할 경우 그 페이지들의 이동을 관리하는 함수를 따로 만들었으나
아직 페이지가 실제 있는게 아니기 때문에 페이지의 이동이 아닌 상태값만 변경되고 그 변경된 값들이 출력되게 만들었다.

페이지네이션 자체를 늦게 시작했기 때문에 아무래도 이렇게 마무리해야 할 것 같다.
내일은 페이지네이션 마무리와 서버와 소통이 된다면 추가적으로 소통하고
로그인,로그아웃 기능(뺄지말지 아직도 고민중이다/서버에서 소통이 안돼서)에 대해 확인하고
회원가입 및 로그인이 가능해진다면 로그아웃을 추가해야 할 것 같다.

프론트엔드도 배포를 해야하는데 이 부분은 아마 깃허브에 올리는 방식으로 해결은 할 수 있을 것 같다.(서버가 아니고 클라이언트라서?)
이 부분에 대해서도 내일 프론트 팀원분과 더 대화를 해야겠다.




CT(1).이상한 문자 만들기라는 문제는 홀,짝의 규칙에 맞춰 단어들의 대,소문자화를 하는 문제로 대문자만들기, 소문자만들기를 이중for문을 이용해 진행하면 되는 간단한 문제였다.

CT(2).소 전염병 문제는 일정한 규칙에 의해 감염되는데 그 규칙이 피보나치 수열이기 때문에 dp를 이용해 간단하게 풀 수 있었다. 단지 백틱을 이용해 문자열로 기간의 경과와 감염된 소들의 정보를 따로 출력하는 부분이 다른 문제와는 조금 달랐다고 볼 수 있다.

CT(3).로또 순위는 비당첨을 기준으로 7부터 해당 숫자가 나올 경우 1씩 빼주면 된다.
0의 경우 원하는 숫자를 입력할 수 있기 때문에 최고기대값에서는 1씩 빼서 등수를 상승시키고 최저기대값은 떨어진 값이라고 가정하고 숫자를 변동시키지 않았다.
1~5개 또는 1~6개 일치가 아닌 2~6개 일치부터 순위에 있기 때문에 기준점수를 6점으로 해서 7점으로 끝나는 경우가 있는데 이는 마지막에 7점인 경우 6으로 변환하여 처리했다.

CT(4).숫자 문자열과 영단어는 split, join을 이용해 해당 글자를 replace 하듯 처리했다.

CT(5).신규 아이디 추천이라는 문제는 어렵지는 않지만 귀찮고 까다로운 문제였다.
사실 지시사항만 제대로 지킨다면 크게 어렵지 않지만 중간에 3,4단계의 특정 문자열 제거 및 중복'.'제거를 같이 진행해서 코드가 꼬여버렸다.
결국 다른 방법들을 시도하다 정석대로 해서 해결할 수 밖에 없었다.