이머시브 12~15 주차(파트타임)

권태기를 극복하지 못하고 있다. 왜이럴까..? ㅋㅋㅋ 생각보다 과제들을 쉽게 해결해 가고 있기 때문인가, 아니면 더운 여름에 그저 지쳐서 그런것인가. 도무지 마음이 다시 다잡아 지지 않는다. 리프레쉬를 못해서 그런것 같다는 생각이 든다. 놀고 싶은데!!! 코로나!!!! 성수기!!!!! 비싸다 비싸.. 

 

지친마음을 부여잡고, 늘어졌던 것을 반성하면서 배운것들 정리.  확실히 자주 기록해야지 시간이 지나고 글을 쓰려고 하니, 예전에 배운것들이 흐릿하다. 

 

1. 12주차 : 리액트로 컴포넌트를 구성해서 watch later버튼 구성. 

 

 : 리액트의 state를 이용하는 방식을 학습하는 것으로, 생각보다 금방 구현했다. 

 : 페어했던 분이 local storage 개념을 알려주셔서, 서버를 만들어서 데이터 저장하는게 아닌 리액트 내에서 정보를 저장하는 방식을 사용할 수 있었다. 

 

2. 13주차 : 리덕스 적용 

   : 시간이 지나서 잘 기억은 안나지만, 크게 어려웠다..(?) 

   : 리덕스는 다시 한번 복습이 필요할 것 같다. 

   : 리뷰는 바로바로 하자..! ㅠㅠ 

 

3. 14주차 : 미니프로젝트_ 포트폴리오 사이트 만들기 

    가장 어려웠던건 CSS..!! 개발자들이 CSS를 싫어한다(?)는 얘기가 설핏 이해되는 순간이었다. 노가다의 영역이랄까?!!

 

[미니포트폴리오 완성(?)본] 

    https://www.youtube.com/watch?v=ErXXyY0Ahtw&feature=youtu.be

 

보완해야할 부분

: css 비율이 정확하게 맞지 않는다. 

: http://localhost:5000/으로 랜딩한 후에, 라우팅 적용이 가능. 즉, 클라이언트쪽에서 라우팅을 제공해서, 

  바로 url (http://localhost:5000/contact)을 통해서 접근 할수 없다. 

: 원래의도한 바는 라우팅 후에 해당 페이지로 이동하고 위로 스크롤을 올리면 그 전 페이지가 보이는 것이었으나, 

  지금은 해당페이지만 보여준다. 이부분 개선이 필요. 

: 배포를 하지 않았기 때문에, 로컬에서만 볼 수 있다. 

 

이 사이트는 css를 처음부터 한땀한땀 만들었으나.. 다음번 부터는 css 라이브러리를 사용할 예정이다. 특히 반응형은.. 

라이브러리 이용하지 않으면 정말 비효율적. 

    

[어려웠던 부분들_reference]

CSS 

   1) 반응형 웹 

     레이아웃 구성하는 법 부터 미디어 쿼리까지 배웠다. 

 

    https://www.youtube.com/watch?v=vfN5_OK-bXY&list=PL4UVBBIc6giL7ygRa-P7UExEKqZgx4t9K&index=10

  2) css animation _ 시간상 적용해보지는 못했지만, 나중에 포트폴리오 사이트 업데이트시 참고해서 애니매이션 넣고싶다. 

 

     https://www.youtube.com/watch?v=k7I1K68IrEo

 

3) 반응형 웹사이트 모음_ 사이트 구성이 막막할때 참고하기 좋은 사이트. 

http://rwdb.kr/global/

외국사이트 - RWDB

4) 구글 웹폰트 적용하기_ 나중에 별도로 포스팅해야겠다. 아래 포스팅을 보고 본인이 좀더 이것저것 시도해봐야 적용할 수 있다. 

https://uxgjs.tistory.com/156

웹사이트에 구글 웹폰트 적용하기

 

5) flex박스 _ 반응형웹 레이아웃 구조짜기랑 다른 방식인데, 훨씬 쉽다(?). 플랙스 박스로 거의 사이트 구성을 했다. 

     약간 인셉션 같은 느낌이다.. 네모안에 네모안에 네모안에...infinite. 

https://www.youtube.com/watch?v=fYq5PXgSsbE

6) rem 반응형 웹 구성시 폰트 크기 

https://yeoninim.tistory.com/38

[CSS] 반응형 작업을 위한 폰트 단위 em / rem 사용

7) 모바일 해상도

https://brunch.co.kr/@plusx/6

해상도의 기준이 있어야 UI디자인을 시작할 수 있다

8) 이미지 편집 웹사이트 _ 진짜... 100번 추천합니다. 특히 우분투 사용으로 MS OFFICE사용이 어려우신 분들! 

    이미지 사이즈를 플랙스 박스로 조정하는 것보다 그냥 조정해서 올리는 방법도 있어요!

https://m.blog.naver.com/gbckl/221262909590

https://pixlr.com/kr/x/

Photo Editor : Pixlr.com - free image editing online

9) 반응형 작업시 이미지 고정

    https://code-study.tistory.com/13

CSS 반응형 작업 시 박스 비율 유지하기

* 그외 그냥 참고해보면 좋을 사이트

주요 회사들이 어떤 기술 스택을 사용중인지 나타냄

https://stackshare.io/airbnb/airbnb

Airbnb - Airbnb Tech Stack

 

React & Server

1) express와 react build를 연결

유튜브에 다양한 방법이 나와 있으나, 일단 static으로 리액트 빌드 후 정적인 방식으로 페이지를 보여주는 방법을 썼다. 하지만 이 방법은 실시간 연동이 안되고, 빌드하고 나면 파일 업데이트를 해주어야 한다. 

 

path, cors 설치 필요. 

const express = require("express")
const app = express()
const cors = require("cors")
const path = require("path")


/***middleware***/
app.use(cors())
app.use("/",express.static(__dirname + "/build"))

app.get("/",(req,res,next)=>{
    res.sendFile(
        path.join(__dirname,"build","index.html")
    )
})

   

 

 

4. 15주차 : Basic Web Assessments_리액트 

    리액트로 간단한 사이트를 만드는 것이 었는데, 기본적인 구성이 되어 있고 이미 리액트를 계속 다뤄와서 무난(?) 하게 통과했다. 

 

알고리즘을 풀어야 하는데. 늘어지다보니 하기 싫어서 알고리즘도 외면중이다. 으으.. 빨리.. 토이 problem 제출해야지.