웹개발 기타 13

Error 객체와 에러 처리

Error 객체란?javascript에서 발생한 에러를 나타내는 내장 객체TypeScript에서도 Error객체를 사용기본적인 에러를 다루기 위한 객체Error는 클래스이기 때문에 상속가능두가지 주요 속성을 제공message : 에러 메시지를 나타내는 문자열name : 에러의 이름//javascriptconst error = new Error("Something went wrong!");console.log(error.message); // "Something went wrong!"console.log(error.name); // "Error"//typescriptfunction throwError(message: string): never { throw new Error(message); ..

웹개발 기타 2024.12.16

url parameter

url parameter란🤔웹 애플리케이션에서 URL을 통해 데이터를 전달하기 위한 방식 중 하나URL의 특정 부분에 데이터를 추가하여 서버로 정보를 전달하거나, 클라가 어떤 특정 데이터를 표시할지 지정할 때 사용https://example.com/search?query=javascript&page=2URL에서 파라미터는 보통 ?(물음표)와 함께 시작하며, 키=값 형식으로 데이터를 전달여러개의 파라미터가 있을경우 &(앤드)로 구분url parameter의 종류👀 1. Query ParameterURL에서 ?와 &로 구성된 부분을 가리킴데이터를 추가적으로 서버나 클라이언트로 전달할 때 사용https://example.com/products?category=books&sort=price* category..

웹개발 기타 2024.12.12

프레임워크 vs 라이브러리🤔

프레임워크란🤔개발자가 기능 구현에만 ‘딱’ 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 ‘기술의 조합’예시 : Vue.js, Angular.js, next.js등등 라이브러리란🤔공통 기능의 모듈화가 이루어진 프로그램의 집합예시 : react, redux등등=> 리액트가 상태관리(Redux), 라우팅(React-router-dom)이 지원이 됐다면 프레임워크였을수도,,,

웹개발 기타 2024.12.10

스크립트 로딩 속성, DOMContentLoaded, loaded

스크립트 로딩 속성이란🤔script태그에서 자바스크립트 파일이 브라우저에 의해 로드되고 실행되는 시점과 방식을 제어하는 역할 *html 자체 기능임!속성예시설명로드 방식실행 시점실행 순서주 사용 목적없음HTML 파싱 중단 후 로드 및 실행순차 로드(HTML 파싱 중단)로드 완료 즉시HTML 선언 순서대로단순 스크립트, HTML 상단에 배치되는 경우 주로 사용deferscript src="example.js" defer>script>HTML 파싱과 병렬로 로드, HTML 파싱 완료 후 실행병렬 로드HTML 파싱 완료 후HTML 선언 순서대로DOM 조작이 필요한 스크립트asyncscript src="example.js" async>script>HTML 파싱과 병렬로 로드, 로드 완료 후 즉시 실행병렬 로드..

웹개발 기타 2024.10.25

로컬스토리지

로컬 스토리지란🤔웹 브라우저에 데이터를 저장하는 방법 중 하나로, 브라우저를 닫거나 다시 열어도 유지되는 데이터 저장소 저장 용량 : 일반적으로 약 5MB 정도의 용량을 제공문자열 형태로 저장: 모든 데이터는 문자열(string) 형식으로 저장동기적 동작: 로컬스토리지는 동기적으로 작동하므로, 데이터를 저장하거나 가져오는 작업은 즉시 완료영구적 저장: 사용자가 직접 데이터를 삭제하거나 브라우저 데이터를 초기화하지 않는 한, 데이터는 유지언제 사용🤔사용자 설정 저장: 테마, 레이아웃 설정 등 웹사이트의 사용자 설정을 저장할 때사용자 세션 유지: 로그인 상태 또는 쇼핑 카트 정보를 유지할 때오프라인 데이터 저장: 오프라인 상태에서도 사용할 수 있도록 데이터를 미리 저장해 둘 때문법💫setItem로컬스토..

웹개발 기타 2024.10.24

[성능 최적화]디바운싱 , 스로틀링

프로젝트를 하면서 이벤트가 자주 발생시킬때, 성능 최적화를 위해 디바운싱 or 스로틀링을 사용하라는 숙제가 있었다.이때 처음으로 알게된 성능 최적화 기법이다! 디바운싱어떤 이벤트가 짧은 시간에 여러 번 발생할 때, 마지막 이벤트만 실행되도록 하는 기법예를들어 사용자가 입력 필드에 글자를 계속 입력할 때마다 검색 요청을 보내면 성능에 문제가 생길 수 있음👉디바운싱을 사용하면 사용자가 일정 시간 동안 입력을 멈출 때만 요청을 보내게 함언제 사용🤔입력 필드에서 실시간 검색: 사용자가 입력할 때마다 API 요청을 보내지 않고, 사용자가 입력을 멈출 때만 요청을 보내고 싶을 때.창 크기 조정 이벤트: 브라우저의 창 크기가 변경될 때, 변화가 멈춘 후에만 계산하거나 처리를 실행하고 싶을 때.// 사용자가 입력을..

