19) 사진파일은 왜 주소형태로 불러오게 될까염 🧐 cloud storage service, 이미지 프로세스 이해, 게시글에 내 사진을 등록해보자 ! ( map안의 map, Reduce, 고정데이터 객체사용,,) Code-Camp FE 6기

썸넬은 열정적으로 선배기수의 프로젝트 발표를 듣는 머찐 나 ^^*
많은걸 접하고 배울수 있도록 노력해주는 코캠 늘 감사합니다아

- 포트폴리오 리뷰

• 파이어베이스 게시판은 백엔드 06같은 api없이 프론트 혼자서 만든곳이다!! 혼자 작은 프로젝트나 포폴 만들때! 파이어베이스를 사용해서 (바로 데이터베이스를 만들어서 사용하는거다) 이용가능 !
  
  
• 게시물 등록, 조회 삭제 다 가능하다 !
  
  
• 파이어베이스로 실제 배포된 프로그램도 많지만, 다양한 보안 규칙이 점점 늘어나고, 소스코드공개의 문제로 애초에 프로그램을 파이어베이스로 만들진 않는다 ! 작은 프로젝트나 포폴용으로 하자 !
  
  
  
• 우리 뮤테이션 보낼때는 엄청 복잡했지만, 저 형식 하나면 그냥 등록이 완료가 되는 유연한 형식이다 ! 가볍게 하기에 좋다 !
• map으로 데이터를 뿌려줄때 npm에 있는 uuid라이브러리를 사용할수 있다 ! (자동으로 프라임키 id를 생성해주는 ! )
  - yarn install uuid, yarn add --dev @types/uuid를 사용해서 map에 적용시켜준 모습 !
  
• firebase를 임포트 해와서 useeffect로 쓴 부분 잘 보고 나도 포폴에 만들어보자 !
  

- 이미지 프로세스 이해

• 이미지가 어떻게 db에 들어갈까?
  실제 이미지는 다른 컴퓨터에 저장이 되어있고!
  우리는 이미지를 다운받을수 있는 주소를 넣으면 ..! 바로바로 받아와서 보여주는 형식이당
  
  
• 클라우드 업체 ? - aws(아마존웹서비스), gcp(구글플랫폼), azure... 클라우드 프로바이더라고 부른다!
  쉽게 생각하면 사진이나 용량이 큰 파일을 저장하는 컴퓨터를 빌려주는곳!
  
  
  - cloud storage service <- 그 연결된 수많은 컴퓨터들 이름 !
  
  
• 브라우저 페이지에서 input type = file 누르면 파일을 선택하는 창이 나온다 ! 파일이라는 객체를 state에 저장해도 되고 변수로 저장해도 되고, 백엔드 api에서는 파일을 storage에 저장하고, 그러면 storage는 파일을 다운받을수 있는 주소를 백엔드를 통해 프론트엔드에 넘겨준다
  
  
• 파일만 넘겨주는것이 아니라, createboard에 같이 띄워주려면, 이미지주소를 함께 writer title contents image주소 같이 넘겨줘야 한다 !
  
  
  
• 실제 이미지를 데이터에 넣으려면 타입이름은 blob, clob이 된다
  -blob: 0과1로 구성된 데이터라는 뜻 (사진을 0,1로 구성)
  (바이너리라지오브젝트)(사진은 텍스트와다르게 정말 크다)
  그래서 실제로 저장 안하고 주소불러오는 방식을 쓰는것 !

- 이미지 실습

• 파일 업롣하는거 index.tsx 만들어주고
  yarn add apollo-upload-client해서 이미지 파일 업로드를 위해 받아쥰다
  <<이제 뮤테이션 만드는 과정 원두멘토님처럼 순차적으로 잘 정리해서 보고 베끼지 않아도 나와야한다 ! >>
  
  
