프론트엔드 취업 과제

안녕하세요. 꼬동입니다.

 

제가 최근 프론트엔드 개발자로 전환이 되었는데, 이 과정에서 항상 평가 받았던 것이 있습니다.

 

바로 프론트엔드 과제였는데요.

 

알고리즘 문제와는 다르게 정말 과제가 주어집니다.

 

예를 들어서 "쇼핑몰을 만들어주세요. 다이어리를 만들어주세요. 댓글 창을 만들어 주세요." 등 이런 것들이요.

 

이러한 과제는 당황스럽기 마련입니다.

 

왜냐면 실질적인 프로젝트를 하기 전엔 이를 경험할 일이 없거든요.

 

게다가 이들은 아마 Vanilla JS로만 문제를 해석하라고 할 것임이 분명합니다.

 

그렇다면 저희는 어떻게 준비해야할까요?

 

다행히도 제가 좋은 글을 발견해서 이를 기반으로 제 생각을 써보려 합니다.

 

글의 출처는 아래와 같으며, 아래에서 문제도 풀어볼 수 있더라고요.

 

굉장히 좋은 경험이라 생각합니다. 좋은 글이기도 하고요.

 

해당 문제만 해결할 수 있으면, 어렵지 않을거란 예상도 드네요.

 

prgms.tistory.com/53

'2021 Dev-Matching: 웹 프론트엔드 개발자(상반기)' 기출 문제 해설

---

프론트엔드 과제 특징

프론트엔드 과제는 보통 아래와 같이 명세서와 주어집니다.

• A 기능을 만들어주세요.
• B 기능을 만들어주세요.
  • 단, C의 경우엔 예외처리가 있어야합니다.
  • (추가 점수) D의 기능을 만들어주세요.
• Blah Blah...

이러한 명세서를 완성 시키는 것이 프론트 엔드 과제의 목적입니다.

 

보다 자세한 문제는 위의 링크를 타고 들어가서 보시면 더 쉽게 이해되실거란 생각이 듭니다.

 

기능 구분

제일 중요한 부분이 아닐까 싶어요.

 

기능 구현 뿐만 아니라 어떻게 생각하고 구현했는가를 물어보는 과제니까요.

 

즉, 효율 / 확장 / 디버깅 / 협업 등 모든 고려사항에서 해당 코드가 좋은 코드인지를 확인하고 싶은 과제인데, 이를 만족하기 위해서는 어떻게 해야할까요?

// DOM에 직접 접근하여 데이터 표시
function render(data) {
	const root = document.getElementById('id');
    const child = document.createElement('div');
    child.innerText = data;
    root.appendChild(child);
}

위의 접근 방식이 사실 틀린 것은 아니지만, 실 사용엔 문제가 많은 코드입니다. 어느 지점에서 어느 순간에 DOM이 업데이트 됐는지 추적하기 힘들뿐만 아니라, 그렇기 때문에 최적화를 하기 어려운 코드이기 때문이죠.

 

게다가 점점 프젝트가 거대해진다면, 어휴

 

그렇다면 어떻게 해야할까요 ?

 

대부분의 과제에서는 컴포넌트 형태로 추상화를 하여 작성하라는 지문이 존재합니다.

 

제가 이를 이해하면 좀 더 구조화를 해보세요 ~ 라는 의미로 받아들여지네요.

 

한 번 보도록 하죠.

class App {
	constructor(initialState) {
    	this.state = initialState;
        
        this.render();
    }
    setState(nextState) {
    	this.state = nextState
        this.render();
    }
    render() {
    	...
        ...
    }
}

요렇게요.

 

저 역시 초보라 생각나는게 이거 밖에 없네요 ;;

머쓱

근데 해당 구조 어디서 많이 보시지 않으셨나요?

 

네. 바로 리액트 클래스 컴포넌트입니다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

위 코드는 아래 링크의 클래스 컴포넌트에서 한 예제를 그대로 들고온 코드입니다.

 

ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

