[인턴십 회고] 프론트엔드 인턴 후기

기성·2023년 3월 9일
인턴프론트엔드
0

프론트엔드 인턴

목록 보기
1/1

인턴 시작

2022년 4학년 2학기. 내가 대학교를 다니는 마지막 시간이자 학교에서 기회를 주는 것을 활용 할 수 있는 마지막 시간이었다. 아직 개인 웹 프로젝트는 하나 뿐이 해보지 못했고 지식도 모자르다 생각하여 프로젝트던 공부던 하나는 확실하게 하고싶었다. 그러던 중 학교에서 진행하는 SW 인턴십을 알게 되었고 교수님을 통해 스타트업에 면접을 볼 기회가 생겼다. 아무리 생각해도 나는 CS지식도 모자르고 프로젝트도 하나 뿐이 없었는데 일단 해보자는 생각으로 지원했다.

내 걱정과는 다르게 면접에서 합격했고 11월 7일부터 1월 31일 까지 3달간 인턴을 진행하게 되었다. 첫 회사와 첫 실무를 겪으면서 느꼈던 점들을 이제부터 하나씩 써보려 한다. 인턴 종료 후 한달이라는 시간이 지났지만 개인적으로 조금 쉬고 싶었고 한 달간 휴식 후에 다시 복기하고자 블로그를 다시 시작하게 되었다.

면접

면접을 본지 꽤 되었지만 기억나는 질문들만 적어보려한다.

  1. "Python과 JavaScript는 인터프리터 언어입니다. 컴파일러 언어와 인터프리터 언어의 차이점이 무엇인지 아는가?"

이 질문에 대해서는 따로 생각을 안해가서 답변을 못했던 기억이 있다. 분명 아는 내용인데 순간적으로 기억이 나지 않아 답을 하지 못했었다.

컴파일러 언어는 프로그래머가 작성한 소스코드를 모두 기계어로 변환한 후에 가상머신 같은 기계에 집어 넣어 코드를 실행한다. 코드를 기계어로 변환하기 때문에 인터프리터 언어보다 실행시간이 길다. 하지만 런타임 상황에서는 이미 기계어로 변환되어 있기 때문에 실행시간이 인터프리터 언어보다 빠르다. 대표적인 언어로 C, C++이 있다.

인터프리터 언어는 기계어로 변환하지 않고 바로 한줄 한줄 해석해서 명령을 내린다. 한줄 한줄 읽고 바로 명령을 내리기 때문에 빌드과정이 따로 필요 없지만 런타임 상황에서는 이 점때문에 컴파일러 언어보다 느리다. 대표적인 언어로 R, Python, Javascript, Ruby 등이 있다.

  1. "리액트의 Life Cycle을 설명해라"

componentDidMount

컴포넌트의 첫 번째 렌더링 이후 호출 되는 메서드이다. 이 메서드가 호출 될 때 내가 짠 코드가 화면에 나타나는 상태이다.

componentDidUpdate

컴포넌트의 리렌더링이 끝난 후 원하는 변경점이 반영된 이후에 호출 되는 메서드이다.

componenetWillUnmount

이 메서드는 컴포넌트가 화면에서 사라지기 직전에 호출 된다. 예시로는 setTimeout을 DidMount때 걸어 두었다면 clearTimeout을 통해 Unmount때 제거해준다.

  1. "사용해본 REACT HOOKS 2가지를 설명해보라"

React하면 바로 생가가는 Hook인 useState와 useEffect를 설명했다. 면접 보기전에 사용하는 프레임워크에 대해서는 알고 가야 할 것 같아서 확실하게 공부하고 갔다.

useState

useState는 JS의 class를 사용 할 때 제일 어려운 this를 사용하지 않아도 상태를 유용하게 변경시킬 수 있다. useState의 Hook이란 함수 컴포넌트를 사용하던 중 state를 추가 하고 싶을 때 사용한다. 

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

