개요

드디어 길고 길었던 취업 준비가 끝났다. 초기 스타트업에 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에도 정이 들어서, 매년 래블업에서 주최하는 컨퍼런스도 시간이 될 때마다 참가하여 발전된 모습과, 기술들을 보러 갈 예정이다.

래블업 사무실

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

이 글은 DOM을 간단하게 이해하는 정도로만 작성한 글이며 자세한 내용은 구글링을 통해서 개념을 가지는 것이 좋습니다.

DOM이란?

DOM은 Document Object Model 의 줄인말로 HTML 문서를 구조화 한 것으로 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경 할 수 있도록 도와주는 인터페이스 역할을 한다.

DOM은 HTML, XML 문서를 Tree형식으로 구조되며, Javascript와 같은 스크립트 언어를 사용하여 수정할 수 있다.

DOM의 Tree 구조 예시는 아래 사진과 같다.

DOM Tree 구조 예시. 출처 : 위키트리

DOM은 언제 사용할까?

그러면 DOM이라는 것을 언제 사용할까?

HTML로 웹페이지를 사용해보고 만들어본 경험자라면 알겠지만, 우리가 흔히 아는 웹페이지는 가만히 보여지는 이미지가 아니다.

버튼을 눌러서 어떠한 동작을 하고, 다른 페이지로 이동, 다운로드, 데이터 변경 등 상호작용을 한다.

이 모든 것을 HTML 태그들을 이용해서 웹페이지를 만들 수 없다. 동적인 기능을 이용하기 위해서 우리는 JavaScript와 같은 스크립트 언어들을 사용하고 DOM 구조를 변경한다.

 

요약

DOM은 HTML을 위한 API이며 HTML을 탐색을 하거나 구조를 바꿀 수 있다.

 

'CS > 개념, 용어' 카테고리의 다른 글

CPU와 GPU, TPU 차이  (0) 2023.03.18

프로젝트를 하다보면 프로젝트 폴더에 여러 파일을 다운받거나 수정하게된다.

react 같은 경우 module 들을 하나 둘 씩 다운받다보면 새로운 파일들이 많이 생기고 "git status"에 항상 검색이 되서

필요한 파일만 github repo에 push하고 싶을 때 불편함이 있다.

이런 경우처럼 git repo에 업로드 하지 않을 파일들을 기록하는게 .gitignore이다.

 

파일 이름 앞에 .이 붙어있는 것으로 보아 이 파일은 숨김 파일로 되어 있다.

작성방법은 어렵지 않다. 보통 아래 상화에서 많이 사용한다.

 

1. 하나의 파일을 제외하고 싶을 때

[파일 이름].[파일 확장자]

2. 특정 폴더내의 파일 모두를 제외하고 싶을 때

[폴더 이름]/

3. 특정 확장자 파일 모두를 제외하고 싶을 때

*.[확장자]

4. 제외하고 싶은 폴더가 어디에 있던지 간에 제외하고 싶을 때

**/[폴더 이름]/

이제 작성을 했으면 적용을 시켜야한다.

새로 작성한 .gitignore를 git repo에 push한다

git add .gitignore
git commit -m "add .gitignore"
git push [remote 이름] [branch 이름]

이렇게 하면 끝!! 이면 좋겠으나 repo의 캐쉬를 제거하고 다시 업로드해야하는 절차를 걸쳐야한다.

git rm -r --cache .     (꼭 . 을 붙여야 오류가 안난다..)
git add .
git commit -m "apply .gitignore"
git push [remote 이름] [branch 이름]

 

이렇게 하면 .gitignore에 추가한 폴더나 파일이 push 되지 않은 것을 확인할 수 있다.

'CS > git' 카테고리의 다른 글

git 명령어 정리  (0) 2023.03.10
git과 github  (0) 2023.03.10

이글에서는 React를 처음 시도해보시는 분들을 위한 글이다.

대학생때 React, ReactNative를 이용해서 팀플을 했지만 졸업하고 군대를 가고나서는 다 까먹어버림...

