JavaScript-project-study-with-likeLion

깨지고 부서져라 with 멋쟁이 사자처럼

무작정 기능을 구현하고, 서로 깨지면서 성장하는 자바스크립트 스터디

내용 : JavaScript를 사용하여 기능을 스스로 구현해보기.

사용언어 : HTML, CSS, JavaScript

기간 : 4주 (주당 1개의 작업물)

작업물
- 시계
  - 화면 상에 전자시계를 띄우는 기능 구현.
  - Date객체 & setInterval & this의 활용 & 스코프
- 라이트 박스
  - 이미지가 나열되어 있고 클릭시 라이트 박스 모달을 띄어주는 기능 구현
  - 노드 객체에 비표준 속성 접근 & map() 활용한 이미지 동적 나열 & darkFilter 구현 및 클로저 활용
- 캐로셀
  - 버튼 및 마우스 다운으로 작동 가능한 캐로셀 구현.
  - mouseup_handler() => 마우스 업 되거나 화면에서 벗어나면 캐로셀이 자동으로 맞춰짐.
  - 라이트 박스의 기능 활용 & 동적으로 캐로셀 이미지 크기, 간격, 보여지는 이미지 개수 조절 가능,
  - 캐로셀 이미지와 캐로셀 버튼의 구분을 위해 이벤트 위임 활용
- 검색창 & 자동완성
  - 저장된 데이터(더미 + 로컬스토리지)로 자동완성 검색어를 보여주는 검색창 구현
  - 검색하면 구글 검색 결과 페이지를 띄어주고, 검색어를 로컬 스토리지에 저장
  - checkAutoComplete() => 검색어의 유사도와 단어 길이의 차이에 대한 가중치 고려
소감
- JavaScript와 친해지는데 큰 도움이 되었고, 무엇이든지 구현할 수 있을 것 같은 자신감이 생겼다.
  
  이벤트 위임, dataset, closer 등 배우걸 바로 활용하려고 신경을 썼다.
  
  위 4개의 기능들은 바닐라 자바스크립트만으로 오롯이 혼자서 구현했고 생각보다 어렵지 않다고 느껴졌다.
  
  물론 구현은 했지만, “정말로 코드를 잘 짰나?” 의문이 들긴 한다.
- 자신의 코드를 잘 설명할 줄 알아야하고, 그럴려면 코드를 잘 짜야한다.
  
  스터디날에는 모여서 서로 자신의 코드에 대해 발표를 하는데, 가독성이 좋은 코드가 발표도 수월했다.
  
  자신의 코드에 대해 20-30분간 쉼없이 발표하면서 발표능력도 약간은 성장한 것 같다.
  
  서로 작성한 코드와 기능을 보면서 많은 동기부여가 되었다.
  
  ~~날 너무 띄워줘서 부담이 심했…~~
- 재밌었다.
  
  사실 깨부스터디는 비공식 스터디다.(공식 스터디는 멋사에서 멘토님과 함께 진행을 한다.)
  
  나는 직접 구현하는 스터디를 하고 싶었지만 모집하는 공식 스터디가 전부 이론을 공부하는 스터디였다.
  
  뒤늦게 구현 스터디 깨부가 생겼고 인원도 4명으로 극소수 스터디로 구성되었다.
  
  그럼에도 다들 너무 열심히, 재미있게 스터디를 진행했고 리액트에서도 다시 만나길 기약하며 잘 마무리했다.

JavaScript-project-study-with-likeLion

깨지고 부서져라 with 멋쟁이 사자처럼

무작정 기능을 구현하고, 서로 깨지면서 성장하는 자바스크립트 스터디

내용 : JavaScript를 사용하여 기능을 스스로 구현해보기.

사용언어 : HTML, CSS, JavaScript

기간 : 4주 (주당 1개의 작업물)

작업물

화면 상에 전자시계를 띄우는 기능 구현.

Date객체 & setInterval & this의 활용 & 스코프

이미지가 나열되어 있고 클릭시 라이트 박스 모달을 띄어주는 기능 구현

노드 객체에 비표준 속성 접근 & map() 활용한 이미지 동적 나열 & darkFilter 구현 및 클로저 활용

버튼 및 마우스 다운으로 작동 가능한 캐로셀 구현.

mouseup_handler() => 마우스 업 되거나 화면에서 벗어나면 캐로셀이 자동으로 맞춰짐.

라이트 박스의 기능 활용 & 동적으로 캐로셀 이미지 크기, 간격, 보여지는 이미지 개수 조절 가능,

캐로셀 이미지와 캐로셀 버튼의 구분을 위해 이벤트 위임 활용

저장된 데이터(더미 + 로컬스토리지)로 자동완성 검색어를 보여주는 검색창 구현

검색하면 구글 검색 결과 페이지를 띄어주고, 검색어를 로컬 스토리지에 저장

checkAutoComplete() => 검색어의 유사도와 단어 길이의 차이에 대한 가중치 고려

소감

JavaScript와 친해지는데 큰 도움이 되었고, 무엇이든지 구현할 수 있을 것 같은 자신감이 생겼다.

이벤트 위임, dataset, closer 등 배우걸 바로 활용하려고 신경을 썼다.

위 4개의 기능들은 바닐라 자바스크립트만으로 오롯이 혼자서 구현했고 생각보다 어렵지 않다고 느껴졌다.

물론 구현은 했지만, “정말로 코드를 잘 짰나?” 의문이 들긴 한다.

자신의 코드를 잘 설명할 줄 알아야하고, 그럴려면 코드를 잘 짜야한다.

스터디날에는 모여서 서로 자신의 코드에 대해 발표를 하는데, 가독성이 좋은 코드가 발표도 수월했다.

자신의 코드에 대해 20-30분간 쉼없이 발표하면서 발표능력도 약간은 성장한 것 같다.

서로 작성한 코드와 기능을 보면서 많은 동기부여가 되었다.

날 너무 띄워줘서 부담이 심했…

재밌었다.

사실 깨부스터디는 비공식 스터디다.(공식 스터디는 멋사에서 멘토님과 함께 진행을 한다.)

나는 직접 구현하는 스터디를 하고 싶었지만 모집하는 공식 스터디가 전부 이론을 공부하는 스터디였다.

뒤늦게 구현 스터디 깨부가 생겼고 인원도 4명으로 극소수 스터디로 구성되었다.

그럼에도 다들 너무 열심히, 재미있게 스터디를 진행했고 리액트에서도 다시 만나길 기약하며 잘 마무리했다.