리액트앱 생성하기

밍이는 회사 보안이 너무 심해서 코드 한줄도 가져올 수 없다는 것이 너무 아쉬웠다

이제 이직하려면 포트폴리오가 있어야하는데 내가 회사에서 열심히 만든것들을 작품으로 보일 수가 없어서 안타깝다

그래서! 오늘부터 회사에서 만든 페이지의 기억을 더듬더듬어서 나혼자 포트폴리오를 만들어보려고 한다

퍼블리셔들도 없고 설계팀 지원도 없지만 나혼자 퍼블리싱, 기획을 다해서 데이터 베이스의 내용을 조회하고 화면에서 인풋한 값을 넘기는 정도의 화면을 구현해 보려고 한다

​

1. 리액트로 앱생성하기

2. 보기 좋게 약간의 디자인을 가미하기

3. 쓸만한 데이터 베이스를 구하기

4. 값 넘길때 스크립트 처리하기

​

리액트앱 생성해보고 나니 퍼블리싱이 필요 없을 정도?까지는 아니지만 아무튼 어느정도 node_module들이 잘되어있다. 여기서 가져다가 사용하면 꽤나 이쁠것 같다

​

앱생성은 간단하다. vs code 실행해서

터미널> yarn global add create-react-app

터미널> create-react-app webFront

webFront (프로젝트명)로 이동해서

터미널> npm i

​

근데 내 컴퓨터로 하니까 엄청 느리다.. 그다음 진도를 나갈 수가 없다... 양치하고 와야징

​

컴퓨터에 리액트 실행시 필요한 파일이 전체 설치되지 않은것인지 자꾸 에러를 뱉었다

npx create-react-app web-front 이 명령어를 사용해봐도 사실 안되었다.

그냥 일단 자존심상하지만 다른 자들이 '리액트 프로젝트 생성하기' 이런식으로 올려논 깃 소스를 받아다가

터미널> yarn start 하니까 드디어 localhost:3000에 무언가 떴다. 휴우

​

리액트의 좋은점은 자꾸 run 시키지 않아도 vsCode에 수정한 소스파일 저장만 하면 로컬에 혼자 컴파일된다.

넘 편리하다

그리고 좀 더 페이지가 복잡해졌을때, 전체 페이지가 리로딩 되지 않아도 바뀌고 싶은 부분만 부분적으로 바뀌게 할 수 있다. 이는 store의 상태를 변화시켜 구현하는건뎨~

아 정말 할말이 많은데.. 왜 나는 그동안 업무일지를 쓸 생각을 못했지?

​

요림이랑 약속 : 저녁에 삼십분이상 놀아주기

나와의 약속 : 일 쉬는날에 VDI켜서 리액트 앱 제대로 만들기. w3cschool 소스도 참고해보기

​