민혁이의 IT스토리

오늘 개발 할 파트는 메뉴 입니다 목차 컨포넌트 분리코드 리뷰스스로 아쉬운점컨포넌트 분리header/├── _component\nav/│ ├── mainMenu/│ │ ├── MainMenu.jsx│ │ └── style.js│ └── subMenu/│ ├── SubMenu.jsx│ └── style.js├── Header.js└── style.js 설명 : 메뉴가 헤더 부분에 위치하고 있기 때문에 헤더에서 부터 하위 컨포넌트도 뻗어 나가도록 파일을 분리하였습니다. header -> nav -> menu(Main,Sub) 코드 리뷰 내용 : 헤더 컨포넌트는 로고,메뉴,로그인/회원가입 등을 담고 있습니다. 그중에서도 메뉴는 로 되어있는 부분입니다. ..

전 게시물 typers-client/│├── node_modules/ # 설치된 의존성 모듈들├── public/ # 정적 파일 (HTML, 이미지 등) 위치│├── src/ # 소스 코드 디렉토리│ ││ ├── global/ # 전역 스타일 및 공통 설정│ │ ├── common.js # 공통 유틸리티 함수 또는 설정│ │ ├── global.jsx # 전역 스타일 컴포넌트│ │ └── theme.js # 테마 색상, 폰트 등 정의│ ││ ├── moduls/ # 전역상태..

드디어 이제 본격적으로 개발에 들어갈 수 있게 되었습니다!당장 코딩부터 시작하면 좋겠지만, 그렇게 진행하게 되면파일 경로가 꼬인다거나, 필요한 모듈을 매번 그때그때 설치해야 되는 등의 문제가 생길 수 있습니다.이러한 이슈를 방지하기 위해, 개발을 시작하기 전에폴더 구조를 미리 세팅하고, 필요한 모듈이나 라이브러리를 미리 정해서 설치하는 작업을 프로젝트 세팅이라고 하는데요?오늘은 제 담당인 프론트쪽 프로젝트 세팅을 하는 과정을 기록하려고 합니다. 프로젝트 세팅라이브러리 설치 라우팅 (페이지 이동)라이브러리설명설치 명령어 react-router-dom SPA에서 페이지 전환을 도와주는 라우팅 라이브러리 npm install react-router-dom 상태 관리(redux)라이브러리설명설치 명령어red..

프로젝트를 진행하면서 가장 먼저 신경 쓴 부분 중 하나는 바로 유저 플로우(User Flow)였습니다.처음엔 조금 생소하게 느껴질 수도 있지만, 간단히 말하면 사용자가 우리 서비스를 어떻게 이용하게 될지를 시각적으로 정리한 흐름도예요.예를 들어"홈페이지 → 문장 선택 → 타자 연습 → 결과 확인"이런 식으로 사용자가 사이트에서 어떤 경로로 이동하게 될지를 미리 파악할 수 있는 중요한 작업 중 하나라고 생각했습니다.그래서 어느 정도 사이트의 틀을 잡은 후,사용자가 어떤 경로로 사이트를 이용하게 될지 하나하나 흐름을 정리해보았습니다. 유저플로우 과정 유저 플로우를 만들 때, 처음 시작점은 '홈 화면'으로 잡았습니다.그 이유는 가장 먼저 사용자가 마주하는 페이지이기도 하고, 홈 화면을 기준으로 흐름을 뻗..

이번에 학교 친구들과 팀 프로젝트를 하게 되는 좋은 기회가 생겨서,개발 과정을 블로그에 함께 기록해보려고 합니다!사이트의 기획부터 개발까지 전반적인 과정을 모두 참여하고 있지만 블로그에는,개발 위주로 내용을 올릴 예정이에요.아무래도 블로그 이름이 민혁이의 IT 스토리인 만큼, IT에 좀 더 집중하려고요 😄프론트엔드 개발자를 꿈꾸는 입장에서,이번 프로젝트를 통해 정말 괜찮은 웹사이트를 만들어내고,꼭 제 포트폴리오에 자랑스럽게 올릴 수 있도록 열심히 해보겠습니다!     목차 팀원 소개나의 역할사이트 소개  팀원소개팀원 구성은 크게 개발팀과 사이트 디자인으로 나눴습니다. 사이트 기획은 개발자팀이 같이 했습니다.(참고: 저도 개발자팀이에요 ㅎㅎ) 개발팀  - 백엔드 1명  - 프론트엔드 1명  디자인팀  -..