이번주를 되돌아보며

이번주는 대체공휴일 덕분에 주 4일을 출근했습니다. 수요일까지는 별 체감이 없었는데 금요일에는 오늘이 금요일이라는 사실이 너무 감사하게 느껴졌습니다. 뭔가 특별히 바쁜 일은 없었는데 혼자 안절부절하느라 정신이 없던거 같기도합니다. 늦잠자는걸 좋아하는데 요즘 새벽 3~5시에는 무조건 한번씩 깨서 너무 슬펐습니다. 또 혼자 이것저것 생각을 많이해서 그런지 자꾸 하나씩 까먹어서 몸이 고생하는 경우도 생기고 있습니다. 수면부터 되돌리기 위해서 회사에서 커피 마시는걸 2~3회로 줄였고, 아이스티 같은 것도 최대한 덜 먹을려고 노력(?)하고 있습니다. 이제는 정말 살기 위해서 운동해야하나 진지하게 고민중입니다. 올해 안에는 헬스장 등록을 꼭 해보는 것으로...

처리하는 것도 중요하지만 수습하는 것도 중요하다

이제 입사 2달차가 가까워지고 있는 요즘, 이제야 업무에 적응이 되고 조금씩 익숙해지고 있다는 것을 느낍니다. 특히 이번주는 다른날보다 더 크게 느껴졌던거 같습니다. 그래서 업무에 속도도 붙고하다보니 어떤걸 고쳐보면 좋을지 도메인들을 탐색하기도하고, 어떻게하면 더 나은 성능이 나올 수 있을지 Claude랑 이야기도하고 있습니다. 그리고 이번주에는 제가 먼저 피엠,프디 분에게 '이걸 고쳐보고 싶어요~' 라고 말씀도 드려보았습니다.(아주 간단한 틀린 워딩 수정이었지만요) 그러면서 1주일에 처리하는 업무량도 늘어나고, 속도도 점점 붙고 있습니다. 재미도 이전보다 더 많이 느끼고 있습니다. 하지만 이번주에는 업무 처리만 하던거에서 조금 문제가 생겼습니다. 제가 수정한 기능에서 버그가 발생했습니다. 그와 동시에 제가 진행하고 싶다고 피엠,프디 분에게 말한 업무에서도 추가 논의가 필요했고, 팀원들에게 공유했던 빌드속도 개선도 공유한 내용과 다른 결과로 흘러가 Claude와 대판 싸우고 있었습니다. 이 모든게 하루만에 일어나니 '오늘따라 뭐가 꼬이네' 라는 생각이 들었습니다. 결과적으로는 모두 잘 해결이 되었지만, 그 날 퇴근하면서 무작정 업무만 처리하는 것보다 내가 담당한 업무에 문제가 생겼을 때 수습할 수 있는 시간도 확보하는 것도 중요하겠다고 생각이 들었습니다. 하루만에 해결이 가능했던 문제들이어서 다행이었지 만약 2,3일 혹은 일주일 넘게 더 걸리는 문제였으면 끔찍할거 같습니다.

맞춰가기

이런 문제들이 생기면서 '내가 바껴야겠다' 라고 생각한 점도 있습니다. 바로 병목 견디기 입니다. 이게 무슨 말이지? 싶으실거에요.

저는 업무를 진행할 때 병목 현상을 잘 못 견뎌왔습니다. 하나 예를 들어보면 우리는 업무를 진행할 때 대부분 다른 팀들과 협업을 합니다. 보통 PM쪽에서 새로운 기획이 나오면, 디자이너는 그 기획을 디자인하고, 개발자는 나온 디자인을 개발합니다. 하지만 이렇게 흘러가다보면 분명 소통을 해야합니다. 또한 기획, 디자인 회의를 진행한다고해도 개발할 때, 또다른 문제가 발생하여 추가 논의가 이루어 질 수도 있고요. 그럴 때 보통 우리는 Slack으로 'OO님~ 개발하다가 OO문제가 생겼어요. 계획했던 A를 B로 변경해야할거 같은데 검토해주세요.' 이렇게 보낼겁니다. 답장이 빠르게 오면 좋겠지만 그 분들도 업무가 있다보니 기다립니다. 언제 답이 올지 모른채로요. 저는 이 병목 현상을 못 견뎌왔습니다. 답이 올 때까지 다른 업무를 하고있으면 되지만 저는 그 스위칭이 잘 안되었습니다. 다른 업무로 스위칭을 하더라도 집중도 잘 안되고 자꾸 찝찝함이 남았습니다. 가끔은 바쁘셔서 질문을 놓쳐 답장이 늦어지는 경우도 있었습니다. 리마인드를 드리자니 재촉하는거 같고, 안드리자니 언제까지 기다려야할지도 잘 모르겠고 답답함을 많이 느껴왔습니다. 이 부분에 대해서 고치고 싶다는 생각을 계속 해왔지만 이전 회사에서는 스타트업 특성상 빨리빨리 가 중요시 되었기 때문에 오히려 더 심해졌지 나아지진 않았던거 같습니다. 하지만 미리디에서는 이 부분을 맞춰나가야겠다고 생각이 들었습니다. PR 리뷰가 조금 늦어져도 내가 대응할 수 있는 시간이면 최대한 기다려보고, 또 추가 논의가 필요한 사항이나 의견이 필요할 때도 최대한 기다릴려고 하고있습니다. 혹여나 마감 기한이 다가와서 급하게 해야한다면 최대한 재촉하는 기분이 들지않게 말씀 드릴 필요가 있다고도 느꼈습니다.

마무리

이제 적응이 좀 되었다 싶으면 또 다른 일들로 아직 멀었구나 를 느낍니다. 팀원분들이 너무 완벽하지 않아도 된다는 말씀들을 해주십니다. 저도 그렇게 느끼긴하지만 욕심을 버리기가 쉽지가 않네요. 버틸 수 있는 정도에서 최선을 다하고, 천천히 그릇을 키워나가야 넘치지않을거 같습니다. 어제보다 더 나은 나로 퇴근할 수 있게만 잘 조절해봐야겠습니다.

'일상 일기' 카테고리의 다른 글

드디어 완성된 자리 셋팅  (0) 2026.08.14
새로운 시작(with. 미리디)  (1) 2026.08.08
드디어 취준 끝.  (2) 2024.03.28
래블업 인턴 후기  (1) 2024.03.02
오랜만에 들립니다.  (0) 2021.02.09

세팅 유목민

입사한지 벌써 한달이 넘었지만, 아직까지 나만의 최적의 세팅을 찾지 못하고 있었다. (지금도 베스트는 아닌듯,,,)

모니터도 노트북 화면까지하면 3개인데, 이렇게 넓게는 사용을 안해보다보니 최적이라는 느낌은 들진 않고, 계속 이리저리 바꿔보고 있다.

그리고 회사에서 제공해주는 커다란 키보드와 잘 사용해보지 않았던 마우스로 업무를 진행하려니 장비에도 적응이 필요했다.

그러다가 지난주 일요일(9일)에 생일이었는데, 키보드와 손목 받침대를 선물받았고, 회사에 세팅하면서 드디어 어느정도 나만의 세팅을 찾은거 같다. 

장비 욕심

이때까지 나는 장비에 큰 욕심이 없었다. 업무도 장비빨이라는 말에 공감은 하지만, 편한 장비를 사용하다가 장비를 사용할 수 없는 환경에서 업무를 하게 된다면 불편함을 느끼기 때문이다. 특히 듀얼 모니터, 키보드, 마우스, 노트북 성능 등 한번 맛보게 되면 되돌아가기 어렵고 개인적으로도 역체감을 심하게 느끼는 편이다. 이러한 이유들 때문에 장비를 사용할 기회가 있어도 최대한 거부해왔다. 그러다가 이전 회사에서 어느 가격대를 정해서 내가 원하는 키보드를 지원해줬는데, 공짜인데 거절할 이유는 없어서 그때 처음으로 기계식 키보드라는 것을 사용해봤다.(그 전까지는 노트북 키보드로만 코딩을 해왔다) 이번 미리디에서도 처음에는 노트북 키보드와 노트북의 트랙패드를 사용할까 했는데, 노트북을 가운데에 놓으니 안그래도 좁은 어깨가 더 좁아질거 같았다. 그리고 이제는 자세를 신경쓰지않으면 허리와 목이 점점 아파왔기에 장비에 의존을 안하고 싶어도 안할 수가 없는 몸이 되어버렸다. 회사에서 제공해준 키보드와 마우스가 있긴 했지만 위에서도 말했듯이 나랑은 맞지 않았기 때문에 생일에 키보드를 사거나 받아야겠다 라고 생각했다.

