waffle_bear.log

[취업 성공] 비전공자 개발자 취업 성공🥲

Thu, 07 Mar 2024 08:36:26 GMT

소감

어.. 내가 이런 글을 쓰게 될 줄은 몰랐다. 요즘 같은 빙하기에 취업 성공이라는 단어를 쓸 수 있음에 감사한다.

아래에 적는 내용은 늦었다 싶어 고민하는 개발자 취준생, 비전공자 개발자 취준생에게 도움이 되었으면 한다.

캠프 이전의 삶

1. 터벅터벅 나의 일생

이과생으로 고등학교 졸업 후 전공은 신학, 직업은 영상 제작자로 아주 다이나믹한 삶이었다.

20대 후반, 어느 정도 경험할 것을 해보고 자리를 잡을 나이에 나는 번아웃이 찾아왔고

'영상을 평생할 수 있을까...' 싶던 나에게 개발자 붐 소식이 들렸다.

전에 회사에서 일할 때 봤던 사내 개발자분들..🤔 생각해보니 멋있던 거 같기도 하고..🤔 ~~(팀 섭외, 장소 섭외, 차량 및 장비 대여, 밤샘 촬영, 밤샘 편집이 없네...?🤩)~~

개발자로 전직하는 결심에는 감정적인 부분이 분명히 있긴 하다.

하지만 개발에서 매력을 느껴서 전직을 결심했고 개발에서 제일 매력적인 부분은 코드 하나로 만드는 엄청난 것들이었다.

아 근데 이때 난 입대를 하게 됐다.

개발자 붐 시기에..

27세의 나이에..🥲

2. 혼자서도 잘 해낼 줄..

[ 제대 후 ] 난 복무 기간에도 코딩 공부를 했다. 파이썬 겉핥기, C 겉핥기.. 등 시간 낭비가 맞는 말인가...ㅎ

암튼 나이 29. 본격적으로 강의를 듣기 시작했다. 그렇게 5개월 정도 공부하고 만든 포폴로 (아주 자쒼 있게) 이력서를 제출했다.

MERN 스택으로다가 아주 기가 막힌!(지극히 주관적인 생각이었다.)

(나의 포폴)

어. 근데 개발자 붐이 끝났다.

이력서를 안 읽는다. 군복무 2년동안 뽑을 신입은 다 뽑은 것이다.

24-03-07 글을 작성하는 오늘. 예전 생각이 나서 입사지원 현황 보니까 아직도 내 이력서 안 읽은 곳이 있네 (8개월째 안읽씹 중)

2023-07-20 입사지원.png

암튼 이렇게 혼자서도 잘해요는 끝나고..

취업 연계를 받자!! 하는 마음으로

스파르타 코딩 클럽 내배캠을 시작했다.

캠프 시작 전 내 솔직한 생각

캠프 시작 전 나의 인식은 사실 부정적이었다. 저런 곳은 그냥 양산형 개발자 만들고

코딩 노예로 보내도 취업은 취업이니까 취업률이 높은 거 아닌가... 하는 정도였다.

캠프 수료 후 내가 아래의 짤처럼 취업하게 되는 것이 아닐까.. 싶었다.

(마치 일용직을 봉고에 데려가는 느낌으로 개발자를 데려가는 유명 짤..)

-출처: Youtube <조코딩 Jocoding> 채널의 '좋코딩' 중-

근데 캠프에서 생애 첫 롤모델이 생겼다.

캠프 회고

1. 터벅터벅 캠프 일상

캠프 시작. 난 웹 트랙_프론트엔드 코스(React 코스)를 선택했다.

현재 주변을 둘러보면 웹이 없는 곳이 없고, JS가 범용성이 높아지면서 모바일 앱까지 만들 수 있으니까 선택했다.

[ 일정 ] 은 크게 아래와 같았다

웹 기초 - 브라우저 / HTML / CSS / JS
주특기 입문, 숙련, 심화 - React 기초 / 상태 관리 / 최적화 등
주특기 플러스 (Next js)
최종 프로젝트 (이전 협업의 2배의 기간동안 만드는 결정체)
수료 후

국비교육은 양산형 개발자 생산이라는 부정적 인식이 있던 나에게는 정말 의외였다.

이외에도 매니저님들의 관리나 강의 자료와 영상이 엄청 탄탄했다.

