[Main-Project 개발일지]-11(주말)

냉장고, 냉동실을 따로 구분했지만 재료를 수정,조회,추가하는 부분은 params를 사용하려고 헀는데 Link 내부에는 props로 값을 넘겨주려고 해도 a태그처럼 link의 기능만 하기 때문에 전달이 되지 않았다. 이 부분을 어떻게 해결해야 하는지 곰곰히 생각해보다가 이미 이전에 props를 전달했던 기억을 떠올리고 아래와 같이 같은 위치지만 경로를 두가지로 만든 다음 그 경로의 위치값을 props로 내려주는 방식을 선택했다.

          <Route
            path="/fooddetail/:id/colder"
            element={<Fooddetail place={"colder"} />}
          />
          <Route
            path="/fooddetail/:id/freezer"
            element={<Fooddetail place={"freezer"} />}
          />

 

생각대로 id, place(props)값이 잘 넘어가서 만족스러웠다.
(재료조회 id = {id} , place = {place} => 재료조회 id = 3 , place = freezer)

작성 중 수정한 내용이 즉각적으로 반영되지 않는 문제를 발견했다.
이 부분은 곰곰히 생각해보면 각 페이지별로 setData를 적용해 따로 관리해서 발생하는 문제였기 때문에 다시 메인 페이지에서 받은 axios의 data를 props로 내려주며 setData 또한 같이 내려주고 용어도 propsData가 아닌 data, setData 그대로 사용하게 만들어 기존 작성한 코드의 내부 수정을 하지 않아도 되게 적용했다.

이렇게 적용하고나니 각 페이지들을 이동해도 리로딩을 하지 않기 때문에 데이터적으로도 절약할 수 있고 상태를 한 곳에서 관리하기 때문에 새로고침을 하기 전 까지는 수정된 내용이 잘 적용된 모습을 볼 수 있었다.(아직 set으로 관리한 데이터를 다시 서버로 보내주지는 않고 있는데 가장 큰 이유는 지우는걸 테스트 하다가 다시 데이터를 복사하거나 만들기가 귀찮기 때문이다.)

몇개의 페이지만 만들 때 까지는 논리적인 판단이 필요 없었지만 페이지가 늘어날수록 동일한 데이터를 사용하기 때문에 생각할 부분들이 늘어나는 것 같다.

또한 아래와 같은 처리를 data(get으로 받아온 데이터)를 사용하는 태그들의 상위에 적용시켜 전체 페이지가 하얗게 깜빡이는 부분을 방지하고 내부 mapping등의 일부 데이터만 깜빡이는 방식으로 만들어 안정감을 줬다.

{data !== null ? (
//내용//
) : (
        ""
      )}

 

잘 생각해보면 axios와 fetch를 같이 사용하면 안되기 때문에 login, signup 부분도 axios로 바꿔주는 과정이 필요할 것 같지만 아직 layout도 다 잡히지 않았기 때문에 미뤄둬야 겠다.

지금도 사실 layout을 먼저 잡기로 하고 진행하고 있었지만 기능구현이 너무 재미있다보니 잠깐 뭘 해야겠다 생각이 들면 그 기능부터 만지고 있는 것 같다.
사실상 하단의 재료 추가하기 버튼을 제외하고 실제 서버가 없어 전송만 막아둔 상태인걸 제외하면 냉장고,냉동실,냉장실 세가지는 완료했다고 볼 수 있는 것 같다.

layout, css를 하면서도 재미를 느끼고 했기 때문에 이제 골고루 좋아한다고 생각했지만
역시 기능구현을 들어가는 순간 잠도 안자고 구현을 하는 모습을 보면 기능구현이 제일 재미있는 것 같다.
기능구현 > layout,css > 기획 > 디자인 순으로 좋아하는 것 같다.
기획까지는 기능구현과도 연관된 부분들이 있어서 괜찮게 아이디어를 낼 수 있지만
디자인은 아무래도 해본 적도 없고 실제 업무에 들어가서도 직접 디자인을 할 일이 없다는 생각을 가지고 있어서인지 정이 가지 않는다.

