일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- scflix
- Clone
- react
- 마무리
- Firebase
- coding
- react-native
- javascript
- 오류
- Vanilla
- 바닐라 자바스크립트
- 자바스크립트
- Nomad
- expo
- CSS
- Project
- Nomad coder
- TiMER
- Hook
- Netflix
- 코코아톡
- 계획
- 클론코딩
- github
- HTML
- 느낀 점
- 프로젝트
- vanilla js
- Nicolas
- react-hook
- Today
- Total
목록javascript (27)
꾸매코딩
추가 상단에 NavBar를 만들었고, Router를 통해 경로 지정을 해주었다. 변경 타이머 빈 공간에 0을 조건식으로 작성했었다. {currentHours < 10 ? `0${currentHours}` : currentHours}:{ currentMinutes < 10 ? `0${currentMinutes}` : currentMinutes}:{ currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds} 이러한 방식은 시간을 저장하게 되었을 때 중복이 되고, 불편할 것이라 생각하여 ES7의 padStart를 사용하였다. setCurrentHours(String(hours).padStart(2, '0')) setCurrentSeconds(String(sec..
Spread . . . 으로 나타낸다. Array, Object들 안에 있는 요소(element)를 개별적으로 뽑아낼 수 있다. 뽑아낸 요소들로 새로운 Array, Object 만들기가 용이하다. Spread는 변수를 가져가서 풀어 헤친다(Unpack) [Array] const number = [1, 2, 3] //배열을 풀어 헤쳐서 개별 값들을 출력해줌 console.log(...number) //1 2 3 console.log(number) //[1, 2, 3] const english = ['a', 'b'] //새 배열로 만들어 사용하기 편함 const newArr = [...number, ...english] console.log(newArr) //[1, 2, 3, 'a', 'b'] [Object..
프로미스(promise)를 이해하기 위해서는 JavaScript가 어떤 식으로 작동하는지 알아야 한다. 싱글 쓰레드 언어인 JavaScript는 비동기 처리를 위해서 콜백(Call Back)을 이용해 이를 보완하였다. 하지만 Call Back이 중첩되면서 코드의 복잡도가 증가하고, 예외처리에 어려움이 생기기 시작했다. 이러한 점을 보안하기 위해 프로미스(promise)가 만들어졌다. 비동기 처리 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행함. 비동기 처리 예 - setTimeout() // 1 console.log("First"); // 2 setTimeout(() => { console.log("Second") }, 3000) // 3 console.log("Third") 위..
Destructuring 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. [MDN] 객체나 배열에서 필요한 값을 개별 변수에 저장하는 것 객체 디스트럭처링 (Object destructuring) const settings = { notifications: { follow: true }, color: { theme: "yello" }, }; // 프로퍼티 key값을 기준으로 Destructuring되어 할당된다. const { notifications: { follow }, color} = settings; console.log(follow, color); // true { theme: 'yello' } 예시 //선언 co..
절대 경로 설정 방법 프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 경로 (Path) 문서, 파일, 그림 등의 위치 예) C:\Users\Someone\Desktop\Example 상대 경로 (Relative Path) 현재 위치를 기준으로 나타냄 상위 폴더, 하위 폴더, 현재 폴더 (동일한 Level)를 연결함 예) 상위 폴더 : ../디렉토리명/파일명 하위 폴더 : ./디렉토리명/파일명 현재 폴더 : ./파일명 import Home from '../routes/Home'; 절대 경로 (Absolute Path) 루트(root) 디렉토리를 ..
Arrow function ES6 문법 중 하나 this, arguments, super 또는 new.target을 바인딩하지 않음 항상 익명 메소드 함수가 아닌 곳에 적합 - 생성자로 사용할 수 없음. Arrow function 선언 // 함수 표현식 function() { ... } // 화살표 함수 표현식 () => { ... } // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 때 num => { ... } // 매개변수가 하나일 때, 소괄호 생략 가능 // implicit return → 함수와 return 식이 한줄이면, 중괄호{}를 생략하고 암묵적으로 return 된다. num => { return num++ } num => num++ // 위 표현과 동일 () => ..