const stompClient = new Client({
  brokerURL: 'URL을 채워주세용', // STOMP 서버 URL
  debug: (str) => {
    console.log(str);
  },
  onConnect: () => {
    console.log(' 연결 됐어요옹!!! ');  // onConnect 내부 코드가 안돌음
  },
  onDisconnect: () => {
    console.log('웹소켓 연결이 끊어졌어용');
  },
});

React Native 환경에서 debug 내 console.log()에선 연결이 됐다고 하는데, onConnect 내 console.log()는 출력이 되지 않는다.

🧐 원인 분석

AWS에서 서버 로그를 분석해봤을때 웹소켓 연결이 된 것은 틀림 없었다. 그렇다면 뭔가 onConnect만 안되는 이유가 있을텐데 이 단순한 코드에 무엇인 문제인지 몰랐다.

그래서 리액트 네이티브 환경이 아닌 리액트 환경에서 진행해봤다. 결과는 연결 완료. onConnect 내의 콘솔이 출력된다.

그렇다면 리액트 네이티브의 문제로 판단하였고, 한글 자료론 도저히 방법이 없다고 판단하여 Stack OverFlow와 Github Issue를 미친듯이 검색했다.

원인은 다음과 같다.

1. forceBinaryWSFrames: true

-> 리액트 네이티브 환경에선 WebSocket을 사용할 때 텍스트 형식의 메시지가 제대로 처리되지 않을 수 있기 때문에 바이너리 메시지 형식으로 데이터를 처리하기 위해 해당 코드를 추가해야한다.

2. appendMissingNULLonIncoming: true

-> WebSocket에서 메시지를 처리할 때 맨 마지막에 NULL 문자를 통해 문자열 마지막임을 알 수 있다. 그러나 리액트 네이티브 문자열 버그로 인해 NULL 문자가 누락되는 경우가 발생한다. 해당 문제를 예방하기 위해 NULL 문자를 보충해주는 코드를 추가해야한다.

😊 해결 방법

const stompClient = new Client({
  brokerURL: 'URL을 채워주세용', 
  forceBinaryWSFrames: true,           // 해당 코드를 추가해주기!
  appendMissingNULLonIncoming: true,   // 해당 코드를 추가해주기!
  debug: (str) => {
    console.log(str);
  },
  onConnect: () => {
    console.log(' 연결 됐어요옹!!! '); // 정상 작동
  },
  onDisconnect: () => {
    console.log('웹소켓 연결이 끊어졌어용');
  },
});

🤨 결론

