JSON(JavaScript Object Notation)은 데이터를 저장하거나 교환하기 위해사용하는 가볍고 읽기 쉬운 형식이다.특히 웹 개발에서 API 데이터 송수신에 자주 쓰인다.어찌 보면 쉽고, 간단하지만 놓칠 수 있는 부분까지 작성해보려 한다!       1. JSON이란 뭘까?  JSON은 사람이 읽기 쉽고, 컴퓨터도 해석하기 쉬운 텍스트 기반 데이터 형식이다.자바스크립트에서 객체를 작성하는 방식과 거의 똑같아서 배우기도 쉽고 작성도 간단하다.특히 XML보다 간결하고, 읽기 쉽다는 장점 때문에 최근 더욱 인기가 높아졌다.    2. JSON의 기본 문법  JSON 파일을 작성할 때는 몇 가지 규칙만 알면 된다. 데이터는 키(key)와 값(value)이 한 쌍으로 구성된다.키는 항상 따옴표(" "..

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