투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

반복문 while반복문 while (condition) { // 코드 // '반복문 본문(body)'이라 불림 } condition(조건)이 truthy 이면 반복문 본문의 코드가 실행됩니다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } i++가 없었다면 이론적으로 반복문이 영원히 반복되었을 겁니다. 그런데 브라우저는 이런 무한 반복을 멈추게 해주는 실질적인 수단을 제공합니다. 서버 사이드 자바스크립트도 이런 수단을 제공해 주므로 무한으로 반복되는 프로세스를 종료할 수 있습니다. let i = 3; while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다. alert( i ); i--; } 본문이 한 줄..

배열 let arr = new Array(); let arr = []; let fruits = ["사과", "오렌지", "자두"]; alert( fruits[0] ); // 사과 alert( fruits[1] ); // 오렌지 alert( fruits[2] ); // 자두 아래는 배열 끝에 무언가를 해주는 메서드입니다. pop 배열 끝 요소를 제거하고, 제거한 요소를 반환합니다. let fruits = ["사과", "오렌지", "배"]; alert( fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 얼럿창에 띄웁니다. alert( fruits ); // 사과,오렌지 push 배열 끝에 요소를 추가합니다. let fruits = ["사과", "오렌지"]; fruits.push("배..

if문 if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행됩니다. if (…) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환합니다. 형 변환 챕터에서 배운 형 변환 규칙을 잠시 상기해 봅시다. 숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 됩니다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다. 이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이라고 부릅니다. 조건부 연산자 '?' let accessAllowed; let age = prompt('나이를 입력해 주세요.', ''); if (age > 18) { accessAllowed = true;..

alert('Hello'); alert('World'); 코드의 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는것이 일반적이다. alert('Hello'); alert('World'); alert("에러가 발생합니다.") [1, 2].forEach(alert) alert만 제대로 출력되고 에러가 발생하는 걸 확인할 수 있습니다. alert 끝에 세미콜론을 추가해 다시 실행하면 코드는 잘 작동합니다. alert("제대로 동작합니다."); [1, 2].forEach(alert) “제대로 동작합니다.” 메시지 다음에 1과 2가 나타나는 것을 확인할 수 있죠. 세미콜론이 없을 때 에러가 발생했던 이유는 자바스크립트가 대괄호 [...]앞에는 세미콜론이 있다고 가정하지 않기 때문입니다. alert("에러가 ..

리엑트에서 DOM조작하기 focus() input태그를 마우스로 클릭하여 입력상태로 만든것을 포커스를 얻었다고 한다. 그리고 입력상태를 떠난것을 포커스가 벗어났다고 한다. import { useState, useRef } from "react"; const DiaryEditor = () => { const authorInput = useRef() const contentInput = useRef() const [state, setState] = useState({ author: "", content: "", emotion: 1, }) const handleChangeState = (e) => { setState({ ...state, //author:state.author //content:state.co..

JSX (리엑트에서 주로 사용하는 표현식) 리엑트는 자바스크립트 기반으로 동작한다. 컴퍼넌트 만들기 헤더역할을 할 컴퍼넌트 먼저 만든다. src디렉토리 아래에 파일을 하나 생성한다. MyHeader.js MyHeader.js 파일안에 파일을 내보낼 수 있도록 써주고 export default MyHeader; 3. app.js안에 상단에 불러와준다. import MyHeader from './MyHeader' 4. 태그를 넣어줄 곳에 MyHeader을 넣어준다. return ( //여기에 넣어준다! 안녕 리엑트 {name} ); } css주기 htnl에서는 css를 줄때 class를 class = “ “ 이렇게 줬었는데 jsx에서는 class가 자바스크립트의 예약어이기 때문에 사용이 불가하다. css를 ..

Node.js란 기능별로 파일을 분리하고 모듈로 가져오는 방법 Common JS // 계산 기능을 하는 파일 (calc.js) const add = (a, b) => a + b; const sub = (a, b) => a - b; module.exports = { //모듈을 내보낼 수 있다. moduleName: "calc module", add: add, sub: sub } // index.js const calc = require("./calc"); //require()외부 모듈을 가져올 수 있다. console.log(calc.add(1, 2)) console.log(calc.add(4, 5)) console.log(calc.sub(10, 2)) //3 //9 //8 패키지 - 누군가 따로 만들어놓..

오늘 진짜 개발공부 시작하고 역대로 현타오는 날이였다.. 분명 어제도 너무 어려웠고 새로운게 수두룩빽빽이였는데 오늘은 뭔가 어제보다 배운 다양성은 적긴한데 promise가 그냥 날 미궁으로 이끌었고 현타를 씨게맞아버렸다. 지금까지 배운 자바스크립트는 정말 적었었고 기본이라는 promise마저 천천히 듣고 이해하려하고 외워보려했지만 제대로 알지 못했다. 자바스크립트 응용 spread 중복된 프로퍼티를 새로운 객체에 펼치는 역할. ... const cookie = { base: "cookie", madeIn: "korea" } const chocochipCookie = { ...cookie, toping: "chocochip" } const blueberryCookie = { ...cookie, toping..