리액트 네이티브가 만악의 근원이다 :(

주제 : 데이트코스 공유 플랫폼 목표 : 연인과 편하게 데이트 코스를 계획 & 계획한 코스를 타인과 공유 프로젝트 명 : Flow Day

2. 프로젝트 일정

팀 매칭 : 2024.11.04. ~ 2024.11.08 프로젝트 기획 : 2024.11.15. ~ 2024.11.20. 프로젝트 개발 : 2024.11.21. ~ 2024.12.09. 프로젝트 발표 : 2024.12.10.

3. 프로젝트 팀 구성

저는 PM 겸 FE 개발을 담당하였습니다.

Frontend

임O현	이O영	김O준
PM & FE팀원	FE 팀장	FE 팀원

Backend

서O원	강O진	황O정
BE 팀장	BE 팀원	BE 팀원

임O영	천O상
BE 팀원	BE 팀원

4. 기술 스택

🌈 Frontend

🌈 Backend

5. 기능 설명

채팅 : STOMP, SockJS 라이브러리를 활용하여, 실시간 채팅 기능을 구현하였습니다. -> 리액트 네이티브의 WebSocket 호환성 문제를 파악하여 해결한 경험이 있습니다.

게시글 페이지 : 리액트 네이티브의 <FlatList>를 활용하여 무한스크롤을 기능을 구현하였습니다. -> 게시글을 카테고리, 인기순 or 최신순으로 필터링 할 수 있도록 구현하였습니다.

글쓰기 페이지 : 제목, 태그, 카테고리 선택, 코스 선택, 사진 첨부, 본문 작성 기능이 있습니다. -> Image Picker 라이브러리를 통해 이미지를 선택하여 서버에 저장하는 방식을 채택하였습니다.

게시글 상세 페이지 : 제목, 태그, 코스 위치, 사진, 본문, 좋아요, 댓글, 게시글 수정, 삭제 기능이 있습니다.

알림 페이지 : 채팅과 동일하게 웹소켓 라이브러리를 사용하였습니다. 알림 클릭 시 해당 페이지로 이동되도록 구현하였습니다.

6. 도전과제 & 해결책

이번 프로젝트에서 가장 큰 도전 과제는 채팅 및 알림 기능 구현이었습니다. 특히 웹소켓을 사용한 경험이 전혀 없었고, 관련 지식도 부족했기 때문에 웹소켓 통신을 처음부터 학습하는 것이 가장 중요한 과제가 되었습니다. 구글링과 GPT를 활용하여 빠르게 학습한 뒤, 이를 프로젝트에 적용하기 시작했습니다.

리액트 환경에서 채팅 기능을 구현하는 자료는 많이 있었기 때문에 이를 바탕으로 쉽게 진행할 수 있을 것이라고 생각했습니다. 그러나 리액트 네이티브 환경에서 STOMP를 활용한 예제는 매우 부족했습니다. 이때 첫 번째 문제가 발생했습니다. 제한된 자료를 바탕으로 코드를 작성했는데, 그 코드가 틀린 자료였던 것입니다. 구체적으로, STOMP 라이브러리가 버전 4에서 버전 5로 업데이트되면서 이전 버전의 문법이 더 이상 통용되지 않았습니다. 그럼에도 불구하고 사용된 자료에서는 v4 방식과 v5 방식이 혼용되어 있었고, 이로 인해 많은 시간을 허비했습니다.

이를 해결하기 위해 공식 문서를 참고하며 문제를 해결했습니다. 웹소켓 연결이 정상적으로 이루어졌다고 판단했지만, 의도한 대로 작동하지 않는 문제가 발생했습니다. 예를 들어, brokerURL에 문제가 없으면 onConnect 이벤트가 정상적으로 호출되어야 했지만, 이 부분만 작동하지 않았습니다. 결국 GitHub 이슈와 Stack Overflow를 뒤지면서 원인을 발견했습니다. 리액트 네이티브의 특성상 수신된 메시지의 끝에 NULL 문자가 누락되는 문제가 있었고, 이를 해결하기 위해 수동으로 NULL 문자를 추가해주는 코드를 작성해야 했습니다.

다음은 해당 문제를 해결한 코드 예시입니다:

import { Client, Message } from '@stomp/stompjs';
const stompConfig = {
    connectHeaders: {},
    brokerURL: "주소 URL을 입력해주세요",
    forceBinaryWSFrames: true,           // 리액트 네이티브 환경에서만 필요
    appendMissingNULLonIncoming: true, // 리액트 네이티브 환경에서만 필요
    onConnect: () => {console.log("connected")},
}
stompClient = new Client(stompConfig);

useEffect(() => {
    stompClient.activate();
}, [])

7. 결과 & 성과 & 향후 계획

많은 어려움과 아쉬움이 있었지만 담당했던 모든 기능을 구현하였습니다. 아쉬운 부분은 채팅을 보내고, 받아오는 과정에서 간헐적으로 웹소켓 연결이 끊겨 극히 일부 메시지가 누락되는 버그가 존재합니다. 알림도 동일한 문제를 겪고 있습니다. 이를 향후 리팩토링 과정을 겪을 생각입니다. 가장 쉬운 해결법은 라이브러리 교체이지 않을까 생각하고 있습니다.

8. 후기 & 배운 점

프로젝트를 진행하면서 백엔드와 협업하는 팀 프로젝트를 처음 경험해보게 되어, 예상보다 많은 어려움과 당황스러운 순간들이 있었습니다. PM으로써 기획, 컨벤션 설정, 깃허브 관리, 프로젝트 세팅 등 여러 업무를 전반적으로 맡으면서, 개발 과정에서 서로의 코드를 공유하고 리뷰하는 일까지 진행하게 되었습니다. 이로 인해 담당 기능 개발에 집중할 시간이 부족했던 점이 아쉬웠고, 그로 인해 예상보다 프로젝트 진행에 시간이 지연되었으며, 발표 전 배포 예정이었던 부분을 완료하지 못한 점이 많이 아쉽습니다.

이번 프로젝트를 통해 배운 중요한 점은 공식 문서의 중요성과 한글 자료에 의존하지 않아야 한다는 점이었습니다. 영어에 대한 자신감이 부족하여 주로 한글 자료를 찾아보았으나, 관련 자료가 부족한 상황에서 잘못된 코드나 부정확한 정보를 접하게 되어, 그로 인해 많은 어려움을 겪을 수 있었습니다. 이러한 경험을 통해, 새로운 기술을 습득하거나 문제를 해결할 때는 공식 문서를 기준으로 삼는 것이 중요하며, 이를 통해 시간을 보다 효율적으로 관리할 수 있다는 것을 깊이 깨닫게 되었습니다. 이 경험이 프로젝트 진행에 있어 가장 중요한 교훈이었던 것 같습니다.

9. 마무리

백엔드 팀과 처음으로 협업을 해보아 서로가 바라보는 관점이 매우 다르다는 것을 깨달았습니다. 그리고 사람이 3~4명 수준의 프로젝트에선 회의를 하며 빠르게 의견이 채택되고 팀장이 이끌어주면 팀이 잘 나아갔다고 생각했습니다. 그러나 인원수가 많아지니 저 혼자 이끌려고 하면 불협화음이 나온다는 것을 배웠습니다. 팀원들이 프로젝트를 이끌고 나갈 수 있는 분위기와 시스템을 만들어줘야한다고 생각합니다. 개발 방법론에 대해 더욱 찾아보고, 어떤 식으로 팀을 이끌어야 효율적인 방식일지 찾아보고자 합니다. 여러 방면에서 많이 부족하지만 한 단계 성장할 수 있는 기간이지 않았나 생각합니다. FlowDay 팀 여러분 모두 고생하셨습니다 :)

