Skip to main content

Command Palette

Search for a command to run...

[유플러스] Sw 교육 과정 유레카 1기 프론트엔드 비대면 회고

Updated
7 min readView as Markdown
[유플러스] Sw 교육 과정 유레카 1기 프론트엔드 비대면 회고

드디어 6개월 과정의 유레카 프론트엔드 과정이 끝이 났다 …! 😼

우리 비대면 프론트엔드 반 사랑합니다(사이좋은척 = 진짜 좋았음)💗

이번 블로그 글에는 6개월 간의 과정 및 회고를 적어보려고 한다.

🌱 지원 배경

나는 지원 당시에 졸업을 앞두고 있었다. 마지막 학기면 편하게 다닌거 아니야?라고 생각할 수 있지만 15학점을 듣고 있었고 (+재수강 이슈) 교육과정이 기말고사랑 겹쳐서 너무 힘들었던 기억이 아직도 생생하다.

다들 공감 하겠지만 졸업해서 칼취업을 하지 않는 이상 다들 막막하고 불안한 마음이 들것임..(아마도) 하지만 나는 개발자로 취업을 희망하면서 그 흔한 프로젝트를 경험이 없었다🥹 그렇다고 개발자 친구가 많지도 않아서 이런 고민을 나누거나 해결책과 방향을 제시해줄 친구도 주위에 없었다.

그 당시에 정말 가고 싶었던 싸피와 메루카리 인턴을 떨어지고 방황하던 중에 LG 유플러스에서 진행하는 프론트엔드 교육과정에 대해서 알게 되었지만, 아무래도 1기다 보니 자료가 너무 없었던 아쉬움과 불안감이 동시에 존재했다. 요즘 부트캠프가 정말 너무 많고 그 중에서 정말 나에게 도움이 되는 교육과정을 찾기란,, 하늘에 별따기🌟

기회는 한 번뿐이니 고민을 많이 했지만 해택이 너무 좋아서 결국 지원하게 되었다.

🔗 교육과정 보러가기

  1. 서류 전형 면제

  2. 코딩 테스트 면제

    대면으로 참여하고 싶었지만 아직 막학기 + 계절학기 예정이라서 포기하고 비대면으로 신청했다.

자소서 지원 후에 코딩테스트를 보고 면접을 진행했다. 아마도 코딩테스트에 여부에 따라서 면접을 진행했던 것으로 기억한다.

면접을 너무 못봐서 “붙을 수 있을까?”라는 생각이 많이 들었는데 다행히 합격했다 🥳

📁 수업 과정

🔗 프론트엔드 과정

커리큘럼을 보면 알 수 있듯이 저 많은 수업내용을 6개월만에 끝내야한다.(대부분 부트캠프가 그럼) 즉 하나를 깊게 배운기 보다, 얕고 다양하게 배운다고 생각하면 된다. 당연히 단기간에 많은 내용을 머릿속에 넣고 따라가야하기 때문에 복습이나 추가적인 스터디를 병행하는 것을 추천한다.

프론트엔드 비대면 강사님은 싸피 출신이셨고, 내가 기억하기로는 거의 백엔드 전문 강사인 느낌이 강했다.

🚀 스터디

나는 알고리즘이 항상 부족하다고 생각해서 직접 알고리즘 스터디 조원들을 모집했다.

아무래도 강제성이 없으면 스스로 꾸준히 하기 힘들다고 생각했다. 나 포함해서 프론트엔드 두명이랑 백엔드 두명이서 진행했다.

🔗 스터디 진행 방식

하지만 중간에 이분탐색부터 난이도가 급격히 올라가면서, 각자 추가 학습을 한 뒤 돌아가면서 문제를 선정하고 풀이하는 방식으로 변경했다.

나는 파이썬에서 자바스크립트로 언어를 변경하면서 기초부터 다시 문제를 풀이했으며, 이에 대해 백엔드 팀원들도 이해하고 배려해 주었고 각자 자유 문제 풀이로 방향을 최종 수정했고, 지금까지 진행중이다.

💫 프로젝트

세번의 팀프로젝트를 진행한다. ( 팀은 멀티캠퍼스에서 임의로 짜줬다 )

  1. 미니 프로젝트(FE)

  2. 종합 프로젝트(FE)

  3. 융합 프로젝트(FE + BE)

[미니 프로젝트] 링클

우리 조(나 포함 세명)는 링클이라는 URL을 효율적으로 관리할 수 있는 플랫폼을 제작했다.

아무래도 백엔드가 없다보니 다같이 node.js + mysql을 사용해서 백엔드를 구축했다.

자료가 많이 남아있지 않아서 첨부할 데이터가 없다.

[종합 프로젝트] 발바닥 천국

프로젝트 기간 : 2024.10.21-2024.11.08

🔗 프로젝트 보러가기

