# 도와주개냥 개발일지

Sarah·2022년 3월 17일
개발일지
0

projects

목록 보기
1/2

22.03.15 (화)

오늘의 할일
  • 개발환경 구축
  • css 회의
오늘의 작업
  • react.js를 이용해 프로젝트 생성
  • bootstrap 5 이용하기로 결정
오늘의 TIL
  • 혼자하는 작업이 아니다보니 서비스의 통일성을 위해 맞춰야 할 것들이 많다는 것을 다시 한번 느꼈다.
  • 컨벤션을 잘 지켜서 어떤 개발자가 보든 알아볼 수 있도록 하는 것 중요!

22.03.16 (수)

오늘의 할일
  • 회원가입 레이아웃
  • 로그인 레이아웃
오늘의 작업
  • 오늘의 할일 모두 완료
  • 회원가입 레이아웃 작성시 component 분리
    • 회원정보 수정에서 동일하게 쓰일 것을 생각해서 핸들러함수와 return 부분 분리했음.
오늘의 TIL
  • 컴포넌트화의 중요성을 지난 프로젝트에서 느껴서 이번에도 적용중이지만, 초기 작업은 이것저것 고민해보고 작성하기에 시간이 좀 걸리는 것 같다. 하지만, 초반에 이렇게 해놓으면 나중에 수정작업할때도 전체적용되기에 훨씬 편할 것이라는 것을 안다!!! 화이팅~

22.03.17 (목)

오늘의 할일
  • 회원정보 수정 레이아웃
    • 체크박스 핸들러 / select 추가
    • 회원탈퇴 추가
  • 회원 탈퇴 로직 작성 -> backend 아직 준비안됌!
  • redux 공부하기
  • 중간 발표 자료 준비
오늘의 작업
  • 레이아웃 완성 (회원정보 수정 / 아이디 찾기 : css적용까지)
오늘의 TIL

22.03.18 (금)

오늘의 할일
  • 비밀번호 찾기 레이아웃 작성
  • 회원가입 로직 작성 - redux적용
오늘의 작업
  • 회원가입 로직 흐름
    • 이메일 중복검사
    • 비밀번호 / 비밀번호 확인 일치(8자리이상)
    • 닉네임 타입검사 (한글,영어,숫자 8자 이하, 특수문자x)
    • 전화번호 타입검사
    • 활동 지역 선택 필수
오늘의 TIL

22.03.21 (월)

오늘의 할일
  • 회원가입 로직
    - 이메일 유효성검사
    • 비밀번호 유효성 검사
    • 비밀번호, 비밀번호 확인 검사
    • 닉네임 유효성 검사
오늘의 작업
오늘의 TIL
  • 조건에 따라 여러 css 대입하는 법
  • 컴포넌트 구조에 대한 고민이 또 시작됌
    - props의 양이 너무 많아져서 이게 분리를 하는게 맞는건지 고민되었다.
  • 이메일, 닉네임 중복확인을 위해 input줄에 button을 추가했다. 아예 도화지에서 시작하는 것보다 기존 틀을 유지하면서 변경하는게 훨씬 어렵다는 것을 css .. 어렵다어려워~

22.03.22 (화)

오늘의 할일

  • 회원가입 / 회원 수정 레이아웃 수정

  • **이메일/닉네임 양식 지켰을때랑아닐때 구별

오늘의 작업
  • 회원가입 성공(201)후 로그인 페이지로 이동
오늘의 TIL
  • 어떤 행동을 했을 때 자동으로 페이지 이동을 Next.js에서는 Router로 구현했었는데 이번 React.js에서는 usenavigate라는 걸 접했다.

22.03.23 (수)

오늘의 할일
  • 회원가입 무조건 성공하기
  • 회원탈퇴 로직작성
  • 로그인 로직 작성
  • 회원 정보 수정 로직 작성 (진행중에 로그인 정보를 담은 state를 일단 만들어야 가져와서 수정하니까 그부분부터 하러감)
    - useEffetc를 사용해서 수정페이지 이동시 기존 정보 가져오기
    • img 컴포넌트 추가
오늘의 작업
  • 회원가입 완성
  • 회원탈퇴 완성
  • 회원 정보 수정 img 레이아웃 완성
오늘의 TIL
.catch((err) => {
        console.log("로그인에러", err);
        if (err.response.status == 400) {
          alert("회원 정보가 없습니다.");
        } else {
          alert("잘못된 접근입니다.");
        }
      }); //err.status = 응답코드
