FE 전배

준비 & 적응 후기.

프론트엔드 개발, 이상진 😶

입사 : UI 개발

전배 : 프론트앤드 개발

- 블로그

- Selective

- 지식인

- 플레이스 (파견)

- A&B 테스팅 툴 (사내 Pasta 플랫폼)

- 자동차 보험

- 엔트리

- 현: 판매자 센터

2017.03

2020.03

Work Dialog.

- 인플루언서

1. 전배를 생각하게 된 계기

2. 준비 과정

3. 전배 후 1년

4. 후기 및 느낀 점

5. Q&A

Index.

1. 전배를 생각하게 된 계기

1. 새로운 작업 환경

AS-IS

HTML/CSS DIFF 전달

FE와 분리된 환경

순수한 HTML/CSS 파일

FE 코드 이해 필요 x

TO-BE

JSX 형식의 파일

UIT 리엑트 마크업 가이드 RND

AS-IS

HTML/CSS DIFF 전달

TO-BE

FE팀과 분리된 환경

순수한 HTML/CSS 파일

FE 코드 이해 필요 x

JSX 파일에 함께 작업

FE팀과 같은 저장소

FE 코드 이해 필요 o

import React from 'react';
import style from './TodoList.scss';

const DEMO_PROPS = {
  itemList: [
    { id: 1, todo: '투두리스트 컴포넌트 실습 완성하기' },
    { id: 2, todo: '투두리스트 컴포넌트 실습 복습하기 ' },
    { id: 3, todo: '새로운 내용 공부하기' },
  ]
};

class TodoList extends React.Component {
  render () {
    const { itemList } = DEMO_PROPS;

    return (
      <ul className={style.list_todo}>
          {itemList.map((item) => (
            <li className={style.item_todo} key={item.id}>
                <span className={style.text}>{item.todo}</span>
                <button 
                  type="button" 
                  className={style.button_delete} 
                  aria-label="삭제"
                >
                  <i className={style.icon_delete} />
                </button>
            </li>
          ))}
      </ul>
    )
  }
}

export default TodoList;

최초 작업 > 데모 데이터

import React from 'react';
import { useSelector } from "react-redux";
import { getTodos } from "../redux/selectors";
import { VISIBILITY_FILTERS } from "../constants";
import TodoItem from "./TodoItem";
import style from "./TodoList.scss";

const TodoList = () => {
  const visibilityFilter = useSelector((state) => state.visibilityFilter);
  const allTodos = useSelector(getTodos);
  const itemList =
    visibilityFilter === VISIBILITY_FILTERS.ALL
      ? allTodos
      : visibilityFilter === VISIBILITY_FILTERS.COMPLETED
      ? allTodos.filter((todo) => todo.completed)
      : allTodos.filter((todo) => !todo.completed);

  if (itemList.length === 0) {
    return <h2>등록된 Todo가 없습니다.</h2>;
  }

  return (
    <ul className={style.list_todo}>
      {itemList.map((todo) => {
        return (
          <TodoItem 
            key={`todoItem-${todo.id}`} 
            todo={todo} 
          />
        );
      })}
    </ul>
  );
};

export default TodoList;

개발 완료 > 리얼 데이터 + 로직

FE 개발 이후
추가 작업

FE 작업의 일부분 수행하는 케이스

간단한 이벤트 구현
(ex: 툴팁, 팝업 Toggle)

const [isShowLayer, setIsShowLayer] = useState(false);

function handleClickCancel(e) {
    setShowLayer(false)
}

...

return (
    {isShowLayer && (
        <TooltipLayer onClose={handleClickCancel} /> 
    )}
 )

상위 컴포넌트에 있는 리얼 데이터 적용

const ChildComponent = () => {
  const DEMO_PROPS = {
    name: 'jack',
    id: 'ads21',
    imgUrl: 'https://via.placeholder.com/728x90.png',
    desc: 'dummy desc text!!'
  }
  const { name, id, imgUrl, desc } = DEMO_PROPS;

  return (
    <div>
    	<div>{name}</div>
    	<div>{id}</div>
    	<img src={imgUrl} />
    	<p>{desc}</p>
    </div>
  );
}

const ChildComponent = (data) => {
  const { name, id, imgUrl, desc } = data;

  return (
    <div>
    	<div>{name}</div>
    	<div>{id}</div>
    	<img src={imgUrl} />
    	<p>{desc}</p>
    </div>
  );
}

After

Before

리얼 데이터 관련

코드 확인 필요한 경우

- 예상치 못한 데이터로 인해 UI 이슈 발생 / 기존 스펙 확인 필요

