[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프_프론트엔드(리액트) 15일차 - 리액트 기본 개념 및 문법 과제 : 대기모드 화면 웹사이트 구축하기
과제 결과물 : https://udemy-team13.github.io/training/syj/0620/07.html
1) 과제 요구사항
대기모드 화면 웹사이트로 구축하기
- vanilla js로 배경이미지 랜덤 변경
- vanilla js로 인사 만들기
- vanilla js로 시계 만들기
2) 코드작성
중간정렬을 하면서도 여러개의 콘텐츠를 배치해야되었기에 단순히 display:flex를 이용해서 정렬하는 방법으로는 쉽지 않았다. 따라서 position과 margin을 활용하여 다소 지저분한 방법으로 중간정렬을 시행했다. 또한 innerHTML 메소드에 사용자 정의 변수와 HTML 구문을 혼용하기 위해 백틱 구문을 활용하였다. 마지막으로 아래의 CODEPEN에서는 반영되지 않았지만, animation 기능을 활용하여 이미지 전환 시, fade-out 되도록 구현해놓았다.
3) 결과
4) 과제 회고(느낀점)
지난 과제에서 깨달은 바를 적용해 전체 레이아웃에서 display:flex 대신 다른 방법을 활용하였다. 이렇게 하니 내부 element들이 block 형식으로 유지되어 번거롭게 코드를 손보지 않아도 되어 편리했다. 하지만 만일 내부 컨텐츠의 크기가 가변적이었다면 보다 복잡해졌을 것이다. 이럴 때를 대비해 복잡한 레이아웃 디자인을 위해서는 grid 기반 디자인이 선행되어야 할 것이다. 기존에는 grid를 table의 상위버전으로써만 알고 있었기에, grid를 이용하여 레이아웃을 디자인하는 방법을 익힐 필요가 있어 보인다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃
#IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프
————————————————————————————————————————
본 후기는 유데미 x 스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지(B-log) 리뷰로 작성되었습니다.