평소 JS에서 state를 추가 하기 위해서는 클래스를 추가하여 this.state로 count를 0으로 설정하여 초기화를 하지만 함수형 컴포넌트는 this를 가질 수 없다. 때문에 useState Hook을 사용하여 다음과 같이 state를 선언한다.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

이는 count라는 변수를 선언하고 0으로 초기화 한다. 이 count를 갱신하기 위해서는 setCount를 호출하여 값을 변경해준다.

useEffect

useEfftect Hook을 이해하기 위해서는 먼저 React의 class life cycle method부터 이해해야 한다. 이 Hook은 componentDidMount, componenetDidUpdate, componentWillUnmount가 합쳐진 것과 같다 라고 생각하면 된다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

위는 Class 컴포넌트를 통해 DOM을 바꾸고 나서 문서 타이틀을 업데이트하는 코드이다. 코드를 보면 Class안에 두 Life Cycle 내에 같은 코드가 중복 되어있는 것을 볼 수 있다. 그 이유는 컴포넌트가 Mount단계나 업데이트 단계나 같은 side effect를 수행하는 것을 바라기 때문에 다음과 같이 중복되고있다. 하지만 useEffct Hook에서는 중복하지 않고 코드를 짤 수 있다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect는 React에게 컴포넌트가 "렌더링" 이후에 어떤 일을 해야하는지 말한다. React는 이를 기억 했다가 DOM 업데이트를 진행하고 나서 넘겨진 함수를 수행한다. 또한 렌더링이 될 때마다 React는 useEffect내의 함수를 항상 수행할 것이다.

  1. "진행했던 프로젝트에 대해 설명해 줄 수 있는가?"

22년도에 들어서 처음으로 웹 공부를 시작했고 늦은감이 없지않아 바로 React 프레임워크 사용법부터 공부를 시작했다. 여름방학에 들어 백엔드를 공부하던 동기와 함께 공모전에 참여하여 기부챌린지를 할 수 있는 웹페이지를 기획하여 프로젝트를 진행하였다. 배포는 하지못했지만 처음 사용하는 라이브러리나 파일 업로드같은 기능들을 구현해보았다. 기부를 위한 결제, 챌린지 등록을 위한 댓글, 동영상 업로드, 로그인, 회원가입이 가능한 웹페이지였다.

  1. "사용해본 라이브러리에 대해 설명해 줄 수 있는가?"

가장 어려웠던 라이브러리는 결제 시스템에 대한 라이브러리였는데 "아임포트(iamport)"에서 제공하는 api를 사용하여 PG사 결제 모듈에 대한 연동을 통해 온라인 결제를 진행하는 라이브러리이다.

디자인의 구체화가 따로 없이 진행한 프로젝트였기 때문에 디자인의 편의성을 위한 bootstrap을 사용했으며 Server와의 api 연동을 위한 axios를 사용하였다.

  1. "해결하기 어려운 상황에 대해 어떻게 해결을 하는가?"

대부분 구글링이나 해당 기술의 Docs를 읽어보고 있다. 구글링을 진행할 때는 비슷한 상황이나 사례가 있는지를 우선적으로 찾아보고 이 후에 Docs를 읽어보며 하나씩 뜯어보며 해결하고 있다. 주변에 프론트엔드를 진로로 하는 동기나 친구가 없어 힘든 부분이 있다. 때문에 교내 오픈카톡방이나 교내 커뮤니티를 이용하고있다.

  1. "프론트엔드는 빠르게 기술이 변화하고 있는데 새로운 기술에 대한 학습이나 인지는 어떻게 하는가?"

기존 사용하던 기술들은 Docs를 통해 업데이트를 확인 할 수 있고 유튜브나 커뮤니티, 깃허브 등 을 통해 최근 기술동향을 확인하고있다.

실무를 경험해보며

