원티드 프리온보딩 프론트엔드 코스 과제

사용한 기술

• HTML5
• CSS3
• JavaScript
• React (Create-React-App)

구현된 주요 컴포넌트

I. Toggle

1. 구현 방법 및 내용

• 기본과 상세라는 리스트에 대해 각각의 버튼으로 총 2개의 버튼을 구성했습니다.
• 클릭 이벤트를 부여해서, 이벤트가 발생함에 따라 toggle이라는 boolean의 상태 값을 변경(false<->true)함으로써 이벤트 함수를 한 쪽에 호출되도록 하고 다른 한 쪽에는 비활성 되도록 조건부 처리했습니다.

2. 에러 사항 및 문제 해결 방법

• 선택된 버튼의 배경화면의 하이라이트가 X 축으로 이동하는 애니메이션을 구현하는 부분이 어려웠습니다. 버튼을 2개로 구성한 시점에서 어떻게 하면 이 슬라이드를 처리할 수 있을지 고민하게 됐습니다.
• 버튼 태그와 인접한 형제의 위치에 div 태그를 넣어서 z-index를 이용해 버튼과 다른 태그들 사이에 위치하도록 위치를 선정하고 슬라이드를 처리하는 부분에도 toggle의 상태 값을 전달해서 조건부에 따라 selected 클래스를 주어 배경화면의 하이라이트를 X축으로 이동하는 애니메이션을 구현할 수 있었습니다.

---

II. Tab

1. 구현 방법 및 내용

• tab에 구성 요소가 될 카테고리(감자, 고구마, 카레라이스)를 배열에 담아 map으로 리스트를 그리는 방식으로 구현했습니다.
• 리스트 아이템을 클릭하면 하단의 슬라이드 바에 있는 하이라이트가 클릭된 요소의 위치로 이동합니다.

2. 에러 사항 및 문제 해결 방법

• 내부에 있는 li태그가 클릭 이벤트가 발생하면 선택된 텍스트가 배열에 담긴 값을 비교해서 조건에 해당하는 것을 좌표 값 상태를 변경하고 그 값을 슬라이드의 스타일에 translateX에 일정 px만큼 주어서 처리했습니다.

---

III. Slider

1. 구현 방법 및 내용

• 슬라이더가 움직이면 그 픽셀 정보를 보여주는 화면, 직접 슬라이드를 조작할 수 있는 인터페이스, 인터페이스들과 상호작용을 할 수 있는 버튼들로 구성해서 총 3개의 컨테이너를 구성했습니다.

  • 픽셀 정보를 보여주는 화면
    • result라는 상태를 만들어서 하단의 슬라이드나 버튼에서 이벤트가 발생 됨에 따라 상태가 변경되도록 처리해서 구현했습니다.
  • 직접 슬라이드를 조작하는 인터페이스
    • 구현할 수 있는 방법은 여러 가지 있지만 input태그에서 제공하고 있는 range라는 타입을 사용했습니다. 슬라이드의 특정 지점(Mark)에 대한 부분은 또 다른 빈 공간을 구성해서 슬라이드 중간에 들어가게 구현했으며, 해당 특정 지점에 도착하게 되면 조건에 따라 배경색상이 적용될 수 있도록 클래스를 조건부 처리했습니다.
    • 슬라이드가 이동함에 따라 진행되는 상태를 보여주기 위해 그 사이에 또 다른 div 태그를 넣고 result 상태가 변경됨에 따라 width가 변경되도록 해서 슬라이드 진행을 보여주는 스타일을 구현했습니다.
  • 인터페이스와 상호작용 하는 버튼
    • datalist태그 내부에 option태그로 value와 label값을 주고 Click이벤트를 주어 클릭 시에만 적용되도록 toggle과 result의 상태 값을 조건부로 해서 하이라이트 색상 처리를 구현했습니다.

2. 에러 사항 및 문제 해결 방법