찾아보니 버전도 많이 바껴있고 업데이트하고 조치하는데만 2일 걸렸다는 함정;;

가고싶어하는 회사에서도 React를 사용한다고 하니 나도 공부할 겸 저 처럼 처음 시도해보시는 분들을 위한 글입니다.

 

React 사용 전 시스템 버전 확인

Ubuntu 버전. 20.04.6 LTS를 사용하고 있다.
nodejs, npm&nbsp; 버전

위 그림에서 처럼 글쓴이는 Ubuntu 20.04.06 LTS, NodeJs 18.15.0, npm 9.5.0을 사용하고 있다.

대학생때도 그렇고 다시 시작하는 지금도 그렇고 가장 시간을 많이 쓰는 곳 중 하나가 버전 환경을 맞추는거 같다.

처음에는 ubuntu 18.04 LTS를 사용하고 npm은 5.버전, nodeJS는 12.버전을 사용하고 있었는데 React 페이지를 보니 사용해야하는 버전이 달라진거 같았다.

출처 React 공식 홈페이지

사진에서 처럼 Node 14.0.0, npm 5.6 이상을 사용하라고 나와있다. 무시하고 진행하면 당연히 오류로 진행이 안된다..

겨우 Node 18.15.0, npm 9.5.0으로 업데이트하고나서 진행을 하려고하는데 우분투 18.04 LTS에서는 지원하지 않는다고 해서 Ubuntu 20.04 LTS로 업데이트도 하고 왔습니다.. 블럭되고 여러 실패가 있었으나 이 글을 읽으시는 분들은 미리 업데이트를 잘하시길 바래요..

 

React 프로젝트 폴더 만들기

이제 필요한 버전들도 설치가 되었으니 React 프로젝트 폴더를 만들어보자.

터미널에서 프로젝트 폴더를 만들고 싶은 위치로 이동한 다음 아래 명령어를 입력하면 된다.

npx create-react-app [폴더 이름]

React 프로젝트 폴더가 만들어지고 있는 과정
React 프로젝트 폴더가 완성된 모습

프로젝트 폴더가 완성이되면 위 사진과 같은 화면이 나온다.

React 실행하기

프로젝트 폴더가 완성되고 난 뒤 마지막 2줄을 보면 우리가 만든 프로젝트 폴더로 이동한 다음 npm start를 입력해주면 된다고한다.

잘 모르겠지만 우선 해보자.

npm start 실행한 결과

오... 뭔지 모르겠는데 터미널에는 "Compiled successfully!" 라는 문구가 나오고 화면에 React 문양이 빙글빙글 돌고 있는 것으로 보아 실행에 성공한거 같다.

근데 우리는 어떤 코드도 입력하지 않았는데 프로젝트 폴더가 만들어지자 마자 이런 결과물이 나왔을까??

 

test-react/src/App.js 코드

test-react/src/App.js 코드를 보면 사진과 같이 나와있다.

아직 저 코드들이 이해가 안가도 된다. 처음하는데 이런거 어떻게 다 알아..

그런데 HTML, CSS, JavaScript 조금만 해본 사람이면 아 App.js 파일에서 작성된 요소들이 실행된거구나 라고 알 것이다.

우리는 앞으로 App.js를 수정하면서 코드를 작성하면 결과물을 확인할 수 있다.

 

test-react/src/index.js 코드

index.js 파일을 열어보니 위에서 본 App.js 를 import하고 render? 라는 것을 사용하고 있다.

ReactDOM은 뭐고 render은 뭐야... 많이 어렵다.

두려워하지마라. 나도 아직 기억이 가물가물해서 찾아보면서 작성하고있다. 처음부터 배워가면서 해야하고, 중도하차만 하지않으면

여러분들도 React를 다룰 수 있을 것이다.

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

React를 왜 사용할까??  (0) 2023.09.15
JSX란?  (0) 2023.06.15

+ Recent posts