[Foundation 3주차] 위스타그램 (인스타 클론 코딩) 리액트로 옮기기

[Pre-course 2주차]

• 인스타그램 클론 코딩 (=위스타그램)을 완성했다.(2페이지🤭)
  개인적으로 이게 2주만에 되는구나...하는 생각이 들었다. 자바스크립트도 얼레벌레 따라가고 있었는데 하다 보니 로그인 버튼도 활성화됐고, 댓글도 달린다!(같은 닉네임의 댓글만..🤣)
  
  
  

[Foundation 3주 2일차]

오늘은 저번주에 작업했던 순수 바닐라 자바스크립트로 구현한 인스타 클론 코딩(=위스타그램)을 리액트 폴더로 옮기는 작업을 진행했다. 미래의 나는 일부를 까먹거나 버벅일테니 여기에 기록해보려고 한다.

1. Desktop - wecode 폴더 안에 westagram-react CRA 프로젝트를 설치한다.
   [CRA 설치 방법은 아래와 같다.]

// 1. Desktop - wecode 폴더 진입(=만들고자 하는 프로젝트 폴더)
cd Desktop/wecode

// 2. westagram-react 프로젝트 설치(터미널에 아래 멘트를 쳐주자.)
npx create-react-app westagram-react

// 3. westagram-react 프로젝트 진입(꼭 해당 프로젝트 폴더에 진입해서 스타트 할 것)
cd westagram-react

// 4. 로컬 서버 띄우기
npm start

2. src 폴더 안에 - pages 폴더 - Login 폴더, Main 폴더를 생성한다.

3. Login 폴더 안에 Login.js, Login.css 파일을 생성한다.

4. Main 폴더 안에 Main.js, Main.css 파일을 생성한다.
   위의 2번~4번은 사진으로 보여주는게 낫다고 생각되므로 이미지를 첨부 함😊
   

5. 이전에 JavaScript로 구현한 Westagram 소스 코드 중 html, css 코드를 복사 붙여넣기 한다.
   5-1. Fontawesome 이미지나 웹 폰트를 적용했을 경우 index.html 파일에 복사해서 붙여넣기 해주자 자세한건 아래의 이미지 참고할 것
   
   5-2. 각각의 폴더 안에 만든 Login.js & Main.js파일의 최 상단과 최 하단에 아래와 같이 연결 된 파일들을 import 또는 export해주자.
   
   5-3. 마찬가지로 index.js파일에도 메인 페이지와 로그인 페이지를 import해주자.
   

6. public 폴더 안에 - images 폴더를 생성하고 내가 클론 코딩에 쓴 image 파일을 복사 붙여넣기 한다.

7. img 태그 src 값으로 ./images/(파일이름) 이렇게 지정해주자.

예)<img alt="feed image" src="./images/feedimg.jpg" />

8. css에서는 public 폴더에 접근하는게 불가능하므로 background-image에 활용해야하는 이미지들은 src/assets/images/ 디렉토리에서 관리해주자.
9. npm start 를 해서 Login, Main 컴포넌트가 각각 잘 나오는지 확인하면 끝!