코드 작성을 완료하고 사이트를 배포하기 위해 node.js와 netlify를 사용해 배포 환경을 만들었다. 배포까지 완료한 후 링크를 통해 페이지에 들어갔을 때, 생각지도 못했던 오류가 발생하고 있는 것을 확인했다. 분명 Local Live 환경과 Local build 환경에서는 작동이 잘 되던 기능이 배포 환경에서 작동하지 않는다는 것이었다. 처음에는 오류가 발생하는 원인을 알 수 없어 막막하고 비상🚨이 걸렸지만, 리더님께 피드백을 받고 오류의 원인부터 하나씩 찾아가기 시작했다. 1. 이미지 경로 오류 상품 페이지에서 상품 정보를 확인하는 이미지가 사이트에 제대로 안 불러와지고, 화면에 안나타나는 오류가 발생했다. 상품 이미지 경로를 script 코드에 명확히 속성을 주었으나, 배포 사이트에서 이미지 ..

페이지를 연결하고 css를 적용하는 과정에서 작은 오류들을 해결한 과정에 대해 적어보려 한다. 맡아서 제작했던 컴포넌트가 아니었기에 따로 글을 구분해서 작성하지는 않고, 한번에 적어보겠다. 내가 작성한 코드가 아니어서 오류의 원인을 발견하고 수정하는 데 시간이 꽤 걸렸지만, 오히려 코드를 분석하고 오류를 찾아내는 경험을 기르기에 좋은 기회였다고 생각한다. 1. swiper 이미지 overflow 충돌 해결 hover css를 적용하는 과정에서 swiper의 이미지가 확대될 때, swiper의 크기에 막혀 확대 부분이 안보이게 잘려지는 것을 발견했다. swiper에 overflow:hidden이 적용되어 있었기 때문인데, 처음에는 hidden을 visible로 바꾸어 이미지가 swiper 밖으로 확대되도록..

구매 페이지는 반응형 웹이라는 목표에 초점을 맞춰 사용자가 최대한 정보를 보기 쉽도록 레이아웃을 구성하는 데 많은 힘을 썼다. 기획에서부터 모바일과 웹 화면으로 나누어 구조를 만들었고, 포함될 주문 단계 역시 간소화했다. 1. 모바일 화면 모바일은 화면의 크기가 작기 때문에 주문 상품 정보를 나란히 배치해 한눈네 확인할 수 있도록 했다. 이에 display:flex 속성을 사용했고, 나란히 배열하니 상품 정보가 서로 공백 없이 달라붙게 되어 보기에 불편하다는 것을 확인했다. 따라서 상품 정보를 포함한 div에 margin을 주고싶어졌다. 모든 div에 margin을 주기엔 레이아웃이 의도와 달리 변형될 것 같아 not(:nth-child), not(:last-child) 속성을 활용해 원하는 위치의 di..

메인 브랜드 컴포넌트는 처음 사이트에 들어갔을 때 브랜드를 어필할 수 있는 컴포넌트를 개발하는 것이라 브랜딩 사이트라는 목적을 이루기 위해 많은 신경을 쓴 부분 중 하나이다. 디자인을 할 때부터 브랜드 명과 설명의 위치, 구도를 잡고 반응형에 따른 레이아웃도 다르게 주었다. 또한, 브랜드 명이 잘보일 수 있도록 background 사진을 어둡게 만들어 글자가 부각되도록 기획했다. 1. 반응형 웹 오류 media 쿼리를 이용해 브랜드 명과 설명의 레이아웃을 달리하면서, 글자 크기나 간격이 일정하지 않고, 모바일 화면에서는 이미지와 글자가 잘리는 오류가 발생했다. 처음에는 이미지를 html코드에 직접적으로 주고, 저체 컴포넌트 height를 vh로 설정했으나, 위와 같은 오류로 인해 다른 방법을 고려했다. ..