그래서 입사한지 한 달이 지나고, 선물 받은 키보드를 장착했고, 기대하지 않았던 손목받침대도 선물 받아 장착을 했다.

만족도

이번에 선물받은 키보드랑 손목 받침대는 너무 만족해서 사용하고 있다. (그래서 현재 시각 금요일 20:25.. 퇴근도 안하고 회사에서 글쓰고 있음) 키보드는 타건샵을 가진 못하고 수많은 리뷰와 영상을 찾아보며 고심 끝에 골랐는데 타건이 아주 쫀득하다. 많은 키보드를 경험한 건 아니지만 키감중에서는 이때까지 키보드들 중에서 제일 만족스럽다. 그리고 손목 받침대는 이번에 처음 써보는데 확실히 밑에서 받쳐주니까 손목 건강에 도움이 되는거 같다. 색상이랑 분위기도 자리와 잘 맞는거 같아 만족도가 2배다.

새로운 자리 세팅✌️

마무리

확실히 업무중에 가장 많이 상호작용하는게 키보드이다보니 만족도가 더 높은거 같다. 클로드가 말을 잘 안들을 때도 키보드를 더 칠 수 있는 기회가 되니 조금은 화가 줄어들긴한다. (역시 장비가 중요합니다.)

이제 넓게 배치된 모니터를 나한테 맞는 구조로 바꾸고 싶은데 아직까지 찾진 못했다. 점점 더 나은 세팅으로 유목민 생활을 빨리 끝낼 수 있길 바라며 이번주 글쓰기도 성공~

'일상 일기' 카테고리의 다른 글

맞춰가기  (0) 2026.08.22
새로운 시작(with. 미리디)  (1) 2026.08.08
드디어 취준 끝.  (2) 2024.03.28
래블업 인턴 후기  (1) 2024.03.02
오랜만에 들립니다.  (0) 2021.02.09

개요

마지막에 글쓴게 벌써 2년 전에 첫 직장 스타트업에 취업했을 때이다. 2년만에 돌아와서 글쓴 지금은 새로운 직장인 미리디에 다니고 있으며, 딱 1달째 되는 날이다. 분명 2년전에 회사를 다니면서 배우고 느낀점을 꾸준히 기록하기로 했는데,,,ㅎ 역시 사람은 생각처럼 행동하지 않는다.
최근 글쓰기 스터디에 합류했고 
글쓰기 습관을 기르고 글쓰기 속도를 개선해 문서화에 들이는 시간을 줄인다는 목표를 가지고 있다. 안쓰면 벌금 5천원이 기다리고 있으니 당분간은 열심히 쓸거 같다.

우선 스터디 첫 글이다보니, 2년 사이에 있었던 일들, 이직 이야기, 미리디에서의 새로운 시작을 이야기해보려고 한다.

스타트업에서 커리어 시작

24년 4월 8일. 광화문에 있는 스타트업 빌리지에 위치한 스타트업에 Frontend Developer에 합류하였다. 입사했을 때 멤버는 대표, 부대표, 디자이너, 그리고 나 이렇게 4명이었다. 기존에는 B2C 대상으로한 App으로 서비스를 하고 있었지만, 수익화를 위해서 B2B 웹 서비스를 시작하기 위해 새로운 팀원을 구했었고, 운이 좋게 내가 되었다. 새롭게 합류한 나까지 포함해서 이제 4명인 회사에 입사한다고 했을 때 주변의 반대도 꽤 있었다. 야근도 많을거고 스타트업 특성상 언제 회사가 없어질지 모른다고 했다. 하지만 그 당시에 나는 그런거 가릴게 아니었다. 이력서 10개를 넣으면 1곳에서 연락이 올까말까 였다. 그런 상황에서 적당히 돈주면서 일만 시켜주면 뭐든지 하겠다는 마인드였기 때문에 이제 막 시작한 스타트업에 입사한게 오히려 기회라고 생각했다. 연봉은 당연히 적었다. 하지만 나를 믿고 뽑아준 이 회사에서 내 능력을 최대한 뽐내서 내 커리어와 연봉 모두 끌어올리고 싶었다. 그 열정 때문이었을까? 4개월만에 B2B 서비스를 완성시키고(지금이면 claude로 더 짧게 걸렸을테지만 그 당시에는 GPT 초기 모델이 점점 사용되던 시기였다) 기업들과 하나 둘 씩 계약을 맺었다. 기업들이 하나씩 들어올 때마다 많은 뿌듯함을 느꼈고, 더 열심히 할 수 있는 원동력이 되었다.

첫 직장의 마무리

점점 서비스가 커지며 팀원들도 하나 둘 씩 늘어갔고, 나중에는 팀원이 총 8명이 되었다. 그렇게 행복할 줄 알았다. 하지만 26년 2월. 갑자기 팀원 모두 개인 면담 신청이 들어왔고, 회사의 사정으로 팀원 모두 권고사직이었다. 고객 수와 매출이 늘어나고 있었지만, 유지하기가 어려웠던거 같다.

모든 이야기를 하기에는 너무 길어서 다 적지는 못하지만 개인적으로는 너무 만족스럽고 낭만 있는 회사였다. 물론 야근도 많이했고, 쉽지 않은 상황도 많았다. 하지만 나이가 비슷한 멤버들끼리 일을 하다보니 더 빠르게 적응하고 친해질 수 있었다. 그리고 팀의 성장과 나의 성장을 같이 바라보면서 일을 할 수 있는 좋은 경험이었다. 지금 되돌아보아도 스타트업에서 누릴 수 있는 낭만, 열정을 모두 느낄 수 있었던 회사가 아니었을까 싶다. 퇴사한 지금도 이전 팀원들과 한번씩 연락을 하면서 안부를 물어보며 관계를 유지하고 있다.

그렇게 나는 내 첫 직장을 26년 4월 마무리했다.

새로운 직장을 찾아서

이왕 이직을 하게된거 좀 더 크고 좋은 환경의 회사에 들어가고 싶다는 목표를 가지고, 이력서와 포트폴리오를 정리하며 이직 준비를 했다. 퇴사하기 직전까지도 여러 기업에 면접을 진행했지만 좋은 결과로는 이어지지 못했다. 2년과 다르게 Frontend Developer 직군이 많이 사라졌으며 AI로 인하여 Software Engineer 혹은 FullStack Devloper 직군을 많이 채용하는 분위기 였다. AI 과도기였기 때문에 기업마다 요구하는 AI 수준이 많이 달랐고, 이전 직장에서 AI를 적극적으로 사용하면서 개발을 하진 않았어서 면접이 쉽진 않았다. 그래도 경력자다보니 첫 취업 시장에 뛰어들었을 때보다는 많은 연락을 받으며 조금의 가능성을 느꼈다. 하지만 이것도 잠시, 점점 떨어져가는 면접에서 자신감이 많이 떨어졌고, 이제는 내가 들어갈 기업이 안보였다. 그러다가 미리디의 채용 공고가 눈에 들어왔다. 3월에 다른 포지션에 지원했을 때, 서류 탈락한 경험이 있었지만, 그래도 한번 지원해보자는 생각으로 지원을 했다. 별 기대를 하지 않았는데 서류합격 메일을 받았다. 기대도 안한 서류 통과 소식에 기뻐하며 다음 면접인 온라인 기술면접을 나름 열심히 준비했고 자신이 있었다. 하지만 면접이 종료되고 가장 먼저한 혼잣말은 x됐다. 였다. 아무것도 모를 신입 때 보았던 기술면접 때와 비슷하게 대답을 못했다... 주변에는 말도 안될 정도로 망했다. 이거는 합격하면 취업 비리 의심 받는다(?) 라는 농담까지하며 이미 망해버린 면접을 묻어두었다. 그런데 이게 무슨일??? 1차 면접을 보자고 연락이 왔다. 그때 가족 여행중이었는데 순간 내가 더위를 먹어서 뭘 잘못보고있나 생각이 들었다. (지금 생각해도 어케했누,,,) 그렇게 1차 면접을 진행하고 2차 면접까지도 통과한 후, 미리디에 최종합격을 할 수 있었고, 불안 가득했던 첫 이직 경험을 끝냈다.

