최고의 개발자 (목표)

** 배운 것

* native의 룰
- <div> 대신 <View> 사용
- react native에 있는 모든 텍스트는 text component 안에 들어가야함

* StyleSheet.create
- StyleSheet.create은 object를 생성하는데 사용
- StyleSheet.create을 쓰는이유
① 좋은 자동 완성 기능을 제공함
② component 정리에 좋음

* Expo StatusBar vs React Native StatusBar
- Expo가 React Native의 StatusBar를 복제해서 개선함
- function 이름이 다름

* Layout System
- <View>는 display: flex가 기본 값으로 되어있음(flex container)
- 웹의 flex direction의 기본값은 row지만 모바일은 column임

** 결과

왕초보를 위한 React Native 101 #2 완료

** 느낀점

expo랑 연동되는 시간이 꽤 걸려서 많이 하지 못한 것 같다. 오늘 이어서 다 끝내야겠다.

왕초보를 위한 React Native 101 #2, #3

** 배운 것

* 세팅
- node.js 버전 14.7 이상 (난 14.6이라서 따로 업데이트 했다)
- node.js 업데이트(mac)
npm cache clean -f
npm install -g n
n stable
(최신 버전은 n stable 대신 n latest을 넣으면 된다.)
- 윈도우는 node.js를 다시 다운받으면 된다.

* Expo 시작
- npm install --global expo-cli 입력
- 핸드폰으로 expo 앱 다운 후 로그인
(안드로이드 : Expo, ios : Expo go)

*ReactNative란?
- 브라우저가 아님
- 아름다운 번역기
- 인터페이스로 운영체제 사이에 존재함
- 작동법
(event : 사용자가 화면에서 버튼을 누르는 것이라고 가정)
① native(ios, 안드로이드)에 event가 기록됨. 즉 ios와 안드로이드가 터치 이벤트를 감지
② ios와 안드로이드는 이벤트에 대한 데이터를 수집함.
ex) 화면의 어디에서 이벤트가 발생했는지 어디서 눌렸는지 .. 등등
③ react native는 그 정보를 가지고 JSON 메시지를 생성
④ Javascript 즉 우리의 코드는 그 메시지를 받음.
⑤ javascript에서 코드 실행(UI 변경 등)(빨간색으로 버튼 변경)
⑥ react native 는 native 운영체제에게 메시지를 보냄. 5번에서 실행될 코드에 대해서 말함.(버튼을 빨간색으로 변경해라)
⑦ native에서 update UI

* 시작하기
- cmd에 expo init 앱이름 입력 후 enter 누르기

- cmd에서 expo login 입력 후 로그인

- npm start

** 결과 및 느낀점

왕초보를 위한 React Native 101 #1 완료

시간이 얼마 되지 않아 #1은 일찍 끝날 줄 알았는데 생각보다 설치하는 것이 시간이 오래걸렸다.

#2는 19일전에 완료해서 19일에 #3부터 공부할 수 있도록 해야겠다고 다짐했다.

왕초보를 위한 React Native 101 #1, #2

nomad coder next js 시작하기 완료

** 알게 된 것

* 시작

- npx create-next-app@latest로 폴더 생성

- npm start dev 로 시작

* library vs framework
- library : 개발자가 사용하는 것. library를 불러와서 library를 사용해서 어떤 것을 함.
원할 때 언제든 어떤 방법으로든 부르면 됨.

- framework : 내 코드를 불러오는 것. 특정한 규칙을 따라서 특정한 걸 해야함.

* pages 폴더
- 파일의 이름이 url이 되기 때문에 중요하고, 컴포넌트 즉 파일 안에 있는 함수의 이름은 중요하지 않음.
- 유저에게 보여주고 싶은것은 pages 폴더에서 export default function으로 설정
-앱의 홈은 기본적으로 index.js에서 나온다.

* rendering
- client-side render: 나의 브라우저가 유저가 보는 UI를 만드는 모든 것을 하는 것.
브라우저가 자바스크립트를 가져와서 client-side의 자바스크립트가 모든 UI를 만듦
브라우저가 HTMl을 가져올 때 빈 div를 가져오고 그 후 브라우저가 모든 자바스크립트를 요청하고 자바스크립트와 react.js를 실행시킴. 그 후 앱이 유저에게 보여짐.
- next.js의 경우 유저가 매우 느린 연결을 하고 있거나 자바스크립트가 완전히 비활성화 되어있어도 유저는 HTML을 볼 수 있음. 이미 HTML안에 내용이 들어가있음.
- nextjs는 pre-redering함. 즉 유저는 초기상태의 component로 된 미리 생성된 HTML 페이지를 보게 됨.
-nextjs는 _app.js를 확인하고 index.js를 렌더링함. 즉 _app.js는 청사진임.

* routing
- navigation bar을 만들 때 페이지를 이동하는 데 쓰는 컴포넌트 : Link
(import Link from "next/link")
- Link에는 className 같은 게 적용되지 않음. 단지 페이지 이동만을 위해 쓰이는 태그. 따라서 Link 안에 a 태그를 넣어서 a 태그에 부가사항을 적용한다.

* redirect
- 한 페이지에서 다른 페이지로 갈 수 o
- 아예 다른 url로 가는 것도 가능
- source, destination, permanent에 대한 요소를 넣어야함

return [{source: "/old-blog/:path*", destination: "/new-sexy-blog/:path*", permanent: false,},];

* rewrite
-유저를 redirect하지만 url이 바뀌지않음
- source, destination 요소
- rewrite을 통해서 API Key를 숨길 수 있다.

* server side rendering
export async function getServerSideProps(){}
- 함수 이름은 무조건 getServerSideProps로 고정
- 이 함수 안에 있는 코드는 무조건 server에서 돌아감

* routes
- '/moives/all' 이라는 url을 쳤을 때 나오는 페이지는 pages폴더 안에 있는 movies 폴더 안에 있는 all.js임. 
- '/movies' 이라는 url을 쳤을 때 나오는 페이지는 pages 폴더 안에 있는 movies 폴더 안에 있는 index.js임
- 만약 url에 변수 이름이 들어가게 하고 싶으면 [id].js 이런식으로 만들어주면됨 (id는 변수명)

nomad coder next js 시작하기

바닐라 JS로 크롬앱 만들기 (#7, #8) 완료

https://github.com/leecr1215/Momentum_clone 

완료 코드 확인 가능합니다!!

바닐라 JS로 크롬앱 만들기 (#7, #8)

바닐라 JS로 크롬앱 만들기 (#3, #4, #5, #6) 완료

* 배운 것

1. classList.remove(): 클래스에서 삭제

   classList.add(): 클래스에 추가

2. localStorage.setItem(key, value) / localStorage.getItem()

3. `${변수명}`

4. String.padStart(원하는 길이, 채울 string)

  ex) "1".padStart(2, "0") -> 01

5. setInterval(function, time) : time 간격으로 function 실행

6. setTimeout(fucntion, time): time 만큼의 시간이 지난 후 function 실행

7. Math.random() : 0~1사이의 랜덤 숫자 생성

8. Math.floor() : 내림

9. document.body.appendChild(): html 의 body안에 새로운 element 추가

* 결과 사진

바닐라 JS로 크롬앱 만들기 (#3, #4, #5, #6)