[ 장점 ]

사람에 따라 다를 수 있겠지만 나는 수강생 관리, 강사진, 강의 자료 그리고 강력 추천하는 부분은 협업 경험이 있겠다.

협업 경험 개발자들이 왜 자꾸 협업을 중요하게 생각하는지 이해 안 되는 사람이 있을 수 있겠지.. 나도 그랬다.

개발은 혼자서도 가능은 하지만
협업을 할 때 폭발적인 개발이 가능하기 때문*인데.

그 폭발이 프로젝트가 폭발하는가 시너지가 폭발하는가 둘 중 하나라서 협업이 중요한 것이다.

캠프에서 경험하는 팀 프로젝트는 협업의 중요성, 좋은 팀원에 대한 가치관을 알 수 있게 하고

기술 스택 선정, 프로젝트 개요, 요구 사항 분석 등 현업을 간접적으로 경험할 수 있는 것의 좋은 체험 학습이었다.

엄청난 강사진 캠프 중 양질의 강의 자료와 설명들 정말 정말 강력하게 추천한다.
일정이 끝난 오후 9시 이후*에도 현업 꿀팁, 다양한 라이브러리 설명, 보충 설명 등
끊임없이 수강생들에게 지식을 제공하는 강사진*..⭐

온라인 수료식 때 카메라 속 모든 튜터님들이 전부 다 멋있었다. 태어나서 그런 웅장함은 처음 느껴봤다.

모든 튜터님들을 존경하지만, 그 중 잊지 못 할 모두의 잉끼 튜터.. 최원장 튜터님⭐

연예인한테도 관심이 없는 내가 튜터님을 롤모델로 정하게 됐다.

캠프 수료 후

1. 망망대해 같은 이력서 작성 중 나침반

이 소제목은 내가 커리어 매니저님께 실제로 했던 말이다. 솔직히 이력서, 자소서 얼마나 막막한가..

이제 신입이 트러블 슈팅이나 기술 스택 선정에 얼마나 심도가 있겠으며

특히 유관경력 없고 비전공자인 나에게 개발자로서의 핵심 역량이 어딨겠냐는 것이다.

하지만 아주 빠르게 이력서를 통과했다!

수료 후 취업지원 주차에 들은 특강을 듣고 술술 써내려 갔던 이력서가 통과됐다.

취업지원 주차의 장점

1. 이력서를 보기 좋게 작성하는 방법과 탬플릿을 제공

이력서를 한 눈에 볼 수 있도록 제작 된 템플릿을 받았다. 탬플릿은 섹션 별로 딱딱 배치가 되어있어 작성하는 내가 봐도 깔끔했다.

2. 섹션 별 적절한 예시와 설명

깔끔한 탬플릿을 받았어도 그 섹션을 채워나가는 건 본인이지 않은가..? 분명 막막할 수 있다.

근데 커리어 매니저님이 아주 좋은 예시들을 보여주며 특강을 진행하시는데 그 특강을 듣는다면 망망대해에서 발견한 나침반 같은 느낌이 들 것이다.

마무리

이 회고의 시작에서도 말했지만, 나이 때문에, 학력 때문에 고민한다면 아직 많이 남은 날 중에 딱 4개월만 스스로에게 기회를 줘보면 좋겠다.

나 같은 경우에는 그 기회를 스파르타 코딩 클럽에서 잡았고 만족스러운 결과를 얻었기 때문에 이렇게 추천을 해본다.

고민은 시간만 늦출 뿐이란 것을 알 것이다. 비전공자에 유관 경력이 없는 나도 됐다.

고민은 조금만 하고 시작해보면 좋겠다.

최종 팀 프로젝트

Thu, 25 Jan 2024 12:44:41 GMT

오늘 했던 것

MVP에서 조금씩 기능을 추가하고 디버깅..
모바일 대응
뒤로가기 시 페이지 전환 없이 UI 제어

작은 회고

많은 일들이 있었지만 MVP 일정에 쫓겨 TIL을 작성하지 못 했다.. 정말 많은 디버깅과 리팩터링 추가 기능 구현 등...... 많은 것을 했지만, 힘든 날에 TIL을 쓰지 못 했던 것을 반성한다..

뒤로가기 시 페이지 전환 없이 UI 제어

개발 1010시간 중에 제일 힘들었다