당연히 해야한다고 생각했던 스터디

내가 스터디를 만든 이유는 거창하지 않다. 그저 취업을 하고 더 나은 미래를 위한 투자였다.

취업 시장을 100% 안다고 말할 순 없지만 어느정도 규모가 있는 회사들은 코딩테스트가 필수적인 것으로 알고 있다.

따라서 코딩테스트를 공부해야했고, 프로그래머스 데브코스에 들어와 스터디원을 모집하였다.

🐣 스터디 목표 & 계획

목표는 오직 취업

내가 생각한 개발자 스터디의 목표는 당연히 "취업"이라고 생각한다. 그렇다면 내가 원하는 회사에 맞춰 공부를 해야한다고 생각했고, 최소 프로그래머스 Lv2~Lv3, 백준 골드급은 30분 내에 풀어내야한다고 생각했다.

나를 포함한 스터디원들은 당장 Lv3, 골드급의 문제를 풀 수 없는 수준이라고 판단하여 기준을 낮추되 빠르게 레벨을 올릴 수 있는 방법을 고민했다.

🐥 스터디 방법

빡세지만 부담스럽지 않게

스터디 방식은 "코딩 테스트 합격자 되기" 책을 기반으로 개념 학습과 기초 문제를 풀어보고 Lv2~Lv3, 골드 수준의 문제들에 도전하는 방법을 채택하였고, 이해가 안되는 부분은 구글링과 강의를 통해 추가 학습을 진행하였다.

1주일동안 정해진 챕터의 개념을 공부하고 배운 개념을 문제에 적용하며, 이해가 안되는 부분은 서로 질문을 통해 함께 발전했다. 매주 수요일 20시에 슬랙에 모여 서로 풀어온 문제들을 발표하고, 서로의 피드백하는 시간을 가졌다.

🐤 학습한 알고리즘 종류 & 인상 깊었던 문제

쉬운데 어렵고, 어려운데 쉽고, 미치겠다

알고리즘 종류 : 배열, 스택, 큐, 해시, 트리, 집합, 그래프

인상 깊었던 문제 : 이가 빠진 트리 : 골드 5 -> https://www.acmicpc.net/problem/26260

