다.잇다 프로젝트

박경희·2023년 8월 23일

프로젝트

목록 보기

6/16

프로젝트 기간 23.08.22 ~ 23.08.25

이번 프로젝트는 새로 배운 JS와 REACT를 사용했다.
프로젝트 기간에 프론트와 백엔드를 모두 다루기에는 시간이 부족할 것 같아 미리 주제를 정하고 파트를 나눈 후 와이어프레임을 짰다. 그리고 프로젝트가 시작하기 전에 서버를 어느정도 만들어두고 시작해 프로젝트 기간에는 리액트를 사용해보는 것에 집중할 수 있었다.

이전까지의 프로젝트에서는 따로 와이프레임을 짜진 않았어서 와이어프레임을 짜는 것 조차도 시작을 어떻게 해야할지 막막했고 툴을 사용하기에는 다루 방법을 익하는데에 오히려 시간을 쏟게 될 것 같아서 이번에는 그냥 손으로 직접 그려보기로 했다.
(조원들이 내가 그려온 것을 보고는 손으로 그리는게 더 나은 것 같다고, 잘 작성했다고 말해줘서 고마웠다😚)

이번 프로젝트의 주제는 '구인구직'이다. 어떤 주제로 선정할지 이야기를 나누다가 한 조원의 의견 중 '구인구직'이 있었고 이 주제를 보니 내가 직종을 변경하고자 할 때 '한 사이트에 다양한 직종의 구인구직이 모아있었으면 좋겠다'라는 생각이 들었던걸 말했더니 다들 좋은 것 같다고 긍정적으로 생각해주어 주제로 선정하게 되었다.

우리가 만들고자한 구인구직 사이트는 어떠한 전문 분야만을 뽑는 구인구직 사이트를 한데 모으는 것이다.
예를 들면 유아교사만을 뽑는 '고가네'와 같은 그 전문 분야만을 뽑는 구인구직 사이트를 한데 모으는 것을 말한다.

내가 유치원교사를 그만두고 새로운 길을 찾아볼 때 어떤 분야를 어떻게, 어디까지 알아봐야할지, 나와 같은 직종에서 어떤 다른 분야로 전향한 사례가 있는지, 새로 관심을 갖게된 분야에서는 구체적으로 어떤 사람을 뽑는지 등을 알아보는게 쉽지 않았다. 지금 이 길에 들어서서야 개발자만 뽑는 전문 사이트가 있음을 알게 되었고 이런 것들이 한데 모아져 있었다면 좀 더 쉽게 알아보지 않았을까? 하는 생각이 들었다. 그래서 이런 부분을 반영하여 '모두 있고, 다 이어준다'라는 의미로 '다잇다'를 프로젝트의 주제로 선정하게 되었다.

이야기를 나누던 중 한 조원이 내가 생각한것과 거의 비슷한 사이트가 있음을 이야기 해줘서 들어가보니 정말 내가 필요로 하던 것과 비슷한 사이트가 존재했다. '역시 내가 생각한 것들은 이미 존재하는구나. 더 잘 구글링 해봐야겠다' 하는 생각이 들었다.😃

그래도 막연히 시작하는 것보단 사이트를 참고해 어떻게 서비스를 하고 있는지, 어떻게 코드를 작성하면 좋을지 생각해볼 수 있어서 그 사이트를 참고하여 프로젝트를 진행했다.
프로젝트가 끝난 시점에서 돌아보면 참고할 사이트가 없었다면 너무너무 어려웠겠다는 생각이 든다.

ERD

조원들과 ERD작성 후 각자 프로젝트 시작 전까지 맡은 부분 서버를 만들었다.

주말동안 서버를 만들면서 이제는 기존 코드를 참고하지 않고도 코드를 작성할 수 있는 부분이 생겼다는걸 알았다. 그래서 '하다보니 되긴 하는구나' 싶어 기분이 좋았다.

코드 작성 후 생각보다 서버를 빨리 만들어서 이게 생각한대로 만든게 맞나 싶은 생각도 들었는데,
프로젝트를 진행하다 내가 생각한 대로 서비스를 하려면 코드를 수정해야 하는 부분이 생겼다.
그제서야 프론트쪽도 알아야 서버를 잘 만들 수 있다는 강사님의 말을 몸소 깨닫게 되었다.

