[Pre-Project 개발일지]-2

오늘도 10시 전에 접속했지만 아무도 없었다.
다행히 프론트엔드 팀원분은 10시 정각에 오셨기 때문에(정각에 오시는걸 선호)
프론트엔드는 모두 모여서 딱히 신경쓰지 않고 작업을 진행할 수 있었다.
어제 오후에 백엔드와 프론트가 따로 대화를 했었는데 
아무래도 백엔드쪽은 각자 하는 것을 더 선호하는 분위기가 있었다.
아마 오늘은 오후에 줌도 있고 줌 끝나고 회의도 잡혀있으니
각자 하다가 그 때 정리하자는 의견이 있었지 않을까 추측해본다.

칸반 내용에 어제 완료한 부분을 done으로 옮기고 오늘 할 예정인 작업을 
issue에 추가한 후 milestone과 project의 inprogress로 옮겼다.

Redux를 사용하기로 합의를 얼추 보기는 했지만 
사실 recoil이나 zustand가 더 좋다는 말을 더 들어봤기 때문에 아쉬움은 조금 있다.
나도 써보지 않았고 팀원분도 리덕스를 선호하셨으니 일단은 리덕스로 가기로 했다.

몇단계 내려가지 않기 때문에 굳이 리덕스를 사용해야하나? 싶기도 하지만
이부분은 다음 프로젝트를 준비하기 위한 연습같은 상황이기도 하고
초기 설정이 귀찮다는 단점이 있는데 이부분은 감안하고 학습을 하려고 헀다고 
답변해도 되는 부분이기 때문에 걱정없이 리덕스를 준비하고 있다.

리덕스를 보던 중 생각보다 복잡하고 상태에 대한 정의가 명확하지 않으면 
작성하기 쉽지 않을 것 같다는 생각이 들었다.
중간에 회원가입, 로그인페이지가 필요하다는 말을 듣고 하나씩 나눠서
나는 회원가입 페이지를 먼저 작성하기로 헀고
리덕스를 먼저 사용하기보다는 일단 다 useState를 사용해서 작성한 후
가장 빈번하게 사용되거나 drilling이 심한 상태에 적용해야 할 것 같다고 생각됐다.
특히 즉각적으로 컴포넌트 내에서 데이터가 처리되는 경우 리덕스를 쓸 이유가 없어보인다.

제작 도중 생각해보니 폰트? 이모티콘? 같은 이미지 데이터를 찾기로 했던 것을 까먹었다는 사실을 떠올렸다.
Sources에서 어디에 이미지가 저장되어있는지 확인 후 이미지 뜯는 법도 알아야겠다..

점심시간 이후 2시에 프론트분이 오셨는데 아마 시간을 2시로 알고 계신 것 같다.
이전에 토의할 때는 1시 30분이었지만 백엔드분들은 합의하(?)에 안오시는 것 같고
프론트끼리는 어제도 6시까지 진행했으니 이해가능한 범위인 것 같다.

줌 세션 시작(3시)전에 회원가입 레이아웃을 다 잡았지만 내부에 봇체크는 어떻게 해야 할지
고민이 되는 상황이다.

일단 봇체크는 기능적으로 중요한 부분이 아니기 때문에 이미지만 남겨둔다고 가정하고 넘어갔다.

줌이 끝난 후 일반적인 레이아웃 자체는 잡혀있기 때문에 CSS에 대해 살펴보고 있었는데 border 사용이 제대로 되지 않아 이것저것 계속 건드려봤는데 알고보니 border는 , 대신 ' '을 사용해야 헀다(공백). 그래서 border-top : 3px, solid , orange;로 했을 때 작동이 되지 않았던 것인데 이 부분을 찾는데 30분이 넘게 걸렸던 것 같다.(div에 제대로 적용이 안되는줄 알고 여러군데 검색해보고 어떤건 되고 다시 내가 작성한 css에는 안되는 상황에 ','차이가 눈에 들어오지 않았기 때문에)

