Renewal Goal
가독성이 좋고 사용자가 편리하게 사용할 수 있는 앱을 만들고자 함.
SPA에 대한 개념 이해 및 React 기반 Style 구현
Style #깔끔한 #편리성 #가독성좋은
Font - Family Pretendard - 한글 및 영어 기본 서체
Color
- #000000
- #eeeeee
- #ff0000
Main
Point
Sub
Point
앱 사용자들을 고려한 가독성 좋고 심플한 UI/UX 디자인
FrontEnd
Router, Vite, Vercel를 활용한 React 기반의 SPA에 대한 개념 학습
CSS Module, Styled-Component에 대한 학습
Components에 대한 이해
Problem Solution
1. 19대의 주차구역 사이의 여백이 없어 답답해보임
ID 값을 주어 삼항연산자에 해당하는 ID 값만이 노출되도록 하고 두개의 세션으로 나눠 여백값을 줌.
{data.map(({ id, number, status }) =>
id <= 9 ? (
<ParkingSpot
key={number}
/>
) : (
false))}
2. HTML 방식의 img 형식으로 입력시 img가 보이지 않음
변수명으로 적용 또는 절대 경로로 적용 하는 방식이 있어서 변수명으로 구현
3. CSS 파일을 만들었으나 Style 값이 먹히지 않음
Component 파일로 만들어서 css 파일 앞에 module를 붙혀서 파일을 생성해야됨.
4. 기존 페이지가 아닌 곳에서 img를 태그를 사용하였는데 그 전 페이지의 값이 입력됨
계속 동일하게 사용하는 페이지의 값을 class 명을 주지 않고 img 태그 값을 사용하여 중첩이 되어 문제가 발생함.
class 값을 주어 해결함.
Review
학원에 정해져있는 시간이 있다보니 React라는 프로그램은 짧게 배우게 되었는데요. 최대한 배웠던 코드들을 활용하여 만들으려고 하니 정말 막막했던 프로젝트였습니다.
React라는 프로그램은 기존 HTML 코드와는 달리 싱글 페이지의 형태이기도 하고 img를 넣는 방식도 다르고 Style 값이나 ClassName 등 생소한 코드들이 많아 처음에 배울때는 재밌게 시작했는데 뒤로 갈수록 어렵게 다가왔습니다. 하지만 그 어려움을 극복하고자 개인적으로 학원 외 시간에 학습을 하며 완성을 하였습니다.
또한 퍼블리싱시 프론트앤드가 하는 업무도 알면 사이트를 구현할시 더 좋을 것 이라고 생각하면서 프로젝트에 임했으며 배움의 시간이 더 길었다면 더 많은 기능들을 사용해봤을 것 같은데 그 점이 아쉬웠던 것 같습니다.
SEJIN BRONZE VILL
세진브론즈빌
기존 세진브론즈빌 디자인을 했던걸 영감을 받아 기존 앱과는 다른
느낌의 디자인과 기술을 보여주고자 선정하게 되었습니다.
PROJECT
SKILL
개인 디자인 및 프론트앤드 프로젝트
React, Vite, Vercel, Router
사이트 방문하기