먼저 이 프로젝트는 프론트엔드 프로젝트임을 밝히며 글을 시작하겠다.  헤더 컴포넌트는 팀원이 반응형 웹을 구현하는 과정에서 어려움을 느껴 팀원을 대신해 구현을 하게 되었다.   1. 헤더 컴포넌트 구현 먼저, 웹 화면에서 nav bar를 구현한 상태였기에 collapsible과 toggle을 활용해 모바일 메뉴 토글을 구현하려고 했다.그러나 collapsible을 적용하는 과정에서 메뉴 아이콘에 toggle script가 적용되지 않거나, nav bar 형태 그대로 toggle되는 등 오류가 발생했다.  따라서 다른 구현 방법을 고민하게 됐다. div로 새로운 모바일 메뉴 요소를 구현해주고, media 쿼리를 이용해 display:none 속성을 적용하면되지 않을까라는 생각을 하게 됐다.media 쿼리로..

프론트엔드 개발 기획과 디자인을 토대로 컴포넌트 별로 개발을 시작했다. 개발 기간은 3/13 ~ 3/21까지 총 9일동안 진행했고, 노션과 슬랙을 통해 진행상황을 매일 공유하며 프로젝트를 진행했다. 이번 프로젝트에서 팀장을 맡게되어 일정 관리와 팀원들의 역할 분배에 가장 많은 신경을 썼고, 공동으로 작업하는 노션으로 공지를 올리고 스케줄을 관리할 수 있도록 유도했다. 본격적으로 컴포넌트 개발을 하면서 메인 브랜드, 버튼, 이벤트 배너, 구매페이지, 헤더 컴포넌트 등을 개발했고, 애니메이션과 css 적용을 담당하여 프로젝트를 진행했다. 컴포넌트를 개발하는 과정에서도 팀원들이 어려움을 느끼거나 문제가 생기면 같이 고민하며 문제를 해결했고, 진행하지 못하는 부분은 대신 넘겨 받아서 수행하는 등 서로 도우면서 ..

기획 부트캠프 교육을 시작하고 첫 프로젝트를 진행하게 되었다. 프론트엔드 프로젝트인 만큼 시각적인 부분에서 어떤 것을 어필할 수 있을지 고민이 많이 됐다. 소재도 특별한 걸 하고 싶었지만 배운 것을 잘 활용해보자는 의도에서 소재는 간단히 쇼핑몰을 만들어보자고 팀원들과 의견을 나눴다. 소재는 흔하게 볼 수 있는 내용이지만 기능을 추가해서 조금이나마 프로젝트의 특별함을 어필해보기로 했다. 최근 디지털 약자를 대상으로 디지털 격차가 증가하고 있는 추세라는 점을 고려해 1. 큰 글자로 확인할 수 있는 기능 2. 설명서를 이용하는 것과 유사하게 단계별로 주문을 완료할 수 있도록 페이지 간소화 및 단계화 라는 2가지 기능에 point를 잡고 쇼핑몰 페이지를 만들어보자고 제안했다. 그러나, 팀원들이 열흘이라는 프로젝..

3주차 회고 부트스트랩을 이용하여 웹사이트를 만드는 방법에 대해 배우고, 본격적으로 1차 프로젝트를 시작하기에 앞서 컴포넌트 제작, 반응형 웹 사이트 제작과 관련해 연습해볼 수 있었다. 프로젝트 회고는 진행상황에 따라 다음 글에서 작성하려 한다. 1. 부트스트랩 (bootstrap) : 웹사이트를 쉽게 만들 수 있도록 도와주는 공개 html, css, js 프레임워크 => 부트스트랩을 이용하여 css를 설정하려 한다면 클래스 명을 복사, 붙여넣기 해주면 된다! ex. 파란색 블록, 검은색 블록을 만들려고 할때, 클래스명을 부트스트랩에서 text-bg-primary, text-bg-dark 로 설정하면 화면과 같이 블록이 생긴다. 이외에도 bg-primary, bg-accent 등 클래스 명을 통해 부트스..