다시 재료 추가하기 페이지를 만들기 시작한다.
중간 부분에 밑줄이 div의 크기보다 현저히 작은 부분이 있어 디자인을 수정해야 하나 생각을 하다가 검색을 해보니 짧은 밑줄 만들기라는 키워드를 사용해 쉽게 해결방법을 알 수 있었다.

또한 placeholder의 색이 칙칙해서 바꾸고 싶어 확인해보니
input::placeholder라는 태그를 통해 css를 변경할 수 있었다.
키워드를 통해 검색하고 수정하는 방법이 적응되고나니 원하는 거의 모든 css를 적용할 수 있는 것 같아 재미있게 할 수 있었다.

추가로 input:focus outline:none을 통해 외곽의 선을 제거해 더 깔끔하게 보일 수 있게 했다.

radio를 통해 분류 태그를 선택하게 하려고 했으나 radio자체가 내부에 텍스트를 넣지 못하는 구조인 것 같았다. 구글,블로그,유튜브 탐방을 한참 하다가 이럴 바에는 차라리 state로 관리를 해서 현재 클릭된 상태값과 일치하는 태그 하나만 className을 추가하고 태그는 그 state를 보내는 방식으로 결정했다.

새로운 재료를 추가하는 방법은 정말 까다로운데
ID로 추가하는 것이 아닌 객체 내부에 새로운 데이터를 넣은 다음 새로 만들어진 객체를 통째로 덮어씌우는 방식으로 진행해야 하기 때문이다(json의 한계이거나 잘못 사용하는 중)
이 부분은 server api를 받은 다음 진행하면 편하게 할 수 있기 때문에 상관은 없지만 재미있기 때문에 어쩔 수 없이? 하고있다.

받아온 데이터가 null이 아니도록 관리하는 부분도 어려웠는데
새로고침을 해도 null로 변하고 터지지 않도록 관리하고 싶지만 state 자체에 넣어줄 값들이 상위에서 받아올 data 값이기 때문에 이 부분은 프론트엔드 멘토님에게 질문을 해야 할 것 같다.
새로고침 없이 정상적으로 데이터를 받아온 다음 내부 값들까지 채워주는 방법은 완성했는데
조회를 굳이 수정없이 할 필요성은 느끼지 못했기 때문에 수정이 가능한 상태로 조회가 가능하고 저장하기 또는 옮기기 버튼을 통해 수정할 수 있게 했다.

결국 CRUD를 다 할 수 있게(json) 데이터 추가 및 관리까지 진행했고
2시 40분이 넘어서 회고와 일기를 마무리해야겠다.


CT(1).시식 코너는 나의 것은 아래의 세가지 경우를 고려해야 했는데
 1.현재 음식 통과
 2.현재 음식이 첫번째 시식
 3.현재 음식이 두번째 시식
간단한 방식이지만 두 번째 음식은 1/2(홀수인 경우 floor)만 섭취가 가능하다는 부분이 특이했다. dp를 만드는 방식은 간단헀지만 dp[i-3]까지 진행해야 했기 때문에 0,1,2까지 미리 작성해야 하는 부분도 특이했다.
해결 코드는 아래와 같다.

let input = `8
5
6
2
1
4
5
3
2`.split('\n').map(Number).slice(1)

let dp = [input[0],Math.max(input[1],input[0] + Math.floor(input[1]/2)), Math.max(input[0]+input[2], input[0] + Math.floor(input[1]/2), input[1] +Math.floor(input[2]/2))]
if(input.length === 1){
    console.log(dp[0])
}
else if(input.length === 2){
  console.log(dp[1])  
}
else{
    for(let i = 3 ; i < input.length ; i++){
        dp[i] = Math.max(Math.floor(input[i]/2) + input[i-1] + dp[i-3] , input[i] + dp[i-2] , dp[i-1]) 
    }
    console.log(dp[input.length-1])
}