사실 이 문제는 트리를 실제 알고리즘에 적용하면 어떤 느낌일까? 하며 스터디원과 조금 어려운 문제를 선정하여 도전했던 문제였다. 그러나 조금 어려운 수준이 아니었고, 모든 스터디원의 멘탈을 부쉈던 극악의 문제를 만나게 되었다. 심지어 JavaScript로 이 문제를 맞춘 사람은 현재 총 4명이 있고 그 중 2명은 나와 스터디원 의O님이다.

나의 문제 풀이 방식은 수열에서 아이디어를 가져와 재귀함수로 풀었고, 의O님은 재귀함수를 돌며 특정 조건에서 재귀함수를 멈추는 방식으로 풀었다. 결론적으로 재귀함수를 이용했지만, 서로 매우 다른 코드의 양상을 보이고 있어, 동일한 동작을 하는데 이렇게까지 코드가 다를 수도 있다는 것을 느끼게 되었다.

📖배운 점

자바스크립트 && 알고리즘 === "양날의 검"

알고리즘 스터디를 통해 배운 점은 JS와 알고리즘의 양면성이었다. JavaScript 언어가 정말 유연하고 문법이 다양하여 문제를 풀때 잘 사용하면 신기하게 풀어 아름답다고 생각을 하였다. 그러나 큐, 트리, 그래프 등을 직접 구현해야하는 번거로움이 있었고, 언어가 너무 유연한 나머지 내가 원하는대로 작동하지 않아 한참 헤메는 사건사고가 매우 자주 일어났다.

알고리즘을 어떻게 적용해야할지 학습하고 익숙해지면서 해당 알고리즘이 없었다면 어렵게 풀었을 문제를 너무 쉽게 풀 수 있어 놀라웠고, 반대로 모든 문제를 알고리즘으로 풀려고 하니 아주 쉽게 푸는 방식이 있는데 굳이 어렵게 푸는 아이러니한 상황을 마주쳤다. 어떤 알고리즘을 쓸지? 쓰지 않을지 판단하는 것 자체가 회사에서 원하는 근본적인 문제 해결력 아닐까? 라는 생각을 하게 되었다.

✅ 평가 & 피드백

천리 길도 한 걸음부터.

😋 좋았던 점

• 시작이 반 : 늘 나태하고 게으름에 빠져 새로운 길에 도전을 잘 안하지만, 이번 기회를 통해 알고리즘과 코딩테스트에 대해 조금 알게 된 것 같아 후일을 도모할 수 있게 되었다.
• 스터디 경험 : 모르는 사람들과 동일한 목표를 향해 같이 공부하는 경험을 하게 되어 만약 다음에 스터디를 진행한다면 어떤 사람들과 어떤 식으로 진행하는 것이 더 좋을까? 생각하고 진행하는데 큰 거름이 된 것 같다.
• 지식 : 단순히 알고리즘을 배우고, 문제 푸는 요령도 꽤 많이 늘은 것 같다. 그 과정에서 수학과 매우 비슷하다고 생각하였고, 학창시절 수학을 꽤 좋아했던 나로서 꽤 행복한 시간이었다.
• 자신감 : 많이 부족한 실력이지만 꾸준히 한다면 언젠가 목표에 다다를 수 있다는 자신감이 생겼다.

😡 나빴던 점

