일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- coding
- Nomad coder
- 느낀 점
- scflix
- github
- react-native
- HTML
- 클론코딩
- 계획
- react
- Nomad
- Nicolas
- TiMER
- 프로젝트
- 오류
- Project
- 바닐라 자바스크립트
- 마무리
- Clone
- 자바스크립트
- vanilla js
- Vanilla
- react-hook
- 코코아톡
- Hook
- Netflix
- CSS
- javascript
- Firebase
- expo
- Today
- Total
목록javascript (27)
꾸매코딩
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 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. [위키백과] facebook에서 제공해주는 프론트앤드 라이브러리. 사용자가 조작하기 위한 UI를 만들도록 도와줌. component 기반 싱글 페이지 애플리케이션, 모바일 애플리케이션 개발 시 사용 React 특징 1. Component 기반 구조 2. Data Flow 3. JSX 4. Virtual Dom 5. Props and State 1. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈이다. 스마트폰 액정이 고장 나면 서비스센터에 방문하여 액정을 고치면 된다. 스마트폰 배터리가 고장 나면 배터리를 고치면 된다. '액정', '배터리' 이를 Component 비유할 수 있..
1. forEach forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행 [return value는 없음] 배열의 각 요소에 대해 실행. 중간에 break 문을 사용할 수 없음. 종료를 위해선 throw(예외)를 발생시켜야 함. 구문 arr.forEach(callback(element[, index[, array]])[, thisArg]) element : 처리할 현재 요소. index : 처리할 현재 요소의 인덱스 (= 현재 element의 index값). array : forEach를 호출한 배열. thisArg : callback을 실행할때 this로 사용되는 값. 예제 const array = [1,2,3,4,5]; const result1 = array.forEach((eleme..
서론 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처럼 쇼핑할 물건들을 적는 리스..
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..
HTML draggable="true" 속성을 사용해서 드래그를 가능하도록 하고 정해진 div에서 이동이 가능하도록 만들어 보았다. [ HTML ] [ CSS ] body { background-color: rgba(0, 0, 0, 0.3); } .fill { background-image: url("http://source.unsplash.com/random/100x100"); position: relative; height: 100px; width: 100px; top: 5px; left: 5px; cursor: pointer; } .empty { display: inline-block; height: 110px; width: 110px; margin: 10px; border: 3px solid rg..