웹개발 기타 2024.10.24

[유클리드 알고리즘]최대 공약수, 최소 공배수 구하기

코테를 하면서 가~끔 최대 공약수를 구하는 문제가 나오는데, 이번엔 둘다 구하는 문제였다.내힘으로 풀었다가 예외 케이스에서 자꾸 틀려서 결국 구글링의 힘을 빌렸다ㅠㅠ...그런데 잘한듯! 유클리드 알고리즘을 이용하면 쉽게 구할 수 있다유클리드 알고리즘이란🤔두 정수의 최대공약수(GCD)를 효율적으로 계산하기 위해 고안된 고대 그리스의 방법 알고리즘의 기본 원리는 다음과 같다.기본 원리1. 정의두 정수 ( a )와 ( b ) (단, ( a > b ))의 최대공약수는 ( b )와 ( a )를 ( b )로 나눈 나머지인 ( r ) (즉, ( r = a \mod b ))의 최대공약수와 같다이를 수식으로 표현하면 다음과 같다gcd(a,b) = gcd(b,r)2. 알고리즘의 단계두 수 ( a )와 ( b )를 가지고..

웹개발 기타 2024.10.24

웹서버란(클라이언트,서버,REST API)

프론트엔드 개발자로 공부하면서 기초적인 "웹 서버"관련해서 궁금했는데 마침 부트캠프중에 특강을 해주셨다! 먼저 클라이언트, 서버는 무엇일까🤔 클라이언트는 서버의 서비스를 받아 사용하는 장치, 프로그램이고,서버는 네트워크를 통해 클라이언트에게 서비스를 제공하는 시스템이다 쉽게 말해 클라이언트는 요청, 서버는 응답을 한다!서버 개발이라고 해서 백엔드가 아님!! 그렇다면 웹 서버는 무엇일까❓ 웹 서버(Web Server)는 클라이언트(주로 웹 브라우저)로부터 HTTP 요청을 받아들이고, 요청에 맞는 웹 페이지나 리소스를 제공하는 소프트웨어 또는 하드웨어 REST API의 가장 중요한 기본적인 규칙은 두 가지는URI는 정보의 자원을 표현해야 함자원에 대한 행위는 HTTP Method(GET, POST, PUT..

웹개발 기타 2024.10.07

네이밍 컨벤션📛

네이밍 컨벤션이란🤔하나 이상의 영어 단어로 구성된 식별자를 만들 때 가독성 좋게 단어를 한눈에 구분하기 위해 규정한 명명 규칙 3가지 유형의 네이밍 컨벤션이 자주 사용됨 🐪 카멜케이스첫글자를 제외하고 대문자로 표현한 방식이 낙타 모양과 비슷하다고 하여 카멜케이스라 함자바스크립트에서 일반적으로 변수나 함수의 이름을 사용let camelCase;🐍스네이크 케이스언더바_가 들어 있는 표현 방식이 뱀처럼 생겼다고 하여 스네이크 케이스라 함let snake_case;📛파스칼 케이스시작 글자가 대문자로 표현한 방식이  파스칼 언어의 표기법과 유사하다고 하여 파스칼 케이스라 함자바스크립트에서 일반적으로 생성자 함수, 클래스의 이름을 사용let PascalCase; ⭐코드 전체의 가독성을 높이려면 케멜케이스와 ..

웹개발 기타 2024.10.01

[firebase] firebase , Firestore Database란🤔

firebase란🤔구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼으로,개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌👉쉽게말해, 웹 서버를 대신 만들어 주는 서비스(백엔드없이 빌드,배포가능!)⚠️무료는 할당량이 있음 Firestore Database란🤔 구글의 클라우드 기반 NoSQL 데이터베이스👉쉽게말해, 데이터베이스 서비스로 데이터를 저장하고 관리할 수 있는 기능을 제공 *SQL vs NoSQL : [데이터베이스] 데이터 베이스 개념, 종류 포스팅 참고 [데이터베이스] 데이터 베이스 개념, 종류데이터베이스란 🤔 ?데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음! 쉽게말해 데이터를 잘 찾기 위해 존재하는 것 👉정..

웹개발 기타 2024.10.01