navigate, history 등 여러 정보를 찾아보고 뒤로가기 이벤트를 감지할 수 있는 window의 이벤트 종류까지😫

(아니 근데 고민했던 것보다... 너무 간단한 거 아니오....)

1. 문제의 발단

채팅 페이지는 처음 채팅방 목록과 채팅메세지가 뜨는 컴포넌트로 분리해놨었다. (반응형 디자인을 보고 이것이 신의 한 수였다는 것을 깨달았다..)
분리가 잘 되어있던 컴포넌트의 스타일을 변경하여 768px 이하에서는 메인에 채팅방 목록이, 채팅방을 클릭하면 채팅창이 열리는 구조인데

😫 UI에 만들어놓은 뒤로가기를 누르지 않으면, 완전히 이전 페이지로 간다..😫

2. 문제 접근

"클릭 이벤트처럼 이벤트를 감지하고 막는 뭔가가 있겠지..."

근데 그런 건 없었다 엉-엉-🥺

하지만 window 이벤트 리스너의 popstate를 찾게 되었는데 window.history.pushState()를 통해 쌓은 스택을 뒤로가기 버튼 클릭 시 popState 하는 것이다. 배열의 push, pop과 같았다. 여기서 콧구멍이 조금 드릉드릉 했던 거 같다.

간단하게 pushState, popState를 설명해보자면 어떤 요소를 클릭하면 pushState를 하여 스택을 쌓도록 해놓은 페이지에 방문을 했다 가정을 해보자

[클라이언트의 활동]           [스택]

   페이지 방문       =>        0
  pushState작동     =>        1
  또 pushState      =>        2
뒤로가기 (popstate)  =>        1
뒤로가기 (popstate)  =>        0
뒤로가기 (popstate)  =>  이전 페이지로 전환

이런 느낌이다. 원래는 뒤로가기를 누르면 해당 페이지에 어떤 것이 떠있든 스택이 0일 때는 뒤로가기는 기본 작동을 막을 수가 없다. 다만, 스택이 하나라도 있다면 뒤로가기를 내가 제어할 수 있다는 것!

하지만 위의 그림(?)처럼 어떤 요소를 클릭해서 스택을 쌓았다면 뒤로가기 시 페이지 전환은 없이 스택이 하나 제거되고 끝이나는 것이다.

3. 해결

이제 내가 뭘 해야 되는지 확실히 알았다🥹
1. 스택 쌓기
먼저 채팅방을 눌렀을 때 채팅창 컴포넌트가 등장하도록 하는 함수에 pushState(null, '', '') 이렇게 빈 스택을 쌓도록 하였다. 이제 채팅방을 하나 누를 때마다 빈 스택이 하나씩 쌓인다.
```
// 채팅방을 누르면 채팅창 styled-components를 조작해
// 우측에서 채팅창이 쇽- 등장하게 하는 함수
const handleBoardPosition = () => {
 // 채팅방을 하나씩 들어갈 때마다 스택하나 추가
 window.history.pushState(null, '', '');
 setboardPosition(0);
};
```

2. 뒤로가기 시 스택 제거, 채팅창 원위치

useEffect(() => {
  const handlePopState = () => {
    // 뒤로가기 누르면 스택이 하나 빠지고
    if (boardPosition === 0) {
      // 만약 채팅창이 나와있으면 원위치로 돌려주고
      handleHideBoardPosition();
    } else {
      // 스택이 없으면 바로 이전 페이지로
      navi(-1);
    }
  };

  // 뒤로가기 이벤트를 감지하기 위한 리스너
  window.addEventListener('popstate', handleClickBrowserBackBtn);

  // 언마운트 시 리스너 제거
  return () => {
    window.removeEventListener('popstate', handleClickBrowserBackBtn);
  };
}, [boardPosition]);

결과

느낀점

해결하면서 정말 힘들었고 어떻게 하면 될 거 같다! 라는 생각이 막혀서 더 힘들었다. 정말 유용하고 좋은 것을 배웠고 해결한 후에는 감동적이었다.. 광광 우럭따...

최종 프로젝트 - 찜하기

Fri, 19 Jan 2024 09:12:08 GMT

오늘 했던 것

찜하기 기능 구현
채팅방 목록의 각 채팅방의 마지막 메세지 관련 정보 표기(마지막 메세지, 경과 시간)