그리고 지금까지 수업을 들으며 '순환참조 끊기'를 여러번 했지만 완전하게 이해되지 않았었는데, 이번 프로젝트를 진행하면서 '왜 이 코드가 순환을 끊는건지'를 생각해보며 작성하다보니 좀 더 이해가 잘 되었던 것 같다.

서버코드 - Mentor, MentoringField, MentorMentoringField(중간테이블)

오류

아이디는 넘어가는데 데이터가 안들어갔다. 왜지??
✅ 찾아보니 name을 안줬다..😅 name 주고 해결!

return <>
        <div className="App">
            <Center>
                <div className="mentor-requests-container">
                    <div className="header">
                        <h1>멘토지원</h1>
                    </div>
                    <div className="item-content">
                        <form onSubmit={onSubmitHandler}>
                            <div className="item-input">
                                <label htmlFor="company">회사명</label>
                                <input type="text"
                                       id="companyName"
                                       placeholder="예) play data"
                                       name="company"
                                       onChange={onChangeHandler}/>
                            </div>
                            <div className="item-input">
                                <label htmlFor="department">부서</label>
                                <input type="text"
                                       id="department"
                                       placeholder="예) 제품개발팀"
                                       name="department"
                                       onChange={onChangeHandler}/>
                            </div>
                            <div className="item-input">
                                <label htmlFor="majorCareer">주요 경력</label>
                                <input type="text"
                                       id="majorCareer"
                                       placeholder="내용을 입력해 주세요."
                                       name="majorCareer"
                                       onChange={onChangeHandler}/>
                            </div>
                            <div className="item-input-introduction">
                                <label htmlFor="introduction">멘토 소개</label>
                                <textarea type="text"
                                          id="introduction"
                                          placeholder="내용을 입력해 주세요."
                                          name="introduction"
                                          onChange={onChangeHandler}/>
                            </div>
                                <input type="submit" value={"등록"}/>
                        </form>
                    </div>
                </div>
            </Center>
        </div>
    </>

➡️ 데이터가 잘 들어오는 줄 알았는데 introduction은 데이터가 안들어오고 있었다..! 데이터 넘기는 부분은 다 똑같은데 왜 안넘어오지...? 하고 코드를 다시 보니 'nChange={onChangeHandler}' 이렇게.. o가 지워져있었다..😂 조심하자..!

사이즈가 데이터 넣는만큼 다 들어간다...
이 부분도 수정을 해야겠다 생각했지만 우선 맡은 페이지에 필요한 데이터를 모두 넘기고 처리하는게 나을 것 같아 pass하고 진행했는데 이 부분을 수정할 차례가 오지 않았다.🙂 차차 수정해 가길..🙏🏻

구현하지 못한 부분

✔️ 멘토 지원할 때 프로필 넣기
✔️ 멘토링 분야별로 멘토 찾기

차차 구현해가길..🙏🏻

mentors

mentorRequests

mentorDetail

프론트 코드 - mentors, mentorDetail, mentorRequest

느낀점

미리 주제를 선정하고 파트를 나누고 서서히 준비할 시간이 충분해서 좋았다. 각자 맡는 부분이 잘 구분되어서 (내가 빨리 끝내야 누군가가 진행할 수 있다거나 그렇지 않아서) 부담 없이 집중할 수 있었던 것 같다.

강사님이 이번 프로젝트에서 서비스가 가장 많은데 각자 맡은 부분을 잘 구현했다며 우리조를 좋게 평가해주셔서 기분이 좋았다:) 아직 만족할 단계는 아니지만.. 사실 다른조에 비해 내가 구현한 부분은 화면도 밋밋하고 구현하고 싶었던 부분까지는 다 구현하지 못한게 아쉬웠는데 좋은 평가를 받아 조금 위로가 되었다. 여기서 만족하지 않고 구현하지 못한 부분도 꼭 구현해봐야지..!!!!!
당장 다음주부터 또 새로운 프로젝트를 시작해야 하지만..😂 할 수 있다..! 틈틈이 해보자..!