오늘은 오랜만에 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가지 요소를 뼈대..

오늘은 매번 정리해야지 정리해야지 했던 map함수에 대해 제대로 정리해보려고 한다. map함수 반복되는 컴포넌트를 렌더링 하기 위하여 자바스크립트 배열의 내장 함수인 map()을 사용한다. 쉽게 예를 들어, 배열 안의 모든 숫자를 제곱해서 새로운 배열을 만들고 싶을 때 사용해 볼 수 있다. const array = [1, 2, 3, 4, 5, 6, 7, 8]; const square = n => n * n; const squared = array.map(square); console.log(squared); 이런 식의 예시를 들어볼 수 있다. map 함수의 파라미터로는 변화를 주는 함수를 전달해 준다. 이를 변화함수라고 한다. 현재 이 변화함수 square는 파라미터 n을 받아와서 이를 제곱해 준다. a..