1. 채팅방 목록에 정보 표기

접근 방법

먼저 채팅방 목록 컴포넌트를 분리했다. 그리고 처음에는 이거를 방이 생성되는 map에 돌려서 id값 비교 후 표기가 되도록 해야되나.. 했지만 방 개수에 비해 메세지가 심하게 많아서 index값이 닿지 않아서 포기.. 그러다 생각난 함수 하나!!

1-1. 메세지들 가져와 state에 담기

DB에서 메세지들을 가져와 state에 담고 각 채팅방 id를 인자로 받아 해당 채팅방에 속한 메세지만 filter 후 시간순으로 정렬 하고 index 제일 마지막 부분만 뙇 반환하는 함수🥹🥹🥹

const findMatchMessage = (room: string): any => {
  if (allMessage !== null) {
    const Matched = allMessage
      .map((msg) => {
        return msg.chat_room_id === room && msg;
      })
      .sort((a: any, b: any) => a.created_at - b.created_at)
      .filter((msg) => msg !== false);

    return Matched[Matched.length - 1];
  }
};


const ChatRoomList = () => {
  return (
// 생략... //

// 그래서 아래와 같이  태그 안에서 마지막 메세지를 반환 해줄 수 있게 되었다.

  
{findMatchMessage(room.id).content}
{parseDate(findMatchMessage(room.id).created_at)}

 );
}

1-1에서 남은 찝찝함

지금 DB의 메세지는 많아봐야 테스트 메세지 10개쯤.. 메세지의 용량도 몇 KB 안 하겠지만, 혹시 나중에 메세지 데이터가 쌓여서 10,000개가 되도 과연 DB의 메세지를 가져와서 state에 저장 후 작동까지
지금과 같은 속도가 날까..?* 싶은 걱정이 남았고
DB에서 가져올 때 애초에 유저가 속한 채팅방에 대한 메세지만 쇽쇽- 가져올 방법을 생각했지만 각 채팅방의 ID를 모두 비교하여 가져오는 방법을 찾지 못 했다. supabase 클라이언트에서 제공하는 eq 라는 것과 배열 메서드 forEach를 사용해서 채팅방의 아이디가 같은 것만 쇽쇽 가져오려는 시도도 해봤지만 실패했다.

어쨌든.. 채팅방 결과물

2. 찜하기 기능

접근 방법

찜 버튼을 누르면 DB에서 해당 게시물의 id를 가진 row를 찾아서! 컬럼 중 liked_user라는 배열에 좋아요를 누른 유저의 아이디를 업데이트 해주고! 컬럼 중 likes라는 int4 형태의 값을 1 증가 시켜준다!
유저 테이블의 row에 가서도 like_post 배열에 게시물의 정보를 업데이트 해준다!

문제

내 머리는 뭘 해야하는지 정확하게 알고 있었다! supabase 클라이언트에 update는 이상하다는걸 알기 전까지는..

내가 생각한 update는 예를 들어 {바꾸려는 칼럼: 업데이트 값} 이게 맞긴한데... 난 supabase가 바꾸려는 칼럼에 없는 값을 인지하고 추가를 해주는 그런 최첨단 차세대 DB로 알고 있던 거..

해결

이게 맞나? 싶긴하지만 DB에서 기존 값을 가져와 새 값을 추가하여 update 해주는 것으로 진행하였다.

