이번 주차부터는 언능 디자인을 끝내야겠다고 생각했다.
그래야 화면 설계와 기능 구현이 가능하기 때문에 css는 차근히 할 생각이다.
메인 페이지 디자인 확정
우선 디자인과 컨셉은 확정되었다.
아예 다 디자인하진 않고 이런 부분은 이렇게 만들어야겠다하고 참고자료로 넣은 부분도 있다.
단과대별에서 지도 부분이랑 학식 식단표, 달구지 시간표, footer부분은 차차 디자인해갈 계획이다.
내가 디자인을 좋아하긴 하지만
그래도 공대생으로서 난 코딩으로 그걸 구현하는게 더 좋다.
그래서 디자인하면서 행복하긴 했지만 이걸 잘 구현할 수 있겠지? 싶으면서도
빨리 구현을 시작하면 좋겠다고 생각했다.
React 설치 및 설정
드디어 구현을 위해 React설정을 진행했다.
처음 써보는 라이브러리가 기대가 되면서도 걱정도 됐지만 열심히 하면 익숙해질 거라고 믿었다!
이 강의를 통해 환경 설정을 진행했다.
React와 Vs code를 설치하고 버전은 다 최신으로 깔았다.
은근 React 설정을 하면서 여러 오류를 겪었다.
1.
처음엔 React가 깔리다가 계속 오류가 나면서 종료가 됐는데
이는 관리자 권한으로 실행해서 다운로드하니 해결했다.
2.
그러다가 터미널 실행 중
commandnotfoundexception in visual studio code
이런 오류도 났었다.
Visual Studio Code의 기본 터미널이 Windows의 Power Shell로 설정되어서 난 오류라고 해서
기본 Shell을 Command Prompt 로 설정하고 터미널을 껐다가 키니까 오류가 해결되었다.
3.
터미널 설정이 끝난 후 React 앱을 다운로드하기 위해
터미널에 npx create-react-app reactexam1을 작성하니 오류가 났다.
이는 npm관련 문제라고 생각해서 여러 구글링의 방법으로 해도 안되서
--force를 써서 install하려고 했지만 --force로 되지 않아서
결국..
1) C:\Program Files (x86)\Nodejs 폴더 / C:\Program Files\Nodejs 폴더 제거
2) C:\Users\Administrator\AppData\Roaming 폴더 안에 npm / npm-cahe 폴더 삭제
3) C:\Users\Administrator 폴더 안에 package-lock.json파일 / node_modules 삭제
4) npm cache clean --force로 캐시 삭제
(출처:https://manition.tistory.com/31)
위 방식으로 제거하고 다시 다운로드 했다.
LTS버전으로 깔아서 진행하다가 최신 버전이 아니라서 안되는 부분이 있었던 것 같다.
다시 다운하니 최신 버전으로 업데이트되었다.
4.
그렇게 설치한 React app을 App.js파일을 수정해서
start를 하기 위해
npm start를 썼다.
근데 오류가 났다...
ERROR in Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\..\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\...\eslint-config-react-app\base.js".
라이브러리간의 충돌이 일어난다는 내용이다.
자세히 보면 package.json의 eslintConfig 세팅과 BaseConfig에서의 eslintConfig 세팅이 충돌난다는 내용이라
package.json의
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
부분을 삭제하니 해결됐다.
(출처: https://calm-lee.tistory.com/255)
이제 React 강의 들으며 공부하고 어떻게 코드를 짤 지 고민했다.
화면 구현& 레이아웃 설계
화면 구현을 위해 피그마에서 그리드 설정 후 크기를 지정했다.
오토 레이아웃 설정도 해야하지만 이는 이번 주까지는 힘들 것 같아서 우선 크기로 지정했다.
위와 같이 구조를 짜고 리액트에 작성했다.
위와 같이 파일을 생성하고 각각에 맞게 코드를 구현했다.
body의 구조는 layout에 다 작성했다.
근데 layout도 페이지별로 나눠야 하나 고민이다...
위와 같이 화면을 구현했다.
이제 반응형 웹 제작을 위해 오토 레이아웃 설정과 각 배치된 부분의 기능을 구현할 차례이다.
이는 다음 주차에 진행할 예정이다.
'프로젝트' 카테고리의 다른 글
| [Web] 프로젝트 1 주차 - 메인 페이지 디자인 & 구현 기능 기획 (1) | 2023.09.15 |
|---|