미니 프로젝트에는 수상이 없었지만 종합때부터는 수상이 생겼으며 좀 더 체계적으로 가이드라인을 주었고, 가이드라인을 기반으로 본인들이 원하는 기능을 추가해서 웹을 개발하는 프로젝트를 진행했다.

프론트엔드(대면+비대면 공통)는 유플러스에서 밀고 있는 포동과 비슷하게 반려동물 용품 판매 + 추가 기능을 개발해야 했다. 우리 조는 총 여섯명으로 구성되어 있었고(전공자 세명 + 비전공자 세명)으로 구성해준 것으로 보아 단순히 랜덤이 아니라 시험 + 미니 프로젝트에서 진행했던 조원 평가를 기반으로 조를 구성한 것 같았다.

✨ 아이디어 회의

우리 조는 각자 생각나는 기능을 노션에 적고

1. 차별화 된 아이디어인가? 2. 단기간에 개발 가능한 기능인가에 초점을 두고 브레인스토밍을 진행했다.

지금 생각해보면 단기간에 너무 많은 기능을 넣어서 완성도가 떨어진 것 같다.

인원이 6명이라서 두명은 피그마, 네명은 ERD + API 명세서 작성을 하기로 역할 분배를 했으며 나는 당연히 피그마로 지원했다.

(저는 UI 디자인을 굉장히 중요하게 생각하는 사람😼)

✨ 기술 스택 회의

나는 백엔드 스택으로 Java가 선정된 것에 대해 걱정이 많았지만, 5:1 의견 차이로 팀원들을 설득하지 못했다.

만약 내가 Node.js에 대한 이해도가 높거나 역량이 충분했다면 설득할 수 있지 않았을까 하는 아쉬움이 남았다.

✨ 피그마 과정

단기간에 많은 페이지를 두명이서 완료 해야하기 때문에 힘들었다.

그렇다고 다른 조원들에게 부탁하기엔 다들 피그마 경험이 없다고 했고, 피그마는 사람이 많으면 산으로 간다고 항상 느꼈기 때문에 9:00AM - 10:00PM까지 이틀 동안 꼬박 했다..~

✨ 프로젝트 결과

페이지 수가 많고 기능도 방대했다. 지금 생각해보면 말도 안 되는 규모였다. 🤧

프로젝트를 진행하며 두 번의 유플러스 멘토링을 받았다.

  • 첫 번째 멘토링에서는 기능을 줄이라는 피드백을 받았고, 일부 기능을 삭제했다.

  • 두 번째 멘토링에서는 첫 화면 로딩 속도가 너무 느린 문제가 지적되었다. 이에 대해 문제의 원인과 해결 방법을 논의하는 시간을 가졌다.

✨ 아쉬웠던 점 | 느낀점

1️⃣ 코드 퀄리티 문제

가장 아쉬웠던 점은 코드 퀄리티가 좋지 않았다는 것이다.
특히 단기간에 Spring Boot로 백엔드를 구현해야 했던 점이 큰 부담으로 작용했다.

예를 들어, 이미지를 저장해야 하는 기능이 필요했지만, S3에 대한 개념조차 몰랐고 무작정 로컬에 저장하려다 큰 문제가 발생했다. 이 문제로 3일 동안 잠을 거의 못 자면서 해결해야 했고, 그만큼 프론트엔드 코드 퀄리티 관리에도 소홀할 수밖에 없었다.

2️⃣ 팀 소통 부족

이번 프로젝트를 통해 팀 소통이 정말 중요하다는 걸 몸소 느꼈다.

우리 조는 거의 항상 4명만 디스코드에 접속해 있었고, 각자 작업하는 '모각코' 느낌으로 진행했다. 처음부터 일정을 구체적으로 세우지 못해, 후반부에 무리하게 밤을 새야 했고, 일주일 만에 3kg가 빠질 정도로 일정이 타이트했다. 🥹 나는 7시에 라면을 끓여놓고, 새벽 2시에 먹었던 기억도 있다.(지금 들으면 웃픈)

3️⃣ 소셜 로그인 문제

팀원 중 한 명이 소셜 로그인을 맡았지만, 아무도 도움을 주지 못했다.

우리 웹사이트는 로그인하지 않으면 대부분 기능을 사용할 수 없는 구조였기 때문에, 소셜 로그인을 구현하지 못하면 사이트 자체가 이용 불가능한 상황이었다.

결국, 끝까지 소셜 로그인 기능을 완벽하게 구현하지 못했다. 하지만 이는 특정 팀원의 잘못이 아니라, 팀원 모두가 서로에게 무관심하고 각자도생하는 분위기 때문이었다.

4️⃣ 의견 공유 부족