이런저런 힘든 이직이었지만, 처음에 목표했던 더 크고 좋은 환경의 회사에 들어가고 싶다는 이직 목표는 달성했다. 내가 처음에 목표했던 규모보다 너무 커졌긴하지만 큰 무대에서 일할 수 있는 기회가 더 빨리 찾아와서 좋았다. 그리고 무엇보다 집에서 출퇴근하기 좋다는 점이었다. 이전 회사는 편도 2시간을 잡고 출퇴근을 했는데 이번에는 환승없이 지하철로 25분! 도어투도어로는 40분정도다. 출퇴근 거리가 복지라고 이번에 처음으로 느꼈다.

이렇게 좀 더 좋아진 미리디의 생활을 기대하며 이직때 진행했던 자료들을 정리하며 입사일을 기다렸다.

미리디 생활

26년 7월 6일. 미리디에 첫 출근을 했다. 이전과는 비교도 할 수 없을 정도의 구성원 수와 규모, 서비스에 조금 긴장 되었다. 그리고 이전 회사와 많이 다른 분위기와 낯선 환경의 적응은 쉽지는 않았다. 내가 보기에도 스스로의 업무 속도도 느리다고 느껴 답답함을 느끼기도한다. 하지만 이럴 때 일수록 자신감을 가지고 나아가려고하고 있다. 이제 입사한지 1달이 지났고, 여기에서 업무를 진행할 날은 너무나 많이 남았다. 하나씩 내 것으로 만들어가면서 내 장점을 미리디에서 적용해보면 된다. 이번주에는 처음으로 RFC라는 것을 올려봤다. RFC는 기존에 사용하던 템플릿이나 규칙을 바꾸거나, 새로운 라이브러리 도입기 전에 팀원들에게 공유하여 동의를 구하는 과정이다. PR 리뷰를 진행하면서 PR 본문에 불필요하거나 중복되는 내용이 많은거 같아 이를 해결하고 싶어 RFC를 올려보았는데, 내용을 공유할 때 이상하게 많이 떨렸다. 원래 남들 앞에서 새로운거 도입하려고 할 때 의견을 구하거나 공유하는 걸 좋아해서 이렇게 떨려하지 않았는데 왜그런지 나도 잘 모르겠다.

앞으로의 생활

이제 점점 하나씩 이슈들을 맡으면서 업무를 진행하고 있다. 그리고 차근차근 새로운 시각으로 느꼈던 불편함들을 더 좋게 바꾸려고한다. 미리디는 AI 발전에 맞게 자동화를 잘 사용하고 있다고 느꼈다. Claude 활용 경험이 부족하여 팀에서 진행하는 AX 스터디도 참여하여 다른 분들은 어떻게 활용하는지 공유하는 시간을 가지고 있다. 그리고 이제 앞으로 1주일에 1번정도는 이런 일상 공유, 일기, 스터디하면서 배운점(기회가 된다면,,ㅎ)을 블로그 글에 적어보려고한다. 확실히 요즘 AI만 사용하고 있고, 이런 글을 오랜만에 적다보니 글쓰는 실력이 많이 떨어졌다고 느낀다. 글쓰기 스터디를 진행하면서 점점 더 나아지는 모습이 보이길ㅎ 그리고 새로운 미리디 생활도 화이또~!!💪

'일상 일기' 카테고리의 다른 글

맞춰가기  (0) 2026.08.22
드디어 완성된 자리 셋팅  (0) 2026.08.14
드디어 취준 끝.  (2) 2024.03.28
래블업 인턴 후기  (1) 2024.03.02
오랜만에 들립니다.  (0) 2021.02.09

개요

드디어 길고 길었던 취업 준비가 끝났다. 초기 스타트업에 Frontend Developer 직무로 취업을 했고, 내가 취업 준비하면서 가장 자신있게 면접을 진행하고 편안했던 분위기 때문에, 이 회사에 입사하고 싶었다. 생각보다 길어진 취업 준비로 많은 생각도 하고 그랬는데, 이 시기동안 했던 생각과 느낀점들, 경험했던 것들을 지금 정리해야 그래도 기억이나지.. 안그러면 또 까먹어버리기 때문에,,

이 글에서는 전역을 하고 나서 내가 취업 준비했던 과정, 힘든 점 등등 겪었던 것들을 정리해보려고한다.

 

전역 전

21년 3월에 소위로 임관을 했던 나는 어느덧 전역을 앞두고 있었다. 전역이 다가올수록 점점 취업에 대한 불안감이 생겨났지만, 야근이 많아 규칙적으로 매일 공부는 할 수 없었기 때문에, 주말에라도 코딩테스트를 준비하면서 조금씩 준비를 했다. 주변에서는 '전역하고 좀만 놀지 왜 바로 취업 준비를 하냐' 라고 많이 말을 했지만, 이미 졸업을 하고 2년이 지난 나의 머리 속에는 전공 지식들 과 언어들이 없었다. 또 한번 나태해지면 무기력해질 때까지 나태해지는 나를 잘 알기에, 조금이라도 더 빨리 준비해서 남들과의 차이를 매꿔야했다. 코딩 테스트를 준비하면서 지원할 회사들도 알아보았다. 하지만 인턴 경험도 없었기 때문에, 취업에 대한 막막함이 너무 컸고, 인턴같은 경험을 할 수 있으면 좋겠다라는 생각이 들었는데, 휴가 때 친구가 오픈소스 컨트리뷰션 아카데미를 추천해줬다. 해당 프로그램에는 내가 지원할 회사로 알아봤던 래블업도 있었고 프로그램 기간이 전역하고나서 7월부터 10월까지 였기 때문에 나한테 너무 좋은 상황이었다. 얼마 안남은 참가 신청을 후딱 작성하고 결과를 기다리며 전역을 했다.

 

전역 후.. 컨트리뷰션 아카데미 시작

길었던 군 생활이 끝나고 전역을 했다. 얼마 후 컨트리뷰션 아카데미에서 래블업에 합격했다는 소식을 받았다.

'드디어.. 전역을 하고 시작이 좋구나' 생각을 했다 ㅋㅋㅋㅋ 프로그램을 시작을 하고 나서 처음으로 여러 개발자들과 이야기를 해보며 오픈소스 기업에 기여를 하는 경험을 했다. 기여라고 해도 간단한 이슈를 찾아서 Github에 등록하고, 이슈 해결 PR을 작성하는 것이었지만 나한테는 너무나 소중한 경험이었다. 프로그램에 참가하는 동안, 본격적으로 Frontend 면접 질문들을 준비했고, 구직 사이트에도 하나 둘씩 가입하며 이력서를 작성하기 시작했다. 컨트리뷰션 아카데미가 종료될 때 쯤, 래블업에 면접을 봤다. 개발자로서 첫 면접이었는데 망했다..ㅋㅋㅋㅋ 지금 돌이켜보면 정말 많이 부족했고, 내가 너무 오만했던거 같다. React를 사용하고 있지만 이 친구를 왜 사용하는지도 몰랐고, 이 친구의 장점에 대해서도 제대로 설명도 못했으니 결과는 너무 당연했다. 지금 생각해보면 너무 아쉽기도하다. 다른 곳에 면접을 보면서 조금씩 다듬었으면 다른 결과가 나왔을까? 하는 생각도 조금은 들었다.

 

컨트리뷰션 아카데미 종료, 그리고.. 사회의 쓴 맛