• 아쉬운 마무리 : 스터디원 모두 데브코스라는 국비교육을 진행하고 있기 때문에 모두 코테 공부를 주로 하는 것이 아니다. 정규 수업도 있고 수업을 따라가며 본인이 부족하다고 느끼는 부분을 채우는 개인 자습시간도 많이 필요하다. 그리고 프로젝트를 연달아서 진행하며 시간에 쫓기다보니 스터디를 지속할 수 없었다.
• 타이트한 피드백 : 서로 코드를 좀 더 타이트하게 리뷰하고 피드백하지 못한 것이 아쉽다. 동일한 동작을 하더라도 더 좋은 코드가 있다면 분석하고, 왜 이런식의 코드를 떠올릴 수 있었는지? 대화하는 과정이 더 깊었으면 좋지 않았을까하는 아쉬움이 있다.
• 개개인의 실력차 : 우리는 6인으로 스터디를 시작하였다. 그러나 사람마다 실력차가 분명히 존재했고, 챕터마다 실력차도 존재했다. 모두 적당히 어려워할만한 문제를 선정할 수도, 개념을 선정할 수도 없었다. 이 과정에서 하차하는 인원도 있었으며, 잘 쫓아오지 못하는 스터디원도 있었다. 이런 부분을 고려하고 수용하지 못한 팀장의 잘못도 있지 않을까? 하며 반성하였다.
• 시간 분배 : 문제를 풀때 시간을 정하고 풀지 않았다. 어려운 문제도 많았고, 시간만 있으면 풀 것 같은 문제도 많았기 때문이다. 답을 보지 않으려고 노력하는 것은 칭찬 받을 행동이지만 너무 과할정도로 답을 보지 않았기에 많은 시간을 허비한 것 같다.

🌈 마무리

완벽하지 않고, 많이 부족했지만 얻어가는 것이 꽤 있는 나의 첫번째 스터디였다.

여러 우여곡절이 있는 스터디였다. 배웠던 점, 좋았던 점, 나빴던 점이 여럿있는 경험이었다. 만약 다른 스터디를 진행한다면, 확고하고 동일한 목표를 가지고 있는 스터디원끼리 모여 진행하면 더 좋을 것 같다. 스터디를 진행하며 조금씩 엇갈리는 목표와 의견들이 있을때 이를 하나로 수렴하는 것이 참 어려웠고, 더 날카롭고 디테일한 피드백이 있었으면 좋았을 것 같다는 생각이 많이 남는다. 그러나 대화를 통해 방향을 재설정하고 다시 나아간 부분에 있어선 꽤 만족하고 있다. 알고리즘 분쇄기라는 스터디를 통해 공부를 시작했고, 알고리즘과 코테에 발을 들인만큼 멈추지 않고, 계속해서 나아가는 밑거름으로 삼고 싶다.

💬 팀원들의 이야기

😀 창O님 : 이번 스터디를 통해 알고리즘에 대한 이해를 크게 넓혔습니다. 이진 탐색 트리와 스택 같은 기본 개념을 잘 습득했고, 이를 활용한 문제 풀이에서 큰 성과를 느꼈습니다. 특히 연결 리스트와 회전하는 큐 문제에서 어려움을 겪었으나, 이를 해결하면서 많은 교훈을 얻었습니다. JavaScript의 제한된 기능 내에서 알고리즘을 구현하는 방법을 배우고, 빅 오 표기법을 활용한 효율적인 데이터 처리 방안을 익혔습니다. 학습 방법에서는 개념을 먼저 확립한 후, 기초 문제를 풀면서 이해를 깊이는 방식이 유효했으나, 난이도가 높은 문제에서 개념 부족을 느끼기도 했습니다. 이를 보완하기 위해 개인의 학습 속도에 맞춘 학습이 필요하다는 점을 깨달았습니다. 스터디 그룹을 통해 서로의 학습 내용을 공유하고 함께 성장하는 경험이 매우 유익했으며, 앞으로도 알고리즘을 지속적으로 학습하고 코딩 테스트 문제를 풀며 실력을 쌓아갈 계획입니다.

😗 준O님 : 이번 알고리즘 스터디를 통해 다양한 자료 구조와 알고리즘을 학습하고, 문제 해결 능력을 크게 향상시킬 수 있었습니다. 특히 트리와 그래프를 다룬 문제들, 특히 길 찾기 게임과 다단계 칫솔 판매 문제는 난이도가 높았지만 큰 도전이었습니다. 배열, 스택, 큐, 해시, 그래프 등 다양한 알고리즘을 익히며 각각의 특성을 잘 활용하는 방법을 배웠습니다. 학습 방법으로는 자바스크립트 메소드를 활용한 문제 풀이가 도움이 되었으나, 시간이 부족할 때 AI의 도움을 최소화하고 스스로 해결하려는 접근이 때로는 비효율적이었습니다. 향후에는 알고리즘을 다시 복습하고, 특히 트리와 재귀 함수에 대한 심화 공부를 진행할 예정입니다. 이 과정을 통해 얻은 경험은 향후 개발자로서 중요한 밑거름이 될 것입니다.