개발 코드 직접 확인

→ 커뮤니케이션 비용 발생

예시

import React from 'react'
import { Link } from 'react-router-dom';

const MovieItem = ({ data }) => {
  const { id: movieId, name: movieName, platform, slug, poster } = data;

  return (
    <div className="movie-item" key={movieId}> 
      <Link to={`/detail/${platform}/${slug}`} className="movie-item__drop">
        <img className="movie-item__img" src={poster} alt={movieName} loading="lazy"/>
      </Link>
      <div className="movie-item__name">{movieName}</div>
    </div>
  )
}

export default MovieItem;

MovieItem.jsx

import React from 'react'
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import MovieItem from './MovieItem';
import LoadingUI from './LoadingUI';

const movieList = ({ movies }) => {
  const { movieList = [] } = movies;

  return (
    <div className="movie pt-5"> 
      <div className="d-flex align-items-center justify-content-between mb-4">
        <h2 className="">FİLMLER</h2>
        <Link to="/add/movie" className="movie-add yellow">Film Ekle</Link>
      </div>
      {movieList?.length === 0 && <LoadingUI />}
      <div className="row">
        {movieList.map((movie, index) => (
            <MovieItem
              key={`movieItem${index}`}
              data={movie} 
            />
        ))}
      </div>
    </div>
  )
}

movieList.propTypes = {
  movies: PropTypes.object.isRequired
};

export default movieList;

MovieList.jsx

import React, { PureComponent } from "react";
import propTypes from "prop-types";
import { connect } from "react-redux";
import GameList from "../components/gameList.jsx";
import MovieList from "../components/movieList.jsx";

import { fetchMovies } from "../actions/movies";
import { clearDetail, fetchGames } from "../actions/games";
import { searchDisableOverlay  } from "../actions/search";

class moviesPage extends PureComponent {
  static propTypes = {
    movies: propTypes.object.isRequired, 
    games: propTypes.object.isRequired,
  };

  render() {
    return (
      <div>
        <div 
          className={`search-overlay ${this.props.boolSearchOverlay === "true" ? "active" : ""}`} 
          onClick={this.closeOverlay}
        />
        <div className="custom-container product">
          <GameList games={this.props.games} />
          <MovieList movies={this.props.movies} />
        </div>
      </div>
    );
  }

  componentDidMount() {
    this.props.fetchMovies(); //action
    this.props.fetchGames(); //action
    this.props.clearDetail(); //action detay state temizle
  }

  componentWillUnmount(){
    this.props.searchDisableOverlay();
  }

  closeOverlay = () => {
    this.props.searchDisableOverlay();
  }
}

const mapStateToProps = (state) => {
  return {
    movies: state.movies,
    games: state.games,
    boolSearchOverlay: state.search.searchOverlay
  };
};

const mapDispatchToProps = {
  fetchMovies,
  fetchGames,
  clearDetail,
  searchDisableOverlay
};

export default connect(mapStateToProps, mapDispatchToProps)(moviesPage);

ProductPage.jsx

import React, { PureComponent } from "react";
import propTypes from "prop-types";
import { connect } from "react-redux";
import GameList from "../components/gameList.jsx";
import MovieList from "../components/movieList.jsx";

import { fetchMovies } from "../actions/movies";
import { clearDetail, fetchGames } from "../actions/games";
import { searchDisableOverlay  } from "../actions/search";

class moviesPage extends PureComponent {
  static propTypes = {
    movies: propTypes.object.isRequired, 
    games: propTypes.object.isRequired,
  };

  render() {
    return (
      <div>
        <div 
          className={`search-overlay ${this.props.boolSearchOverlay === "true" ? "active" : ""}`} 
          onClick={this.closeOverlay}
        />
        <div className="custom-container product">
          <GameList games={this.props.games} />
          <MovieList movies={this.props.movies} />
        </div>
      </div>
    );
  }

  componentDidMount() {
    this.props.fetchMovies(); //action
    this.props.fetchGames(); //action
    this.props.clearDetail(); //action detay state temizle
  }

  componentWillUnmount(){
    this.props.searchDisableOverlay();
  }

  closeOverlay = () => {
    this.props.searchDisableOverlay();
  }
}

const mapStateToProps = (state) => {
  return {
    movies: state.movies,
    games: state.games,
    boolSearchOverlay: state.search.searchOverlay
  };
};

const mapDispatchToProps = {
  fetchMovies,
  fetchGames,
  clearDetail,
  searchDisableOverlay
};

export default connect(mapStateToProps, mapDispatchToProps)(moviesPage);