컨트리뷰션 아카데미도 종료를 하고, 래블업에 기여한 경험을 바탕으로 이력서를 다듬으면서 여러 기업에 제출했지만, 생각보다 더 많이 어려웠다. 인턴 경험 하나 없는 이력서는 그냥 종이 쪼가리에 불과했고, 구직 사이트에 내 구직 현황에 불합격이 10개, 15개, 20개 점점 쌓여갈 수록 점점 자신감은 떨어져나갔다. 면접 질문들도 면접을 보면서 다듬을 수 있을 텐데, 이력서에서 모두 다 떨어지니.. 인턴부터라도 경험을 하고자 했지만, 점점 어려워 지는 경제에서 인턴, 신입보다는 경력직을 뽑는 분위기가 되었다. 2~5년차 뽑는 공고는 많지만 인턴, 신입을 뽑는 공고를 찾기는 어려웠다. 이 시기에 자신감이 정말 많이 떨어졌으며, 앞날이 안보였다. 오죽했으면 그토록 싫어했던 군대 재임관도 생각을 했을까... 친구들은 이제 전역하고 4개월밖에 안되었으면서 뭘 그리 조급하냐고 했다. 뭐 틀린 말도 아니다. 1년~2년 준비하는 사람들도 있는데 고작 4개월 가지고 뭘 그리 급할까. 하지만 시간이 지난다고해서 내 이력서가 달라지는 것이 아니기에 나에 대해서 더욱 더 채찍질을 했던거 같다. 그렇게 좌절을 하고 있을 때, 또 다시 나를 도와준건 컨트리뷰션 아카데미와 래블업이었다. 컨트리뷰션 아카데미와 연계로 래블업에서 2개월 가을 인턴을 신청받는다는 소식을 받았다. 정직원 면접에서는 떨어졌었지만, 2개월만이라도 더 일을 하고 싶었고, 소식을 듣자마자 바로 신청했다. 결과는 합격. 이 합격이 얼마나 감격스러웠는지.. 너무 행복했던거 같다.

 

래블업 인턴

첫 출근 전날 밤에는 잠도 안왔다. 첫 인턴 출근이라니. 너무 떨렸고 기대가 되었다.

이 인턴 기간은 나에게 너무나 소중하고 고마운 기간이었다. 나에 대해서 어떤 부분이 부족하고 어떤 부분이 장점인지를 많이 느낄 수 있었던 기간이었다. 좋은 리더분들과 frontend 팀원들, 그리고 좋은 회사 사람들 덕분에 매일 웃으면서 즐겁게 출근할 수 있었다.

지금도 나는 래블업 인턴 기간이 없었으면 이 글을 적는 지금도 이력서를 작성하면서 사회의 쓴 맛을 보고 있지 않았을까 하는 생각을 한다.

원래는 가을 인턴만 진행하는 것이었지만 양해를 구해, 2달 더 연장을 해서 총 4개월을 인턴으로 진행했다.

래블업 인턴 기간에 진행했던 내용은 래블업 인턴 후기 글에서 확인하면 좋을거 같다.

 

인턴이 끝나고..

인턴이 끝날 때 쯤부터 다시 이력서를 수정하면서 다른 기업들에 제출을 했다. 인턴 경험이 추가되고, 조금만 자기소개서가 수정되었을 뿐인데, 이력서 합격 비율이 점점 높아졌다. 많으면 일주일에 4개의 기업에서 1차 합격 소식을 들었던거 같다. 그러면서 대면 면접, 온라인 면접, 다대다 면접, 코딩 테스트 등 다양한 면접을 경험하면서 면접 질문도 수정할 수 있었고, 여러 경험들을 할 수 있었다. 그러다가 이번에 합격한 기업에 면접을 볼 기회가 생겼고, 가장 내가 편하게 느끼고, 재미있게 일을 할 수 있을거 같아 해당 기업을 선택했다.

 

후기

가끔 친구들이랑 이야기하면서 '너는 OOO으로 돌아가면 돌아간다 vs 돌아가지 않는다' 질문을 받은 사람이 많을 것이다. 나는 보통 돌아간다고한다. 생각해보면 그 시기에 아쉬운 것도 많기 때문에. 만약 다시 돌아간다고해도 다르게 행동한다는 보장은 없지만..ㅋㅋㅋ 그래도 돌아가고 싶다고 말한다. 하지만 그래도 항상 돌아가기 싫다는 시기가 있는데, 바로 고3 수능이었다. 내가 정말 후회없을 만큼 공부했고(하지만 수능 성적은,,,ㅎㅎ 최저는 맞췄으니 한잔해🍷) 다시 돌아가도 그렇게 할 자신이 없기 때문에. 이번에 하나 더 추가되었다. 취준 기간은 돌아가고 싶지않다. ㅋㅋㅋㅋㅋㅋ 절대로.

취업 준비 기간이 9개월이면 뭐 적당하게 걸렸다고 많이들 이야기 하지만, 나는 잘 모르겠다.. ㅋㅋㅋㅋ 처음에 원래 3개월을 잡아서 그럴 수도..?
아직 대학교에 진학을 하고 있거나 졸업을 앞두고 취업을 준비하고 있다면 가장 먼저 하고싶은 이야기 아래와 같다.

  1. 어떻게든 경험을 쌓아라.
    고3때 수시 원서를 작성할 때도 다들 느꼈겠지만 생각보다 자기소개서에 작성할 것이 없다. 이는 이력서도 마찬가지이다. 이름, 연락처, 학교를 작성하고 나면 대외활동, 자격증, 회사 경험 밖에 작성할 것이 없다. 최대한 인턴 경험을하고, 컨트리뷰션 아카데미와 같은 대외활동을 많이 참가하라고 말하고 싶다.
  2. GitHub 관리, 포트폴리오 관리는 필수다.
    생각보다 GitHub과 포트폴리오를 많이 본다. 많은 공고에서 포트폴리오(선택) 이런 식으로 작성해두지만 있고 없고의 차이는 심하다. 또한 개발자라면 GitHub은 또다른 이력서이다. google을 잘 검색해보면 GitHub overview를 꾸미는 여러 방법들이 있으니 깔끔하고 본인을 설명하기 쉽게 꾸며놓는 것도 서류 통과에서 긍정적으로 보는 것 같았다. 또한 잔디 관리도 중요하니 작은 사이드 프로젝트라도 꾸준하게 올려보자.
  3. 면접에서 기본으로 물어보는 질문들은 무조건 술술 나올 때까지 연습하고, 면접을 보고나서 바로 준비했던 질문 리스트를 업데이트하자.
    면접을 시작하면 보통 기술 질문 전에 자기소개, 지원동기, OOO직무를 선택한 이유, 프로젝트 등등 기본적인 질문으로 시작한다. 솔직히 자기소개에서 버벅거리고 자신없게 이야기한다면 좋은 인상을 받기 힘들 것이다. 첫인상이 중요한 만큼 자기소개를 가장 중요하게 생각했고 이때까지 가장 많이 수정했다. 지원동기는 면접 2일전에 회사에 대해서 검색을 해보면 여러가지 정보를 얻을 수 있을 것이다. 그런 정보들을 바탕으로 나의 장점을 이끌어 낼 수 있는 내용을 섞으면 좋은 글이 완성이 된다. 그리고 마지막으로 면접 하나하나가 중요한 경험이다. 만약 준비했던 질문 리스트에 없던 질문을 받게된다면 잘 기록해두었다가 바로 업데이트를 해두자. 면접이 끝나고 나면 생각보다 긴장이 풀려서 기억이 잘 안나는 경우가 많다.
  4. 항상 지원한 기업에 궁금한 점 질문을 5가지 이상은 준비하자
    보통 면접이 끝나고나면 이제 역질문을 할 기회를 준다. '우리 회사에 궁금한 점이 있으면 편하게 물어보아라'
    이건 어떻게보면 이 사람이 우리 회사에 얼마나 관심이 있는지를 확인하는 평가라고 생각한다.
    나는 보통 '이력서에서 어떤 부분을 좋게 보셔서 이렇게 면접 기회를 주셨는지 또 어떤 부분이 아쉬웠는지 알고싶다.', '팀원은 어떻게 되는가' 등등 질문을 했다. 물론 공고에 있는 내용인지 확인은 하고 질문해야한다. 공고에 있음에도 질문을 하면 공고를 제대로 확인을 안하는 사람으로 느껴질 수도 있다.
  5. 추천 구직 사이트
    나는 보통 원티드, 사람인, 커리어리를 주로 사용했다. 사람인은 매일 수십개씩 추천 기업 알림이 와서 꽤 많이 도움이되었던거 같다. 원티드는 뭔가 다른 구직 사이트에 비해서 깔끔하다는 느낌을 받았던거 같다. 커리어리는 처음에는 개발자 커뮤니티로 사용하려고 했으나, 프로젝트 쪽에 가끔 스타트업이나, 좋은 주제를 가지고 팀원을 구하는 글을 많이 보았다.

