본문 바로가기

반응형

vanillajs

(4)
[Javascript] Momentum 만들기 - 배경화면 완성 오늘의 기본으로 돌아가는 Javascript, Momentum 만들기 구현 작업 내용 시간과 인사말, todo가 잘 보이도록 글씨 색깔 변경 시간과 인사말에 'fade in' 애니메이션 부여 배경화면 완전한 이미지가 될 수 있도록 설정 # background 지정 방식을 태그로 조정 배경화면 기능을 완성하고, 날씨 api를 활용하는 것으로 nomadcoder에서 제시한 momentum 작업을 끝내고, 이후에는 추가로 구현해보고 싶은 기능들을(선택한 나라의 인사말 적용, 등) 구현하고, 디자인을 입히는 것으로 마무리하려고 한다. 6월 안에는 마무리할 수 있기를. 1. 시간과 인사말, todo가 잘 보이도록 글씨 색깔 변경 사용되는 배경화면이 전체적으로 어둡기 때문에 글씨가 잘 보일 수 있도록 하얀색으로 변..
[Javascript] Momentum 만들기 - 배경화면 기능 구현 배경화면 기능 구현을 진행하였다. 수행할 작업 내용은 배경 이미지로 사용할 이미지를 불러와 배열에 저장한다. 배열에 저장된 배경 이미지 중 랜덤하게 하나를 불러와서 화면에 표시한다. 이 두 가지 작업에 더해서 추가적으로 사용자가 원하는 이미지를 불러와서 배경화면으로 설정하는 기능을 추가로 구현해보고자 한다. 일단, 오늘 작업은 위 1, 2번 작업을 진행하는 것으로. 1. 배경 이미지로 사용할 이미지를 불러와 배열에 저장하기 1. Google에서 "Momentum background image"로 검색해서 3가지 이미지를 저장, images 폴더 내에 저장하였다. 2. 코드 내에서 상수 형태로 이미지가 담긴 배열을 생성한다. const IMAGES = ['images/1.jpg', 'images/2.jpg..
[Javascript] Momentum 만들기 - 현황 노마드코더에서 강의하는 Momentum 클론 코딩 프로젝트는 4가지를 구현하는 것을 목표로 한다. 현재 시간을 보여줄 수 있는 clock.js 입력받은 이름에 인사말을 건네는 greetings.js todo 작성할 수 있는 todo.js 배경이미지를 랜덤으로 설정해주는 background.js 여기에 추가로 날씨 api를 받아서 현재 지역의 날씨를 표현하는 기능 또한 추가로 있다. 구현해야 하는 기능들에 대해서 현재까지 내가 구현된 기능들을 보면 아래 그림과 같다. 현재 시간을 사용자에게 표시해주는 clock.js 사용자에게 이름을 입력받아 인사를 건네주는 greetings.js todo를 작성할 수 있는 todo.js 이렇게 3가지의 코드가 기능상으로는 작성되어 있다. 하지만 그림에서 확인할 수 있듯이..
[Javascript] Momentum 만들기 - 소개 Momentum 만들기 강의 원본 : https://nomadcoders.co/ Watch Now - 노마드 코더 Nomad Coders nomadcoders.co 바닐라 자바 스크립트를 공부하기 전에 리액트와 같은 프레임워크를 사용하지 마라. 노마드 코더로 유명한 니콜라스가 바닐라 자바스크립트 강의뿐만 아니라 프론트 엔드 관련된 내용이 나올 경우 하는 말이다. 정확한 워딩은 아니지만 핵심 내용은 바닐라 자바스크립트를 할 수 있어야 프레임워크를 사용하더라도 더 잘 사용할 수 있다는 점이다. 학교에서는 프론트엔드에 대한 강의가 없어 기초를 제대로 다지지 못했고, 프론트엔드에 대해서 주변에서 하는 말들인 '그냥 리액트나 뷰, 앵귤러를 쓰면 되서 자바스크립트 기본 문법만 알면 된다.'는 말만 주워듣고 바닐라 ..