😊 우O님 : 이번 알고리즘 스터디를 통해 해시와 트리에 대해 깊이 있는 학습을 진행했다. 특히 해시는 key-value 구조로 문제를 해결하는 데 유용함을 깨달았고, 트리 문제는 좌우 노드 인덱스 수식을 사용한 구현을 익혔다. 어려웠던 점은 트리, 유니온-파인드, 다익스트라 알고리즘이었으며, 특히 트리순회와 이진탐색트리 구현은 직접 구현하면서 개념을 잡았다. 스터디 중 시간 분배 문제로 어려움을 겪었고, 더 효율적으로 문제를 풀기 위해 답안을 참고하거나 AI의 도움을 받는 방법을 개선해나갔다. 향후 모든 알고리즘을 다시 복습하고, 개념을 완벽히 이해할 수 있도록 복기를 할 계획이다. 스터디 초반과 달리 어려운 문제에서 해결 속도가 더뎌졌지만, 코딩 테스트를 대비해 다시 공부할 필요성을 느꼈다. 해시와 관련된 지식은 스터디를 통해 명확히 이해할 수 있었다.

😘 의O님 : 이번 알고리즘 스터디에서 집합과 트리에 대한 새로운 이해를 얻을 수 있었습니다. 특히, 집합이 배열을 활용한 트리로 구현된다는 점과 경로 압축 및 랭크 개념을 배우게 되어 인상 깊었습니다. 섬 연결하기 문제를 풀며, 처음에는 그리디 알고리즘을 적용하려 했지만, 더 효율적인 방법인 트리의 랭크와 경로 압축을 활용한 해결법을 알게 되어 유익했습니다. 어려웠던 문제는 길 찾기 게임으로, 이진 트리를 만들 때 부모와 자식 관계를 정확히 설정하는 데 어려움이 있었습니다. 해결 방법은 노드 클래스를 만들어 자식 배치를 결정하는 방식이었습니다. 스터디 방법에서는 개념을 설명하는 시간을 가지며 서로 배운 점을 공유하는 것이 큰 도움이 되었고, 문제를 풀기 전에 풀이 계획을 세우는 방식이 유효하다는 것을 깨달았습니다. 그러나 해결되지 않는 문제를 오래 붙잡기보다는 설계 단계로 돌아가 재검토하는 것이 필요함을 느꼈습니다. 향후에는 테스트 케이스 작성과 문제의 알고리즘을 파악하는 연습을 추가할 예정입니다.

DevLink

🖥️ 프로젝트 주제

코드 공유 및 실시간 컴포넌트 렌더링 소셜 네트워크 서비스

🖥️ 프로젝트 기술스택

React, TypeScript, Redux, Styled-Component ...

📖 내용

깃허브와 같은 플랫폼은 코드를 공유할 수 있지만 해당 코드가 어떤식으로 작동하는지 눈으로 확인할 수 없다. 따라서 컴포넌트가 렌더링된 화면과 코드를 보여주는 형태의 코드공유 서비스가 있다면 유저간의 피드백에 긍정적인 효과를 불러올 것이라 생각하여 프로젝트를 기획하였다.

기획 과정

노션을 통해 기능 명세서, 개발 일정 관리, 개발 일지 등을 작성하였다.

1. 기능 명세서 : 해당 기능에 input과 output을 설명하고, 이해할 수 있도록 다양한 레퍼런스를 참고하였다.

2. 개발 일정 관리

3. 개발 일지

⭐️ 주요 기능

• 메인페이지 (포스트 목록, 검색, 온라인유저)
• 포스트 생성 페이지, 상세 페이지, 마이페이지
• 회원가입, 로그인
• 상단헤더, 사이드바

🙋‍ 나의 역할

• 유저 검색 기능
  • 유저의 닉네임을 검색하면 연관검색어 형태로 관련 유저가 아래 나온다.
• 사용자 목록 기능
  • 서버의 _isOnline : true_인 유저를 메인페이지의 사용자 목록에 표시되도록한다.