이제부터 신입 개발자 인생 시작이다. 아직 취업 준비중인 분들도 화이팅이고, 나처럼 이제 새롭게 시작하는 사람들도 모두 화이팅💪

 

개요

OpenUp에서 주최한 오픈소스 컨트리뷰션 아카데미(이하 컨트리뷰션 아카데미)에 지원하여 래블업 주식회사(이하 래블업)에서 11월부터 12월까지 8주간 가을 인턴을 진행했으며, 이후 1월부터 2월까지 8주를 추가 연장하여 총 16주간 근무했다.

군대를 전역하고, 개발자로서 회사인 래블업을 다니면서 경험했던 과정들을 작성했다.

 

지원동기

컨트리뷰션 아카데미 전에도 래블업에 대해서 관심을 가지고 있었는데, 마침 컨트리뷰션 아카데미를 통해서 기여할 수 있는 기회가 생겼다.

컨트리뷰션 아카데미 기간 동안에 Backend.AI의 webui 이슈를 해결하고 리팩토링을 진행했었다.

컨트리뷰션 아카데미를 참여하는 동안 Backend.AI에 대한 애정과 관심, 그리고 재미를 많이 느꼈고, 프로그램이 끝나고 계속해서 기여 하고싶다는 생각을 하게되었다.

마침 컨트리뷰션 아카데미와 연계로 래블업에서 근무할 있는 기회가 생겼고, 망설임 없이 지원하게 되었다.

 

온보딩

인턴이 시작되고 첫 3주동안은 온보딩 과정을 진행했다.

RealTime Chat 구현, Backend.AI 환경 구성, Pebble Seminar 순서로 진행했다.

 

RealTime Chat

Backend.AI의 Core쪽 코드에 친숙해기지 위한 첫 과제였다. 실시간 채팅 앱을 Python을 이용하여 구현하였으며 aiohttp, aioredis, aysncio 라이브러리를 사용하였다.

채팅의 내용을 저장해야한다는 조건이 없어 InMemoryDB인 redis를 사용했다.

채팅방에 입장하면 사용자는 채팅방에 subscribe 되도록 했으며, 사용자가 메세지를 입력하면 subscribe 유저 같은 채팅방에 있는 다른 유저들에게 입력한 메세지를 publish하도록 구현했다.

 

RealTime Chat 동작 사진

코딩테스트를 준비하면서 Python을 기본적으로 다룰 수는 있었지만, aiohttp, asyncio, aioredis 등 과 같은 라이브러리를 사용해본 경험이 없어서 개념을 익히고 이해하는데 시간이 걸렸다.

하지만 해당 과제를 통해서 Backend.AI Core 코드들을 이해하는데 많은 도움이 되었으며, 새로운 라이브러리들을 공부할 있어서 좋았다.

 

Backend.AI 환경 구성

컨트리뷰션 아카데미에서 이미  Backend.AI를 설치 해본 경험이 있기 때문에, 인턴 기간에 다시 환경 구성하는 과정이 어렵지는 않았다.

하지만 컨트리뷰션 아카데미에서 설치를 시도하면서 나 또한 많은 에러와 실패를 겪으면서 Backend.AI 설치가 쉽지않다는 것을 알고있었고, 같이 인턴십을 진행하시는 다른 분도 설치 과정에서 어려움을 많이 겪으셨다.

이미 한번 그 실패들을 경험하고, 해결법을 알고있는지라, 도움을 드릴 수 있었고, 빨리 설치하고 다른 업무를 진행할 수 있었다.

환경을 구성하면서 가상 머신과 VPN 설정했고, 로컬에서 문제가 생겨도 업무를 있도록 가상 머신에도 환경을 구성했다. 이렇게 가상 머신에 구성을 하고나서 이후 업무를 하는 동안 Local 개발용으로 많이 사용했고, 가상 머신은 테스트 서버를 구성하여 사용했다. 회사에 가상 머신을 쉽게 관리하고 구성할 있는 VM Farm 있어, 개발과 테스트 환경을 구성하기 너무 좋았다.

 

Pebble Seminar

RealTime Chat과 Backend.AI 환경 구성을 마친 후, Backend.AI의 구조와 코드를 이해하고, 그 내용을 바탕으로 짧은 세미나를 준비했다. 나는 Backend.AI WebUI에서 사용돠는 GraphQL과 Relay에 대해서 발표를 하게 되었다.

GraphQL 사용해본 경험이 있으나 다른 사람들 앞에서 발표하기에는 가지고 있는 지식이 부족했고 Relay 처음들어본 라이브러리였기 때문에, Pebble Seminar 준비하는데 있어 많이 걱정되고, 많은 문서들을 읽으면서 준비했다. 우선 GraphQL Relay 공식 문서들을 읽으면서 개념을 익혔고, Backend.AI 코드들을 하나씩 분석하면서 Backend.AI에서는 어떻게 적용이되었고, 어떻게 동작하는지에 대해서 파악했다.

Pebble Seminar 준비 자료

Pebble Seminar 준비하면서 코드륵 분석하다보니, WebUI에서 동작하고 있는 코드들을 자연스럽게 이해하게되었고, 이후 이슈들을 해결하는 과정에서 조금 쉽게 문제가 발생하는 코드를 찾고, 해결하는데 도움이 되었다.

 

Backend.AI 이슈 해결 기능 구현

온보딩을 마치고, 드디어 프론트엔드 팀에 합류하여 Backend.AI 이슈를 해결하고 기능 구현을 시작했다. 나는 프론트엔드 리더분과 커피챗을 가지며 이번 인턴십 기간 업무 카테고리를 정했다.

  1. Table Column Setting 컴포넌트 제작
  2. E2E Test 관련 조사
  3. 데일리 업무

11월부터 12월까지 8주간 진행된 인턴십 기간에서 총 19개의 Pull Request를 작성했고, 그 중 18개가 Merge되고 1개는 리뷰가 진행중인 상태이다. 컨트리뷰션 아카데이를 활동하면서 이슈를 찾고, 할당하는데 있어서 어려움이 적었고, 이슈를 해결하는데 재미를 느껴서 남들보다 많은 이슈들을 해결할 있었다.

 

기능 추가 PR

1. Table Columns Setting 구현

https://github.com/lablup/backend.ai-webui/pull/2071
인턴십 기간에서 목표로 했던 이슈 하나였다. 가을 인턴 기간에서 유일하게 기존에 있던 컴포넌트를 리팩토링이 아닌, 처음부터 구상하고 구현했다. 이 기능을 구현하기 전에는 간단한 기능이고 금방 끝낼 수 있을거라고 생각했지만 생각과 다르게 흘러갔다.
우선 이전까지는 컴포넌트를 새롭게 만드는 것을 너무 쉽게 생각했구나를 많이 느꼈다. 이전에도 컴포넌트를 만들기 전에 디자인하고, 전달받을 props들을 생각하긴 했지만, 해당 이슈를 통해서 컴포넌트를 새롭게 만들 때, 확장성을 생각해서 조금 더 시간과 노력을 투자해야한다고 느꼈었다. 또한 다른 사이트들은 어떤 식으로 디자인되어 있는지, 적용된 기능들이 무엇이 있는지 좀 더 관심있게 봐야겠다를 느낄 수있었다.

Table Columns Setting

 

2. 모델 서빙 페이지 Table에 서비스 엔드포인트와 소유자 Column 추가

https://github.com/lablup/backend.ai-webui/pull/2047

