3. 각각의 폴더에 jsx와 scss를 만들고, jsx 함수형 컴포넌트를 만들어주고 scss import도 해주세요.

4. 다시 app.js로 돌아가서 home을 경로를 만들어 주세요.

5. react-router에서 Outlet을 사용하여 중첩시켜서 만들겁니다.

• import 잊지말기

6.경로를 추가해주세요.

6.1 홈 테스트

reacr-router(Outlet)

7. 아이콘 사용을 위해 터미널을 열고 추가해주세요.

yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react

8. Navbar UI

9. leftbar UI (나중에 더 추가..)

2. 회원가입 UI

3. 경로 설정을 위한 react router 설치

yarn add react-router-dom 

튜토리얼에서 저렇게 초록색 되어 있는 부분을 사용하여 쉬운 페이지 이동이 가능하다.

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello world!</div>,
  },
]);

 <RouterProvider router={router} />

가입하기 페이지를 누르면 -> /register 이동

로그인 페이지 누르면 -> /login 이동

react-router 링크

Redgram

• 개발 환경: macOs
• 사용 언어: Node.js, express, react, mysql

1. react 폴더를 만들어 줍니다.

npx create-react-app 폴더명 

2. 불필요한 파일들을 삭제해 줍니다.

3. app.js, index.js에 불필요한 import들을 삭제해 줍니다.

3.1 app.js 내용을 지우고 'hello'를 출력해봅시다.

npm start![]

4. src-pages-home,login.profile,register 하위 폴더로 만들어줍니다.

4.1 home, login, progile, register 밑으로 jsx파일을 각각 만들어주세요.

4.2 css대신 scss를 사용할거라 터미널을 열고 설치해주세요. 그리고 각각의 폴더 밑으로 scss파일들을 만들어 주세요.

yarn add sass 

5. 각 jsx 파일에 함수형 컴포넌트를 만들어주세요. 그리고 기존 import는 지우고 scss를 위한 import를 만들어줍니다.

6. app.js에 이제 로그인 페이지를 화면에 띄어줍니다.

7. 이렇게 기본 셋팅 끝.

cookieParser()에 괄호를 안해서 계속 오류나고 연결이 안되었음..

내 서버에 문제가 없다면 코드를 살펴보자...

8800번 포트가 실행중이란 소리..

이미 작업 몇개 하고있어서 아마 거기서 실행된 포트번호 갔다..

sudo lsof -i :PORT

PORT에는 찾고자하는 포트번호만 찾을 수 있다. 나같은 경우는 8800이 실행중이기에 8800입력 이러면 포트 정보가 나온다. 맥북은 비밀번호 쳐야함 (그냥 맥북 비밀번호 ㅋㅋ) 윈도우는 모르겠다.. 여튼!

그러면 PID번호를 찾아서

sudo kill -9 PID

PID가 80717 입력하면 실행중인 포트 강제 종료

그리고 혹시모를 다시 포트번호가 남아있는지 확인한다. 나는 2개여서 한번 더 강제종료함 ㅋㅋㅋ

연결 끝 ~

출처:https://jootc.com/p/201912253249

이 폴더의 상위폴더인 CURD2에서 자꾸 실행하려니 에러가 났다.

$ cd backend
$ node index.js 

https://eugene-kim.tistory.com/43 <- 여기가면 친절하게 알 수 있다.

https://longway.tistory.com/35 <- 락 https://velog.io/@serringg/Mac-m1-%EC%98%A4%EB%9D%BC%ED%81%B4-ORA-28000-%ED%95%B4%EA%B2%B0 <- 락 풀기

참고로 처음 입력은 아이디와 비밀번호임 비밀번호 계속 틀려서 왜 안되는거야 했다 ㅎㅎ;;

처음 폴더를 만들고 깃에 들어가면 리파짓토리 초기화가 있다. 그거 누르고

터미널 열어서

git init

git branch -M main

git remote add origin "깃 주소"

git pull origin main

이렇게 하고 혹시 username, useremail입력하라고 에러가 뜨면

git config --global user.email "깃 이메일주소" git config --global user.name "깃 닉네임"

하고 나중에 커밋 --> 푸시 하면 잘 올라간다!

맨 처음 클론을 했었나? 하다가 여러번 망하고 실패하고 지우고 다시 시작하고 과정을 겪고 드디어 연동하기를 이해했다.

핑크선 머지해주기 !

전부터 자꾸 거슬렸다.

상위폴더에가서 .git <-- 삭제하면 됨!

