doeunn.log

▶자바스크립트 올림/내림/반올림 메서드 이번에는 Math 라는 객체의 메서드를 이용하여 올림/내림/반올림을 하는 방법에 대해 알아보도록 하겠습니다. 📌 올림 - Math.ceil() Math.ceil(22.2); // 23 📌 내림 - Math.floor() Math.floor(22.7); // 22 📌 반올림 - Math.round() Math.round(33.6); // 34

▶자바스크립트 Reduce 메서드 이해하기 오늘은 코딩테스트 문제를 해결하다가 알게된 Reduce 메서드에 대해 알아보도록 하겠습니다 :) 🔎 Reduce 메서드란? 사전에서는 reduce는 줄이다. 라는 의미로 해석되죠? reduce 메서드는 map, forEach와 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 하는 메서드이지만 map과 forEach와는 조금 다른 부분들이 있는데요. 📌 문법 reduce 메서드는 아래와 같이 두 개의 파라미터를 가지고 있는데요. // reduce const numbers = [1, 2, 3, 4]; numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => { return 다음누산값; }, 초기누산값); 파리미터1️⃣ 콜백 함수 첫..

▶나누기 - 몫, 나머지 🔎 나누기 우리가 흔히 알고 있는 나누기는 / 을 사용합니다. const num = 10 / 3 ; // 3.3333... 📌 몫 구하기 몫만을 구하고 싶을 떈 나머지를 제거해주는 내림함수 Math.floor()을 활용하면 됩니다. const num = Math.floor(10 / 3); // 3 📌 나머지 구하기 나머지를 구하고 싶을 땐 %을 사용하면 됩니다. const num = 10 % 3; // 1

▶리액트(React)를 알아보자 리액트 프로젝트 파일을 생성하기 전에 리액트가 무엇인지, 구동원리는 무엇인지, 핵심 컨셉은 무엇인지! 등에 대해 알아보려고 합니다🙂! 🔎 React ? React란 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 라이브러리 입니다. 📌 라이브러리 ? (도서관 = 모듈들의 집합) 간혹 프레임워크와 라이브러리가 혼동될 때가 있는데요. 같이 알아봅시다! 프레임워크 코드를 작성할 때 필요한 틀을 제공해 주는 것 따라서 개발을 할 때 제어권이 개발자가 아닌 프레임워크에게 존재. 개발할 때 프레임워크가 가지고 있는 규칙에 의해 작성 ex) Spring, Django, nextJS, nuxtJS 라이브러리 같은 로그인 로직이라 하더라도 passportJS, g..

▶리액트 useEffect 잘 알고 사용하자...😱 useEffect를 어설프게 알고 사용하다 보니 사용하는 이유라던가 혹은 무한루프를 돌거나 하는 일이 종종 있었는데요.. 이번 글을 통해 앞으로는 확실하게 알고 올바르게 사용해 보려고 합니다 😀! 🔎 리액트에서 반드시 짚고 넘어가야 하는 개념 아래와 같은 코드가 있다고 해봅시다. export default function Test() { const [count, setCount] = useState(0); const onClickButton = () => { count += 1; console.log(count); } return( {count} 증가 ); } 리액트에서 위와 같이 코드를 작성하고 증가 버튼을 눌러보면 다음과 같이 되게 되는데요. 에러를..

▶자바스크립트 async와 await 자바스크립트 지난 글들에서 비동기 처리에 대해 다뤄보았었습니다. 이번에도 비동기 처리와 관련된 async와 await에 대해 알아보겠습니다. 🔎 async & await ? async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와주었습니다. 개발자에게 읽기 좋은 코드? 처음 프로그래밍을 배웠을 때 아래와 같이 변수와 조건문을 사용했던 기억이 있으실 겁니다! var user = { id: 1, name: 'Josh' }; if (user.id === 1) { console.log(user.name); // Josh } 이 ..