Modern Agile
Day 44 - 2022.02.08
Note 회원가입을 할 때 언제 어떤 데이터를 백엔드에게 넘겨줄지에 대해 백엔드팀과 이야기를 나눴다. 회원가입을 할 때 데이터를 넘겨주는 것은 아직 회원 정보가 없는 상태에서 데이터를 넘겨줘야 하기 때문에 유저에 대한 정보 확인 즉, 중복이 있는가 없는가를 먼저 판별하고, 그 후에 저장을 해야 한다고 한다. 따라서 학교 정보나 약관동의한 내용 모두 회원가입 버튼을 누를 때 넘겨주기로 했다. 이 부분에 대해서 이야기만 나누고 아직 코드로 구현해보지는 않았지만 충분히 할 수 있을 거라는 생각이 들었다. 내가 생각한 순서는 다음과 같다. 닉네임을 입력할 때 onChange를 이용해 입력한 닉네임에 ‘운영진’이 들어가면 alert 창을 띄워 사용할 수 없는 닉네임이라고 알리기 정규식을 이용해 이메일이 올바른 형..
Day 43 - 2022.02.07
Note 회원가입할 때 약관동의한 내용을 백엔드에 전달해야 한다. 이때 백엔드에서 원하는 데이터 형식은 객체였는데 약관동의에서 모두 동의를 눌러 전체 선택/해제하는 기능 때문에 동의한 내용을 배열로 저장했었다. 그래서 배열로 저장한 것을 토대로 객체로 만들어 표시를 해야 했는데 이것을 어떻게 해야 할까 고민했었다. 백엔드인 수형오빠와 고민하다 수형오빠가 forEach를 사용하면 될 것 같다고 했고, 나는 그것을 듣고 삼항연산자를 이용해서 코드를 줄일 수 있을 거라 생각했다. onClick={() => { console.log(checkedInputs); const checkResult = {}; const check = [1, 2, 3, 4, 5, 6]; check.forEach((el) => { che..
Day 40 - 2022.01.28
Note 3기의 선배기수인 2기의 마지막 날이다. 2기분들이 수료하며 마지막으로 회고를 했는데 뭉클했다. 여러 사람이 팀으로 뭉쳐 하나가 되고, 같이 만들어간다는 것이 이렇게 좋은 거구나. 그동안 2기분들과 함께 해서 든든했고, 즐거웠는데 이제 3기가 독립해서 우리끼리 헤쳐가야 하는구나. 등등 여러 생각을 했다. 우리도 수료할 때쯤 회고를 할 테고, 우리의 회고를 듣는 4기도 같은 생각을 하겠지? 또, 오늘은 3기 미니프로젝트 시작한 지 1주가 되어 간단하게 회고를 했다. 3L 회고로 진행해 일주일 동안 좋았던 점(Liked), 배운 점(Learned), 부족한 점(Lacked)에 대해 이야기를 나누었다. 나는 미니프로젝트를 진행한 일주일 동안 각자 개인공부하는 것이 아니라 팀으로서 같은 것을 만들어 나..
Day 39 - 2022.01.27
Note 유난히 머리 안 돌아가고 힘들었던 하루 많이 부족한 게 스스로 느껴져서 자신감이 없었는데 지금은 공부를 하는 게 아니라 개발을 하는 것이기 때문에 부족하더라도 일단 만드는 것에 목표를 두어야 한다고 한다. 일단... 해보자
Day 38 - 2022.01.26
Note 오늘은 어제에 이어서 모달 레이아웃을 완성하기로 했다. 나는 라이브러리를 사용하지 않고 모달을 만들고 싶어서 구글링을 하며 시도했다. 나름 완성했다고 생각했지만 생각지도 못한 2가지 버그가 있었다. 이 중 모달을 열었을 때 기존(배경) 페이지가 스크롤이 되는 현상을 먼저 해결하고자 했다. 모달을 열었을 때는 스크롤이 사라지도록 구현해야 했는데 구글링으로 useEffect를 사용해서 해결하는 방법을 찾았다. 모달 function 안에 아래 코드처럼 작성하는 것이었다. useEffect(() => { if (visible) { document.body.style.overflow = 'hidden'; } return () => { document.body.style.overflow = 'unset';..
Day 37 - 2022.01.25
Note 어제 그리드에서 여백 생긴 버그를 해결했다. import React from 'react'; import styled from 'styled-components'; const GrayWrap = styled.div.attrs(({ height, width }) => ({ row: height, col: width, }))` height: ${(props) => props.row}; width: ${(props) => props.col}; background-color: #f9f9f9; border: 1px solid #d6d6d6; /* margin-left: 172px; */ 여기서 여백을 주고 있었음 `; function Graybox(props) { const { width, height ..