전체 글74 [Next.js] getServerSideProps와 Head 태그로 검색 엔진 최적화하기 getServerSideProps와 Head 태그로 검색 엔진 최적화하기 검색 엔진에 유리하다는 Next.js를 사용해보자! # getServerSideProps 이용해서 API 데이터 가져오기 우선 코드 가장 하단에 getServerSideProps를 작성해주고 export default function에 { results } 형식으로 데이터를 가져온 뒤, 타입을 지정해주면 된다. // TypeScript 이용 시 타입 지정을 위해 아래 내용을 import 해주기 import { GetServerSideProps, InferGetServerSidePropsType } from "next"; export default function Home({results }: InferGetServerSideProp.. 2023. 4. 16. [자료구조] 정렬 정렬 정렬되지 않은 배열이 주어졌을 때, 어떻게 오름차순으로 정렬할 수 있을까? 알고리즘에서 정렬의 방식은 크게 3가지로 설명할 수 있는데, 바로 버블 정렬, 선택 정렬, 삽입 정렬이다. 각 정렬이 무엇인지 알아보고 Big O를 비교하며 그 의미를 파악해보자. # 버블 정렬 : 두 개의 아이템 비교 1. 배열의 두 개 아이템을 비교한다. 만약 왼쪽이 오른쪽보다 크다면 순서를 바꾼다. 2. 오른쪽으로 이동하여 다시 두 개의 아이템을 비교한다. 3. 이 동작을 반복한다. 예제 (자료 출처 : https://youtu.be/Bor_CRWEIXo) 1. 5와 2를 비교한다. 5가 2보다 크기 때문에, 순서를 바꾼다. 2. 5와 6을 비교한다. 6은 5보다 작기 때문에, 순서를 바꾸지 않고 다음으로 넘어간다. 3.. 2023. 4. 2. [JavaScript] 프로퍼티 어트리뷰트 프로퍼티 어트리뷰트 # 내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 것이다. 콘솔 창에서 이중 대괄호로 감싼 이름들이 바로 내부 슬롯과 내부 메서드이다. 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이므로 개발자가 직접 접근하거나 호출할 수 없다. 그러나 일부에 한에서 간접적으로 접근하는 수단이 있긴 하다. 예를 들어, 모든 객체는 [[Prototype]]이라는 내부 슬롯을 갖는다. 원칙적으로는 직접 접근할 수 없지만, [[Prototype]]의 경우, __proto__를 통해 간접 접근이 가능하다. const obj = { name: "kim", age: 20, id: 123, }; console.log.. 2023. 3. 31. [JavaScript] 클로저 클로저 # 클로저(Closure)란 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여, 만일 자신이 선언됐을 때의 스코프 밖에서 호출되어도 스코프에 접근할 수 있는 함수를 말한다. 클로저는 자바스크립트 고유의 개념이 아니라 함수형 프로그래밍 언어에 등장하는 보편적인 특성이다. 객체지향 프로그래밍과 함수형 프로그래밍을 모두 아우르는 개념이기에 매우 중요하다. 예시를 통해 알아보자. function outer() { const x = 10; const inner = function () { console.log(x); }; return inner; } const result = outer(); result(); // 10 함수 outer는 내부함수.. 2023. 3. 27. [JavaScript] this this # this란 this는 값을 가르키는 키워드이다. this가 가르키는 값은 실행 컨텍스트가 생성될 때 함께 결정된다. 만약 함수를 호출한다면, 함수가 호출될 때 실행 컨텍스트가 생성되고 this가 가르키는 값도 결정된다. 다양한 상황에서 this가 어떤 값을 가르키게 되는지 알아보자. # 전역 객체를 가르키는 this 전역 공간에서 this는 전역 객체를 가르킨다. 여기서 전역 객체란, 브라우저에서는 window, Node.js에서는 global이 된다. 전역 객체에는 특이한 성질이 있다. 전역 공간에 변수를 선언하면, 자바스크립트 엔진은 그 변수를 전역 객체의 프로퍼티로도 할당한다. 즉, 전역 공간에서 선언된 변수는 변수이자 전역 객체의 프로퍼티가 된다. var a = 1; console.l.. 2023. 3. 26. [자료구조] Big O Big O # 빅 오(Big O) 표기법 알고리즘의 속도는 실제 시간으로 계산하지 않는다. 시간 복잡도라는 개념으로 판단한다. 하나의 과정을 수행하기 위해 총 몇 가지의 단계를 거치는지를 따지는 것이 곧 빠른 알고리즘 / 느린 알고리즘을 판단하는 기준이 된다. 앞서 배열과 검색을 공부하며 N개의 원소가 있는 배열에서 선형 검색을 하면 총 N단계가 걸린다, 라는 표현을 자주 사용하였다. 그러나 이 표현은 상당히 길고 장황하다. 그래서 보다 명료하게 시간 복잡도를 표현하기 위한 표기법을 사용한다. 바로 빅 오 표기법이다. # 빅 오 표기법으로 표현한 시간 복잡도 선형 검색은 N개의 원소를 가진 배열에서 최대 N단계를 거친다. 원소가 100개라면 최대 100단계, 200개라면 최대 200단계를 거친다. 이를 .. 2023. 3. 24. [자료구조] 선형 검색과 이진 검색 선형 검색과 이진 검색 # 알고리즘 어떤 과제를 완수하는 명령어의 집합을 의미한다. # 정렬된 배열에서의 검색 값이 순서대로 배치된 배열을 정렬된 배열이라고 한다. 정렬된 배열은 일반적인 배열보다 검색이 유리하다. [50, 30, 10, 20, 40] 라는 일반적인(정렬되지 않은) 배열에서 25라는 값을 찾는다고 치자. 이 상황에서는 배열의 처음부터 끝까지 검색을 해야 한다. 그러나 [10, 20, 30, 40, 50]이라는 정렬된 배열에서는 30에 도달했을 때 검색을 멈출 수 있다. 어차피 30뒤에는 30보다 큰 숫자밖에 없기 때문이다. 이렇게 정렬된 배열은 검색 단계를 줄일 수 있다는 장점이 있다. 위에서 사용한 검색 방법은 선형 검색(Linear Search)이다. 그러나 검색 알고리즘에는 선형 검.. 2023. 3. 20. [JavaScript] 프로토타입 프로토타입 # 프로토타입이란 객체지향 언어는 프로토타입 기반과 클래스 기반으로 나뉘어지는데, 자바스크립트는 프로토타입 기반 객체 지향 언어이다. 원시 값을 제외한 나머지들이 모두 객체이다. 상속은 객체지향 프로그래밍의 핵심 개념으로, 프로토타입 기반 언어에서는 프로토타입으로 삼은 객체를 참조함으로써 상속을 구현한다. 즉, 자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체가 프로토타입인 것이다. # 예시 : 배열.map을 사용할 수 있는 이유 예를 들어보자. 다음과 같은 객체가 있다. const user = { nam.. 2023. 3. 17. 이전 1 2 3 4 5 6 ··· 10 다음
