전체 글 썸네일형 리스트형 [JavaScript] 숫자 타입의 정수와 실수의 관계 자바스크립트에서는 추상적 비교 연산인 == 키워드를 제공한다. 추상적 비교 연산을 이용하여 값을 비교한다면 의도치 않은 결과값을 반환할 수 있다. 1 == '1' // true 의도치 않은 결과를 방지하기 위해 ES5에서는 보다 엄격한 비교 연산인 === 키워드를 제공한다. 1 === '1' // false 정수와 실수를 비교 연산하면 결과값은 true일까 false일까? 1 === 1.0 // true 자바스크립트에서 숫자 타입은 모두 실수로 처리되기때문에 정답은 true이다. 정수가 아닌 실수로 처리되기 때문에 정수끼리 나누기 연산을 하더라도 실수가 출력된다. 16/5 // 3.2 또한, 자바스크립트에서는 2진수, 8진수 16진수를 표현하기 위한 타입을 제공하지 않기 때문에 모두 10진수로 표현된다... 더보기 [JavaScript] 변수 선언과 값 할당의 메모리 구조 JavaScript에서 변수 선언과 할당에 따른 메모리 구조는 다음과 같습니다. JavaScript는 변수 선언과 값 할당을 함께 표현하여도 변수 선언과 할당을 나눠서 표현합니다. // 개발자가 작성한 코드 let value = 'hello'; // 자바스킯트 엔진이 실행하는 코드 let value = undefined; value = 'hello'; 같은 변수에 값을 할당하기 때문에 사용했던 메모리 공간에 값을 할당할 것이라고 생각할 수 있지만 실제로는 새로운 메모리 공간을 생성하여 값을 저장합니다. 새로운 값을 할당하여도 새로운 메모리 공간을 생성하여 값을 저장합니다. 이후 참조되지 않은 불필요한 값들은 가비지컬렉터에 의해 정리됩니다. 더보기 [JavaScript] 호이스팅(hosting)의 이해 JavaScript에서 var 키워드를 사용하는 경우 호이스팅을 조심해야합니다. 즉, 변수 사용 시 예상하지 못한 결과를 반환할 수 있습니다. 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. https://developer.mozilla.org/ko/docs/Glossary/Hoisting 호이스팅 - 용어 사전 | MDN JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다 developer.mozilla.org 호이스팅으로 인해 발견되는 문제점을 보완하기 위해 ES6에서.. 더보기 [JavaScript] 배열 내 특정 값 찾기 - find(), includes() ,Set 객체의 has() find() 메서드를 통해 배열 내 특정 값 찾기 const array = [1, 2, 3, 4]; array.find(data => data === 1);// 1 array.find(data => data === 3);// 3 array.find(data => data === 5);// undefinded 주어진 조건을 만족하는 값을 출력한다. 주어진 조건을 만족하는 값이 존재하지 않을 경우 undefinded를 리턴한다. includes() 메서드를 통해 배열 내 특정 값 찾기 const array = [1, 2, 3, 4]; array.includes(1)// true array.includes(3)// true array.includes(5)// false 값이 존재하는 경우 true를 리턴한다... 더보기 [JavaScript] Set 객체를 통해 배열 중복 제거 const array = new Set([1, 2, 3, 3, 2, 1]); console.log(array) // {1, 2, 3} 더보기 [React][Next.js] <Link></Link>를 통한 라우터 기능 - <Link> 내부에 <a> 태그를 넣는 이유 사용 방법 import Link from 'next/link' function Home() { return ( About ) } export default Home Next.js에서 라우터 기능은 다음과 같이 사용합니다. ... 형식을 사용하지 않는 이유 React는 SPA(Single Page Application)구조를 가지고 있어 하나의 페이지에서 모든 행위들이 일어나야하는데 About us 형식을 사용하게 되면 새로고침(페이지 이동)을 하기 때문입니다. 내부에 태그를 넣는 이유 About 위와 같이 태그를 넣지 않아도 넣은 것과 외관상 차이가 없으며 기능도 정상적으로 동작하는 것을 확인할 수 있습니다. About 그러나 위와 같이 태그 내부에 class 요소를 추가하여 HTML를 랜더링하면 cla.. 더보기 [react-router-dom][v6] URL 파라미터를 통해 하위 경로로 이동하기 영화 리스트를 보여주는 페이지와 특정 영화의 상세 정보를 보여주는 페이지를 react-router-dom 패키지를 통해 구현하고자 했다. 다음과 같이 구현해도 정상적으로 동작하였지만 'movies'가 공통적으로 들어가기 때문에 하나의 그룹으로 경로를 묶고자 하였다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 따라서 다음과 같이 'movies'를 그룹화하여 구현하였다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 처음에는 다음과 같이 구현하였지만 정상 작동하지 않았다. // 영화 리스트를 보여주는 페이지 // 영화 상세정보를 보여주는 페이지 공식 문서에서 어떤 차이가 있어 정상 동작하지 않는지 확인하고자 하였으나 해당 페이지에는 별도의 내용이 기술.. 더보기 useState에서 이전 값을 참조하여 state값 변경하기 버튼을 클릭하여 이전 state 값을 2로 업데이트 하는 방법 올바른 방법 정상적으로 2씩 state가 증가됨. function App() { const [state, setState] = useState(0); const onClick = () => { useState((prev) => prev + 1); useState((prev) => prev + 1); }; {state} Count Up } 올바르지 않은 방법 1씩 증가됨. function App() { const [state, setState] = useState(0); const onClick = () => { useState(state + 1); useState(state + 1); }; {state} Count Up } 왜 1씩 증가되는가.. 더보기 이전 1 2 3 4 ··· 10 다음