하다보니 cssPicker가 색을 제대로 받아오지 못하는 이상현상을 다시 보여서 20분넘게 시간을 허비하다가 대신에 CSSViewer를 사용해서 쉽게 찾을 수 있었다. 
좋은 점은 내부에 적용된 css들이 정리되어 나오기 때문에 조금 더 유사하게 만들 수 있을 것 같다.

오늘은 저녁 프로젝트도 있고 아직 백준 문제도 풀지 않았기 때문에 6시 10분쯤 마무리를 했고 주말에는 프론트 팀원분이 만드신 데이터를 가져와 조금 더 추가한 다음 map으로 게시글들을 뿌리는 것을 구현해봐야겠다.
그리고 각 페이지들의 필수 기능이 얼추 작동할 수 있는 바탕이 마련되면 CSS를 수정하고
fetch에 대해서 더 알아봐야겠다.

 

21시부터 진행된 스터디에서 NavLink라는 hover의 대체제?라기보다는 유사기능이지만 스택오브플로우의 사이드바를 구현하기위해 필요한 기능에 대해서 들었으며 sv?파일은 사실 그냥 복사해서 넣고 이미지처럼 쓰거나 그대로 사용할 수 있다는 사실을 알았다.

복잡하게 할 필요없이 그냥 복사하면 되기 때문에 수정하기 쉬울 것 같다.

또한 email은 type를 email로 주면 알아서 유효성체크를 해준다고 하니 아이디, 비밀번호 부분만 주의하면 될 것 같다.

 

 

 

 

CT(1).N과 M이라는 문제는 형태가 유사한데 재귀와 for문을 이용해 원하는대로 결과를 조작할 수 있는지를 묻는 문제같다. 특히 입력값이 숫자 + ' ' + 숫자 형태의 문자열에서 그 뒤로는 배열로 넘어가버리는데 사실 1~n까지를 조작하는 것이나 배열을 조작하는 것이나 난이도의 차이는 없으며 귀찮음만 추가되고 정렬 또는 sort((a,b)=>a-b)를 통해 해결할 수 있었다.
단지 같은 코드를 다시 이용하려고 하다보니 str을 arr로 제출한 코드를 이용했기 때문에 코드명에 혼동이 있었으며 평소 a,b를 즐겨 사용했는데 arr, arrs, a까지 있으니 어지러웠다.
아래는 마지막(1시20분 기준)으로 해결한 코드다.

let input = `4 4
1231 1232 1233 1234`.split('\n') //예제 input값

let nums = input[0].split(' ').map(Number) // 첫번째 줄 '4 4'를 받아와 [4,4]로 변경
let arrs = input[1].split(' ').map(Number).sort((a,b) => a-b) // 위와 같지만 sort를 통해 순서정렬
let result = [] // 결과값을 저장할 배열

function recul(n,a,str) { // 남은 시행(n), for문 시작값(a), 현재 문자열(str)
    if(n === 0){ // 남은 시행이 없는 경우 
        result.push(str.trim()) // 결과에 str(trim은 문자열 + ' ' + 다음값 순서이므로 맨앞 공백 제거)
        return //리턴으로 현재 재귀 종료(없는 경우 아래 else가 아니기 때문에 무한대로 시행된다)
    }    
    for(let i = a ; i < nums[0] ; i++){ //a값~nums[0](배열길이) 까지 시행
        recul(n-1,i,`${str} ${arrs[i]}`) 시행순서 -1 , 다음 for문 i 시작 값 , 문자열에 배열 i번째 값 추가 
    }
}
recul(nums[1] , 0 , '') 재귀함수 시행(x개 y회 실행이므로 y값(nums[1]) , for문 시작값 0 , 빈 스트링으로 시행) 
console.log(result.join('\n')) //결과값 출력 전 각 값 사이에 줄바꿈 추가 후 출력