카카오톡 단체 채팅방에서 의견을 물어봐도 답변을 못 받을 때가 많았다.
"디코에서 다시 물어봐야지…"라고 생각했지만, 결국 말을 꺼내지 못하고 지나간 적도 많다.

이번 프로젝트를 통해, 왜 개발자 채용 공고에서 '소통이 잘 되는 사람'을 선호하는지 절실히 깨달았다.

[융합 프로젝트] 댕댕어디가

[추후에 댕댕어디가 회고 작성할 예정]

프로젝트 기간 : 2024.11.12 ~ 2024.12.19

리팩토링 기간 : 2025.01.14 ~ 2025.02.17

🔗 프로젝트 보러가기

융합 프로젝트는 예선과 본선으로 나누어져 있고, 예선에서 총 4팀이 올라가며, 본선 때는 최우수상, 우수상을 수상하는 방식이다.본선은 직접 마곡에 가서 유플러스 현업자 분들이 평가 + 질문 하면서 수상을 해주신다고 했다.(+비대면/대면 강사님들도)

당연히 종합보다 더 중요하게 느껴졌다.

아쉽게도 종합 프로젝트에서는 수상을 하지 못 했지만,,!!! 융합 프로젝트에는 ✨백엔드✨ 분들이랑 협업이라니 너무 좋았다.

비대면 프론트엔드는 당연히 비대면 백엔드 분들과 협업을 했다. 팀원 구성은 종합과 마찬가지로 멀티캠퍼스에서 구성해줬다.

우리 조는 백엔드 4명 + 프론트엔드(나 포함) 3명으로 총 7명으로 구성되었다.

✨ 아이디어 회의

처음에는 백엔드 분들이 원하는 주제와 프론트엔드 팀이 원하는 주제가 달랐다. 우리가 원하는 주제로 설득을 하기 위해서는

“왜 이 주제가 하고 싶고 어떤걸 하고 싶은 지에 대해” 설득 하는 것이 중요했다.

프론트엔드 팀은 반려동물 동반 가능 시설 공유 플랫폼의 주제를 원했으며, 각자 선택한 배경에 대해서 이야기를 오랫동안 나눴다.

그 결과 백엔드 분들이 동의하셔서 프론트가 원하는 주제로 결정했다!🥳

✨ 개발 프로세스 & 협업 방식

📑 매일 두 번의 스크럼 진행

매일 오전 오후로 나눠서 두번의 스크럼을 진행했다 👍🏻

나는 이 부분이 정말 우리에게 도움이 많이 되었다고 생각하는 이유가, 서로가 어디서부터 어디까지 진행 상황을 공유하며 겪고 있는 문제점을 논의할 수 있었기 때문에 팀원 간 원활한 협업이 가능했으며, 문제를 빠르게 해결하고 일정 조정을 할 수 있어 효율적인 개발이 이루어졌다. + 매일 회의록 작성을 진행했다

📑 WBS로 서로의 진행상황 확인

WBS로 매일 서로의 진행상황을 확인했으며, 아침마다 업데이트를 진행해줬다.

📑 애자일 방식

  • 백엔드 분들이 애자일 방식으로 개발을 하고 사용자 피드백을 받고 싶어하셨다. 우리 조장분이 앱 출시 경험이 있어서 구글 광고도 진행했다.

  • 유저들에게 받은 피드백을 기반으로 리팩토링을 진행했다.

✨ 멘토링

현직자 멘토링이 네 번정도 있었고, 매일 강사님들과 멘토링을 진행했다.

멘토링을 시작하기 전에는 백엔드 | 프론트엔드 각자 궁금하거나 겪고 있는 문제에 대해서 미리 작성하는 시간을 가졌다.

유플러스 현직자 분들이 오셔서 칭찬을 많이 해주셨다🥹 다른 조에 비해서 소통이 잘 되고 있고, 문서 정리도 잘 되어 있다고 피드백 해주셔서 더더더더더욱 의사소통이 정말 중요하다고 느꼈던 것 같다.

그 결과 예선도 통과하고 🥳🎉

최우수상도🥳🎉 했다 (나 너무 행복해 하는 듯ㅎㅎ)

😼 6개월 동안 나의 성장 & 회고

앞서 말했듯이 나는 팀 프로젝트 경험이 캡스톤을 제외하고 없었으며, 스스로 떳떳하게 프로젝트 경험이 있다고 말 하지도 못했다. 물론 깃허브 사용 법에도 어려움이 많았다.

2023년 깃허브

2024년 깃허브

현재

깃허브만 봐도 알 수 있다.. 2024년 6월 기준으로 잔디가 굉장히 많아진 것..!

