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

✍️들어가기전...프론트엔드쪽 작업을 시작하기 전에 팀원끼리 각자 맡을 파트를 정했는 내가 처음으로 맡게 된 파트는 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..

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

✍️들어가기 전... 오늘은 react router dom에 대해서 알아보기로 했다. spa에서 가장 중요한 역할을 한다는 생각이 들었고 프로젝트 때도 잘 사용해보고 싶어 정리해 보기로 한다. 그럼 꼬! 💡Routing이란? 사용자가 요청한 url에 따라 해당 url을 보여주는 것이다. 보통 SPA로 어플리케이션을 만들 때 사용한다. 그런데 굳이 왜 router를 사용해야 할까? anchor태그를 사용해도 되는데 굳이 라고 생각할 수도 있을 것 같다. React는 기본적으로 SPA이기 때문에 모든 컴포넌트 변화가 하나의 페이지 안에서 일어난다. 때문에 다른 url로 이동하면 페이지 전체가 바뀌는게 아니라 한 페이지 내부에서 컴포넌트의 변화만 일어날 뿐이다. 그러면 사용자는 원하는 페이지에 북마크를 할 수..

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

✍️들어가기 전... 전에 MVC패턴에 대해 알아봤는데 이번엔 반대 개념인 flux 패턴에 대해 알아보려고 한다. 이후에 프로젝트를 하면서 상태 관리 라이브러리를 사용하게 될 예정인데 상태관리 라이브러리를 사용하기 전에 flux 패턴에 대한 개념을 알고 시작한다면 좀 더 양질의 코드를 작성할 수 있을 것이라 생각한다! 💡Flux 패턴이 등장한 이유 flux패턴이 등장한 이유는 MVC 패턴의 한계 때문이다.facebook에서도 처음엔 MVC패턴을 사용했다고 한다. 소규모일 땐 나쁘지 않지만 점점 프로젝트의 규모가 커지면 커질 수록 Controller의 역할이 비대해지고 아래의 사진과 같이 하나의 컨드롤러가 수 많은 모델과 뷰를 관리해야 했다. MVC패턴은 데이터의 변경 사항을 신속하게 전파하기 어렵다. 그..

✍️들어가기 전... MVC 디자인 패턴이란 말을 여러번 들었는데 이게 뭘 말하는 건지 감이 잘 오지 않아 따로 알아보고 정리해보려고 한다. 💡MVC 패턴? MVC는 Model-View-Controller의 약자로, 소프트웨어 디자인 패턴 중 하나이다. 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다. 💡그래서 MVC가 각각 뭘 의미 하는지? 모델(Model): 애플리케이션의 데이터..

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

git push origin main을 했을 때 에러가 발생했다. origin이 레파지토리가 아니라는 뜻 같은데 밑에 보면 please make sure you have the correct access rights and the repository ecists 라는 문구가 뜬다. 해석해보면 액세스 권한이 올바른지 확인하고 리포지토리가 존재하는지 확인하라는 뜻이다. 급하게 하느라 레파지토리를 생성하고 remote하는 것을 잊은 것이었다🤦‍♀️...뭐든.. 침착하게... 👏해결방법 새로 만든 레파지토리 주소를 remote add 해주면 된다. //git remote add origin .git git remote add origin https://github.com/jieuning/my-chat-gpt.git

✍️들어가기 전... 본 프로젝트는 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 홈페이지는 설치 방법과 사용법이 굉장히 잘 되어 있어서 처음 사용해보는 사람도 쉽게 설치가 가능하다..