본문 바로가기

javascript14

[Javascript] DOM useRef focus 이란? 다음과 같이 만들어 놓은 일기에 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하면 아니라면 focus하기 import { useState } from "react"; const DiaryEditor = () => { const [state, setstate] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setstate({ ...state, [e.target.name]: e.target.vlaue, }); }; const handleSubmit = () => { console.log(state); alert("저장 성공"); } return 오늘의 일기 1 2 3 4 5.. 2022. 4. 9.
[Javascript] React 입력페이지 만들기 input 을 사용한 일기 페이지 만들기 맨 위에 있는 input코드 import { useState } from "react"; const DiaryEditor = () => { const [state, setstate] = useState({ author: "", //content: "", }); const handleChangeState = (e) => { setstate({ ...state, [e.target.name]: e.target.vlaue, }); }; return 오늘의 일기 { console.log(e.target.value); console.log(e.target.name); setstate({ //..state author: e.target.value, content: state... 2022. 4. 9.
[Javascript] state와 props State란? 계속해서 변화하는 특정 상태 상태에 따라 각각 다른 동작을 함 import React,{useState} from "react"; const Counter = () => { const [count, setCount] = useState(0); const onIncrease = () => { setCount(count+1); } const onDecrease = () => { setCount(count-1); } return ( {count} + - ) } export default Counter; State 활용 React에서 import 초기 값을 0으로 설정한다 버튼을 누를 때마다 setCount함수에 증감된 값이 들어간다 setCount 변수의 값이 count 변수로 들어간다 prop.. 2022. 4. 9.
[Javascript] API & fetch 자바스크립트는 비동기 처리를 통해 API를 받아 올 수 있다 API 응용 프로그램 프로그래밍 인터페이스 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다 주로 파일 제어, 창 체어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다 어려운 말을 정리하자면 클라이언트가 서버에 데이터를 요청, 응답하는 것을 API 호출이라고 하며, 다른 프로그램에 데이터를 받기 위해서 말을 거는 행위이다 서버는 내 PC가 아니고 다른 PC에서 받을 수도 있는데 이것을 받을때 Promiose 를 사용하여 비동기 통신을 하여 받을 수 있다 포장지 상태로 데이터 가져오기 let response = fetch('OPEN API 주소') .then(res.. 2022. 4. 7.
[Javascript] anync & await 비동기처리를 동기처럼 직관적인 비 동기 처리 코드 작성할 수 있음 anync function hello() { return "hello"; } async function helloAsync() { return "hello Async"; } console.log(hello()); console.log(helloAsync()); //hello //Promise {} //함수에 async를 붙이면 Promise를 반환하는 비동기 처리를 함 helloAsync().then(res) = { console.log(res); }); //hello Async //then을 사용하여 값을 가져올 수 있음 delay function delay (ms) { return new Promise((resolve) => { setTimeout(reso.. 2022. 4. 7.
[Javascript] 비동기를 동기로 Promise 연속되는 비동기 함수에서 콜백 지옥이 펼쳐지게 된다 이것을 처리할 수 있는 방법은 Promise 객체이다 Promise 함수를 사용하면 콜백함수를 줄지어 사용하지 않아 콜백 지옥을 벗어날 수 있음 비동기 작업이 가질 수 있는 3가지 상태 Pending (대기상태) Fulfilled (성공) Rejected (실패) 상태 변경 Pending → Fulfilled ( resolve ) Pending → Rejected ( reject ) 기본적인콜백함수 function isPositive(number,resolve, reject) { setTimes(() => { if(typeof number === 'number') { //성공 -> resolve resolve(number >= 0? "양수" : "음수".. 2022. 4. 6.
[Javascript] 동기 & 비동기 자바 스크립트가 동작하는 원리 순서대로 실행하는 것과 그렇지 않는 것 들 만약 수행해야 할 작업 (함수) 3개와 작업 실행 (함수 호출) 순서를 지정했다고 갖정해보자 function taskA() { console.log("TASK A"); } function taskB() { console.log("TASK B"); } function taskC() { console.log("TASK C"); } //수행해야 할 작업(함수) 3개 taskA(); taskB(); taskC(); // 작업 실행 (함수 호출) 순서 동기적 처리방식 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다림 → 블로킹 방식 먼저 작성된 코드를 먼저 다 실행하고 나서 .. 2022. 4. 6.
[Javascript] 비 구조화 할당 배열, 객체에서 원하는 값을 쏙쏙 빼오는 방법 비 구조화 할당 배열의 비구조 할당 let arr = ["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); --------------------------------------- let arr = ["one", "two", "three"]; let [one, two, three] = arr; console.log(one, two, three); // 대괄호에 있는 내용을 할당 받아서 사용 // 이것을 비 구조화 할당이라고 함 // 배열의 기본구조 비 구조화 할당 ------------------------------.. 2022. 4. 6.
[Javascript] Spread 연산자 배열과 객체를 한줄로 펼치는 방법 const cookie = { base : "cookie", madeIn : "korea" }; const chocochipCookie = { base : "cookie", madeIn : "korea", toping : "chochchip:" }; const blueberryCookie = { base : "cookie", madeIn : "korea", toping : "blueberry" }; const strawberryCookie = { base : "cookie", madeIn : "korea", toping : "strawberry" } //위와 같이 base와 madeIn은 겹치는 것을 알 수 있음 --------------------------------.. 2022. 4. 5.
[Javascript] 조건문 Upgrade 배열을 사용한 조건문 function isKoreaFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true } return false; } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("파스타"); console.log(food1); console.log(food2); //true, false --------------------------------------- //include 를 사용하여 간단하게 표현 function isKoreaFood(food) { if (["불고기", "떡볶이", "비빔밥"].includes(food) { return t.. 2022. 4. 5.
[Javascript] 논리 연산자를 사용한 단락 회로 평가 논리 연산자의 종류 console.log(true && false); // and console.log(true || false); // or console.log(!true); // not 단락회로 평가 console.log(false && true); // and 연산자는 2개 모두 true 이면 true를 반환 //false가 앞에 나온 시점에서 더 이상 평가 하지않음 // 이것을 단락회로 평가라고 함 console.log(true || false); // or 연산자는 1개만 true 이면 true를 반환 // true가 앞에 나온 시점에서 더 이상 평가 하지않음 const getName = {person} => { return person && person.name; } // 앞에 있는 pers.. 2022. 4. 5.
[Javascript] 삼향연산자 다음과 같이 삼항연산자를 사용하면 간편하게 표현할 수 있음 let a = 3; if (a >= 0) { console.log("양수"); }else{ console.log("음수"); } //양수 ------------------------------------ let a = -3; a >= 0 ? console.log("양수") : console.log("음수"); //음수 let a = []; if (a.length ===0) { console.log("빈 배열"); }else { console.log("안 빈 배열"); } // 빈 배열 ------------------------------------ let a = []; a.lenght === 0 ? console.log("빈 배열") : con.. 2022. 4. 4.
[Javascript] Truthy & Falsy 참 같은 값, 거짓 같은 값 let a = ""; if(a) { console.log("TRUE"); }else { console.log("FALSE"); } // FALSE let b = "안녕하세요"; if(b) { console.log("TRUE"); }else { console.log("FALSE"); } // TRUE let b = undefined; if(b) { console.log("TRUE"); }else { console.log("FALSE"); } // FALSE let b = []; if(b) { console.log("TRUE"); }else { console.log("FALSE"); } // TRUE -> 자바 스크립트에서 본인의 기준에 따라 참 거짓을 구분해줌 -> 이렇듯 참이.. 2022. 4. 4.
[Javascript] 자바 스크립트 기본 (1) Hello word! console.log("Hello World!"); 변수 let age = 20; //let -> 변수 선언 console.log(age); //20 age = 30; console.log(age); //30 let *age = 30; -> 사용불가 let age_$e = 30 -> _, $ 는 사용가능 let 6age =30; -> 숫자가 앞에 나오면 사용불가 let age6 =30; -> 뒤에는 가능 var age =25; console.log(age); //25 //let과 var의 차이는 let은 재정의가 불가능하고 //var는 재정의가 가능함 //혼돈을 막기위해서 let사용을 권장함 const age = 30; console.log(age); //const -> 상수 , 상.. 2022. 3. 31.

티스토리툴바