node -v

우선 노트 버전 체크

sudo npm install -g n

n 모듈 설치 (안되어있으면)

sudo n latest

node.js 최신 버전 설치

node -v

잘되었는지 확인

npm -v

npm 버전 확인

sudo npm install -g n 

npm 재설치

출처: https://www.bottlehs.com/etc/mac-%EC%97%90%EC%84%9C-node-js-npm-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8-%ED%95%98%EA%B8%B0-2021/

했는데

읭...?

아니 오류 무슨일...? 계속 해보고 해보고 안됐는데 ...

캐시 지우니깐 잘 됨

npm cache clean --force 

이거는 하면 안되가지고

npm cache verify

로 했다.

출처: https://icerabbit.tistory.com/78

생성 완료

근데 문제는 캐시 삭제 안하고 프로젝트 생성하려면 오류남...????? 하 ... 산넘어 산이네 아주

영상 보면서 하다가 그냥 기억나는대로 했다가

망해서 정말 한참을 찾아봤다...

vs code 마켓가서 git graph 설치하고

안되는 이유가 있었다. orign과 main이 연결되어 있지 않음 이것 저것 열심히 눌러보고 하다가

우선 기존 origin/origin 저거를 삭제했다. 가지고 있을 이유가 없었고..!

깃에가면 자꾸 풀리퀘에 저렇게 뜸.. 그니깐.. 풀리퀘를 할 수 없게 반대로 base:main ??:origin 이렇게 되어있었다.

git checkout main

git push origin main -f

사실 내 오류같은 경우는 순전히 내가 잘못 시작한거라 애매했었는데 어찌 저렇게 터미널에 입력하니 되었다... 뭐 되면 괜찮은건가? .....허허

일주일내내 열심히 만들었던 피그마... 최종본 처음에 만들었던거는 삭제하고 다시 만들고 필요한거 넣고 빼고 마지막 백엔드 친구들이 할 작업만 남았다.

간만에 프로젝트하려니 까먹은게 대부분이라 백엔드는 쿨하게 포기. 해봤자 회원가입 로그인만 가능한 수준... 프론트만 담당하기로

이제 코드짜기만 들어가면 진짜로 시작 !!

화이팅 ~

div가 block으로 되어있어서 안되었다.

div 속성 해주고..

됐다. 이거 찾느라 고생 실수는 반복하지 말자 ~~

터미널에서 실행시 자꾸 에러가 떴다. 여러방법 다 찾아봤는데 '경로'의 문제인데... 이 경로를 바꾸는 방법은 차차 찾고

현재 내 포트포리오폴더에서 porfo에서 터미널을 열고

npm start

실행이 잘나온다. 물론 중간에 에러뜨는거 몇가지 삭제 해줬다.

헤더가 잘 나온다

생성하려니깐 자꾸 저 에러가 뜨고 생성이 안됨. 분명 어제까지는 잘 만들었는데...?

npm -v 

버전 잘 있나 확인

npx create-react-app 프로젝트명 

npm 아니고 npx !!!

무사히 설치 완료 끝..

어떨때 쓸까?

1. 반복적인 html축약할 때
2. 큰 페이지들
3. 자주변경되는 것들

저렇게 인덱싱에 해버리면 다시 돌아올때 힘듬 그래서

이렇게 복사본을 만든다.

state가 array/object면 독립적 카피본을 만들어서 수정해야한다.

경고창을 보기 싫을 때

상단 맨 위에

/* eslint-disable */

span을 누르면 좋아요가 눌리는 상황 만들기

onClick={ function(){console.log(1)}}

== 

onClick={ ()=>{console.log(1)}}

좋아요 숫자는 계속 변화하니깐 useState로 저장해둔다. onClick={} 안에 함수를 넣어야 한다.

state[이름, 변경함수]

state변경함수(새로운state)

*state 함수에 = 등호들어가면 안됨!

state는 변동시 자동으로 html에 반영될 때 즉, 쉽게 말하면 자주 변경될 것 같은 html부분은 state로 만들어서 저장

useState('바뀌는 값');

let [바뀌는값의이름, 변경함수] = useState('바뀌는 값');

한번에 쓸때는 대괄호 [] 안네 넣어서 쓰기

그치만, { 글제목 } 이라고 해놓으면 저렇게 쭉 나열되기에

인덱싱을 하자

1. claaName=""

2. style={ {color: 'green' , fontsize: '18px'} }

3. let post = 'I like React';

{ post }