• app.tsx에서 아폴로 클라이언트 안에서만 하는게 아니라 설치를 하고, createuploadlink를 uploadlink에 달아서 걸어주는 식으로...! 저장할 api에 주소를 적어준다고 생각하면 된다 !
  
  포폴에 적용시킬때 설정 잘해줘야한다.
  링크를 담아서 uploadlink담아서 apolloclient를 사용해 그 링크에서 이미지를 불러온다는걸 컴퓨터한테 설명 잘해주자 !
  
  여기서 보면 알듯이 스토리지에 저장해서 주소를 받아온거다..근데 주소라고 하기엔 좀 이상한데 ?
  
  
  앞에 구글클라우드 스토리지에 저장되어있기 때문에 주소를 붙여줘야 조회가 된다
  
  
  src={https://storage.googleapis.com/${imageUrl}}
  
  
  그래서 내가만든 imageUrl 링크가져온것 앞에 주소를 붙여줘야한다 ! 백틱이랑 $는 이제 익숙하지 ?
  
  
  근데 여러가지 검증할수 있겠지만
  하고싶은걸 여기다가 넣고, 검증 안되면 리턴하면 된다
  
  파일이 사이즈가 없다면 파일이 없습니다
  파일이 오메가바이트가 크면 파일이 너무커요라고 조건걸어준부분
  
  blob파일이 클때 사이즈를 텍스트라고 지정해주고 넣어주는 부분.. 잘 이해는 안가지만 ? 사이즈 하나하나가 바이트가 되는거고 하나의 1024가 일킬로바이트 하나가 더 있으면 일 메가바이트가 되는거
  
  밑에 커서부분 조건을 걸것은 src에 넣을건데 jsx파일을 만들건 아니기 때문에 ts로 만든다
  
  근데 따로 뺀 조건들이 return을 해버리면 그 검증하는 함수가 종료가 되는건데 우리는 그러면 안되고, 올리는걸 종료를 해야하니까 뺀 파일에서 조건마다 안맞으면 false 다 맞으면 true를 걸어주고
  원본에서 isvalid가 false 면 이것도 종료해줘 라고 하면 된다
  

- useRef

특정태그를 선택하고 가르키는 역할. 태그를 담는다 !

이미지 태그를 특정변수에 넣고 그 위를 예쁜 상자로 담아서 onclick걸어주기

변수에 담아서 변수.click 하면돼
그때 변수.focus했던거 처럼 !

위에

const fileRef = useRef<HTMLInputElement>(null)

만들어주고
버튼의 함수에다가

const onClickImage = ()=> {
      fileRef.current?.click();}

클릭하면 fileRef클릭해줘 라고 한거고
input태그의 ref={fileref}걸어주면 된다 !

실습해본 화면
이미지 태그의 주소를 보내주고 아이디로 조회해보면
주소가 간걸 알수있다 그러면 나중에 input 태그에서 images[0]...인덱스값으로 앞에 스토리지구글주소 달아주고 넣어주면 된다


우리 백엔드가 현재 구글스토리지에 넣게끔 개발이 되어있어서 명시를 해주지 않아도 구글주소를 넣고 파일명을 붙이면 저절로 불러올수 있게 되는것 !


useref를 쓴이유는 상자안에서 클릭했을때 자동으로 상자안이 파일을 클릭하게끔 담아두려고 쓴것이다

- 이틀치 알고리즘 수업 ~

<<세준멘토님의 항상 똑부러지는 알고리즘 수업이 어제 없어서 아쉬웠다
어제 행렬넣는거 결국 생각못하고 그상태로 멈춰있었기 때문에 ...ㅎ 심지어 오늘 2016년 요일 계산하기 문제는 코드가 거의 100줄 ^^~ 요일 다 적어준 셈이다 ㅎ
오늘도 집중해야지! 오늘 따라 반가운 세준샘의 특이하면서도 예의가 넘쳐나시면서도 빨려드는말투와,,아아..들리쉬나요?>>

1. 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 
 같은 열의 값을 서로 더한 결과가 됩니다. 
 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요.
arr1	            arr2         	        return
[[1,2],[2,3]]	  [[3,4],[5,6]]	       [[4,6],[7,9]]
[[1],[2]]	     [[3],[4]]	                [[4],[6]]

**내가 풀다가 못푼 풀이.. ㅜ**
function solution(arr1, arr2) {
   var answer = [];
   let result = [];
   for(i=0; i<arr1.length; i++){
       for(l=0; l<arr1[i].length; l++){
          // result[]= (arr1[i][l]+arr2[i][l])
           result[i,l] = (arr1[i][l]+arr2[i][l])
       }
       
     console.log([result])
   
   }
   
}

**세준쌤의 정석풀이1**
function solution(arr1, arr2) {
   const answer = [[]];
//     이중배열로 받아온다는 뜻
   for(let i = 0; i< arr1.length; i++){
       for(l=0; l<arr1[i].length; l++){
           // console.log(arr1[i],arr1[i][l],i,l,arr2[i],arr2[i][l])
//             찍어서 확인하는 습관들이기 
           const sum = arr1[i][l] + arr2[i][l]
           // console.log(sum) 4,6,7,9 가 나옴 
           if(answer[i] === undefined){
               answer[i] = [];
           }
           answer[i][l] = sum
       }
   
   } return answer 
   
}

내가 넣어주려는 배열안의 배열이 없으면 에러가 난다 ! (이중배열에서)

그래서 조건을 걸어서 빈배열일때 동적으로 배열을 추가해서 늘려주는 방식이다 !
이해하기 조금 어렵네 ㅠㅠ

두번째 풀이 ..
게다가 경악스러운 map안의 map.. 난 듣고있는 앉아있는 감자야..
안쪽의 result가 배열로 나오고, 또 answer가 배열로 반환하기 때문에 이중배열로 반환이 된다
map이 배열로 반환된다는것을 이용한것이다 !





2016년 요일 알아내는 나의 경악스러운 44줄 풀이 ! ^^
개발자라고 할수 없는 풀이 ~(누가 보고계시다면 웃지마세요)
정답만 맞춘 풀이 ~....

function solution(a, b) {
    if(a === 1||a === 4|| a ===7){
        if(b%7 === 0){return "THU"} else if(b%7 === 1){
        return "FRI"} else if (b%7 ===2){ return "SAT"}
        else if(b%7 ===3){return "SUN"} else if(b%7 === 4){return "MON"}
        else if(b%7 === 5){return "TUE"}else if(b%7 ===6){ return "WED"}
            }
    if(a === 2||a === 8){
        if(b%7 === 0){return "SUN"} else if(b%7 === 1){
        return "MON"} else if (b%7 ===2){ return "TUE"}
        else if(b%7 ===3){return "WED"} else if(b%7 === 4){return "THU"}
        else if(b%7 === 5){return "FRI"}else if(b%7 ===6){ return "SAT"}
            }
    if(a === 3||a === 11){
        if(b%7 === 0){return "MON"} else if(b%7 === 1){
        return "TUE"} else if (b%7 ===2){ return "WED"}
        else if(b%7 ===3){return "THU"} else if(b%7 === 4){return "FRI"}
        else if(b%7 === 5){return "SAT"}else if(b%7 ===6){ return "SUN"}
            }
    if(a === 9||a === 12){
        if(b%7 === 0){return "WED"} else if(b%7 === 1){
        return "THU"} else if (b%7 ===2){ return "FRI"}
        else if(b%7 ===3){return "SAT"} else if(b%7 === 4){return "SUN"}
        else if(b%7 === 5){return "MON"}else if(b%7 ===6){ return "TUE"}
            }
    if(a === 5){
        if(b%7 === 0){return "SAT"} else if(b%7 === 1){
        return "SUN"} else if (b%7 ===2){ return "MON"}
        else if(b%7 ===3){return "TUE"} else if(b%7 === 4){return "WED"}
        else if(b%7 === 5){return "THU"}else if(b%7 ===6){ return "FRI"}
            }
    if(a === 6){
        if(b%7 === 0){return "TUE"} else if(b%7 === 1){
        return "WED"} else if (b%7 ===2){ return "THU"}
        else if(b%7 ===3){return "FRI"} else if(b%7 === 4){return "SAT"}
        else if(b%7 === 5){return "SUN"}else if(b%7 ===6){ return "MON"}
            }
     if(a === 10){
        if(b%7 === 0){return "FRI"} else if(b%7 === 1){
        return "SAT"} else if (b%7 ===2){ return "SUN"}
        else if(b%7 ===3){return "MON"} else if(b%7 === 4){return "TUE"}
        else if(b%7 === 5){return "WED"}else if(b%7 ===6){ return "THU"}
            }
        }
 <br>
세준쌤의 정석풀이를 봐보쟈
1. 고정되어있는 데이터를 먼저 볼것, 
2. 나머지 값(반복되는 값)으로 해당 데이터를 접근  
const month = {
    1 : 31,
    2 : 29,
    3 : 31,
    4 : 30,
    5 : 31,
    6 : 30,
    7 : 31,
    8 : 31,
    9 : 30,
    10 : 31,
    11 : 30,
    12 : 31
}
const week = ["FRI","SAT","SUN","MON","TUE","WED","THU"]
function solution(a,b){
    let answer = 0;
    for(let i =1; i <a; i++){
        answer += month[i] 
        // 5월이라 가정했을때 4월까지의 날짜를 다 더해주는 느낌
    }
    answer += b - 1
//     당일을 제외한 날을 빼줘야 흘러준 값을 계산할수 있다 
//     Week의 인덱스 값으로 7나눈 나머지를 접근한다
    return week[answer%7]
}```

이 성질을 이용해서 푼거야!

그리고 reduce를 사용해서 푼 방법
a월b일까지 며칠이 흘렀는지 구한것은 똑같다

• date객체에 대하여...!
  new Date() 얘는 object 뒤에 들어오는 데이터를 하나의 새로운 객체로 만들어주는 연산자이다..!
  Date() 얘는 문자열

getFullYear()
getMonth()+1
getDate()

얘네는 문자형에서 사용하기 조끔 어려웡 날짜형 메서드 사용할때는 뉴연산자 사용해야한다
getDay() -일요일로부터 며칠 지났는지 알려주는 문법이다
그래서 일요일을 기준으로 하는 배열을 만들어주고 겟데이트를 써서 구하자