1. Figma 디자인Figma로 진짜 간단하게 디자인을 진행하여 틀을 잡았다.이전에 만든 메뉴바랑도 다른 느낌이 보이지만 임시 디자인이라 기능만 제대로 구현되도록 진행하였다.일단 4분할 화면에서 진행할 수 있도록 했고, 각 화면은 모듈화 하여 진행하였다. 일단 설명하기 앞서 프로젝트 간소화를 위해 규모 관련 데이터는 제외하고 데이터베이스를 구성해두었다.2. 메인 화면jsxconst MainPage = () =>{ return( ..

1. 메뉴바 모듈화은행, 코인, 블로그, 카페 등 어느 홈페이지나 중복적으로 사용하는 메뉴바는 존재한다.하지만 그때마다 메뉴바 관련 내용을 복붙해서 넣을 것인가? 난 그런 거 싫다사실 아무것도 모르고 프론트엔드를 맡아서 프로젝트를 진행했을 때는 복붙해서 넣었다.그런데 수정사항이라도 생기는 순간, 각 화면에 가서 수정을 해야한다. 이 얼마나 불편한!!! 일인가.그 개고생을 하고 나서 모듈화에 집착이 생긴거 같다. ㅋㅋㅋㅋㅋ 모듈화 방법은 저번 글이랑 동일하다.모듈 디렉토리를 새로 만들고 코드를 작성한다.jsximport React from "react";import className from "classnames/bind"import styles from "./MenuBar.module.css"const ..

1. 로그인 회원가입 화면을 구현아직 백엔드 측에서 로그인 관련해서 만들어진게 없어서 화면부터 구현해보자. 일단, 로그인 버튼 누르면 post를 보내고 세션을 추가하는 작업 대신 console.log로 보내려는 내용이 잘 보내지는 지 확인해보자.2. Input  태그 박스 모듈화개인적으로 반복적으로 사용되는 것들은 모듈화를 하려고 하는 편이다. 구분하기도 쉽고 html이 무자비하게 길어져 확인하기 어려워지는 것을 방지할 수 있다.src에 modules 디렉토리를 추가하고 원하는 모듈을 제작하자.jsx 코드는 아래와 같다.import React from "react";import className from "classnames/bind"import styles from "./InputBox.module.c..

왜 그냥 .css를 사용하지 않고 .module.css를 사용했는가.이유는 간단하다. 빠르게 제작을 해야했으니까 왜 빠르게 제작할 수 있냐? 현재 하고 있는 과제 프로젝트의 제작 예정 기간은 10일이다.다양한 화면을 구성해야하기에 2명 프론트엔드 개발자가 붙었다. 각 과정에서 중복된 css 명은 후에 편집이 힘들 수 있다.물론 처음부터 계획을 잘 짜고 진행하면 편하겠지만 다른 과제도 해야하고 시험도 준비해야하니 어렵다 ❗️그래서 .module.css를 사용한다.모듈화하기 좋고 가독성도 좋고 스코핑하기 유리해서 스타일 충돌이 발생하지 않는다.추가적으로 classname을 bind해서 사용하면 좀 더 쉬운 사용이 가능하다.import className from "classnames/bind"const cx ..

1. 각 주소마다 화면 구성하기npm install react-router-dom화면 전환에 자주 사용하는 react-router-dom을 설치하자.다른 것도 있는데 그냥 이게 익숙해서 진행했다.가벼운 걸로 'wouter'가 있다고는 하는데 작은 프로젝트에 적합해서 향후 큰 프로젝트를 위해 react-router-dom을 사용하자.2. App.js 날리기React는 하나의 앱을 만드는 작업이라 생각하면 편하다.App.js이란 앱을 실행하면 이 앱 안에 각 화면이 구성하고 있는 것으로 생각하자.이때 메인페이지가 '/'가 되는 것이다.(물론 시작을 다른 주소로 설정도 가능하지만 기본 Default가 그렇단 얘기) 그러므로 App.js에 각 화면에 전환할 수 있도록 설정을 해주면 되는 거다.그 시작이 npm ..

1. Vite로 프로젝트 생성npm create vite@latest swe-project -- --template react터미널에서 해당 코드를 실행하면 'swe-project' 명으로 react template의 프로젝트가 생성된다.생성된 파일을 확인해보면 다음과 같다.RCA로 생성한 것과 비슷한 구성을 가졌지만 확실히 가벼운 느낌이 있다.2. Vite 시작 테스트npm installnpm install 명령어를 통해 node_modules가 생성되었다.npm run dev5173 port에 화면이 나타난다.RCA에서 npm start를 하면 자동으로 화면이 나타나지만 Vite는 바로 안 나타난다.(오히려 좋아)Cmd+click으로 링크를 열 수 있다.정상 동작함을 확인할 수 있다.심지어 실시간 편..