즉, 과제를 해결할 때 이처럼 구조화 하면서 문제를 해결하는 것을 요구하는 것이죠.

 

이를 통해서 구조화를하고 의존성을 줄이고, 재 사용성을 높이고, 인스턴스의 변화에 따른 데이터 추적이 용이해집니다.

 

프로그래머스에서 강조하는 부분은 세 가지가 있습니다.

• constructor
  • new 키워드로 컴포넌트가 생성될 때 실행되는데, element를 생성하고 파라미터로 받은 데이터와 DOM을 렌더링 하도록 합니다.
• render
  • 해당 컴포넌트의 state를 기준으로 자신의 element에 렌더링하며, 자신의 상태를 기준으로 하기에 "별도의 파라미터를 받지 않아야 합니다."
• setState
  • 해당 컴포넌트의 state를 갱신합니다. 그리고 render 함수를 다시 부르면서 업데이트된 상태를 화면에 반영합니다.

이렇게 하면 명령형 프로그래밍과 달리 넓은 관점에서 프로그래밍이 가능해집니다.

데이터 받아오기

프론트엔드 과제엔 대부분 데이터를 받아와서 가공하는 작업이 이루어지는데, 이 때는 fetch 함수를 사용합니다.

 

이를 사용하기 위해선 Promise 객체에 대한 이해가 당연히 필요하겠죠.

 

그렇기 때문에 이를 공부하고 과제를 수행하시는 것이 필수입니다. async / await를 함께 사용하면 가독성도 좋겠죠?

 

또한, API 호출 부분은 컴포넌트 내부가 아닌 별도로 분리하여 관리하는 것이 중요합니다. 따로, 파일을 만들어서요.

 

한꺼번에 관리할 수 있는 파일이 있다면, 굳이 이 곳 저 곳 찾아다니면서, API를 확인 안해도 되겠죠?

정리 안하면 이걸 다 뒤져야 할 수도

효율

과제에서 기능만 구현했다고 해서 끝이 아닙니다. 효율도 중요하죠.

 

효율을 챙기기 위해서 보통 여러가지 방법이 있습니다.

 

데이터를 또 부르지 않기 위해 캐싱을 쓴다던가, 스크롤 이벤트를 줄이기 위한 디바운싱 / 쓰로틀링 등이 있습니다.

 

이벤트 최적화도 있네요.

 

여러분이 10,000번의 for 문을 돌면서 node를 만들고, 얘들 마다 이벤트를 걸어 준다고 합시다.

 

근데 이러면 메모리 펑 터져버리고 말죠? (해당 내용은 ggodong.tistory.com/255 과 ggodong.tistory.com/262에서도 확인이 가능합니다.)

 

그렇기 때문에 이벤트 최적화도 알고 가셔야 합니다.

 

효율을 챙기는 방법도 고려를 하여 코드를 짜는 것이 좋은데, 과제를 해결할 땐 기능을 다 구현해 놓고 효율을 챙기시는게 우선이 되어야 한다는 점을 기억하시길 바랍니다.

---

프로그래머스 글에도 밝히지만, 해당 방법은 기존의 jQuery로 직접 DOM 조작을 하는 개발 방식과는 다른 Data 중심의 개발 방식입니다.

 

React, Vue, Angular 등이 데이터 중심의 프레임워크 / 라이브러리이죠. 어떠한 상태값을 기준으로 변경될 때마다 UI가 업데이트 되니까요.

 

즉, 이 과제를 요구하는 기업은 해당 라이브러리 / 프레임워크를 잘 이해하고 있는가? 를 물어보는 하나의 방법이 될 수도 있습니다.

 

물론 Vanilla JS에 대한 이해는 기본이고요.

 

저 역시 해당 과제를 직접 수행하면서 실력이 굉장히 많이 늘었다고 생각을 합니다. (아직 한참 모자라지만..)

 

그렇기에 프론트 엔드 개발자를 희망하시는 분이시라면 반드시 한 번 풀어보셨으면 합니다.

 

이상 프론트엔드 취업 과제였습니다. ^_^