이번 프로젝트의 개발 목적
- 유머 있고 재미있는 짤방(이미지)를 누구나 간편하게 만들 수 있는 웹 팩 홈페이지를
제작함으로써 브라우저를 이용하는 모든 사용자에게 배포하는 게 목적이다.
- 효율적이고 신속한 구현이 목표라서 확실한 절차를 걸쳐 구현 할려고 한다.
- 기능을 먼저 구현하고
- 그 다음 css 작업으로 스타일링
- 미흡한 부분을 보안하고 추가할게 있으면 추가
- 완성된 제작물을 배포
참고했던 사이트
-
이럴땐 이런짤 이라는 각종 짤방를 다운로드 받을 수 있는 사이트다.
짤방 이미지를 자신이 원하는 문구로 넣을 수 있고 그런 이미지를 다운로드를
할 수 있었는데 이게 아주 마음에 들어서 이 기능구현을 목표 잡았다. -
물론 이 사이트 모든 부분을 본인 혼자서는 구현은 힘들기에
이미지를 업로드 후 편집하고 다운로드로 돌려 받는 기능만 계획함.
처음에는 터미널에서 CRA 설치
- 리액트를 조금이라도 아는 사람은 유명한 보일러 플레이트로 프로젝트를 시작하기 위해
터미널에서 설치를 원하는 디렉토리로 진입한 다음
"npx create-react-app JJalbang_create_custom"
을 입력했으나 위 사진 같은 이유로 거절 당했다....
어플 이름을 지을 때는 대문자를 없이 지어야 한다.
얌전히 소문자로 바꾸고 다시 입력했다.
$ npx create-react-app jjalbang_create_custom- 터미널이 이런저런 버전들이 설치 되는걸 보여주고
Happy hacking! 멘트로 마무리 해준다.!!!
$ code jjalbang_create_custom으로 VS code를 실행한다.
-
gitHub 홈페이지에서 new repository 클릭해 앞으로 커밋을 올려 둘 새 레포지토리를 만든다.
지금처럼 디렉토리를 미리 만든후 new repository를 만드는것이면
체크 사항 부분은 전부 건너 뛰는게 좋다. -
기존 디렉토리에
git init을 하기전에 CRA가 있는 디렉토리와 상관없는
repository를 만들어 버리기 때문이다.
따라서 레포지토리 이름만 작성 후 빨간원의 버튼을 클릭한다.
- 빨간원의 버튼을 클릭하면 해당 명령어들을 모두 복사하게 된다.
그대로 터미널에 붙여넣기 해본다.
- 그림처럼 CRA의 초기세팅 내용 그대로 깃허브에 올라왔음을 알 수 있다.
또 보면 branch가 master -> main 로 바뀌여 있는데.....
마이크로소프트 깃허브, '마스터·슬레이브' 용어 없앤다 - 씨넷코리아 | 글로벌 IT 미디어 (cnet.co.kr)
-
깃허브 측에서 Black Lives Matter 운동의 이유로
기본으로 주어진 세팅 그대로 new repository 작업을 했을시,
main으로 생성된다고 한다. -
원한다면 기존의 master로 바꿀 수 있다고 한다.
하지만 좋은 뜻으로 나온 정책이고
관련된 명령어도 많이 바뀌는게 아니라서 그대로 진행했다.
- http://localhost:3000/ 을 실행해보면 앱이 잘 작동하는 것도 확인 가능하다.
쓰지 않는 테스트 코드와 파일 제거
이제 여기서 쓰지 않는 테스트 기능을 제거 하기로 한다.
src / index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
src / App.js
import React from "react";
function App() {
return <div>jalbang</div>;
}
export default App;- 이렇게 쓸데없는 코드를 지우고 변경한 다음….
- 그림처럼 src 디렉토리 안에 있는
App.js,index.js파일만 남기고 삭제한다.
README.md도 수정하고....
$ npm start로 테스트 해본다.
브라우저의 URL (http://localhost:3000/)에서 'jalbang' 텍스트가 잘 나오면 성공이다.
이로서 개인적으로 진행할 토이 프로젝트의 밑그림이 완성되었다!!!