기존에는 모델 서비스를 만들고 나면 endpoint를 상세 페이지에 들어가서 확인해야하는데, 자주 사용하는 기능이다보니 Table Column에 추가되었으면 하는 요청이 있었다. 또한 admin 계정에서는 같은 그룹에 속한 유저의 서비스도 다 보여지기 때문에, 소유자가 누구인지도 나타 낼 수 있는 Column이 보여지면 좋겠다는 의견이 있었다. 해당 기능을 구현하기 위한 GraphQL field는 이미 구현되어있었기 때문에 데이터를 받아오는 query의 field를 추가하여 엔드포인트와 서비스 소유자의 데이터를 받아왔고, Table의 Column을 추가하여 데이터를 나타냈다. 소유자 Column은 Admin 권한을 가진 계정에만 나타난다.

구현 모습. Admin 계정에서 나오는 화면(왼쪽) 과 User계정에서 나오는 화면(오른쪽)

 

3. CANCELLED 상태인 세션의 로그 버튼 비활성화

https://github.com/lablup/backend.ai-webui/pull/2045

CANCELLED 상태는 컨테이너가 생성된 적이 없거나 생성에 실패한 상태이다. 기존에는 CANCELLED 상태인 세션에도 로그 버튼이 활성화 되어있어, 사용자가 로그 버튼을 누르게된다면 에이전트가 컨테이너 정보를 찾을 수 없어 500에러가 나타났다. 그래서 해당 PR에서 CANCELLED 상태인 세션은 사용자들이 로그 버튼을 누를 수 없게 비활성화 하는 작업을 진행했다.

TERMINATED 상태의 세션(1번 세션)과 CANCELLED 상태의 세션(2번 세션)

 

4. Dark mode를 위한 테스트 및 custom hook 제작

https://github.com/lablup/backend.ai-webui/pull/2120

Dark mode를 적용하기 전 색깔을 하드코딩한 컴포넌트를 찾고, Dark mode 적용하기 위한 useThemeMode라는 이름의 custom hook을 구현했다. Custom hook을 만들 때 ahooks의 useLocalStorageState hook을 사용해서 구현하려고 했으나, 같은 Key값을 사용하는 state에 대해서 자동으로 state 관리가 되는 줄 알았으나 예상과 다르게 독립적으로 동작하는 것을 확인했다. 그래서 같은 Key값을 사용하는 state에 대해서 값이 바뀌면 자동으로 바뀌도록 구현하기 위해 useLocalStorageGlobalState 라는 이름의 custom hook을 추가했고, 해당 hook을 사용해서 Dark mode를 설정할 수 있는 useThemeMode라는 custom hook을 만들 수 있었다.

Bug fix PR

1. 초대 토큰 값 없이 회원가입 가능

https://github.com/lablup/backend.ai-webui/pull/2046

config.toml에서 allowSignupWithoutConfirmation이라는 옵션을 true로 변경하게되면, 초대 토큰없이 회원가입이 가능한데, 사용자가 회원가입 버튼을 누르게되면, 토큰 값이 undefined되어 있다고 에러를 발생했었다. 따라서 해당 PR에서는 allowSignupWithoutConfrimation의 옵션이 true면 token 변수를 사용하지 않도록 수정했다. 또한 이전에는 회원가입 버튼을 누르고 나서 core쪽에서 데이터를 처리하는 동안 다른 입력 값들을 수정할 수 있었으며, dialog가 닫힌 뒤, 다시 열면 이전 데이터가 남아있는 이슈가 있었는데, 해당 PR에서 데이터를 처리하는 동안 다른 입력 값들을 입력할 수 없게 설정했으며, dialog가 닫히면 이전에 입력한 값들이 clear되도록 설정했다.

 

2. 사용자 관리 페이지에서 서브 탭에 맞는 화면 표시

https://github.com/lablup/backend.ai-webui/pull/2055

사용자 관리 페이지에는 활성화 상태인 사용자와, 비활성화 상태인 사용자들을 보여줄 수 있는 서브 탭이 존재한다. 하지만 해당 페이지에서 작업을 하다가 다른 페이지로 이동한 뒤 다시 사용자 관리 페이지로 돌아오면 서브 탭은 비활성으로 되어있지만, 실제 화면에는 활성화 상태인 사용자 리스트들이 나오는 문제가 있었다. 해당 문제는 사용자들에게 혼란을 줄 수 있는 부분이라 생각했고, 해당 PR에서 수정하게 되었다. 다른 페이지로 이동할 때, 현재 작업중인 서브 탭이 무엇인지 기억하여, 다시 해당 페이지로 돌아왔을 때 이전에 작업했던 서브 탭과 관련된 화면을 나타낼 수 있도록 수정했다.

수정 전 사진(왼쪽)과 수정 후 사진(오른쪽)

인턴 기간 연장

이슈를 해결하다보니 8주라는 시간은 금방 지나갔고, 가을 인턴을 마무리해야하는 시간이 찾아왔다.

군대를 전역하고 개발자로서 첫 사회생활이라 중요한 시기였는데 래블업에서 인턴을 하면서 나의 부족한 점이 무엇인지, 어떤 부분을 더 준비해야하는지, 다른 분들은 어떻게 개발을 하는지 등등 을 많이 느낄 수 있는 기간이었다. 2달이라는 시간이 매우 짧게 느껴졌고, 2달동안 매우 즐겁게 일을 했기 때문에, 좀 더 일해보고 싶다라는 생각이 들었다. 그래서 리더분께 인턴십 기간을 연장하고 싶다는 의견을 말씀드렸고, 8주를 더 연장하여 2월까지 인턴십을 진행하기로 했다. 그리고 가을 인턴에서는 나의 부족한 부분에 대해서는 많이 생각이 났지만, 나의 장점을 찾지 못했다. 그래서 아래 3가지 개인적인 목표를 세우며 시작하기로 다짐했다.

  1. 이번 기간에는 장점을 찾자
  2. 시간이 될 때마다 document를 읽자
  3. 아쉬움이 없을만큼 더 열심히 일해보자

연장된 기간 이슈 해결 및 기능 구현

연장된 기간에 하는 일이 이전과 크게 다르지 않았다. 온보딩 기간과 설치과정이 없어 이슈 해결에 좀 더 집중할 수 있는 기간이었다.

기능 추가 PR

1. ErrorLogList 리팩토링

https://github.com/lablup/backend.ai-webui/pull/2131

기존 Lit element로 구현되어 있던 ErrorLog List를 React로 리팩토링을 진행했다. 해당 기능들은 리팩토링을 하고나서 개인적으로도 잘 사용하고 있어 가장 만족스러운 이슈였다.

리팩토링 전(왼쪽)과 리팩토링 후(오른쪽) 사진

 

리팩토링을 진행하면서 기존에는 없었던 Search 기능과 Error filter 기능이 추가되었다.

추가된 Search 기능(왼쪽)과 Filter 기능(오른쪽)

Search로 원하는 Errorlog 찾을 수 있으며 error filter 체크하면 에러에 해당하는 로그만 볼 수 있다.

 

2. Modal 드래그 기능

https://github.com/lablup/backend.ai-webui/pull/2179

React-draggable 라이브러리를 사용하여 Modaldrag될 수 있도록 기능을 추가했다. ModalDraggable props 추가하여 drag가 필요한 modal에서 적용할 수 있다.

드래그 가능한 Modal

 

Modal 제목 왼쪽에 있는 아이콘을 클릭하면서 마우스를 움직이면 Modal을 화면에 원하는 위치로 이동시킬 수 있다.

현재는 사용자 관리페이지의 사용자 정보를 볼 수 있는 Modal과 사용자 설정을 변경할 수 있는 Modal에 적용되어 있어 확인할 수 있다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

아직은 사용되는 곳이 많지는 않지만, 점점 컴포넌트들이 늘어나고, 기능들이 추가되면서 유용하게 사용될 수 있다고 생각한 PR이었다.

Bug fix PR

1. Vfolder 초대 권한 수정

https://github.com/lablup/backend.ai-webui/pull/2143

Group vfolder 사용자 권한이 수정되지 않는 문제가 있었다. 권한을 수정하려고 하면 select에서 item들이 제대로 표시 및 선택이 되지 않는 문제가 있었다. 기존에는 option 태그를 사용해서 item들을 표시해주고 있었는데, mwc-list-item으로 변경하여 item들을 표시해주었고, overflow 옵션을 수정하여 해당 이슈를 해결했다.