인턴을 진행하면서 아쉬웠던 점중에 하나가 있는데 면접을 보면서 사수가 없어도 괜찮겠냐라는 질문이 있었다. 일단을 실무를 바로 겪어보고 싶었기 때문에 괜찮을까? 라는 생각을 하면서도 할 수 있다 라는 마인드로 가능하다고 했고 입사하자마자 바로 실무에 투입되었다.

일단 생각하고 찾아봐라 그리고 나서 물어봐라

첫 실무에 처음쓰는 라이브러리에 처음쓰는 프레임워크이다 보니 모든게 새로웠다. 그래도 전임자가 다른 프로젝트를 맡는 것 뿐이라 사수가 없더라도 전임자에게 전체적인 코드에 대한 설명을 들었다. 설명을 듣고 나서는 어느정도 눈에 읽혔다. 하지만 개발경험도 부족했기에 그래도 모르는게 투성이. 처음 한 달간 눈치를 보게 된 것은 물어보면 생각보다 간단하게 해결된 것이 대부분이었다. 분명 구글링을 해도 방법을 모르겠고 그렇다고 물어보기엔 쉬워보이는 그런 것들. 참 골칫거리였다. 그래서 기준을 세웠다. 적어도 1시간30분은 생각하며 정리해보고 30분은 찾아보고 그래도 해결이 안된다면 그 다음에 물어보기로.

애자일 스프린트

프로젝트는 애자일 스프린트로 진행되었다.

여기서 애자일(Agile)이란 날렵한, 민첩한, 기민한 이란 뜻을 가지고 있다.

  • 애자일 프로세스(Agile Process): 소프트웨어 개발 방법중 하나로 작업 계획을 짧게 주로 2주에서 1달로 세우고 이 작업을 반복적으로 해나가며 고객의 요구 변화에 유연하고 신속하게 대응하는 개발 방법론이다.
  • 스프린트(Sprint): 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간.
  • 스크럼(Scrum): 팀이 일련의 가치, 원칙 및 관행을 바탕으로 작업을 구조화하고 관리할 수 있도록 지원하는 애자일 프로젝트 관리 프레임워크.

매일 아침 데일리 스크럼을 진행하여 프로젝트 구성원 간의 작업 진행도와 예정 작업을 공유하고 스프린트 기간이 끝나면 QA를 진행해서 QA기간동안 버그를 해결하고 스프린트를 마무리했다. 스프린트가 마무리되면 또 다시 다른 스프린트를 시작했다. 큰 목표인 프로젝트 완료를 잡고 2주에서 한달 정도의 짧은 구간의 완성을 이어나가는 방식으로 인턴기간 동안 프로젝트를 진행했다.

나에게 애자일 프로세스는 색다른 경험이었다. 해당 학기에 소프트웨어공학을 학교에서 수강하면서 배우고 있던 프로세스였는데 실무에서 바로 접한 것은 좋은 경험이 되었다.

코드리뷰

처음으로 코드리뷰도 해보았다. 혼자 공부하다보니 내가 짜는 코드가 효율적인지, 읽기 편한지 알 수 없었는데 굉장히 도움이 되었다. 코드리뷰를 진행하면서 다른 사람들의 코드도 보고 어떤게 문제고 어떻게 하면 더 좋게 짤 수 있는지 토론도 하고 피드백도 받았다.

  • 변수 명은 길더라도 확실하게 알아볼 수 있는 이름으로 한다.
  • 겹치는 동작을 하는 함수는 컴포넌트로 뺄 수 있으면 뺀다.
  • 함수 명도 어떤 동작을 하는지 확실한 이름으로 한다. 명사로 하는게 제일 좋다.
  • return에서는 값만 return하는 것이 최선, 함수 return은 최소화

얼마 되지 않은 개발 실력과 기간임에도 인턴을 할 수 있는 기회를 잡은 것이 정말 큰 경험이라고 생각했다. 인턴 후기는 여기까지 쓰고 마무리 해야지 글쓰기 너무 어렵다 ㅠ

리액트 자료 출처: https://ko.reactjs.org/

profile
기성
프론트가 하고싶어요

0개의 댓글