• 가장 까다로운 문제는 각 브라우저에서 지원하는 것과 미지원 하는 것이 있기 때문에 크로스 브라우징 이슈를 마주할 수 있다는 점입니다. 우선 과제에서는 이와 같은 제한 사항은 없기 때문에 크게 생각하지 않았지만, 이 문제를 제외하고도 큰 문제가 있었는데, 바로 직접 스타일링을 주기 위해서는 제한적인 스타일로 제공되는 가상 요소 선택자(slider-thumb, slider-runnable-track)를 이용해야 한다는 것이 었습니다. 이는 비표준 기능으로 구현 간에 비호환 문제를 겪기 때문에 CSS 스타일링에 있어서 일종의 Trick이 필요했습니다.
  • 검색해서 제일 많은 정보로 주어졌던 것은 box-shadow를 이용해서 슬라이드의 진행 상황을 처리하는 것이었지만, 저의 경우는 슬라이드 사이에 div태그를 주어 처리하는 방법으로 했습니다.
• 두 번째 에러 사항으로는 슬라이드의 버튼이 해당 픽셀에 따라서 이동하도록 하는 기능을 구현하는 것에 어려움이 있었습니다. input=range에서 제공하는 가상 요소 선택자인 slider-thumb를 직접 조작해야하는데, 자바스크립트에서 이는 DOM의 일부가 아니기 때문에 변경할 수 없으며, 대안으로는 이 요소를 아예 다른 요소로 대체해서 구현하거나, CSS variables를 이용해서 CSSStyleDeclaration.setProperty() 메소드를 적용하는 방법이 있었습니다.
  • 후자의 방법을 적용했지만, slider-thumb가 의도하는 대로 동작되지 않았습니다. 예를들어 width를 변경하는 경우 input전체의 범위가 줄어드는 등의 일이 발생했습니다.
  • 너무 어렵게 접근한 나머지 input의 value 속성으로 변경되는 상태 값을 넣어주면 해결 되는 문제를 오래 고민하면서 시행착오를 겪었습니다.
• 이번에 input=range를 이용했었지만 다음에 이와 같은 기능을 구현하게 되면 표준의 스타일이 나올 때 까지는 input태그를 사용하지 않고 구현할 것 같습니다.

---

IV. Input

1. 구현 방법 및 내용

• 2개의 input 태그를 이용해서 이메일과 비밀번호를 입력받으며, 파비콘은 Font Awesome에서 제공하는 라이브러리를 이용하며 각 입력에 주어진 상호작용에 따라 이벤트가 동작하여 이메일 유효성 체크와 비밀번호의 블라인드 토글을 구현했습니다.

2. 에러 사항 및 문제 해결 방법

• 이메일에서는 정규 표현식을 이용해서 유효성의 일치 여부에 따라서 Invalid e-mail address 메시지와 파비콘의 스타일이 동적으로 변경되도록 했습니다.
• 비밀번호는 보이지 않는 입력 값을 보이게 하기 위해서는 input태그의 type을 변경해야 했으며, 비밀번호 타입의 값을 처리할 수 있는 상태를 만들어서 클릭 이벤트에 따라 해당 파비콘과 같이 스타일이 동적으로 변경되록 했습니다.

---

V. DropDown

1. 구현 방법 및 내용

• button과 input태그를 이용해서 구현했으며, 버튼의 클릭 이벤트가 발생하면 텍스트 입력을 받을 수 있는 검색어 입력창과 검색 결과에 대한 Symbol 리스트가 하단에 보여집니다.
• 특정 Symbol을 클릭하면 버튼에 있는 텍스트가 해당 Symbol의 이름으로 변경됩니다.
• 검색 입력창에 키워드를 입력하면 일치하는 리스트를 찾아 변경된 결과를 보여줍니다.

2. 에러 사항 및 문제 해결 방법

• 검색 결과에 대한 리스트를 보여주기 위해 map과 filter를 사용했으며, 필터의 요소에는 대, 소문자의 구분을 조건으로 했고 입력 창이 비어있는 경우 모든 요소가 보이도록 했습니다.(다른 방식으로는 정규식을 이용하거나, 아스키코드를 이용할 수도 있을 것 같습니다.)