https://school.programmers.co.kr/skill_check_assignments/496
기술 태그
CSS, JavaScript, HTML
기간
약 3시간
당신은 로그인 기능과 좌석 예매 기능을 만드는 업무를 맡게 되었습니다.
Vanilla JS만을 이용하여 문제에 제시된 요구사항을 꼼꼼하게 읽고 제한 시간 내에 두 기능을 완성해 주세요.
('2023 Dev-Matching: 웹 프론트엔드 개발자(상반기)-1' 기출 문제입니다.)
프로그래머스 강의에서 출제자의 문제 해설과 코드를 확인하세요.
https://school.programmers.co.kr/app/courses/18438/curriculum
과제 제출이 되어도 연습 문제이기 때문에 채점은 되지않기 때문에 기능에 대한 정답인지 확신은 하지 못하지만 나름의 기능들을 구현해 보았습니다.
연습 문제이긴 하지만
와 같이 기재되어져 있기 때문에 자세한 이야기는 일단 적진 않았습니다.
해당 과제가 2개 주어지면서 그것을 기능으로 구현하는 방식입니다.
로그인 기능 구현하기
유효성 검사에서는 가장 흔하게 봐왔던 정규표현식을 이용한 유효성 검사를 둘다 진행을 하게 하였습니다.
아이디와 패스워드를 확인하는데 가장 편한 방식이었습니다.
좌석 예매 기능 구현하기
해당 기능을 구현하기 위해서 querySelectorAll, classList 아래에 있는 contains, add, remove 함수를 적극 활용해서 구현하려고 노력하였습니다.
querySelectorAll은 입력해주는 id 혹은 클래스의 쿼리들을 전부 불러오는 함수로
var container = document.querySelectorAll("#test");와 같이 사용한다.
contains함수는 말 그대로 classList 안에 검색한 클래스가 포함되어 있는지 확인하는 함수이며
add함수는 classList에 입력한 클래스를 추가하는 것이고
remove함수는 classList에 입력한 클래스를 삭제하는 함수이다.
기본 기능을 전부 투자를 하고 심화과정에 투자할 시간이 조금 부족해서 요구하는 전체의 기능을 구현하지는 못했지만
꽤 재밌는 기능 이었다고 생각합니다.
이후에도 좌석 초기화라던지 잔여좌석과 같은 기능들이 있긴하지만
confirm와 같이 분기가 있는 구조로 되어있지 않기 때문에 위의 방식으로 조합을 하면 기능 구현은 문제 없이 가능할 것으로 생각된다.