🌊 기본 타입 타입스크립트 첫 시작이다 뿌셔뿌셔 Boolean Number String Object Array → 자바스크립트에선 Object인데 타입스크립트에선 Array가 따로 있다. Tuple Enum Any Void Null Undefined Never :을 통해 자바스크립트 코드에 타입을 표기(Type Annotation)할 수 있다. String let name: string = 'Ogu'; Number 16진수, 10진수 외에도 ES6에서 도입된 2진수와 8진수를 지원한다. let age: number = 59; Boolean let isLoading: boolean = false; Undefined let name: undefined; // 이렇게 쓰는 경우는 거의 없으며 let name..
🌊 TanStack Query (리액트 쿼리) * 아직 공부 중입니다. 리액트를 사용하여 개발하면 웹에서 데이터를 받아 관리해야하는 일이 많습니다. React Query, 현재는 이름이 변경된 TanStack Query는 강력한 비동기 상태 관리 라이브러리로, 서버의 데이터를 클라이언트에 가져오거나 캐시를 관리, 데이터 업데이트 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. 예를 들어, useEffect로 데이터를 받아오는 컴포넌트를 만들고 그 컴포넌트를 다른 컴포넌트에서 호출하였을 때, 값을 재사용하거나 같은 상태를 공유하는 것이 아닌, 컴포넌트를 호출하는 여러 컴포넌트를 걸쳐 계속해서 새로운 값을 받아오며 네트워크 통신이 발생하게 됩니다. 따로 캐싱을 관리하지 않아서인데요. TanStack Que..
🌊 이진 탐색 🐤 문제 설명 부분적으로 오름차순 정렬*된 정수의 배열(rotated)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 부분적으로 정렬된 배열: 배열을 왼쪽 혹은 오른쪽으로 0칸 이상 순환 이동할 경우 완전히 정렬되는 배열 예시: [4, 5, 6, 0, 1, 2, 3]은 왼쪽으로 3칸 또는 오른쪽으로 4칸 순환 이동할 경우 완전히 정렬됩니다. 🐣 제한사항 rotated에 중복된 요소는 없습니다. target이 없는 경우, -1을 리턴해야 합니다. 🐥 입출력 예 let output = rotatedArraySearch([4, 5, 6, 0, 1, 2, 3], 2); console.log(output); // --> 5 output = rotatedArraySearch..
🌊 Hashing Hashing은 암호화 방식 중 하나로, 복호화가 가능한 다른 암호화 방식과 달리 해싱은 암호화만 가능하다. 해싱은 해시 함수(Hash Function)를 사용하여 암호화를 진행한다. 해쉬 함수의 특징 항상 같은 길이의 문자열을 리턴한다. 서로 다른 문자열을 동일한 해시 함수를 사용하면 반드시 다른 결과값을 반환한다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나온다. 해쉬 함수 SHA1 생성기 https://www.convertstring.com/ko/Hash/SHA1 SHA1 해시 - 온라인 SHA1 해시 생성기 www.convertstring.com 해싱의 목적 해싱은 복호화 불가능한 암호지만 비밀번호 또한 해싱하여 저장하므로 해싱값이 서로 확인하여 일치하는 ..
🌊 Redux 리덕스를 사용하면 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 전달, 업데이트할 수 있다. Redux는 React에 종속되는 라이브러리가 아니며, 리액트에서 사용되려고 만들어졌지만 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있으며 예 : angular-redux, ember-redux 등, Vue도 가능하지만 Vue에선 리덕스와 유사한 vuex를 주로 사용) 바닐라 자바스크립트와 함께 사용할 수 있다. Redux 키워드 Action 액션 : 상태에 어떠한 변화가 필요하면 액션이 발생한다. 액션은 객체 형태로 표현한다. { type : 'INCREASE..
🌊 cookie & session cookie HTTP 프로토콜의 무상태성을 보완해주는 도구. 원래 보안이 목적이 아니지만 요즘은 인증, 보안의 용도로 자주 사용한다. 쿠키는 서버에서 클라이언트에 전송하는 작은 데이터 조각이다. 쿠키는 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있으며 반대로 클라이언트에서 서버로 쿠키를 다시 전송할 수도 있다. 쿠키를 이용하면 상태가 없는(statelss) HTTP 프로토콜에서 상태 정보를 기억시켜주어 사용자의 로그인 상태를 유지할 수 있다. 팝업창 오늘 하루 보지 않기 로그인 상태 추천광고 쿠키의 목적 세션 관리 (session management) 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리..
🌊 네트워크 기초 웹 어플리케이션 아키텍처 인터넷 연결이 없다면 네이버나 여러 앱은 정상적으로 동작할 수 없다. 그 이유는 우리가 보고자 하는 정보를 인터넷 어딘가에 존재하는 서버로부터 받아오기 때문이다. 만약 정보를 제공해주는 서버가 없다면 정보가 업데이트 될 때 마다 우리는 어플리케이션 스토어에서 끊임없이 업데이트를 해야할 것이다. 클라이언트 - 서버 아키텍처 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부른다. 리소스를 사용하는 앱이 바로 '클라이언트', 리소스를 제공하는 곳은 '서버'라 부른다. 클라이언트 - 서버 - 데이터베이스 아키텍처 일반적으로 서버는 리소스를 전달해 주는 역할만 담당한다. 리소스를 저장하는 공간을 별도로 마..
🌱 웹 표준 & 접근성 웹 표준 웹 표준은 W3C에서 제시한 권고 사항으로, 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 어떤 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 포함하고 있으며 이러한 웹 표준을 준수하는 것은 사용자에게 좋은 사용자 경험을 제공하고, 검색 엔진 최적화 등의 이점을 가져다줍니다. 최신 웹 브라우저, 크롬, 엣지, 사파리, 오페라, 파이어폭스 등은 모두 웹 표준을 지원하므로, 웹 페이지를 웹 표준에 맞춰 작성하면 어떤 브라우저를 사용하더라도 동일한 결과물을 얻을 수 있습니다. 웹 표준은 W3C에서 제공하는 '권고' 사항이지만, 사용자에게 좋은 사용자 경험을 제공하기 위해 웹 표준을 준수하는 것이 좋습니다. ..