| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
- javascript
- Nomad coder
- TiMER
- 프로젝트
- 코코아톡
- Nicolas
- Project
- Netflix
- react-native
- scflix
- vanilla js
- 자바스크립트
- react
- expo
- react-hook
- coding
- 오류
- Hook
- Vanilla
- Clone
- 느낀 점
- 바닐라 자바스크립트
- CSS
- github
- 계획
- HTML
- 마무리
- 클론코딩
- Nomad
- Firebase
- Today
- Total
목록HTML (19)
꾸매코딩
[CSS] HTML <img> vs background-image 차이 비교
서론 이미지는 항상 HTML 태그를 사용하여 나타냈었는데, Scflix 프로젝트를 진행하면서 background-image를 사용하게 되었다. 둘 다 이미지를 나타낸다는 공통점이있는데, 두 방식의 차이점을 알아보고 어떤 방식이 더 나은지 정리를 해보려고 한다. 사용 방법 // HTML img tag // CSS background-image HTML HTML 에서 사용 가능 background-image 보다 SEO에 효과적 background-image 보다 성능에 효과적 default 이미지 포함 가능 이미지 불러오지 못했을경우 default 값으로 Broken image와 alt 텍스트가 보인다. background-image CSS에서 사용 가능 순수하게 디자인에 사용 이미지가 콘텐츠의 일부가 아..
[React] new Date(), state를 활용한 동적인 현재시간 나타내기
오류 import React, { useState } from 'react' export default function App() { const [timer, setTimer] = useState('0'); const currentTimer = () => { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); return (`${hours}:${minutes}:${seconds}`) } const cu..
[React] Hook이란 무엇인가?
Hook 이란? Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다. Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. [react reference] Hook은 class 없이 React 기능들을 사용하는 방법을 제시 → Hook을 통해 function component에서 state와 lifeCycle 사용 가능 Hook 사용 시 장·단점 장점(function component) 단점(class component) 계층의 변화 없이 상태 관련 로직을 재사용할 수 있음 컴포넌트 사이..
[React] React란 무엇인가? - React에 대한 개념 정리
React 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. [위키백과] facebook에서 제공해주는 프론트앤드 라이브러리. 사용자가 조작하기 위한 UI를 만들도록 도와줌. component 기반 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 사용 React 특징 1. Component 기반 구조 2. Data Flow 3. JSX 4. Virtual Dom 5. Props and State 1. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈이다. 스마트폰 액정이 고장 나면 서비스센터에 방문하여 액정을 고치면 된다. 스마트폰 배터리가 고장 나면 배터리를 고치면 된다. '액정', '배터리' 이를 Component 비유할 수 있..
[Javascript] HTML에 Font Awesome 아이콘 출력하기
서론 JavaScript 이용해서 HTML 상에 Font Awesome 아이콘 나타내기 몇 번의 삽질과 미리 경험해보시고 정보를 남겨주신 분들이 있어서 쉽게 해결할 수 있었다. 방법 1. const icon = document.createElement("i"); icon.innerHTML = '' 방법 2. const icon = document.createElement("i"); icon.setAttribute("class","far fa-trash-alt"); 참고자료 https://breathtaking-life.tistory.com/26 [JavaScript] (해결) 동적으로 font awesome 아이콘 추가하기 나는 쇼핑목록 앱을 만들고있다. TO DO LIST처럼 쇼핑할 물건들을 적는 리스..
[Vanilla JS] Menu 만들기
HTML 태그를 나누고 배열하는데 여러 번 헤매었던 것 같다. 상단 메뉴만 만드는 것은 생각보다 쉬웠는데, 메뉴 안에 하위 메뉴를 출력하려하니 HTML 코드가 이상하게 되어있는 것 같아서 코드를 여러 번 수정했다. [ HTML ] Home Sports Home Sports Food Items Setting Food Home Sports Food Items Setting Items Setting HTML에서 사용된 icon은 Font Awsome에서 받아왔다. https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. Mo..