• 상단 헤더
  • 로고, 로그인, 로그아웃, 프로필 등의 버튼이 있고 해당 버튼을 클릭하면 적절한 페이지로 이동한다.
• 마이페이지
  • 유저의 프로필, 작성한 포스트 등이 표시되고 개인정보를 수정할 수 있다.

💻 프로젝트 시연

🎯 결과 및 성과

• 팀 프로젝트의 첫번째 경험 : 기획, 커뮤니케이션, 깃허브를 통해 모두가 같은 생각을 하고 같은 목표로 개발을 잘 할 수 있도록 하는 장치들에 고민을 하게 되었다.

• 지식의 확인 : 지금까지 프론트엔드의 기초적인 내용을 배웠는데, 검색을 하지 않고 바로 사용할 수 있는지, 검색할 키워드를 생각하고 올바르게 검색할 수 있는지, 배웠으나 까먹어 한참을 검색해야하는지의 척도를 알 수 있었고, 부족한 부분들을 알 수 있었다.

• 디테일의 부족 : 여러 방면에서 디테일 부족을 느꼈지만 가장 크게 느낀 부분은 유저 검색에서의 디테일 부족이었다. 음절 단위로 검색되는 문제를 개선하고 싶었으나 실패했다. 그리고 초성으로 검색하는 기능도 포함하고 싶었는데 이또한 실패하였다. 추가 학습을 하여 추후 프로젝트에 적용하려고 한다.

• 컨벤션의 중요성 : 프로젝트 초기엔 코드, 커밋, PR, 파일, 폴더 컨벤션이 모두 필요할까? 과하지 않을까? 라는 생각을 하였으나, 프로젝트를 진행할수록 꼭 필요하다는 것을 알게 되었다. 우리 팀에선 발생하지 않는 문제와 충돌들이 다른 팀에선 몇 시간씩 잡아먹는 문제가 되어 여유의 차이를 느꼈다.

• 폴더구조의 중요성 : 위와 같은 이유이다. 다른 팀은 폴더 구조를 정확하게 정하지 않고 만들다가 서로 재사용하는 컴포넌트, 훅에서 네이밍이 동일한 문제가 발생하고 이로 인해 많은 시간을 할애하는 문제가 발생하였으나, 우리팀은 병합 충돌 없이 프로젝트를 잘 마무리하게 되었다.

• 같은 기능, 다양한 방법 : 동일한 기능을 구현할 때 정말 많은 방법이 있다는 걸 느끼게 되었다. 에러나 문제가 발생했을때 이를 해결하는 것도 좋지만 쉽게 해결이 되지 않는다면 방식을 완전히 바꿔서 해결하는 방법도 있다는 것을 알게 되었다. 이번 프로젝트에선 유저 검색 기능을 만들때 antd 라이브러리를 사용하려고 했으나, 라이브러리에 기능을 추가하려고 하니 여러 문제가 발생하였다. 이를 라이브러리를 깔끔히 포기하고 처음부터 다시 구현하는 방식을 채택하였고, 내가 생각한 방식대로 구현할 수 있었다.

*1. 군 전역 후 알찬 시간 활용 * - 늦은 나이에 군입대를 했기에 다른 친구들처럼 시간을 마냥 버리고 싶지 않았다. *2. 깊이 있는 공부에 대한 갈망 * - 군 내에서 JS, TS, React관련 강의를 보고 학습하였지만, 강의만 봤을뿐 내것으로 만드는 과정은 거의 없었기 때문에 깊이 있는 공부를 하고 싶었다. *3. 다른 사람들과의 프로젝트 경험에 대한 갈망 * - 인턴, 정규직, 연합동아리에 서류지원을 할 때 항상 프로젝트 경험에 대해 물어보는데, 항상 참여한 경험이 없어서 불리하다고 생각했다. (나같은 초보랑 누가 프로젝트를 하냐고...)

😆지원과정

1. 서류 지원

나는 프로젝트 경험도 없고, 지식도 부족하고, 코테 실력도 부족했다.

프론트엔드의 존재도 대학교 2학년때 알만큼 간판만 컴공이지 코딩도 못하고 공부도 못했다. 늘 과에서 중하위권을 맴돌았다. 이런 부분에 일종의 자격지심이 있었고, 이를 타파하고 싶어 식시시간, 개인정비시간을 활용해 공부를 놓지 않으려 노력했다.

