이머시브 10,11주차(파트타임)

이번 정보처리 기사는 포기 할까 싶다. 휴직이라서 약 9일간, 74시간을 공부할 수 있었는데 마음먹은 것의 반의 반도 못했달까. 하기사 그간 피곤하다며 각종 핑계로 미뤄둔 토이 문제들을 푸느라 더 그랬을 수도 있고, 하루에 생각보다 실제 공부시간이 많이 나오질 않았다. 그리고 리액트.. HAHAHAHa..?  공부시간을 급증하게 만들었다. 

 

9일의 휴가동안 공부시간 + 12일 출근전 공부시간.

 

토글을 이용해서 타이머를 쟀지만, 편의상 10분단위는 컷. 0.5는 30분이다.

 

 

1. 9주차에 배운것 - chatter box server 완성 

 

:지난주에 이어, 기왕 쉬는기간인김에 어드밴스드까지 마스터 하고 싶었다.

 

<서버가 꺼져도 데이터를 저장해두었다, 서버키면 불러오기 구현 >  

:서버가 꺼져도 데이터를 저장할 수 있는 방법을 고민했고 fs.readFile 과 fs.readdir 이용 해서 message 디렉토리에 데이터 저장. 

:서버가 켜지면 기존의 데이터를 읽어와서 랜더링 한 후 

:새롭게 포스트 요청이 오면 fs.writeFile을 해서 저장해주었다. 

:데이터를 구분해야 메세지들을 독립적으로 저장할 수 있어서,

 배열을 임시데이터 저장소로 사용해서 디렉토리와 비교 후 id값을 개별데이터에 넣어주었다. 

 

<express로 리팩토링 및  restful API, async & promise , middleware, cors 공부> 

:이후 클라이언트 부분을 async & promise 방식으로 리팩토링을 해보았고,

:또 서버파트를 express로 리펙토링.

:cors와 bodyParser 미들웨어를 직접 구현해서 적용. 

:미들웨어 부분 & express부분은 노마드 코더 유튜브 클론코딩 강의 앞부분을 참고했다. 

 

:cors를 구현하면서 네트워크의 헤더부분을 집중적으로 공부했으나, 아직 제대로 표현할 수도 없는걸 보니 좀더 공부해야할듯. 

:API 명세를 작성하기 위해서 고민하던중 git hub wiki 기능을 발견, 간략하게나마 restful 한 API구현을 위해 유명한 발표자료인

youtu.be/RP_f5dMoHFc

영상을 참고해 self-descriptive 방법2 Profile을 구현했다. 

헤더에 링크를 삽입하는 부분을 해결하는데 고생했는데, 방법은 생각보다 심플했다.  미들웨어를 만들어서, 삽입. 

 

//익스프레스 서버부분 
const restfulLink = require("./restfulLink")
app.use(restfulLink)

//미들웨어 
function restfulLink (req,res,next){
    res.header("Link",
    '<https://github.com/----/im-sprint-chatterbox-server/wiki/API-specification>; rel = "profile"')
    next()
}

module.exports = restfulLink

 

깃허브 주소를 블로킹 처리했기 때문에 해당 url은 연결되지 않는다. 

 

미들웨어를 실행시켜주면, 보람차게도 깃헙의 API명세를 response해준다. 

무얼했나 쓰다보니 꽤 여러시간 다양한 삽질을 나름 했구나.. 싶다. 

 

 

: fetch 했을 때, 왜 res = > res.json()을 해야하는거지???!!! 라는 궁금증을 해결하는데도 상당한 시간을 투자했다. 한 8시간 가까지 공식문서를 정독(영어...영어!!)한 결과, 데이터를 스트림으로 보내준다는 것과 위의 과정을 거쳐야 데이터를 "완전히" 받아오게 된다는것, 그리고 그 과정에서 fetch가 파싱을 해준다는 것을 알게 되었다. 

 

결론, 사실, 그냥, 쓰면 된다. ㅎㅎ 

 

2. 10주차에 배운것 - React

: react. 

: 공식문서 정독&정독&정독하기. 

: 공식문서 가이드대로  처음엔 틱택토 구현하다가 ????? 주요개념 한글로 읽기 -> 영어로 읽기 -> 한글과 영어로

  샘플코드 따라서 구현해보기까지 진행.

: 와오..우오..리액트가 쉬워서 쓰는건줄 알았는데, 아니었다. ㅎ. 펴,.편리해서 쓰는거겠지.. 쉬운거랑 편리한걸 착각하지 말자.

 

: 페어로 아주 심플한 유튜브 사이트 만들기 진행. 

: map 사용해서 동적으로 컴포넌트 붙이기 + state 개념 이해 하기에 거의 9시간 헤맴. 

  state 끌어올리기란? 리액트에서 데이터는 상위에서 하위로 단방향으로 흐르기에, 하위에서 데이터를 보내주려면 

 

함수를 이용해서

최하위 컴포넌트(3) : 클릭했어!! 내 메소드 실행해서 던진다! 

상위 컴포넌트(2):  클릭했다고?! 받아쓰 내 메소드 실행해서 다시 던진다!

상위의 상위 컴포넌트(1) : 오 받았쓰! state 바꾼다. 를 해야한다. 

 

 

: 유튜브 API 키 발급 받기까지는 쉽게 했는데, fetch로 받아오는 법은 아무리 찾아도 없어서 결국 레퍼런스 코드 참조. 

: fetch를 사용하기 위해서는, node-fetch를 인스톨 해줘야 한다. -_-^

: fetch가 받아오는게 cURL방식이었다는걸 알게 되었다. 

 

: 현재까지 구현 화면. 아래 리스트를 클릭하면, 해당 비디오로 넘어가는 것까지 구현되어 있고, serch부분을 마저 구현 후 테스트 통과하면 이번 스프린트는 끝!

 

생각보다 글이 길어졌다. 마저 스프린트 완성하러 가야지.

어쩄든, 휴가내내 실컷 공부만 할 수 있어서 좋았다. 참 에너지가 다르더라. 

 

대학생때 이렇게 재밌는 전공을 찾았었더라면 참 좋았을껄. 열시간을 공부해도 재밌었던 휴가..안녕...