티스토리

ecofinder

검색하기

블로그 홈

ecofinder

ecofinder.tistory.com/m

정보 공유 블로그

구독자: 2

방명록 방문하기

반응형

주요 글 목록

OAuth 2.0 PKCE 확장 1. OAuth 2.0 PKCE(Proof Key for Code Exchange) 기존 Authorization Code Grant 방식에서 Accesstoken 요청 단계 중 client_secret의 보안성을 높이기 위해 고안된 기술이다. 2. 동작 방식 클라이언트 애플리케이션이 인증 서버 요청 시, code_challenge, code_challenge_method라는 새로운 파라미터를 함께 전송한다. code_challenge: code_verifier를 변환한 결과물 Code Verifier를 선택한 Hash 알고리즘으로 해싱, Base64 인코딩한 값 ex) base64encode(sha256(code_verifier)) code_challenge_method: code_challenge를 .. 공감수 5 댓글수 2 2024. 2. 2.
OAuth 2.0 기본 개념 1. OAuth ? Open standard for Authorization의 약자로 인터넷 사용자들이 비밀번호를 제공하지 않고, 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근권한을 부여할 수 있는 공통적인 수단으로 사용되는, 접근 위임을 위한 개방형 표준이다. (위키백과) OAuth가 사용되기 전에는 인증 방식의 표준이 없기 때문에 아이디와 비밀번호를 사용하여 보안에 취약한 구조이며, 기업마다 자체 인증 방식으로 개발하여 제각각의 코드로 개발되었다. 2. vs OAuth 1.0 ? 간단한 구현: 암호화된 시그니처를 생성하는 과정을 생략하여 간단한 구현 가능 다양한 인증 방식: HMAC 암호화 방식만 제공하던 OAuth 1.0과 달리 다양한 인증 방식 제공 높은 보안성: 토큰 기.. 공감수 4 댓글수 2 2024. 1. 26.
[Nginx] 정적 파일 제공 1. 오류 내용 대용량 파일(≥10MB) 다운로드 시 속도 저하 → Connection timeout 파일 다운로드 시 압축 처리, 파일명 변경 등의 작업을 위해 다운로드 API를 사용 중 대용량 파일을 읽어오는 과정에서 메모리 과부하 발생 2. 개선 사항 파일 다운로드 API 제거 웹서버(Nginx)에서 ‘Content-Disposition’ header를 통해 파일명 변경하여 정적 파일로 serve https://api.example.com/static/[file_name]/[file_origin_name] -- default.conf -- location ~ ^/static/(.+)/(.+)$ { alias /var/www/html/uploads/attach/$1; set $fname $2; add.. 공감수 4 댓글수 2 2024. 1. 24.
[AWS] EC2 인스턴스 유형 변경 검토 1. 기존 서버 구조 서비스 초기 런칭 이후 하나의 EC2 인스턴스 내에 WEB-API-DB를 운영중인 상황으로 접속자 증가에 따른 CPU 이용률 과부하, 메모리 자원 부족 → 성능 저하 별도의 개발 서버없이 도메인 구분을 통한 개발 환경으로 개발 과정의 오류 등 리스크가 높음 2. 개선 내용 메모리에 의존적인 데이터베이스를 단독 인스턴스(EC2) 분리하여 부하 분산으로 인한 서버 성능 개선, Scale-out 방식의 서버 증설을 위한 확장성 [DB] AWS RDS 마이그레이션 검토 스테이징(개발), 프로덕션 서버 별도 구성하여 개발 과정의 오류 등 리스크 감소 WEB-API 인스턴스 Dockerize, 웹 서버 구동에 적절한 인스턴스 타입으로 선택 [Docker] 다중 컨테이너 앱 환경 구축 3. 운영.. 공감수 4 댓글수 2 2024. 1. 23.
[DB] AWS RDS 마이그레이션 검토 1. 현 운영 상황 WEB API 앱을 운영중인 EC2 인스턴스 내에 직접 설치한 MariaDB를 함께 운영중인 상황으로 CPU 이용률 과부하, 메모리 자원 부족 → 성능 저하 데이터베이스 인스턴스를 분리 운영함으로써 인스턴스 로드 밸런싱, 확장성과 성능, 보안에 이점이 있고, 다수 애플리케이션 운영 시 DB 운영/관리에 용이 2. RDS 도입 배경 AWS RDS vs EC2 DB (단독 인스턴스) EC2 DB의 경우 데이터베이스의 모든 영역을 직접 관리/운영, RDS에서는 AWS 콘솔을 통한 관리 부담 감소 스토리지 오토 스케일링 기능 AWS 콘솔을 통한 데이터베이스 모니터링 및 자동 백업, 복구 기능 3. AWS DMS (Database Migration Service) AWS DMS 기능을 통한 무.. 공감수 2 댓글수 0 2024. 1. 23.
[Docker] 다중 컨테이너 앱 환경 구축 1. 도입 배경 기존 서버 관리의 문제점: 인스턴스 내에 응용프로그램 등을 직접 설치함으로써 환경을 구축하기 때문에, 여러 인스턴스 환경 운영/관리의 어려움이 있음 호스트와 격리된 각 컨테이너를 실행 함으로써 여러 App 간의 독립성과 확장성을 가진 환경을 보장함 Docker image를 이용하여 개발/운영 환경의 통합, 각종 라이브러리 설치 등으로 인한 의존성을 걱정할 필요 없이 인프라 구축에 용이함 배포 신속성, 자동화 등 2. 컨테이너 구조 Nginx Reverse Proxy를 통한 클라이언트 요청 처리 프록시 서버의 IP와 port만 공개가 되어 보안 대비 API (php-fpm) 로드 밸런싱으로 트래픽 분산 프록시 캐싱과 트래픽 분산으로 인한 서버 성능 향상 이후 상황에 맞는 Best Pract.. 공감수 2 댓글수 0 2024. 1. 22.
Access Token, Refresh Token 이해 Access Token, Refresh Token 이해 안녕하세요 여러분! 오늘은 웹 개발에서 사용되는 "Access Token"과 "Refresh Token"에 대해 알아보려고 해요! 🚀 Access Token과 Refresh Token은 사용자 인증과 권한 부여를 위해 사용되는 토큰입니다. 웹 애플리케이션에서는 보안성을 유지하고 사용자의 인증 상태를 유지하기 위해 이러한 토큰 기반의 인증 시스템을 많이 사용하고 있답니다. 😊 Access Token이란? Access Token은 사용자의 인증 정보를 포함한 토큰입니다. 일반적으로 짧은 유효 기간을 가지며, 사용자가 웹 애플리케이션에 로그인할 때 발급됩니다. Access Token을 이용하여 사용자가 인증된 요청을 보낼 수 있고, 인증이 필요한 리소스에.. 공감수 1 댓글수 0 2024. 1. 22.
JWT (JSON Web Token) JWT (JSON Web Token) 안녕하세요 여러분! 오늘은 웹 개발에서 사용되는 "JWT (JSON Web Token)"에 대해 알아보려고 해요! 🚀 JWT는 인증과 정보 교류를 위해 사용되는 토큰 기반의 인증 방식이에요. 웹 애플리케이션에서 사용자의 로그인 상태를 유지하고, 안전하게 정보를 전달하기 위해 많이 사용되고 있답니다. 😊 JWT의 구조 JWT는 세 개의 파트로 구성되어 있습니다. 각 파트는 점으로 구분되며, 각각은 Base64로 인코딩된 문자열로 이루어져 있어요: 헤더 (Header): JWT의 유형과 해시 알고리즘을 포함합니다. 헤더는 JSON 형태로 이루어져 있고, 일반적으로 "alg"와 "typ" 필드를 포함합니다. 페이로드 (Payload): JWT에 포함되는 정보를 담고 있습니.. 공감수 0 댓글수 0 2024. 1. 22.
관계형 데이터베이스 (RDBMS) 관계형 데이터베이스 (RDBMS) 안녕하세요 여러분! 오늘은 웹 개발에서 사용되는 "관계형 데이터베이스(RDBMS)"에 대해 알아보려고 해요! 🚀 관계형 데이터베이스는 데이터를 테이블 형태로 구성하고, 테이블 간의 관계를 이용하여 데이터를 저장, 검색, 조작하는데 사용되는 데이터베이스 시스템이에요. 일반적으로 SQL(Structured Query Language)을 사용하여 데이터베이스에 접근하고 조작할 수 있답니다. 😊 관계형 데이터베이스의 특징 관계형 데이터베이스는 다음과 같은 특징을 가지고 있어요: 테이블 구조: 데이터는 여러 개의 테이블로 구성됩니다. 각 테이블은 열(Column)과 행(Row)으로 구성되어 있으며, 열은 데이터의 속성을 나타내고 행은 개별 데이터를 나타냅니다. 정규화: 관계형 데.. 공감수 1 댓글수 0 2024. 1. 21.
라우터 (Router) 라우터 (Router) 안녕하세요 여러분! 오늘은 웹 개발에서 사용되는 "라우터 (Router)"에 대해 알아보려고 해요! 🚀 라우터는 웹 애플리케이션에서 페이지 간의 이동을 관리하고 처리하는 기능을 담당합니다. 사용자가 다른 페이지로 이동할 때마다 새로운 요청을 보내지 않고도 페이지를 동적으로 갱신할 수 있어요. 😊 라우터의 역할 라우터는 다양한 역할을 수행하여 웹 애플리케이션의 페이지 전환을 가능하게 합니다. 주요 역할은 다음과 같아요: 페이지 전환: 라우터는 사용자의 요청에 따라 여러 페이지를 동적으로 전환할 수 있습니다. 사용자의 액션에 따라 화면을 실시간으로 업데이트하여 원하는 페이지로 이동할 수 있어요. URL 매핑: 라우터는 URL과 페이지를 연결하여 요청된 URL에 따라 적절한 페이지로 이.. 공감수 0 댓글수 0 2024. 1. 20.
CSS 방법론 - BEM CSS 방법론 - BEM (Block Element Modifier) 안녕하세요 여러분! 오늘은 CSS 방법론 중 하나인 "BEM (Block Element Modifier)"에 대해 알아보려고 해요! 🚀 BEM은 웹 애플리케이션을 구성하는 요소들을 명확하게 정의하는 방법론이에요. 코드의 일관성을 유지하고 유지보수성을 향상시키는 데에 큰 도움이 됩니다. 😊 왜 BEM을 사용해야 할까요? 웹 애플리케이션을 개발하다 보면 스타일 시트가 복잡해지고 상호작용 가능한 다양한 요소들이 존재합니다. 이때 BEM 방법론을 사용하면 다음과 같은 이점을 얻을 수 있답니다: 가독성: BEM은 자체적인 네이밍 규칙을 가지고 있어 코드를 읽고 이해하기 쉽습니다. 각 요소들은 독립적으로 식별 가능한 이름을 갖고 있어 협업과 유지.. 공감수 0 댓글수 0 2024. 1. 19.
TDD (Test driven development) TDD (Test Driven Development) 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 주제인 "TDD (Test Driven Development)"에 대해 알아보려고 해요! 🚀 TDD는 소프트웨어 개발 방법론 중 하나로, 테스트가 개발의 중심이 되는 개발 접근 방식이랍니다. 테스트 코드를 먼저 작성하고 그에 맞춰 실제 코드를 작성함으로써, 코드의 품질을 향상시킬 수 있어요! 😊 TDD의 주요 단계 TDD는 크게 세 가지 주요 단계로 이루어져 있어요. 이 단계를 순서대로 진행하면서 코드를 개발해보면 어떤 것인지 한번 알아볼까요? 테스트 작성: TDD에서는 먼저 개발할 기능에 대한 테스트 코드를 작성합니다. 이 테스트 코드는 예상 동작을 정의하고, 어떤 값을 예상하는지를 명시해요. 📝 실패하.. 공감수 0 댓글수 0 2024. 1. 19.
[React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이 [React] 클래스형 컴포넌트와 함수형 컴포넌트의 차이 안녕하세요 여러분! 오늘은 리액트(React)에서 가장 많이 사용되는 두 가지 컴포넌트인 "클래스형 컴포넌트"와 "함수형 컴포넌트"의 차이에 대해 알아보려고 해요! 🚀 리액트를 사용하면 웹 애플리케이션을 구축할 때 컴포넌트라는 작고 재사용 가능한 부분들로 나누어 관리할 수 있답니다. 그 중에서도 가장 일반적으로 사용되는 클래스형 컴포넌트와 함수형 컴포넌트를 비교해보면서, 각각의 특징과 장단점을 알아볼게요! 😊 클래스형 컴포넌트의 특징 클래스형 컴포넌트는 ES6의 클래스 문법을 사용하여 작성됩니다. 주요 특징은 다음과 같아요: State(상태) 관리: 클래스형 컴포넌트에서는 state를 사용하여 동적인 데이터를 관리할 수 있어요. state는 컴포넌.. 공감수 0 댓글수 0 2024. 1. 19.
React의 라이프 사이클 React의 라이프 사이클 안녕하세요 여러분! 오늘은 리액트(React)의 핵심 개념 중 하나인 "라이프 사이클(Lifecycle)"에 대해 알아보려고 해요! 🚀 리액트를 사용하면 동적이고 상호작용적인 웹 애플리케이션을 쉽게 구축할 수 있어요. 이때 컴포넌트의 생명주기를 이해하면, 컴포넌트가 생성되고 업데이트되는 과정을 자세히 파악할 수 있답니다! 😊 라이프 사이클의 개요 라이프 사이클은 컴포넌트가 생성되고 업데이트되는 과정을 설명하는 단계들로 이루어져 있어요. 주요한 라이프 사이클 메서드들은 다음과 같아요: componentWillMount: 컴포넌트가 가상 DOM에 마운트되기 전 호출되는 단계입니다. 일반적으로 초기화 작업이 이루어집니다. componentDidMount: 컴포넌트가 가상 DOM에 마.. 공감수 1 댓글수 0 2024. 1. 19.
재귀 (Recursive) 재귀 (Recursive) 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 주제인 "재귀(Recursive)"에 대해 알아보려고 해요! 🚀 재귀는 프로그래밍에서 자기 자신을 호출하는 함수를 의미합니다. 이렇게 같은 함수를 반복해서 호출함으로써 문제를 해결하거나 처리할 수 있게 됩니다. 재귀를 이해하고 활용하면 코드를 더욱 간결하고 유연하게 작성할 수 있답니다! 😊 재귀의 개념 재귀는 다음과 같은 요소로 이루어져 있어요: Base Case (기본 케이스) 💡: 재귀 함수에서는 먼저 기본 케이스를 처리합니다. 이는 함수가 재귀를 중단하고 반환하는 지점을 말해요. 기본 케이스가 없으면 함수는 무한히 호출될 수 있습니다. Recursive Case (재귀 케이스) 🔁: 재귀 함수는 자기 자신을 호출한 후에도 계속.. 공감수 0 댓글수 0 2024. 1. 18.
스켈레톤 UI 스켈레톤 UI 안녕하세요 여러분! 오늘은 웹 개발에서 많이 사용되는 "스켈레톤 UI"에 대해 알아보려고 해요! 🚀 웹 페이지를 로딩할 때 사용자는 페이지의 로딩이 완료될 때까지 기다려야 합니다. 이때 사용자들이 창을 바라보며 아무런 반응이 없는 것은 조금 답답할 수 있어요. 이러한 기다림을 덜어주는 방법 중 하나가 바로 스켈레톤 UI입니다! 스켈레톤 UI는 로딩 중인 페이지에 일종의 뼈대를 제공하여 사용자에게 진행 상황을 시각적으로 전달합니다. 이러한 기술을 사용하여 사용자 경험을 개선해보는 건 어떨까요? 😊 스켈레톤 UI의 동작 원리 스켈레톤 UI는 다음과 같은 방식으로 동작합니다: 먼저, 페이지가 로딩될 때 스켈레톤 UI가 보여집니다. 이 UI는 실제 내용과 비슷한 모양을 가지지만, 내용은 아직 로딩.. 공감수 0 댓글수 0 2024. 1. 18.
CSS Box Model CSS Box Model 안녕하세요 여러분! 오늘은 CSS 개발에서 중요한 주제인 "CSS Box Model"에 대해 알아보려고 해요! 🚀 웹 개발을 하다보면 요소의 크기와 배치를 다루어야 할 때가 많아요. 이때 CSS Box Model이라는 개념을 알고 있다면, 더욱 효과적이고 예측 가능한 웹 페이지를 만들 수 있을 거예요! 😊 Box Model의 구성 요소 CSS의 Box Model은 다음과 같은 구성 요소로 이루어져 있어요: Content (내용) 📝: 요소의 실제 내용을 담고 있습니다. 요소의 크기는 여기에 포함됩니다. Padding (안쪽 여백) 🧦: Content와 Border 사이의 영역으로, 안쪽 여백을 지정하는 속성입니다. 요소의 배경색이나 이미지는 Padding에도 적용됩니다. Bord.. 공감수 0 댓글수 0 2024. 1. 18.
Sass(SCSS)의 장점 Sass(SCSS)의 장점 안녕하세요 여러분! 오늘은 웹 개발에서 널리 사용되는 CSS 전처리기인 "Sass(SCSS)"의 장점에 대해 알아보려고 해요! 🚀 우리가 웹 개발을 하다보면 CSS 코드를 작성할 때 반복적이고 복잡한 작업을 해야하는 경우가 많아요. 이러한 문제를 해결하기 위해 나온 것이 바로 Sass(SCSS)입니다! Sass(SCSS)는 CSS를 확장하여 더욱 효율적으로 작성할 수 있게 도와주는 도구입니다. 여러분은 아마 더 편리하고 생산적인 개발을 할 수 있을 거예요! 😊 장점 Sass(SCSS)의 주요 장점을 살펴보겠습니다: 변수와 상속 🎨: Sass(SCSS)에서는 변수를 사용하여 색상, 크기, 여백 등의 값을 한 번에 관리할 수 있습니다. 또한 상속을 통해 스타일을 재사용하고 구조를 .. 공감수 0 댓글수 0 2024. 1. 18.
브라우저 저장소의 차이점 브라우저 저장소의 차이점 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 주제인 "브라우저 저장소의 차이점"에 대해 알아보려고 해요! 🚀 우리가 개발하는 웹 애플리케이션에서는 데이터를 저장하는 데에 브라우저 저장소를 활용할 수 있어요. 하지만 브라우저 저장소에는 여러 가지 종류가 있고, 각각의 특징과 용도가 다르다는 사실을 알고 계셨나요? 오늘은 이러한 브라우저 저장소의 차이점에 대해 알아보겠습니다! 😊 쿠키 (Cookies) 첫 번째로 알아볼 저장소는 "쿠키"입니다. 쿠키는 문자열 형태의 작은 데이터 조각으로, 웹 서버와 클라이언트 사이에 데이터를 주고받을 때 사용되어요. 쿠키는 클라이언트의 로컬에 저장되며, 유효기간과 도메인이 설정될 수 있습니다. 🍪 쿠키의 주요 특징은 다음과 같아요: 서버와 클라이언.. 공감수 0 댓글수 0 2024. 1. 18.
[JS] 실행 컨텍스트 실행 컨텍스트 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "[JS] 실행 컨텍스트"에 대해 알아보려고 해요! 🚀 자바스크립트에서 코드를 실행할 때, 실행 컨텍스트라는 개념이 사용됩니다. 실행 컨텍스트는 코드가 실행되는 환경을 제공하고, 스코프, 변수, 함수 등을 관리합니다. 이해하지 못하면 디버깅이 어렵고 예기치 못한 결과가 발생할 수 있으니, 중요한 개념이에요! 😊 실행 컨텍스트란? 실행 컨텍스트는 코드의 실행에 필요한 환경을 제공하는 개념이에요. 자바스크립트 엔진은 코드를 실행할 때마다 실행 컨텍스트를 생성하여 해당 컨텍스트에서 코드를 실행하게 됩니다. 각 실행 컨텍스트는 자신만의 스코프를 가지고 있고, 변수 객체, 스코프 체인, this 등을 관리합니다. 🙆‍♂️ 실행 컨텍스트의 구성 요.. 공감수 0 댓글수 0 2024. 1. 18.
예외 처리 (Exception) 예외 처리 (Exception) 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "예외 처리 (Exception)"에 대해 알아보려고 해요! 🚀 개발을 하다보면 우리는 예기치 않은 상황에 마주칠 때가 있어요. 이런 상황에서 예외 처리를 통해 프로그램의 안정성을 보장할 수 있습니다. 예외 처리를 잘 이해하고 활용하면 더욱 견고한 코드를 작성할 수 있어요. 😊 예외란 무엇인가요? 예외란 실행 도중에 발생한 오류나 예상치 못한 상황을 말해요. 이런 예외 상황이 발생하면 프로그램은 기존의 실행 경로를 변경하고, 예외를 처리하는 코드 블록으로 이동하게 됩니다. 이는 프로그램의 비정상적인 종료를 방지하고, 오류 메시지를 표시하거나 대안 조치를 취할 수 있도록 도와줍니다. 🙆‍♂️ 예외 처리의 중요성 예외 처리.. 공감수 0 댓글수 0 2024. 1. 17.
CORS 동작 원리와 해결 방법 CORS 동작 원리와 해결 방법 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "CORS (Cross-Origin Resource Sharing)" 동작 원리와 해결 방법에 대해 알아보려고 해요! 🚀 CORS는 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 때 발생하는 보안 정책입니다. 브라우저에서 출처를 기반으로 리소스 요청을 제한하여, 악의적인 요청으로부터 사용자를 보호합니다. CORS를 이해하고, 이를 해결하기 위한 방법을 알면 웹 개발에서 큰 도움이 될 거예요! 😊 CORS 동작 원리 CORS의 동작 원리를 알아볼게요: 단순 요청: 브라우저는 단순 요청인지 확인합니다. 단순 요청은 GET, POST, HEAD 중 하나의 메서드를 사용하고, 추가적인 헤더를 사용하지 않거나 특정 헤더만을 .. 공감수 0 댓글수 0 2024. 1. 17.
브라우저 렌더링 원리 브라우저 렌더링 원리 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "브라우저 렌더링 원리"에 대해 알아보려고 해요! 🚀 웹 페이지를 브라우저에서 보여지는 화면으로 변환하는 과정을 브라우저 렌더링이라고 해요. 이러한 과정은 사용자 경험에 직접적인 영향을 미치므로 개발자라면 반드시 이해해야하는 개념입니다. 브라우저 렌더링 원리를 알면 웹 페이지의 로딩 속도를 향상시키고, 사용자에게 더 좋은 경험을 제공할 수 있어요. 😊 브라우저 렌더링 과정 브라우저 렌더링은 다음과 같은 과정으로 진행됩니다: HTML 구문 분석: 브라우저는 HTML 문서를 구문 분석하여 문서 객체 모델 (DOM)을 생성합니다. DOM은 웹 페이지의 구조화된 표현을 제공하며, 렌더링 엔진은 DOM을 사용하여 화면에 내용을 표시합니다... 공감수 0 댓글수 0 2024. 1. 17.
TDZ (Temporal Dead Zone) TDZ (Temporal Dead Zone) 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "TDZ (Temporal Dead Zone)"에 대해 알아보려고 해요! 🚀 TDZ는 JavaScript에서 변수가 선언된 위치에서 초기화되기 전까지의 영역을 의미합니다. 변수가 TDZ에 진입하면 해당 변수에 접근할 수 없으며, 이를 통해 프로그래머가 미리 선언하지 않은 변수를 사용하는 실수를 방지할 수 있어요. 😊 TDZ의 개념 TDZ (Temporal Dead Zone)는 변수의 선언된 위치에서 초기화되기 전까지의 영역을 말해요: TDZ 진입: 변수가 선언되면 해당 변수는 TDZ에 진입하게 되어 초기화되기 전까지 접근할 수 없습니다. ReferenceError 발생: TDZ에 있는 변수에 접근하려고 하면.. 공감수 0 댓글수 0 2024. 1. 17.
호이스팅 (Hoisting) 호이스팅 (Hoisting) 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "호이스팅 (Hoisting)"에 대해 알아보려고 해요! 🚀 호이스팅은 JavaScript에서 변수와 함수 선언이 어떻게 동작하는지 이해하는 데 도움이 되는 개념입니다. 코드가 실행되기 전에 변수와 함수 선언문이 메모리에 끌어올려지는 특징을 가지고 있어요. 호이스팅을 이해하면 코드를 작성하는 순서와 변수의 스코프를 더 잘 이해할 수 있습니다. 😊 호이스팅의 작동 원리 호이스팅의 작동 원리를 간단하게 설명해볼게요: 선언의 끌어올림: JavaScript 엔진은 코드를 실행하기 전에 변수와 함수 선언문을 찾아서 메모리에 끌어올립니다. 이를 호이스팅이라고 부릅니다. 할당 보류: 변수 선언은 호이스팅되지만, 초기화는 그 위치에 맞게.. 공감수 0 댓글수 0 2024. 1. 17.
렉시컬 스코프 (Lexical Scope) 렉시컬 스코프 (Lexical Scope) 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "렉시컬 스코프 (Lexical Scope)"에 대해 알아보려고 해요! 🚀 렉시컬 스코프는 변수가 함수가 작성된 위치에 따라 결정되는 스코프의 종류입니다. JavaScript는 렉시컬 스코프를 따르므로 함수들은 그들이 작성된 코드의 위치에 따라 변수에 접근할 수 있습니다. 렉시컬 스코프를 이해하면 변수의 유효 범위와 값을 더 잘 이해할 수 있어요. 😊 렉시컬 스코프의 작동 원리 렉시컬 스코프의 작동 원리를 간단히 설명해볼게요: 스코프 체인: JavaScript에서 함수는 자신이 정의된 스코프와 외부 스코프에 접근할 수 있습니다. 수직적인 스코프 체인을 따라 스코프의 계층 구조를 형성합니다. 정의된 위치: 함수.. 공감수 0 댓글수 0 2024. 1. 17.
클로저 (Closure) 클로저 (Closure) 안녕하세요 여러분! 오늘은 웹 개발에서 매우 중요한 개념인 "클로저 (Closure)"에 대해 알아보려고 해요! 🚀 클로저는 JavaScript에서 매우 강력하고 유용한 개념으로, 함수와 그 함수가 생성된 환경의 조합입니다. 클로저를 이해하면 더 좋은 코드를 작성하고, 변수의 스코프와 생명주기를 더 잘 관리할 수 있습니다. 😊 클로저의 작동 원리 클로저의 작동 원리를 간단히 설명해볼게요: 스코프 체인: JavaScript에서 함수는 자신이 정의된 스코프와 외부 스코프에 접근할 수 있습니다. 이러한 스코프의 체인을 통해 클로저는 외부 함수의 변수에 접근할 수 있습니다. 참조 유지: 클로저는 자신이 생성된 환경을 기억하고, 이 환경에 있는 변수를 참조할 수 있습니다. 클로저가 생성된.. 공감수 0 댓글수 0 2024. 1. 16.
크로스 브라우징 (Cross Browsing) 크로스 브라우징 (Cross Browsing) 안녕하세요 여러분! 오늘은 웹 개발에서 중요한 개념인 "크로스 브라우징 (Cross Browsing)"에 대해 알아보려고 해요! 🚀 크로스 브라우징은 여러 종류의 웹 브라우저에서 웹 페이지가 동일하게 작동하도록 하는 개발 방법입니다. 다양한 브라우저와 버전, 운영 체제에서 일관된 사용자 경험을 제공하기 위해 크로스 브라우징을 신경써야 해요. 😊 크로스 브라우징의 중요성 크로스 브라우징은 다음과 같은 이유로 중요하답니다: 다양한 사용자 환경: 사용자들은 다양한 운영 체제와 브라우저를 사용하고 있어요. 크로스 브라우징을 통해 가능한한 많은 사용자가 웹 사이트를 이용할 수 있도록 도와줄 수 있어요. ⚡️ 일관된 사용자 경험: 웹 페이지가 모든 브라우저에서 일관되게.. 공감수 1 댓글수 1 2024. 1. 16.
SSG (Static-Site-Generation) SSG (Static-Site-Generation) 안녕하세요 여러분! 오늘은 웹 개발에서 많이 사용되는 "SSG (Static-Site-Generation)"에 대해 알아보려고 해요! 🚀 SSG는 정적인 웹 페이지를 생성하는 방식을 의미합니다. 이 방식은 사전에 웹 페이지를 미리 컴파일하여 HTML 파일로 만들고, 서버에 배포할 때마다 똑같은 내용을 제공하는 방법이에요. SSG는 빠른 로딩 속도와 보안성을 제공하면서도 개발자에게 유연성을 제공합니다. 😊 SSG의 작동 원리 SSG의 작동 원리를 간단히 설명해볼게요: 빌드 단계: SSG는 웹 페이지를 미리 렌더링하는 과정이 필요합니다. 개발자가 작성한 코드를 빌드하여 HTML 파일로 변환하고, 필요한 데이터를 미리 채워넣어 웹 페이지를 생성합니다. 배포 .. 공감수 0 댓글수 0 2024. 1. 16.
CSR vs SSR CSR vs SSR 안녕하세요 여러분! 오늘은 웹 개발에서 자주 비교되는 "CSR(Clientside Rendering) vs SSR(Server-side Rendering)"에 대해 알아보려고 해요! 🚀 CSR과 SSR은 웹 애플리케이션의 렌더링 방식을 비교하는 용어로, 각각 장단점을 가지고 있어요. 이 개념을 이해하면 애플리케이션의 성능과 사용자 경험을 향상시키는 데 도움이 됩니다. 😊 CSR (Client-side Rendering) CSR은 브라우저에서 렌더링되는 방식을 의미합니다. CSR에서는 초기 로딩 후에 클라이언트 측의 JavaScript가 실행되어 동적으로 페이지를 렌더링합니다. 사용자가 특정 페이지에 접속하면 필요한 HTML, CSS 및 JavaScript 파일이 다운로드되어 클라이언트.. 공감수 0 댓글수 0 2024. 1. 16.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.