본문 바로가기

반응형

분류 전체보기

(399)
[JS] 자바스크립트로 일주일 동안 보지 않기 구현(쿠키) 쿠키(Cookie) 쿠키는 문자열로 이루어진 작은 데이터 조각이며, 일반적으로 웹 서버가 클라이언트(브라우저)에게 전달하는 작은 파일입니다. 쿠키는 이름-값 쌍으로 구성되며, 이 값은 일반적으로 문자열로 표현됩니다. 브라우저에서는 쿠키를 저장하고 이를 다음 요청에서 서버로 다시 전송하여 사용자가 방문한 웹 사이트에 대한 정보를 저장하고 추적합니다. 따라서 쿠키는 웹 개발에서 매우 유용한 기술 중 하나라고 볼 수 있습니다. 자바스크립트에서 쿠키의 생성 방법과 구성요소 자바스크립트에서 쿠키를 생성하는 방법은 document.cookie 를 이용하면 됩니다. 쿠키는 보통 이름, 값, 도메인, path(접근가능경로), Expires(만료기간),secure(https 제한 유무설정) 등으로 구성되며, 이 외에도 ..
[단순용어] REST/URI/URL /REST 인터페이스 규칙 /리소스의 상태전이 REST REST란 REpresentational State Transfer의 약자로, 인터넷의 아키텍처 원리 중 하나입니다. REST는 웹 서비스를 구현하기 위한 아키텍처 스타일로, 클라이언트와 서버 간의 통신을 위한 규칙을 제공합니다. 이 규칙은 HTTP 프로토콜에 기반하며, 자원(Resource)의 상태(State)를 나타내는 표현(Representation)을 전송하는 것을 중심으로 이루어집니다. REST는 네트워크 아키텍처를 간단하게 만들어주는 장점이 있습니다. REST API는 클라이언트와 서버 간의 상호작용을 가능하게 하며, 다양한 클라이언트와 서버에서 동작할 수 있도록 플랫폼과 언어에 독립적입니다. 또한 REST API는 CRUD(Create, Read, Update, Delete) 기능을..
[알고리즘] 삽입 정렬 with JS 삽입 정렬 배열의 요소들을 순차적으로 검사하면서 해당 요소가 들어갈 위치를 찾아 삽입하는 정렬 알고리즘입니다. 간단하게 설명하면, 첫 번째 요소는 이미 정렬되었다고 가정하고, 두 번째 요소(i)부터 시작하여 앞의 요소(j-1)들과 비교하면서 자신의 위치를 찾아 삽입하는 방식으로 정렬을 수행합니다. 즉, 배열을 순회할 때 마다 j= j-1 혹은 j-- 를 반복함으로써 정렬 대상인 key 요소와 j-1 요소 간의 크기 비교를 통해 key = 0 && arr[j] > key) { // j+1번째 인덱스에 j번째 인덱스의 값을 할당합니다. arr[j + 1] = arr[j]; // j를 감소시켜 while 문을 반복하여 key가 들어갈 위치를 찾습니다. // 만일 j 가 -1이 되면 즉시 while을 탈출합니다..
[js] 참조형 변수 '객체' 에 대해 알아보자 자바스크립트를 처음 배웠을 때, 참조형 변수는 객체 하나만 존재한다고 배웠습니다. 그런데, 참조형 변수가 무엇인가에 대한 설명을 들어보면 이게 뭔 말이지 싶은 경우가 많았습니다. 그래서 이번 시간을 들여서 참조형 변수인 객체는 메모리에 어떻게 저장되는가에 대한 부분을 정리해보고자 합니다. 참조형 변수 일단 다들 알다시피 자바스크립트에서 참조형 변수는 객체(object)입니다. 객체는 여러 개의 속성(property)으로 이루어져 있으며, 이 속성은 이름(key)과 값(value)으로 구성됩니다. 그리고, 자바스크립트에서는 다양한 종류의 객체를 지원합니다. 예를 들어, 배열(array), 함수(function), 날짜(date), 정규표현식(regular expression) 등이 모두 객체입니다. 객체는..
[알고리즘] 선택 정렬 with JS 선택정렬(Selection sort) 배열에서 가장 작은 값을 찾아서 배열의 맨 앞에 위치시키고, 그 다음 작은 값을 찾아서 두 번째 위치에 위치시키는 방식으로 정렬하는 알고리즘 입니다. 선택정렬 실행 과정 배열의 첫 번째 원소를 제외한 나머지 원소들 중 가장 작은 값을 찾습니다. 가장 작은 값과 배열의 첫 번째 원소를 교환합니다. 배열의 두 번째 원소를 제외한 나머지 원소들 중 가장 작은 값을 찾습니다. 가장 작은 값과 배열의 두 번째 원소를 교환합니다. 위의 과정을 반복해서 전체 배열이 정렬될 때까지 반복합니다. 선택정렬 코드 function selectionSort(arr) { for (let i = 0; i < arr.length - 1; i++) { let minIndex = i; for (le..
[리액트] 1. useState useState useState는 React의 내장 hook 함수 중 하나로, 함수형 컴포넌트에서 상태를 관리하기 위해 사용됩니다. useState는 배열을 반환하며 첫 번째 요소는 현재 상태값을, 두 번째 요소는 상태를 갱신하는 함수를 포함합니다. 보통 리액트에서 상태관리라고 하면 제일 먼저 떠오르는게 useState 를 이용한 기본적인 상태관리 방식이라고 볼 수 있습니다. 예를 들어, 간단한 숫자를 더하는 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 useState를 사용하여 현재 상태값을 저장하고, 버튼을 클릭할 때마다 상태값을 갱신하고 화면에 출력합니다. import { useState } from 'react'; function Counter() { const [count, setCount] ..
[리액트] 리액트에서 DOM에 대한 직접 접근을 권장하지 않는 이유와 Ref 훅을 통한 DOM 접근 리액트는 가상DOM을 이용하여 변경된 부분만 렌더링을 시도합니다. 리액트에서 DOM에 직접 접근하는 것은 권장되지 않습니다. 이는 리액트의 핵심 원칙 중 하나인 가상 DOM(Virtual DOM)의 개념과 관련이 있습니다. 리액트는 가상 DOM을 사용하여 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다 화면을 다시 그리지 않고, 변경된 부분만 감지하여 최소한의 렌더링을 수행합니다. 이를 통해 빠른 성능과 원활한 사용자 경험을 제공합니다. 그러나 DOM에 직접 접근하게 되면, 가상 DOM을 우회하여 실제 DOM에 직접 변경을 가하게 됩니다. 이는 리액트의 성능 최적화를 무력화시키고, 예상치 못한 결과를 초래할 수 있습니다. 따라서, 리액트에서는 state나 props를 변경하는 방법을 제공..
[정규표현식] 자주 쓰이는 플래그 유형 자주 쓰이는 플래그 정규표현식에는 플래그(flag)라는 것이 있습니다. 플래그는 검색 대상 문자열을 검색할 때 어떤 방식으로 매칭할지를 지정해 주는 역할을 합니다. 다음은 자주 사용되는 세 가지 플래그와 그 사용 방법입니다. i 대소문자를 구분하지 않고 검색을 수행합니다. 예시) /hello/i는 "Hello", "HELLO", "heLLo" 등의 문자열과 매칭됩니다. g 검색 대상 문자열에서 전역(global) 매칭을 수행합니다. 예시) /hello/g는 검색 대상 문자열 내에서 "hello"라는 문자열이 모두 매칭됩니다. 더 자세한 예를 들어보면, "hello"라는 문자열만 포함한 문자열 뿐만 아니라, "helloworld"와 같이 "hello" 문자열을 포함한 다른 문자열도 매칭됩니다. m 검색 대..

반응형