데브코스가 이번 기수부터 인원을 대폭 증가 시키고 전공자반, 비전공자반으로 나눈다고 하였다.

전공자가 비전공자로 들어가는 것에 대해 불이익은 없다고 하였으며, 코테를 보는 대신 실력 확인 테스트를 본다고 하였다. 코테 준비가 되지 않은 나는 좋은 회피책이 있어 이를 지원하기로 했다.

서류 지원의 문항은 다음과 같다.

1. 프로그래머스 데브코스를 지원한 동기가 무엇인가요? (300자 이상 500자 내외) "클라우드 기반 프론트엔드 엔지니어링" 과정을 선택한 이유를 작성해주세요.

2. 프론트엔드 엔지니어링 관련하여 학습 경험이 있다면 알려주세요. 관련 학습 경험이 없다면 동료학습을 통해 얻고자 하는 바와 학습 계획을 작성해주세요.(300자 이상 500자 내외) 5개월간 집중적으로 공부하기 위해 마음가짐이 중요합니다. 여러분이 준비해왔던 내용 및 학습 계획을 공유

3. 위의 질문에 대한 답변 외에 하고 싶은 말이 있으면 자유롭게 이야기해주세요. (300자 내외, 최대 500자) 선택

거짓없이 군생활 1년간 공부한 부분에 대해 솔직 담백하게 작성하였다. 1,2번은 나의 과거를 통해 현재와 미래에 어떻게 할 것인가에 대해 작성하였다. 3번은 평소 나의 마인드와 각오를 작성하였다. 이후 알게된 부분은 이곳에 깃허브, 블로그와 같은 포트폴리오 URL을 첨부한 사람도 많았다는 것이다. 다음에 지원하는 사람들에게 도움이 되었으면 한다.

2. 실력 확인 테스트

느낀점 : 뭐야 왜 이렇게 쉬워?

실력 확인 테스트를 하는 기간에 우연히 홍콩 여행이 예정되어 있었기에 노트북을 가지고 갔다. 홍콩 숙소에서 긴장되는 마음으로 문제를 보았는데 "어라라? 왜 이렇게 쉽지?" 생각이 들었다. 내가 거만한 것이 아니라 "A가 2등을 추월했다 A는 몇 등인가?" 정도의 수준이었다. 시간 제한이 2시간이었지만 15분만에 전부 다 풀었다. 검토까지 마친 시간이다. 테스트가 끝나고 든 생각은 "뭐로 지원자를 가려낼 생각이지?" 뿐이었고 아주 걱정이 많았다. 결과는 통과였고 바로 전화 인터뷰 준비를 하였다.

3. 전화 인터뷰

인터뷰보단 참여 가능한지 마지막 확인 느낌

지원동기, 어떤 개발자가 될 것인가?, 합격하면 잘 참여할 수 있는가? 정도의 질문들이었고 약 5~6분만에 끝났다.

데브코스 지원자 오픈채팅방이 있었는데 굉장히 많은 사람들이 전화를 기다리고 며칠날 전화한다만 알려줄 뿐 몇 시쯤 전화한다는 이야기가 없었기때문에 무작정 기다리는 사람들이 많았고 나또한 그랬다. 기다리다 지쳐 샤워를 하다 전화를 받았다... (에라이)

샤워를 하다 전화를 받아서 횡설수설하였고 무조건 탈락했다고 생각했다.

4. 최종 발표

이게 되네?

합격 통보의 날. 너무나도 긴장되고 안될거라는 생각이 머릿 속을 가득 채웠다. 터질 것 같은 심장을 부여잡고 메일을 확인했는데 최종 결과는 "합격" 너무나도 기분이 좋았고 합격하자마자 가족들에게 이 사실을 알렸다.

5. 각오

무조건 열심히 하겠습니다!

절대 합격하지 못할 것 같던 프로그래머스 데브코스. 무조건 열심히하고 잘하겠다는 생각뿐이다. 하나하나 집요하게 모르는 것을 알아가고 파헤쳐서 누구보다 잘할 예정이다.