유레카 과정을 전후로 개발자에 대한 태도와 마인드가 바뀌었다.

  • 유레카 과정을 거치면서 기술 습득뿐만 아니라 문제 해결과 협업의 중요성을 깨달았다.

  • 코드를 작성할 때, 무조건 협업하는 팀원들을 위해 가독성을 고려하여 개발해야 한다는 생각이 가장 먼저 들었고, 협업을 우선시하는 개발자가 되고 싶다는 마음이 생겼다.

  • 모르는 부분이 있으면 창피해하지 말고 질문을 해야 한다는 생각이 들었다. 모든 배움에는 일정 부분 창피함이 따를 수밖에 없지만, 그걸 부끄러워하지 말고 질문을 통해 배우는 것이 중요하다는 것을 많이 깨달았다.

More from this blog

[React] 클라이언트에서 이미지를 압축해보자

우리는 서버 비용을 직접 부담하고 있기 때문에 항상 최적화와 비용 절감 방법을 고민하게 된다. 현재 자유게시판이 활성화가 많이 되지는 않았지만 사용자들이 업로드하는 이미지가 평균 5MB 이상일 경우를 대비해서 클라이언트에서 이미지 압축을 진행했다. 웹에서는 크게 두 가지 방법이 있었는데 Canvas API를 직접 사용하는 방법 browser-image-compression 라이브러리를 활용하는 방법 이 있다. 여러 장점을 고려해 brow...

Oct 8, 20252 min read
[React] 클라이언트에서 이미지를 압축해보자

[책 추천] 프론트엔드 개발자라면 반드시 알아야 할 '웹 접근성' 이야기

내가 생각하는 프론트엔드 개발자는 단순히 보이는 화면만 구현하는 것을 넘어서 누구나 접근할 수 있는 웹을 만드는 데 중요한 역할을 해야 한다고 생각한다. 실무에 바로 적용하는 웹 접근성 가이드북 이번에 이 책을 받고 프엔들이 읽기에 너무 좋다고 생각해서 블로그에 추천 글까지 적게 되었다 ! 목차 Chatper1. 쉽게 이해하는 접근성 Chapter2. 웹 접근성의 기초 Chapter3. HTML 태그, 의미 있게 사용하기 Chpater4...

Jul 27, 20255 min read
[책 추천] 프론트엔드 개발자라면 반드시 알아야 할 '웹 접근성' 이야기

[Next.js] 나만의 학습 블로그 만들기#3-다국어 지원 (Feat.next-i18next)

오늘은 다국어 지원 가능한 기능 구현 과정을 적어보려고 한다. 원래는 댓글기능보다 먼저 구현하려고 했는데 ,, 갑자기 댓글기능 알아보다가 재밌어서 먼저 끝내버렸다,,,🙄 시작하기 전에 정말 어려웠다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 어려움이 많아서 기능 적용하는 데 시간이 꽤 걸렸다 ,,, 다국어 지원 기능 나는 영어랑 일본어를 추가해줬다 ! (해외취업도 관심 있기 때문에 나중에 이력서 낼 때 도움이 되지 않을까? ..🤭) 다국어 구현 방법 구현 방...

Jul 15, 20254 min read
[Next.js] 나만의 학습 블로그 만들기#3-다국어 지원 (Feat.next-i18next)

[Next.js] 나만의 학습 블로그 만들기#4 - 댓글 기능(Feat. Giscus)

댓글기능이 있으면 무조건 재밌을 거 같아서 넣어보려고 한다🤭 아무래도 개발에 관련된 학습 블로그라서 개발자들이 많을 것으로 예상했다 ! 그래서 깃허브 이슈 기반 댓글 시스템을 기반으로 기능을 구현해보려고 한다. 👉🏻 도움이 많이 된 블로그 ! 방법 Giscus | (https://giscus.app) utterances | (https://utteranc.es) 알아봤을 때는 이렇게 두 개가 유명하다고 한다. 그럼 각각의 특징과 장...

Jul 14, 20253 min read
[Next.js] 나만의 학습 블로그 만들기#4 - 댓글 기능(Feat. Giscus)

[React] React + localStorage로 하루에 한 번만 보이는 팝업 만들기

이번 프로젝트에 설문조사 배너를 제작했는데… 흠… 뭔가 별로라는 의견이 많았다! (팀원들 의견) 🙄 디자인이 문제일까? 해서 래퍼런스를 많이 찾아봤는데 … ! 일반 웹사이트는 설문조사 배너 자체를 안 만들어요,,,🤭 충격 그 자체 ( 난 아직 멀었음 ) 그리고 알아보니깐.. 설문조사 배너는 사용자 경험을 해치기 쉬워 잘 쓰이지 않는다고 한다! 그래서 나는 모달 팝업 방식으로 전환하기로 결정했고 실무에서 자주 사용하는 패턴으로 구현했다. 방...

Jul 9, 20253 min read
[React] React + localStorage로 하루에 한 번만 보이는 팝업 만들기
S

subin-dev-blog

27 posts

끊임없이 배우기 위해 노력합니다. 🌱