PR 전 사진(왼쪽)과 PR 후 사진(오른쪽)

 

2. ResourceGroupSelect이 Card밖으로 나가는 문제

https://github.com/lablup/backend.ai-webui/pull/2166

ResourceGroupSelect의 값이 너무 크면 Card밖으로 표시가 되는 문제가 있었다.

문제가 되었던 증상들

해당 문제를 해결하기 위해서 Select에 max-width css를 설정하여 Card의 width를 넘지 못하도록 하였다.

또한 해당 PR에서 Select에서 Search기능을 추가했는데, 해당 기능을 추가하면서 ahooks의 useControllableValue라는 hook을 사용했다. useControllableValue는 부모나 자신이 props를 관리할 수 있게 도와주는 hook이다. 간단한 PR이었지만 useControllableValue를 처음 사용하다보니 생각보다 시간이 오래 걸린 PR이었다. 해당 이슈를 해결하면서 리더분과 다른 인턴분의 도움을 받아 해결할 수 있었다.

 

3. 요약 페이지에서 키페어 생성&관리 버튼 눌렀을 때 키페어 리스트가 보여지지 않는 문제

https://github.com/lablup/backend.ai-webui/pull/2194

요약 페이지에는 새 키페어 생성, 키페어 관리 라는 버튼이 있는데, 해당 버튼을 누르면 단순히 사용자 관리 페이지로 이동하여 키페어 리스트가 아닌 유저 리스트가 보여지는 이슈가 있었다.

요약 페이지에서 새 키페어 생성 버튼과 키페어 관리 버튼
새 키페어 생성 버튼을 눌렀을 때(왼쪽) 과 키페어 관리를 눌렀을 때(오른쪽)

해당 이슈는 크리티컬한 이슈는 아니었지만, 내가 처음으로 Backend.AI를 사용해보면서 키페어라는 기능을 잘 이해하지 못했을 때, 많이 혼동이 있었던 경험때문에 해결했었다.

해당 이슈를 해결하고 나서는 의도한 대로 키페어 리스트들이 화면에 나타나는 것을 확인할 수 있다.

이슈를 해결 한 뒤 새 키페어 생성 버튼을 눌렀을 때(왼쪽) 과 키페어 관리를 눌렀을 때(오른쪽)

인턴십을 마치며

전역을하고 친구의 추천을 시작하게된 컨트리뷰션 아카데미를 인연으로 래블업에서 긴 시간동안 기여를 할 수 있었다. 이전에 다른 회사의 인턴 경험, 프로젝트 경험이 없었기 때문에, 전역을 한 뒤 새롭게 시작하는 나한텐 있어서 매우 중요한 시기였는데, 래블업에서 활동할 수 있어서 나의 장단점, 부족한 기술, 오픈소스 회사의 문화 등을 경험할 수 있어서 너무 좋았다. 수평적인 구조, 자유로운 분위기, 쾌적한 근무 환경과 좋은 장비들 까지 매일 출근하고 싶게 만드는 회사가 몇이나 있을까? 4개월을 래블업에서 근무했지만, 매일 출근하고 싶고, 래블업이라면 내가 오랫동안 재미있고 원하는 일을 하면서 회사를 다닐 수 있겠다 라고 생각이 들었다. 4개월이라는 시간동안 래블업에서 서비스하고 있는 Backend.AI에도 정이 들어서, 매년 래블업에서 주최하는 컨퍼런스도 시간이 될 때마다 참가하여 발전된 모습과, 기술들을 보러 갈 예정이다.

래블업 사무실

'일상 일기' 카테고리의 다른 글

새로운 시작(with. 미리디)  (1) 2026.08.08
드디어 취준 끝.  (2) 2024.03.28
오랜만에 들립니다.  (0) 2021.02.09
대학교 과 선택, 컴퓨터 공학(소프트웨어학부) 준비?  (0) 2020.12.08
마지막 학기 종강  (0) 2020.12.08

React란?

React는 JavaScript 라이브러리 중 하나로 UI를 만들기 위해서 사용한다.

React를 검색하면 SPA, Virtual DOM, Hook ... 등등 단어들이 따라오는데 이번 글에서 이것들을 한번에 정리하고자한다.

 

SPA

Single Page Aplication의 약자로 서버로 부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 어플리케이션이나 웹 사이트를 말한다.

 

기존 전통적인 웹방식은 새로운 페이지를 요청할 때 마다 정적 리소스(CSS, 이미지, 영상...)가 다운로드 되고 전체 페이지를 다시 렌더링하는 방식이었다. 하지만 이런 방식은 규모가 커지면서 불필요한 트래픽이 증가하고 속도가 많이 느렸다.

위에서 React는 UI를 만들기 위해서 사용한다고 했는데 정확히는 SPA UI를 만들기 위해서 사용하는 것이다.

 

React는 경로에 따라서 다른 뷰를 보여줄 수 있다. 하지만 여기서 Header, Footer, Navbar 과 같이 공통적으로 보여지는 부분이 있을 것이다. 경로가 바뀌어도 공통적으로 가지고 있는 컴포넌트들은 다시 요청하기 보다는 그대로 유지하고 변경되는 부분만 요청해서 불러오는 것이 좋다.

 

Virtual DOM

Virtual DOM은 DOM과 유사한 객체를 메모리에 올려 변경사항이 있으면 현재 DOM과 비교하여 변경된 부분만 실제 DOM에 적용시킬 수 있게 해주는 추상화 된 DOM이다.

실제 DOM을 조작하게 되면 레이아웃을 다시 계산하고 그려야하기 때문에 비용이 높은 작업이다. 하지만 Virtual DOM은 메모리 상에서만 동작하며 실제 DOM을 조작을 최소화한다. React는 Virtual DOM을 사용하여 렌더링이 조금 더 빠르게 일어날 수 있도록 해준다.

하지만 Virual DOM에도 단점이 있다. DOM과 동일한 구조가 메모리에 위치하기 때문에 추가적인 메모리를 사용한다. 이는 간단한 UI나 프로젝트에서는 불필요한 오버헤드일 수도 있다. 

 

Hook

Hook은 기존 클래스 컴포넌트에서 사용가능했던 Lifecycle API, state 관리 기능을 함수형 컴포넌트에서도 사용할 수 있도록 하는 기능이다. 흔히 보면 useEffect, useState, useContext와 같은 것들이 모두 Hook이다.

 

React 장점

React의 장점은 아래와 같다.

1. Virtual DOM을 사용해서 빠른 렌더링이 가능하다

2. UI의 재사용성이 높으며 유지보수에 좋다

3. 커뮤니티가 잘 활성화 되어있다

4. 다른 자바스크립트 라이브러리나 패키지를 사용하기 좋다

 

React 단점

React 단점은 아래와 같다

1. IE8 이하는 지원하지 않는다

  - 이제 Internet Explorer를 사용하지 않아서 큰 단점은 아닌거 같다..

2. 진입 장벽이 쉽지 않다...

3. View 기능만 지원하기에 routing, 상태 관리는 직접 구현해야한다.

 

'언어 > React' 카테고리의 다른 글

JSX란?  (0) 2023.06.15
React 시작하기  (0) 2023.03.19

기술면접을 준비하면서 공부했던 내용들을 정리하고자 오랜만에 블로그에 들어왔습니다.

이번 글에서는 자바스크립트 동작에 대해서 글을 적어보려고 합니다.

 

1.  JavaScript

이전에 자바스크립트에서 작성한 글이 있지만 해당 글을 이해하기 위해서 간단하게 알고 넘어가야하는 개념이 있습니다.

자바스크립트는 싱글 스레드 언어입니다. 따라서 명령어 여러개를 동시에 처리하는 것이 아니라 한줄씩 처리할 수 있습니다.

 

2. JavaScript 구성

JavaScript 동작 출처: google Javascript엔진 검색

자바스크립트 동작을 이해하려면 자바스크립트 엔진, Web API, queue, Event Loop으로 구성되어 있습니다.

 

2-1. 자바스크립트 엔진

