최고의 개발자 (목표)

1. .venv 폴더 생성

cd 프로젝트 디렉토리명
python -m venv .venv

2. 패키지 한번에 다운
(선택사항 : requirements.txt가 존재하면)

pip install -r requirements.txt

3. 가상환경 활성화

cd .venv/Scripts
activate

4. .gitignore에 .venv 추가

(선택사항이지만 추천)

* requirements.txt 쓰는 이유
현재 pip로 설치된 패키지들을 requirements.txt에 저장해 다른 사람이 이 프로젝트를 사용할 때 쉽게 패키지를 다운 받을 수 있게 함.

* requirements.txt 생성하는 법

cd 프로젝트 디렉토리명
pip freeze > requirements.txt

1. 레포지토리 default branch를 master에서 main으로 변경하는 법

git branch -m master main
git push -u origin main

2. 폴더에 새로 만든 레포지토리 주소 연결하는 방법

git remote add origin 깃허브주소

3. 이미 레포지토리가 존재하는 경우에 레포지토리 주소 변경하는 방법

git remote set-url origin 깃주소

4. 이미 push 된 파일에 .gitignore 적용

git rm -r --cached .
git add .
git commit -m "chore: apply .gitignore"
git push origin main

5. 만든 브랜치명 변경하기

git branch -m [OLD_BRANCH] [NEW_BRANCH]

오늘은 1시에 송이랑 만나서 무슨 앱을 만들지 정했다. 송이가 미리 주제를 생각해와서 쉽게 정할 수 있었다.

주제가 뭔지는 나중에 앱이 완성되면,,, 그때 공개하겠다. 아마 적어도 2달 뒤일 것 같다.

앱에 필요한 기능도 노션에 정리하고 생소하지만 피그마로 살짝 맛보기 UI도 그려보았다.

UI는 아직 한참 남아서 다음 주에 만나서 더 그릴 것이다.

너무 오랜만에 봐서 중간에 얘기를 했더니 시간이 훌쩍 지나갔다. 

이번 학기에는 15학점을 듣기로 결정했다. 그중 전공은 12학점을 들을 예정이다. 

그런데 듣고 싶은 과목이 너무 많아서 정하기가 힘들다....

전공을 빨리 정해야 시간이 겹치지 않는 교양을 찾을 수 있는데 말이다. 

1학기는 대면으로 한다는 데 이걸 좋아해야 할지 싫어해야 할지 모르겠다. 통학러만 아니었다면 좋아했을 것이다.

오늘 일기 끝.

벌써 방학한 지 한 달이나 지났다. 이게 말이 되나?

지금까지 한 게 너무 없는 것 같아서 갑자기 조급해졌다.

리액트 공부도 해야 하고 리액트 네이티브도 해야 하고 알고리즘 공부도 해야 하고 토익도,,, 

계획은 열심히 세워놨는데 실천,,,은 하려고 노력 중이다.

그렇지만 일단 오늘은 갱얼쥐를 보러 카페에 다녀왔다.

매주 수,목,금에는 웰시코기 두 마리가 등장하는데 마침 오늘 목요일이라 다녀왔다. 오늘이 두 번째 방문이지만 갱얼쥐는 언제나 귀엽다. (강아지 사진은 마지막에 넣어놓겠다.)

딸기 라떼랑 한라봉 에이드를 먹어봤는데 둘 다 맛있다. 시원한 게 땡긴다면 한라봉 에이드 추천.

카페 외부에 조그마한 정원이 있어서 거기서 강아지와 놀 수 있다.

그리고 위치도 생각보다 멀지 않다. 세종이랑 대전 사이에 있어서 충남대학교에서 버스 타고 30분 만에 다녀왔다!!! 

오랜만에 꽤 먼 산책이라 재미있었다. 

오늘 일기 끝!

** 배운 것

* 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 시작하기