it/web_dev11 자바스크립트 for in과 for of 비교하기 자바스크립트는 다양한 반복문을 제공하여 데이터를 처리하는데 사용됩니다. 그 중에서도 'for in'과 'for of'는 자주 사용되는 반복문 중의 두 가지입니다. 이번 블로그 포스트에서는 'for in'과 'for of' 반복문에 대해 자세히 알아보고, 두 반복문의 차이점과 각각의 적절한 사용 사례에 대해 알아보겠습니다. 'for in' 반복문 'for in' 반복문은 객체의 속성들을 반복하여 처리하는데 사용됩니다. 이 반복문은 객체의 속성들을 순회하며 해당 속성의 키(key)를 변수로 할당합니다. 이제 'for in' 반복문을 사용하는 예제를 살펴보겠습니다. const person = { name: 'John', age: 30, occupation: 'Engineer' }; for (let key in.. 2023. 7. 24. react component에서 promise객체 직접사용 에러 Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. 해당 에러는 React에서 컴포넌트의 자식으로 프로미스(Promise) 객체를 직접 사용하려고 할 때 발생합니다. React는 컴포넌트를 렌더링할 때 자식으로 사용되는 요소들은 일반적으로 문자열, 숫자, 불리언, 다른 React 컴포넌트 등의 유효한 값이어야 합니다. 프로미스는 비동기 작업을 수행하고 완료될 때까지 대기하는 객체입니다. 하지만 React에서는 프로미스 객체를 직접 렌더링할 수 없으며, 프로미스의 결과를 받아서 렌더링해야 합니다. 즉, .. 2023. 7. 3. Next.js에서 데이터 렌더링 방식 비교와 getStaticProps(SSG), getServerSideProps(SSR) 활용 Next.js는 데이터를 효과적으로 가져오고 렌더링하는데에 있어서 두 가지 주요 방식인 정적 사이트 생성(SSG)과 서버 사이드 렌더링(SSR)을 지원합니다. 또한, 이를 구현하기 위해 getStaticProps와 getServerSideProps라는 두 가지 메서드를 사용합니다. 이제 각각의 개념과 차이점에 대해 자세히 알아보겠습니다. 정적 사이트 (Static Site Generation) - getStaticProps getStaticProps는 Next.js에서 사용되는 메서드로, 정적 사이트 생성에 활용됩니다. 이 방식은 페이지가 빌드될 때 미리 데이터를 가져와 페이지를 사전 렌더링합니다. getStaticProps를 사용하여 데이터를 가져오면, 빌드 시간에 한 번 호출되며, 이후에는 정적인 데.. 2023. 7. 1. 자바스크립트 커링(Currying) 함수 이해하기 커링 함수는 함수의 인자를 여러 개의 인자를 받을 수 있는 함수로 변환하는 과정을 말합니다. 이 글에서는 자바스크립트 커링 함수의 개념, 장점, 예시, 그리고 활용 사례에 대해 알아보겠습니다. 커링 함수(currying function)란? 커링(Currying)은 함수를 여러 개의 인자를 받는 함수로 나누는 기법입니다. 커링은 함수형 프로그래밍에서 사용되며, 함수의 재사용성과 일부 인자를 미리 지정하여 새로운 함수를 생성하는 유연성을 제공합니다. 커링 함수의 장점 커링 함수는 다음과 같은 장점을 가지고 있습니다. 재사용성 커링 함수를 사용하면 함수를 더욱 재사용하기 쉽게 만들 수 있습니다. 일부 인자를 고정시켜 놓고 나머지 인자만 받는 새로운 함수를 생성할 수 있기 때문에, 같은 로직을 다양한 인자에 .. 2023. 6. 28. nextjs에서 route 설정하기 nextjs는 react보다는 route설정이 간단하여 라이브러리를 설치할 필요없이 프로젝트의 pages디렉토리에 경로이름으로 폴더를 생성하고 그 폴더안에 js파일은 해당 페이지의 route를 나타내고, 자동적으로 인식합니다. route설정하기 정적 라우팅 미리 route주소를 지정하여 페이지를 생성하는 방식을 말합니다. pages 디렉토리안에 api폴더와 events폴더를 만들면, nextjs에서 자동적으로 /api와 /events는 route로 지정됩니다. 루트 경로는 pages폴더의 index.tsx만이 해당 됩니다. 동적 라우팅 url경로에 따라 동적으로 페이지를 생성하는 방식입니다. 예를 들어 상품리스트 페이지가 있다고 하면, 리스트중 각각 하나의 아이템에 부여되는 id값을 이용하여 헤딩 아이템.. 2023. 6. 27. 동적 타입 시스템 동적 타입 시스템(Dynamic Typing)은 변수의 타입이 실행 시간(runtime)에 동적으로 결정되는 타입 시스템입니다. 동적 타입 언어에서는 변수의 타입을 명시적으로 선언하지 않고, 변수에 할당되는 값에 따라 타입이 동적으로 결정됩니다. 이는 컴파일 시간이 아닌 프로그램이 실행되는 동안에만 타입 검사가 이루어지는 것을 의미합니다. 특징 타입 선언 생략 변수에 타입을 명시적으로 선언하지 않아도 됩니다. 변수에 값을 할당할 때, 해당 값의 타입에 따라 변수의 타입이 동적으로 결정됩니다. 동적 타입 변환 변수의 타입은 실행 시간에 동적으로 변환될 수 있습니다. 동적 타입 언어는 변수에 다른 타입의 값을 할당할 수 있고, 필요에 따라 타입 변환이 발생할 수 있습니다. 유연성과 편의성 동적 타입 언어는 .. 2023. 6. 26. javascript의 배열을 객체로 변경하기 배열객체형태의 데이터에서 프로퍼티의 값을 새로 객체 형식으로 변한하는 방법이 무엇인지 알아보겠습니다. 문제 코드 const arr = [ { category: "LGT", fcstValue: "0" }, { category: "PTY", fcstValue: "0" }, { category: "SKY", fcstValue: "1" }, ]; const types = { LGT: 0, PTY: 0, SKY: 1 }; arr라는 배열 객체 코드에서 category의 값을 새로 생성할 객체의 propery로, fcstValue의 값을 새로 생성할 객체의 value로 선언하여 types라는 새로운 객체로 만들어 보겠습니다. 변경하기 let types = {}; arr.forEach((element) => { ty.. 2023. 6. 26. innerHTML과 appendChild 선언 방식 innerHTML이 중복으로 선언되면 최신으로 선언된 것만 출력 appendChild은 부모 요소에서 자식 요소를 하나의 노드만 추가 할 수 있는 메서드 코드로 확인 index.html 자식 요소가 없는 id값이 root인 div요소 선언 index.js import List from "./list.js"; const $root = document.getElementById("root"); $root.innerHTML = `Hello`; new List({ $root }); id값이 root인 div를 변수 $root로 지정하여 innerHTML을 이용하여 자식 요소로 hello내용인 div요소 넣기 list.js export default function List({ $root }) { $root.in.. 2023. 6. 26. 이전 1 2 다음