자바스크립트 엔진에는 heap과 stack이 있습니다. heap에는 원시타입, 객체타입이 선언이 되면 메모리 힙에 할당이 되고, 사용이 끝나면 자동으로 힙에서 해제됩니다. stack은 실행해야하는 코드인 실행 컨텍스트가 쌓입니다. 코드 실행시 push, 실행이 끝나면 pop이 됩니다.

여기에서 실행 컨텍스트란 실행가능한 코드가 실행되기 위해서 필요한 환경을 모아놓은 객체입니다. 기본적으로는 글로벌 컨텍스트가 스택 가장 아래 쌓이고 그 다음으로 함수 컨텍스트 들이 위로 차례로 쌓입니다.

 

2-2. Web API

Web API에는 Ajax 요청, SetTimeout, setInterval, 이벤트 핸들러의 등록과 같은 웹 브라우저에서 제공하는 기능들입니다. 해당 기능들은 그립과 같이 자바스크립트 엔진과는 떨어져 있는 것을 확인할 수 있습니다.

 

2-3. Queue

다음으로는 Queue 입니다. Queue라고 하면 선입선출, 먼저 들어온 객체가 먼저 나가는 자료구조입니다. 그림에는 Callback queue만 있는데 사실은 Callback queue를 포함해서 MicroTask queue, Animation Frame이 추가로 해서 3개의 queue가 있습니다.

 

우선 Callback queue는 MacroTask queue 또는 Task queue라고도 불립니다. 해당 queue는 Ajax, setTimeOut, setInterval, setImmediate와 같은 task의 결과를 넘겨 받습니다. 우선순위는 3개의 queue중에서 가장 낮습니다.

 

다음으로는 MicroTask queue입니다. 해당 queue는 promise, async/await, process.nextTick 과 같은 비동기 호출을 넘겨 받습니다. 3개의 queue중에서 우선순위가 가장 높습니다.

 

다음으로는 AnimationFrame입니다. requestAnimationFrame과 같은 브라우저 렌더링과 관련된 task를 넘겨받습니다. 3개의 queue중에서 우선순위가 2번째로 높습니다.

 

정리해보면 queue는 총 3개가 있으며 우선순위는 MicroTask queue > AnimationFrame > MacroTask queue 입니다.

 

이해가 잘 안되신다면 아래 블로그 글을 참고하시면 좋을거 같습니다!

https://velog.io/@titu/JavaScript-Task-Queue%EB%A7%90%EA%B3%A0-%EB%8B%A4%EB%A5%B8-%ED%81%90%EA%B0%80-%EB%8D%94-%EC%9E%88%EB%8B%A4%EA%B3%A0-MicroTask-Queue-Animation-Frames-Render-Queue

 

[JavaScript] Task Queue말고 다른 큐가 더 있다고? (MicroTask Queue, Animation Frames)

자바스크립트에서 비동기 함수가 동작하는 원리에 대해서 공부했다면, Task Queue에 대해 들어보았을 것이다. Task Queue는 Web API가 수행한 비동기 함수를 넘겨받아 Event Loop가 해당 함수를 Call Stack에

velog.io

2-4. Event Loop

Event Loop은 Stack이 비어져 있으면 Queue에서 대기중인 작업을 Stack으로 올려줍니다.

 

3. 동작

간단한 개념들을 익혔으니 이제는 동작을 알아보겠습니다.

console.log("start")

setTimeout(function() {
  console.log("setTimeout")
}, 0)

promise.resolve()
.then(functuon() {
  console.log("promise")
})

console.log("end")

여러분들은 이 코드의 결과가 어떻게 나올거 같으신가요? 정답은 아래와 같이 나옵니다.

start
end
promise
setTimeout

1. 우선 Stack 가장 아래에는 글로벌 컨텍스트가 쌓입니다.

2. console.log("start")가 Stack에 push되고 실행이 될 것입니다. 실행이 되면 Stack에서 pop됩니다.

3. 그 다음 실행인 setTimeOut()이 Stack에 쌓입니다. 이제 setTimeOut이 실행이되야하는데 위에서 setTimeout은 Web API 중 하나입니다. 따라서 순서가 이전 console.log()랑 다릅니다. 우선 Stack에서 pop이 되고난 다음 Web API setTimeout에게 실행하라고 신호를 보냅니다. 그러면 Web API에서 setTimeout을 실행시킵니다. setTimeout이 자바스크립트 엔진이 아닌 Web API에서 실행이 되면서 Stack에는 promise.resolve()가 스택에 push되는 것입니다. 이렇게 비동기 처리가 싱글스레드에서 일어나는 것입니다.

setTimeout의 실행이 끝나면 결과인 console.log("setTimeout")은 MacroTask queue에 들어가게 됩니다.

4. 이 과정이 일어나면서 Stack에서는 promise.resolve()를 실행 시킵니다. Stack에서 pop이되고 결과인 then()이 MicroTask queue에 들어가게 됩니다.

5. 마지막으로 console.log("end")가 Stack에 push되고 실행이 된 다음 Stack에서 pop됩니다.

6. 이제 더이상 실행할 코드가 없기 때문에 글로벌 컨텍스트가 pop되고 Stack은 비워집니다.

 

여기까지보면 console 창에는 start, end 만 적혀 있습니다

7. 이제 Event Loop가 Stack이 비워져 있는 것을 확인하고 Queue를 확인합니다. 우선 MicroTask queue에 있는 promise.resolve() 결과인 then()을 Stack에 Push시킨 뒤 코드를 실행하여 console에 promise가 추가됩니다. 그 다음 Stack에서는 pop됩니다.

8. AnimationFrame에는 아무 것도 없고 마지막으로 MacroTask queue에 있는 setTimeout() 결과를 Stack에 Push하고 실행시킨 뒤 pop합니다. 

 

이렇게 모든 코드가 동작했습니다.

뭔가 말로 적어서 조금 난잡하긴 한데, Queue에서 링크 걸어드린 블로그를 참고하시면 많은 도움이 되실거 같습니다.

'언어 > JavaScript' 카테고리의 다른 글

JavaScript와 Node.js  (1) 2020.11.21

JSX란 무엇일까?

JSX는 JavaScript XML의 약자로 말그대로 JavaScript에 XML을 확장한 문법이다.

JSX는 React에 사용되는 문법이며 JavaScript의 공식적인 문접은 아니다.

JSX의 한 예인 React를 처음 구성했을 때 App.js코드를 보면 아래와 같다.

React App.js 기본 코드

이 친구.. 뭔가 익숙하다.

뭔가 JavaScript같아보이면서도 HTML 태그들이 들어있다.

JavaScript에서 HTML을 작성하듯이 비슷하게 작성할 수 있으며 가독성이 높다는 것이 JSX의 장점이라고 할 수 있다.

하지만 자세하게 보면 JSX 문법들에 대한 규칙이 있는데, 처음 접근할 때는 조금씩 달라서 까다롭기도하다.


JSX 문법

위에서 단점으로 설명 했듯이 JSX 문법 JavaScript와 HTML과 다른 규칙들이 몇가지 있다.

아래에 순서대로 살펴보자

1. 컴포넌트에 여러 요소가 있으면 반드시 부모 요소 하나가 감싸는 형태여야 한다.

오류 케이스

function App() {
    return(
    	<div>test1</div>
        <div>test2</div>
    );
}

올바른 케이스

function App() {
    return (
    	<div>
            <div>test1</div>
            <div>test2</div>
        </div>
    );
}
2. JSX 안에서 {}를 사용하여 JavaScript의 표현식을 넣을 수 있다
function App() {
    const value = "Hello";
    return (
        <div>
            <div>test1</div>
            <div>{value}</div>
        </div>
    );
}
3. 카멜표기법(CamelCase)을 사용한다.
function App() {
    const style = {
        backgroundColor : 'black',
        fontSize : '12px'
    }
    return (
        <div style={style}>test</div>
    );
}
4. class명을 className이라고 표기해야한다.
function App() {
    return (
        <div className="testClassName">test</div>
    );
}​
5. /* */ 을 이용하여 주석처리를 한다.
function App() {
    return (
        /*주석 테스트*/
        <div>test</div>
    );
}

'언어 > React' 카테고리의 다른 글

React를 왜 사용할까??  (0) 2023.09.15
React 시작하기  (0) 2023.03.19

+ Recent posts