멈추지 않는 프론트엔드 개발자

✍️들어가기전...프론트엔드쪽 작업을 시작하기 전에 팀원끼리 각자 맡을 파트를 정했는 내가 처음으로 맡게 된 파트는 date selector였다. 메인에서 가장 상단에 위치해 있고 다른 기능끼리 연결되야해서 어떻게 할지 초반에 고민을 했었던 것 같다. 그럼 date selector를 구현한 과정에 대해 포스팅을 시작할까한다! 💡 styled-components로 기본 틀 만들기아래 코드는 styled-components로 기본적인 틀만 만든 코드이다. 간단하게 하드 코딩으로 틀을 잡아 놓고 추후에 하나씩 기능을 추가하는 방식으로 진행하였다.import styled from 'styled-components'; import { SlArrowLeft } from 'react-icons/sl'; export ..

✍️들어가기전...이제 부터 본격적으로 프론트엔드 개발을 시작했다. 페이지 단위로 로직을 작성하기 전에 공통적으로 사용되는 것들을 우선적으로 컴포넌트로 빼서 관리하기로 했다. 그 편이 재사용성을 높여 로직을 최소화 할 수 있고 통일성 있는 UI를 만들 수 있기 때문이다. 그럼 이번에도 진행했던 내용을 잘 정리해보겠다. 💡 공통 모달 만들기사용될 모달은 식단, 운동 모달 두 가지 이고 그 외에도 수정하기 버튼을 클릭했을 때 버튼이 수정하기와 삭제하기 버튼으로 바껴야 한다. 그렇기 때문에 총 3가지의 모달이 존재한다. 아래는 처음 작성했던 로직이다.export interface ModalCardProps { todoType: boolean; } const TodoModal = ({ todoType }: Mo..

✍️들어가기전...처음 프론트와 백엔드 포지션을 정할 때 백엔드 포지션을 다룰 수 있는 팀원이 없어 다 같이 풀스택으로 포지션을 정하고 백엔드 부분을 최소화하기로 했다. 물론 그렇게하면 프론트에서 처리해야 할 과정이 복잡할 수도 있지만 오히려 알고리즘에 대해서 더 배울 수 있는 기회라고 생각했다. 그래서 이번 포스팅에선 디자인과 백엔드 파트를 작업한 과정에 대해서 포스팅해볼까한다. 💡디자인하기 레퍼런스를 참고하면서 디자인을 진행했다. 사실 와이어프레임을 만들 때 기능에 대한 부분을 다 정해놓고 디자인을 해야한다고 하지만 😂 놓친 부분들이 꽤 많았기 때문에 디자인을 하면서 수정해 나갔다. 디자인을 진행하면서 가장 크게 고려했던 부분은사용성을 고려 했을 때 불편한 부분이 없는지사용성을 가정했을 때 빠진 부분..

✍️프로젝트를 시작하기 앞서... 시간이 정말 빠르게 지나갔다! 벌써 마지막 프로젝트라니! 이번 프로젝트는 3주간 진행되어 1주라는 시간이 추가로 더 주어진 만큼 다양한 기능을 구현해 볼 수 있는 기회가 더 많아졌다. 주제도 미정이라 자유도가 높아졌기 때문에 원하는 앱을 잘 기획해서 이번엔 더 열정적으로 불태워 보도록 하겠다! 화이팅!! 그럼 시작!! 💡 프로젝트 목표 1. 지금까지 학습한 웹 프로그래밍 지식을 서비스로 실현하며 해당 지식을 자신의 것으로 만들고, 3주 동안 웹 서비 스를 성공적으로 완성하여 자신의 포트폴리오를 제작합니다. 2. 기획부터 디자인, 개발, 배포까지의 과정을 직접 해보며 서비스의 제작 과정을 직접 체득합니다. 3. 팀원들과 Git을 통해 협업함으로써 현업 개발자의 분업 및 애..

✍️들어가기 전... addvice generator app을 만들면서 조언을 해주는 앱이니깐 타이핑 효과를 넣어서 실시간으로 조언을 해주는 효과와 더불어 좀 더 진정성 있게 보이지 않을까? 하는 생각으로 타자를 치는 것과 같은 타이핑 효과를 넣고 싶었다. 하지만 간단하게 만들 수 있지을 것 같다는 생각과는 반대로 생각처럼 동작이 되지 않는 문제가 생겼다. 이러한 문제를 해결하는 과정도 함께 블로그에 포팅해보면 좋을 것 같다. 💡typing effect cutsom hook 만드는 과정 타이핑 효과는 초마다 일정한 속도로 한 글자씩 렌더링 되어야 하기 때문에 setInterval 을 사용했다. setInterval 은 특정 시간마다 코드를 실행시키도록 하는 메소드로서 공식문서를 보면 아래와 같이 사용하라..

✍️들어가기 전... 본 프로젝트는 frontend mentor 에서 advice generator app을 챌린지 한 내용이다. 개발 환경은 아래와 같다. library: react, react-query css framewrok: tailwind css 💡디렉토리 CRA로 react-app을 설치하고 토대로 하여 디렉토리 구조를 아래와 같이 구성하였다. 💡CRA 설치 먼저 CRA를 사용하여 react app 을 설치. 참고로 npx는 패키지를 한번만 실행시키기 때문에 CRA와 같은 일회성 패키지를 받는데 사용한다. npx create-react-app my-app 💡tailwind 설치 tailwind 홈페이지는 설치 방법과 사용법이 굉장히 잘 되어 있어서 처음 사용해보는 사람도 쉽게 설치가 가능하다..

💡fetch로 POST 요청하기 결제 상세 페이지를 구현하기 위해선 카트 페이지에서 결제하기 버튼을 클릭했을 때 결제할 아이템의 정보를 가지고 주문을 생성해야 한다. 그러기 위해서 두개의 api를 사용해야 한다. 로그인된 토큰을 사용해서 get 요청을 보내 내 정보를 조회하고 조회한 데이터와 상품 데이터를 object에 담아 post 요청으로 주문을 생성한다. fetch로 get 요청을 한 코드이다. api 명세서에 나와있는대로 인증을 위해 headers에 토큰을 보내야 해당 토큰을 가진 사용자 데이터를 잘 보내준다. const response = await fetch("/api/users/me", { method: "GET", headers: { Authorization: `Bearer ${token}..

✍️목표 결제 상세 페이지를 구현 하던 중 작업했던 프론트 부분을 한 번 합쳐서 테스트를 해보자는 얘기가 나왔다. 그래서 header와 detail 페이지를 연결하기 위한 url작업을 먼저 해보기로 했다. 생각보다 금방 할 수 있을 줄 알았는데 의외로 복병이었다.😣 그래도 차근 차근 안되는 원인이 뭔지 파악하며 구현한 내용을 정리해 보려고 한다. 💡urlSearchparams로 url 파라미터 가져오기 처음에 url을 아래처럼 하고 불러오려 했더니 href=${/category/category.html#/category=${"new"} ####!!!!😡 해쉬 때문에 urlSearchparams로 get하면 쿼리로 넘긴 파라미터 값을 가져오지 못하고 null이 떻다..;; // const categoryU..

💡구현 목표 2주차엔 구현하지 못했던 나머지 페이지를 작업함과 동시에 관리자 페이지까지 욕심내서 해보는 것을 목표로 하고 있다. 결제 페이지는 장바구니에 있던 데이터를 post로 넘겨주기만 하면 결제 상세 페이지 자체를 구현하는 것은 받아오는 데이터를 화면에 보여주는 작업이 거의 전부이기 때문에 빠르게 구현하고 관리자 페이지로 넘어가 보려 한다. 결제 페이지 UI 구현 장바구니에서 결제 버튼을 클릭하면 결제할 상품의 데이터를 넘겨주어 고객에게 결제 정보를 보여주는 페이지를 구현 메인 페이지로 이동, 마이 페이지로 이동 버튼을 클릭하면 해당 페이지로 이동하도록 구현 결제 상세 페이지를 구현하기 몇일 전에 백엔드 분과 어떤 방식으로 구현할지 디코에서 얘기를 나눴는데 그때 정리했던 내용은 아래와 같다. 이때는..

💡header분리 메인, 디테일, 카테고리등 header와 footer가 계속 반복되기 때문에 html에 작업하지 않고 header를 javascript로 분리시켜 javascript 내에서 import하여 렌더링 되게 하였다. export const Header = () => { const headerElement = document.createElement("header"); headerElement.innerHTML = ` 로그인 회원가입 신상품 베스트 의류 소품 풍선 장식 `; document.body.prepend(headerElement); import {Header} from "../public/header/header.js"; // 헤더 const headerRender = () => { ..