axios.post(`${URL}/members/login`, {
        data: {
          email: email,
          password: '변수아닐땐str',
        },
      })
  • 와.. redux공부하는데 정리된 곳마다 다 다른방식이라 뭐가 뭔지 모르겠다.. ㅠ 흐름은 알겠는데 그래서 문법이 도대체 뭔데.. ㅠ
  • 내일 꼭 성공해야지...

22.03.24 (목)

오늘의 할일
  • redux로 로그인 정보 저장하기
  • 로그아웃
  • 마이페이지 레이아웃
오늘의 작업
  • redux로 로그인 정보 store에 저장!
    • useSelector, useDispatch 사용
    • 로그인 후 응답 정보에서 token sessionStorage에 저장
  • 로그인 상태에 따라 상단바에 상태 바꿈 -> state.isLogin으로 구분
    • 로그인 정보 x -> 회원가입 / 로그인
    • 로그인시 -> MY / 로그아웃
  • 로그아웃 로직 작성
    • 로그아웃 클릭 시 dispatch로 logout액션 실행
    • sessionStorage의 jwt 삭제, store에 로그인정보 삭제, store에 isLogin = False로 변경
  • 프로필 페이지로 이동시 누구의 프로필로 이동하는지 seq를 url에 붙여보내기
    App.js - 경로 설정시
    본인 프로필페이지로 갈 때

    프로필 페이지 왔을때 seq값 받기
// http://localhost:3000/profile/111
const { seq } = useParams();
  • 프로필페이지 레이아웃
오늘의 TIL
  • 로그인 요청 보낼 때 db에서는 되는데 웹에서만 안되는 이유를 찾음
    - back에서 body에 데이터 보내달라고 해서 수정전 방법으로 했는데 제대로 안 들어가서 수정했다.
 const user = {
      email: email,
      password: password,
    };
// 수정 전 (2가지 방법 다해봄)
    axios
      .post(`${URL}/members/login`, {data:user})
      .post(`${URL}/members/login`, {user})

// 수정 후(정상동작)
    axios
      .post(`${URL}/members/login`, user)
  • token을 어디 저장할지 공부하다가 웹페이지를 닫으면 정보를 잃도록
    만들기 위해 sessionStorage를 사용하기로 했다.(관련자료)
  • redux 흐름, 사용법 이제 이해했다!! (관련자료)
  • 새로고침했을때, store 리셋되지 않도록 하는 persist 라이브러리사용
마지막 작업중이던 거
  • 프로필페이지 아이콘 사이즈 키우기

22.03.25 (금)

오늘의 할일
  • 프로필 조회 로직 작성(o)
  • 회원 정보 수정 로직 작성(x)
