웹개발을 하다 보면 상태관리가 필요할 때가 있다.즐겨찾기 갯수의 증가, 인스타그램 좋아요 버튼 등등..   이때 Redux의 사용은 상태 관리를 보다 효율적으로 도와주는 도구다.이번 글에서는 Redux의 개념과 상태의 정의에 대해 자세히 알아보려고 한다.   상태(State)의 정의  상태는 애플리케이션의 특정 시점에서의 데이터나 정보를 나타낸다.사용자 인터페이스(UI)의 현재 상태를 반영하며, 사용자의 입력,서버로부터의 응답, 애플리케이션의 로직 등에 따라 변할 수 있다.예를 들어, 로그인 여부, 장바구니에 담긴 상품, 사용자의 설정등이 상태에 포함된다.상태는 보통 다음과 같은 특성을 가진다   변경 가능성: 사용자의 행동이나 애플리케이션의 이벤트에 따라 상태는 변할 수 있다. 중앙 집중식 관리: 상태..

오늘은 오랜만에 2차 프로젝트에 대한 현황에 대해 기록하려고 한다. 로그인기능은 구현완료했지만! 스크럼에서 팀원들과 의견을 나눠본 결과, 로그인 시 회원가입 폼과 같이 발리데이트 폼을 적용하여 폼에 맞지 않으면 메시지를 출력하고, 또한 로그인버튼이 비활성화되는 기능과 버튼의 색이 달라지는 기능, 반대로 폼에 맞으면 메시지를 출력하고 로그인 버튼 활성과 같이 색이 원래대로 돌아오는 기능을 추가하기로 했다. (물론 이 기능도 1차 프로젝트 때 정확히 구현을 해봤던 기능이었다. 하지만 중요한 건 그때는 활성화/비활성화 시 색깔이 변하는 기능이 정상적으로 작동되다가, 마지막에 api를 붙이고 jwt를 가져오는 과정에서 적용이 안돼서 빼버린 뼈아픈 경험이 있다. 하지만 이번엔 정상적으로 구현해 냈다!!! 코드는 ..

오늘 2차 프로젝트를 진행하는 도중 내가 완료한 login관련 기능을 dev브랜치에 머지한 뒤, gitlab에 push를 해야 했다. 근데, 예기치 못한 오류가 발생해서 이 부분은 꼭 정리해야겠다 생각이 들었다. 여태까지 git에 여러 가지 오류를 접했지만, 처음 보는 오류였다. $git push origin dev to https://kdt-elice.io/team01.git ! [rejected] main -> main (fetch first) error:failed to push some refs to 'https://kdt-elice.io/team01.git' hint: Updates were rejected because the remote contains work that you do hint..

오늘은 저번에 프로젝트에서 사용한 Tailwind + Styled Components 문법에 대해 자세하게 정리해보려고한다. (이번 프로젝트에서 사용하기로 하여 확실한 이해가 필요할거같아 정리한다.) Tailwind + Styled Components (각각의 라이브러리와 프레임워크는 이전 글에서 정리한적이있기 때문에 둘을 결합한 문법을 사용하는 이유와 장점에대해만 정리하겠다.) Tailwind + Styled Components 사용 이유와 장점 1.TailwindCSS를 사용시 태그 내에 작성되는 className이 많아져 가독성이 떨어지고, 코드가 지저분해짐 ex)

벌써 엘리스에서 교육받은 지 3달이 지나가고, 마지막 프로젝트에 돌입했다. 팀원은 다들 모르는 사이였지만, 실력자들이 있어서 동기부여가 많이 되는 중이다! 우리가 어제 pigma로 대충 와이어 프레임을 짠 뒤, 페이지 기능을 하나씩 맡아 프로젝트를 진행하기로 했다. (나는 저번과 똑같이 로그인 페이지를 맡게 되었다...) 서비스 사이트명도 팀원당 1개씩 생각해 와서 투표로 하기로 했다! 결과는, 내가 구상해 온 "모두의 펀딩 - Modu" 에서 파생된 "모두의 펀딩 - Modding(모딩)" 으로 확정되었다. (모딩이 조금 더 MZ 스럽고 친근감 있는 네이밍 같아서 만족한다!) import axios from 'axios'; import React, { useState, ChangeEvent } from..

이전에 정리한 Router에서 언급한 SPA (Single Page Application)에 깊이 정리해보려고 한다. 이전의 SPA기술이 필요했던 이유 javascript가 등장하기 전에는 html/css만으로 웹페이지를 보여줬던 시절이 있었다. 이때 페이지의 이동은 매번 페이지를 새로 렌더링 하는 방식으로 되어있었다. 이후 html에서 움직임이 생기고, 우리가 버튼을 누르거나 여러 가지 액션, 이벤트를 할 수 있도록 도와주는 javascript기술이 등장하게 되었다. 이렇게 해서 html/css/javascript 이렇게 3가지 기술로 웹페이지를 만들고, 다른 페이지의 이동은 이러한 방식으로 구동되었다. (내가 처음 개발에 입문했을 때, 홈페이지 만들기 원데이 클래스에서 가장 중요한 3가지 요소를 뼈대..