const handleLike = async () => {
  // 해당 게시물의 현재 좋아요 수 가져오기
  const { data: likesField, error: likes } = await supabase
    .from('products')
    .select('likes')
    .eq('id', id);
  // 해당 게시물의 좋아요 누른 사람들 현재 값 가져오기
  const { data: existingData, error: user_no_exists } = await supabase
    .from('products')
    .select('like_user')
    .eq('id', id);

  //==============================
  // 이거슨 product 테이블 관련 처리
  //==============================

  if ( // 가져온 값이 존재하고, length > 0 이라는 조건 //) {

    // int 4 타입의 좋아요 값 증가는 생략 //

    // 배열인지, 배열이면 길이가 0이상인지 확인
    const like_userList =
      // 가져 온 값이 null이 아니고 배열이고 length가 0 보다 큰가? 라는 조건에
      existingData && Array.isArray(existingData) && existingData.length > 0
          // 참이면 existingData[0].like_user 가 배열이 아니면 빈 배열로 초기화
        ? Array.from(existingData[0].like_user || [])
        // 거짓이면 그냥 빈 배열로 초기화
        : [];

    // 새로 추가할 데이터
    const newLikeUser = {
      userNickname: curUser?.nickname,
      user_uid: curUser?.uid
    };

    // 기존 값과 추가할 객체 데이터를 합체
    const updatedLikeUserList = [...like_userList, newLikeUser];

    // 좋아요한 사용자 업데이트
    const { status: likeUser, error: likeUserFail } = await supabase
      .from('products')
      .update({
        like_user: updatedLikeUserList // 합쳐진 값으로 업데이트!
      })
      .eq('id', id);

  /// 에러 처리 생략///

    // 찜한 게시물인지 아닌지 판단하여 state를 변경하는 함수
    // 이게 작동하면 state에 따라 찜 버튼이 달라집니다.
  isLikedProduct();
};

결과물

새로고침 해도 잘 유지가 된다...⭐

느낀점

DB를 설계할 땐 기능에 맞게! DB테이블을 아주아주 잘 구상하자..!!😫😫 기능을 구현하려다보니 빠진 컬럼이나 추가되는 컬럼이 생기고 설계를 잘 해놓으면 위기의 순간에 방법이 보일 수도..!

최종 프로젝트 - 지도, 주소 복사

Thu, 18 Jan 2024 08:07:55 GMT

오늘 했던 것

중고 상세페이지의 거래 장소의 주소를 가져와 지도를 띄워주고 주소 복사 + 길 찾기로 연결

주소의 위치를 지도에 띄워주기

카카오 API 사용 설정

이전에 작성한 글에 기본적으로 카카오 API 설정을 어떻게 하는지 API KEY를 어떻게 발급 받는지는 아래의 글에 포스팅 해두었습니다. 카카오 API 연결

1. index.html에 CDN 기입

카카오 디벨로퍼 사이트에서 기본적으로 KEY 발급과 플랫폼 설정 뒤 아래와 같이 public/index.html 에

waffle_bear.log

[취업 성공] 비전공자 개발자 취업 성공🥲

소감

캠프 이전의 삶

1. 터벅터벅 나의 일생

아 근데 이때 난 입대를 하게 됐다.

개발자 붐 시기에..

27세의 나이에..🥲

2. 혼자서도 잘 해낼 줄..

(나의 포폴)

어. 근데 개발자 붐이 끝났다.

2023-07-20 입사지원.png

암튼 이렇게 혼자서도 잘해요는 끝나고..

취업 연계를 받자!! 하는 마음으로

스파르타 코딩 클럽 내배캠을 시작했다.

캠프 시작 전 내 솔직한 생각

근데 캠프에서 생애 첫 롤모델이 생겼다.

캠프 회고

1. 터벅터벅 캠프 일상

[ 일정 ] 은 크게 아래와 같았다

[ 장점 ]

캠프 수료 후

1. 망망대해 같은 이력서 작성 중 나침반

하지만 아주 빠르게 이력서를 통과했다!

취업지원 주차의 장점

1. 이력서를 보기 좋게 작성하는 방법과 탬플릿을 제공

2. 섹션 별 적절한 예시와 설명

마무리

최종 팀 프로젝트

오늘 했던 것

작은 회고

뒤로가기 시 페이지 전환 없이 UI 제어

개발 1010시간 중에 제일 힘들었다

(아니 근데 고민했던 것보다... 너무 간단한 거 아니오....)

1. 문제의 발단

😫 UI에 만들어놓은 뒤로가기를 누르지 않으면, 완전히 이전 페이지로 간다..😫

2. 문제 접근

3. 해결

1. 스택 쌓기

2. 뒤로가기 시 스택 제거, 채팅창 원위치

결과

느낀점

최종 프로젝트 - 찜하기

오늘 했던 것

1. 채팅방 목록에 정보 표기

접근 방법

1-1. 메세지들 가져와 state에 담기

1-1에서 남은 찝찝함

어쨌든.. 채팅방 결과물

2. 찜하기 기능

접근 방법

문제

해결

결과물

느낀점

최종 프로젝트 - 지도, 주소 복사

오늘 했던 것

주소의 위치를 지도에 띄워주기

카카오 API 사용 설정

1. index.html에 CDN 기입