오늘의 작업
  • 프로필 왔을 때 해당 회원 정보 받아오기 (useState뭉텅이로 관리하기)
 const [inputs, setInputs] = useState({
    nickname: "",
    level: "",
    exp: 100,
    activityArea: "",
    profileImageFilePath: "",
    badgesForProfile: [],
  });
  const {
    nickname,
    level,
    exp,
    activityArea,
    profileImageFilePath,
    badgesForProfile,
  } = inputs; // 비구조화 할당을 통해 값 추출

  useEffect(() => {
    console.log(`해당 프로필은 ${seq} 번호꺼`);
    // 로그인 안한 사람은 누구 프로필도 볼 수 없음.
    if (!isLogin) {
      alert("로그인 해주세요");
      navi("/login");
    } else if (seq) {
      axios
        .get(`${URL}/members/${seq}`)
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data.data);
            const {
              nickname,
              level,
              activityArea,
              badgesForProfile,
              profileImageFilePath,
            } = res.data.data;
            const exp = res.data.data.exp % 100;
            setInputs({
              ...inputs,
              nickname,
              level,
              activityArea,
              badgesForProfile,
              exp,
              profileImageFilePath,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }, []);
  • 회원 프로필 db 이미지 유무에 따라 경로 다르게 줌
import st from "../styles/profile.module.scss";
import defaultImg from "../../../public/img/default.png";

export default function ProfileImage({ profileImageFilePath }) {
  if (profileImageFilePath == null) {
    return (
      <>
        <img className={st.image} src={defaultImg} />
      </>
    );
  } else {
    return (
      <>
        <img className={st.image} src={profileImageFilePath} />
      </>
    );
  }
}
  • 획득한 뱃지만 보이도록
 {badges[2].achieve == true ? (
            <div className={st.badgeBox}>
              <img
                className={st.badge}
                src={`${IMGURL}${badges[2].imageFilePath}`}
              />
            </div>
          ) : (
            <div className={st.badgeBox}>
              <FcLock size={50} />
            </div>
          )}

오늘의 TIL
  • react-icon 사이즈 / 색상변경
<CgMoreVerticalAlt size="30" color="red" />
  • 리스트 합치기
a = [1,2,3]
b = [4,5,6]
c = a.concat(b) // c= [1,2,3,4,5,6]
  • 여러개 useState 값 설정
  • 여러개 useState에 axios 값 넣기

오늘의 일기

그냥 서버랑 연결 코드만 작성하는 건 차라리 나은데.. css랑 같이하니까 시간이 두배로 걸린다 정말ㅠ 괜찮아~이렇게 하면서 실력도 느는겠지 화이팅

22.03.26 (토)

오늘의 할일
  • 프로필에서 뱃지 모달로 뱃지 상세내용 출력
  • 회원정보 수정
오늘의 작업


  • 획득한 뱃지만 이미지 보이고 획득 안한 건 자물쇠모양

  • 본인 프로필일땐 수정 / 다른 사람 프로필에선 신고버튼으로

  • 회원 정보 페이지 왔을때 data 받아오기

오늘의 TIL
마지막 하던 작업
  • 회원정보 수정에서 닉네임, 핸드폰 번호 기존일때, 새로운거일때랑 새로운거였다가 기존으로바꿧을때랑 등등 구분하다가 머리 안돌아가서 내일 다시하기로!

22.03.28 (일)

오늘의 할일
  • 이메일 찾기
  • 비밀번호 재설정
오늘의 작업
  • 이메일 찾기
  • 비밀번호 재설정
오늘의 TIL
  • requried로 submit전 체크할려면 아래처럼 작성!
const onSubmit = (e) => {
  e.preventDefault();
  ...
}
<form onSubmit={onSubmit}
	<input requried> </input>
	<button type="submit">찾기<button>
</form>

아래 처럼 작성하면 requried 사용안되고 바로 클릭으로 전송된다.

const onSubmit = (e) => {
  e.preventDefault();
  ...
}
<form 
	<input requried> </input>
	<button type="submit" onSubmit={onSubmit}>찾기<button>
</form>

22.03.28 (월)

오늘의 할일
  • 회원정보 수정 - 닉네임, 핸드폰 번호 코드 수정
    - 수정정보가 기존 정보랑 같으면 중복확인 하지 않아도 넘어가도록
  • 회원 정보 - 이미지 파일 전송, 출력, 삭제
  • 비밀번호 재설정
오늘의 작업

  • 변경되었을 때만 중복확인 버튼 눌림 / 기존정보와 같으면 중복확인 버튼 x

  • 해당 메일로 온 링크를 통해 재설정 페이지로 들어온 후, jwt값과 함께 변경 비밀번호 서버에 전송한다.

  • 사진 수정/삭제 가능, 프로필 페이지에서 출력

오늘의 TIL
  • useRef (관련자료)
  • formData (관련자료)
    • formData 보낼 때, axios 순서가 axios.get(url, formData, {headers:{}})로 보내야 오류가 안 뜬다. formData랑 config부분 바뀌면 오류난다는 점!!
  • 하.. 오타로 30분 잡아먹은 거 너무 허탈했지만.. 그래서 더욱 다른사람 코드 안되는 거 찾아줄 때 눈이 더 넓어진 장점도 생겼다. 내가 이런 저런데에서 오류를 받아보고 수정한 경험이 많아질수록 다른 팀원들이 헬프쳤을때 해결해줄 수 있는 부분이 많아져서 좋다!

22.03.29 (화)

오늘의 할일
  • 프로필에서 커뮤니티활동 / 봉사활동 / 입양활동
  • 유기동물 현황 페이지 레이아웃
오늘의 작업
  • 입양활동에서 인증 요청 글쓰기에 에디터를 사용함!
  • 모달로 입양요청서 작성 후 서버에 요청 완료 되면 자동으로 모달 닫히게(useRef사용)
오늘의 TIL

  • map함수 쓸 때, arrow function(화살표 함수)를 이용해 값을 반환하려면 두 가지 옵션을 사용 (참고자료)

    ( ) => value (또는 ( ) => ( value ))
    ( ) => { return value }

  • ul안에 li에서 클릭이벤트 발생시 아래 주석처럼 하면 안된다!
    주석의 console창에는 0만 뜬다. value를 인식하지 못한다.
    그래서 아래 onClick을 화살표함수로 바꿨다.

  • react-quill(참고자료)

-useRef() 사용 (관련자료)

22.03.30 (화)

오늘의 할일
  • 봉사활동 인증요청 모달창
  • 봉사활동 인원관리
오늘의 작업
  • 모달창완성
  • 인원관리 체크 상태별 인원상태 관리 진행중..에 마침
오늘의 TIL

  • 아 진짜...map 함수 안에서 모달을 사용할때 왜 해당 데이터(item)를 못가져가고
    무조건 배열 첫번째껏만을 보여주는지 도대체가 모르겠다.. 그래서 모달 클릭했을 때 새로운 변수(modalData)에 해당 데이터를 다시 저장해서 사용하니까 잘 나온다..ㅠ
    이거 잡는데 하루 썼다. 왜...ㅠㅠㅠㅠ너무지쳐버림..

  • 모달을 성공했더니 이제 안에서 인원관리 체크박스라는 산이..
    나 왜이렇게 지쳤니 지금.. 당장 써야될 자소서가 쌓여있는데 프로젝트 마감도
    독촉하고 ㅠ 으엉 ㅠㅠㅠ 일단.. 리프레시가 필요하니까ㅠ 지금 부정적인 느낌들 다 털어버리고 내일 다시 화이팅해야겠다! 새로운 환경에서 다시 시작하자구~!!

22.03.31 (목)

오늘의 할일
  • 프로필 봉사활동 조건별 출력 바꾸기
  • 봉사활동 인증 요청 / 수정
  • 프로필 스타일 수정
  • 다른 팀 작업 받기 => 공공데이터api로 유기동물조회
오늘의 작업
  • 봉사활동
    • 요청 인증 상태별 모달 출력 변경
      -> 요청 한번도 안 한 상태 : 제목, 인원선택가능, 에디터 -> post
      -> 요청 한번이라도 한 상태 : 제목, 선택한 인원, content내용 -> get
      -> 요청 거절된 상태 : 제목, 인원선택가능, 기존 내용있는 에디터 -> get, put
      -> 인증 완료된 상태 : 제목, 선택된 인원닉네임, content 내용 -> get
  • 입양활동
    -> 내 프로필 아니면 상세 내용 볼 수 없음
    -> 내 프로필일 때만 입양 인증 요청서 확인 가능
  • react-quill 이미지 조절(관련자료)
오늘의 TIL
  • 봉사활동 관련 조건이 너무 많아서 코드가 상당히 길어졌다.
    컴포넌트 분리해야되는데.. 지금 기능 구현 못한 부분이 많아서
    리팩토링은 일단 기능 먼저 다 만들고 하자..!
  • 내 담당은 다끝났고 남은 안된 기능 맡았다.
  • 외부 api로 데이터 받아서 뿌리기~ 내일부터 시작
  • .env 사용법 -> react는 dotenv를 제공하고 있어서 아래 코드는 작성할 필요 x
import dotenv from "dotenv" 
dotenv.config()

그리고!!! .env를 바꾸게 되면 React 프로젝트를 다시 구동해야된다는 점.
(관련자료)

22.04.01 (금)

오늘의 할일
  • 외부 api에서 데이터 가져와서 뿌리기! = 유기동물 조회 / 상세조회
오늘의 작업
  • 보내주는 데이터 xml->json 으로 바꾸기 (관련자료)

  • 시도 / 시군구 / 보호소 / 축종 / 성별
    조건별로 조회 가능하다.
  • 해당 카드 누르면 상세 페이지에서 더 자세한 정보를 볼 수 있다.
    • 상세 페이지에서 get요청 보낸 것이 아님!
    • 공고번호로 동물 조회가 가능할 줄 알았는데 그런 api가 없었다. 목록조회할 때 상세내용을 같이 준다.
    • 그래서 한 아이를 클릭했을때, redux store에 아이정보를 저장하고 상세페이지에서는 useSelect로 state를 가져와서 사용했다.
오늘의 TIL
  • 어제 저녁부터 오늘 아침까지 왜인지 공공데이터 포털자체에 접속이 안됐다.
    error_connection_timed_out 이 문제가 팀에서 몇명은 나고 몇명은 정상 접속되었다. 처음엔 프록시설정등을 바꿔가면서 구글링에서 해보란 방법 다 해봤지만 실패
    그래서 네트워크인가 해서 와이파이 끄고 모바일 핫스팟 연결하니까 들어가졌다...ㅠ
    집에서 작업할 때 쓰던 와이파이를 빼고 인터넷선으로 연결해서 시도했더니 이것도 된다.. 결국 당장 작업은해야하고 인터넷선은 짧고.. 책상을 옮겼다.. 오늘 오후 3시부터 다시 작업들어간다.
  • 디자인은 아직 구리지만 그래도 기능은 개발완료~
  • 추가로 동물 조회 조건에 기간을 넣어야겠다.

22.04.02~03 (토, 일)

오늘의 할일
  • 보호소 조회
오늘의 작업
  • 조건
  1. 시도로만 조회
  2. 시도 + 시군구 조회
  3. 시도 + 시군구 + 검색어 조회
  4. 검색어로만 조회
오늘의 TIL
  • 요청 api가 여러가지 조건으로 요청이 안된다.. 그래서
    하나씩 순차적으로 받아온데이터를 가지고 그안에서 검색하고 등등했다.
  • 이제 filter, include 잘 쓸 수 있다.

22.04.04 (월)

오늘의 할일
  • 관리자 페이지 전체 레이아웃
  • 봉사활동 인증 목록 / 상세페이지
  • 입양활동 인증 목록 / 상세페이지
  • 기타 버그 잡기
오늘의 작업
  • 완성!~


  • 사진이 div밖으로 나오는거 잡음 => height:100%로~
  • url 접근 막기
오늘의 TIL

작업속도가 그래도 좀 빨라진 것 같다.

  • react-router-dom v6버전은 routes = switch였다..!!!!
  • react-quill 이거 너무.. 모르겠다.
    똑같은 모달창에서 쓰는데 2번이상 엔터가 되는데가 있고 안되는데가 있다..이거
    원인찾아봐야한다.. ㅠ 일단 오늘은 이만! 수고했다. 나자신.

22.04.05 (화)

오늘의 할일
  • 버그잡기
오늘의 작업
오늘의 TIL
  • 역시 프로젝트 마지막주는 항상 자잘한 버그와 디자인 수정
    그리고.. 꼭 예상치 못한 에러들이 발생한다. 그래도 에러원인찾아서 해결하는 재미가 있다. 당장 에러보면 아씨! 했다가도 해결하고 캬하~ 하는 이상한 뿌듯함에 개발이 재밌다.

22.04.06 (수)

오늘의 할일
  • 버그잡기
오늘의 작업
오늘의 TIL
  • 다른 팀원분이 하루종일 잡고있던 에러를 10분만에 해결해버린 나자신.. 개뿌듯.
    사실 미안했다. 좀 더 관심가지고 봤다면 하루시간을 투자하지 않으셔도 됐을텐데.. 너무 늦게 봐버려서 죄송했습니다...ㅠㅠ
    관리자 페이지에서 인증버튼, 반려버튼을 눌렀을 때, 각각 다른 swal이 뜨고 그안에서 확인을 눌렀을때 다른 axios를 보내고 바뀐 data로 화면을 바꿔주는 일이였다.
    순서만 잘 생각해서 함수 정리만 한다면 쉽게 해결되는 문제였다.
  • 한 3시쯤 퇴근 예상했는데 1시 30분 퇴근이라니~!~! 얼른 가서 누워야지!

22.04.07 (목)

오늘의 할일
  • 외부 api 요청 자체 서버로 교체
오늘의 작업
  • 오늘의 할일과 내용 동일함
오늘의 TIL
  • CORS 문제 해결하기 위해서 찾아보니.. 프론트에서 외부 API 처리하는 게 아니고 백에서 해서 보내줘야한다는 걸 이제 알았다.. 프론트에서 다 구현해놨는데..
  • API 만들고 거기에 맞춰서 프론트 다시 수정했다..
  • 더 자세히 알아봤으면 백에서만 해결할 수 있는 문제란걸 미리 알아서 프론트에서 구현하는 시간을 아낄 수 있었을텐데.. 하루가 아쉽지만.. 뭐 그래도 프론트에서 외부 api써서 데이터 보여주고 하는 등등도 익혔지뭐..!!!

22.04.08 (금)

오늘의 할일
  • 발표날~
오늘의 작업
  • 발표
오늘의 TIL
  • 다른 팀들 프로젝트 발표 다 듣고 본 결과..
    우리팀이 젤 잘했다.
    다들 이번 프로젝트 시기상 자소서쓰고 기타 등등때문에 시간 부족으로 다들 퀄리티가 떨어졌지만,, 그래서인지 우리가 젤 잘해보였다. ㅎㅎㅎ 물론 내 개인적인 생각. 결과발표는 담주에 나니까~ 기다려보자~
    수고했습니다 우리팀~!!
profile
Sarah
2021.06 ~
다음 포스트

기업연계 PJT 개발일지

0개의 댓글

관련 채용 정보