전체 글

티스토리에 글을 올리면 깃허브에도 잔디가 심어지도록 RSS와 Github Actions를 사용해 연동해보도록 하겠습니다. 🖇️ 준비하기1) 티스토리 RSS 설정'블로그 관리 페이지 - 관리 탭 - 블로그 항목'에서 기타 설정을 사진과 같이 변경해줍니다.잘 설정되었다면 '자신의_블로그_주소/rss'로 접속 시 다음과 같은 화면이 보입니다.ex) https://dev-district.tistory.com/rss 2) 깃허브 레포지토리 클론하기깃허브에서 README.md 파일이 있는 폴더를 클론해옵니다.선호하는 방법으로 클론해 오면 되며, 개인적으로 SSH 방식을 추천합니다. (참고 링크)VSCode에서 클론해 온 폴더를 열어 연동할 준비를 마칩니다. 🖇️ Github Action 파일 작성하기(로컬에서..

🌳 훅(Hook)이란함수형 컴포넌트에서 리액트의 상태(state)와 생명주기 기능을 연동해주는 함수입니다.리액트 버전 16.8부터 새롭게 추가된 기능으로, 리액트의 클래스형 컴포넌트에서만 이용할 수 있던 기능을 함수형 컴포넌트에서도 사용할 있게 해줍니다.따라서 훅을 사용하면 기존의 클래스(class)를 작성하지 않고도 상태와 리액트의 다른 여러 기능들을 이용할 수 있습니다.훅은 함수형 컴포넌트에 맞게 만들어진 것이므로 함수형 컴포넌트에서만 사용이 가능하며, 'use'라는 키워드로 시작하는 특징을 가지고 있습니다. 리액트에는 여러 가지 훅들이 존재합니다. 이번 글에서는 대표적인 5가지 훅을 정리해보겠습니다.useStateuseEffectuseRefuseMemouseCallback 🌳 대표적인 훅 5가지..

쿠키, 그리고 웹 스토리지에 해당하는 로컬 스토리지와 세션 스토리지는 모두 브라우저에 데이터를 저장하는 방식인 클라이언트 기반 저장소입니다.그러나 데이터의 저장 위치, 수명, 관리 주체, 저장 목적 등에 차이가 존재합니다. 아래에서 쿠키, 로컬 스토리지, 세션 스토리지의 순서로 자세히 살펴보겠습니다. 🗂️ 쿠키쿠키(cookie)란 웹 사이트에 접속할 때 서버에 의해 사용자의 컴퓨터에 저장되는 작은 데이터 조각을 의미합니다.- TCP school웹 사이트에 접속하면 종종 쿠키의 사용 여부를 물어보는 아래와 같은 팝업을 볼 수 있습니다. 쿠키의 특징은 다음과 같습니다.키-값 형태의 데이터로 저장됩니다.문자열 형식만 저장할 수 있습니다.하나의 키에 최대 4KB 크기의 값(작은 데이터 조각)까지만 저장할 수 ..

🫧 정의호이스팅(Hoisting)이란, 변수나 함수의 선언이 실제로 작성된 위치와는 상관없이 스코프의 최상단으로 끌어올려진 것처럼 동작하는 자바스크립트의 특징을 말합니다.참고로 hoist란 '감아올리기'라는 의미를 가진 단어입니다.호이스팅 현상에서 중요한 개념은 바로 let 또는 const로 선언한 변수는변수의 선언만 호이스팅 되고, 변수의 할당은 호이스팅 되지 않는다는 것입니다. 아래에서 자세히 살펴보겠습니다. 🫧 특징변수의 선언만 호이스팅 되고, 변수의 할당은 호이스팅 되지 않는다는 특징에 대해 예시 코드와 함께 설명하겠습니다. 예를 들어, 아래와 같은 코드가 있을 때console.log(myName);let myName = "Emma";두 번째 줄에서는 두 가지 일이 일어납니다.myName이라는..

🪴 정의클로저(Closure)란, 외부 함수에 선언된 변수에 접근할 수 있는 내부 함수를 의미합니다.이 내부 함수는 자신이 선언될 때의 환경(스코프)을 기억하고 있어서, 외부 함수가 종료된 이후에도 외부 변수에 접근할 수 있는 특징이 있습니다.이러한 특징을 가진 클로저는 함수가 변수를 기억하는 기능을 하기 때문에 데이터를 은닉하거나 상태를 유지해야 하는 경우에 사용됩니다.보통 '외부 변수에 접근할 수 있는 내부 함수'를 클로저라고 하며, 좀 더 넓은 의미로 이러한 함수와 외부 변수에 접근할 수 있는 현상 전체를 클로저라고 부르기도 합니다. 🪴 예시 코드예를 들어, 아래의 코드에서는 내부 함수인 inner가 외부 함수 outer의 변수(지역 변수)인 counter에 접근할 수 있습니다.function ..

배열을 선언하는 방법은 아래와 같습니다.예를 들어, 100개의 요소를 가진 배열을 생성해 보겠습니다.// 방법 1) 배열 생성자 활용let arr1 = new Array(100); // undefined로 초기화됨let arr1_2 = new Array(0, 0, 0, 0, 0, ...);// 방법 2) 빈 배열을 직접 선언let arr2 = [0, 0, 0, 0, 0, ...];배열의 크기가 작다면 [대괄호] 안에 값을 작성하여 초기화해 줄 수도 있지만, 직접 초기화하는 것 이외의 방법을 살펴보겠습니다. 📒 for문 활용하기가장 기본적인 방법으로 아래에서 소개할 메서드가 생각나지 않을 때 활용할 수 있는 방법입니다.let array = new Array(100);for(let i = 0; i 📒 ..