분류 전체보기
-
React 개요FE/React 2025. 10. 23. 13:53
🧑🏻💻 React는 무엇인가Javascript 라이브러리로 Github 10만개가 넘는 별점을 가진 인기 있는 라이브러리중 하나React는 프레임워크가 아니다 ❌Facebook이 만든 오픈소스 프로젝트프런트엔드에서 사용자 인터페이스(UI)를 구축하는데 사용MVC 애플리케이션(Model-View-Controller)의 뷰 계층 ⭐ React에서 가장 중요한 측면사용자 인터페이스를 빠르고 효율적으로 구축하기 위해 사용자 정의 및 재사용 가능한 HTML 요소인 컴포넌트를 만들 수 있다.state 와 props 를 사용하여 데이터 저장 및 처리 방식을 간소화 ⚙️ 설정 및 설치 📌 React를 설정하는 2가지 방법정적 HTMLReact 앱 만들기 1️⃣ 정적 HTMLjQuery와 같은 라이브러리를 사용..
-
Cookie 와 Session 그리고 토큰💻 computer science/🌐 network 2025. 9. 26. 01:27
💡 HTTP 특징HTTP는 무상태(Stateless) 프로토콜입니다.각 요청이 독립적으로 처리되며 서버가 클라이언트의 이전 상태를 기억하지 않는다는 의미이 때문에 로그인 상태와 같이 사용자의 연속적인 상태 정보를 유지하기 위해 쿠키와 세션 같은 기술이 필요합니다.이런 Auth 기능을 구현할 때 쿠키, 세션, 토큰, JWT 등의 용어가 있는데 이를 예전에 학습을 했지만 다시 정리를 해보고자 합니다. 🍪 쿠키쿠키를 이용하면 서버는 브라우저에 데이터를 넣을 수 있습니다. 브라우저에서 서버에 요청을 보내고 서버에서는 브라우저에게 응답을 보냅니다.이때 이 응답에 브라우저에 저장하고자 하는 쿠키가 있을 수 있습니다. 💡 브라우저에 쿠키를 저장하면 웹사이트에 접속을 할 때마다 브라우저는 해당 쿠키도 요청과 함께..
-
HTTP Redirect💻 computer science/🌐 network 2025. 9. 24. 23:31
⭐ Redirect HTTP 상태 코드HTTP Redirect는 3xx 상태 코드를 지닌 응답 상태 코드설명300Multiple Choices301Moved Permanently302Found303See Other304Not Modified305Use Proxy307Temporary Redirect308Permanent Redirect 🔖 Location 헤더Location 응답 헤더는 리다이렉트 할 페이지의 URL을 나타냅니다.이 헤더는 3xx (redirection) 또는 201 (created) 응답 상태와 함께 제공됩니다. 🧩 리다이렉션의 경우303 (See Other) 응답 코드는 항상 GET 메서드를 사용합니다.307 (Temporary Redirect), 308 (Permanent Red..
-
프론트엔드 빌드, 번들러FE 2025. 9. 22. 22:49
🔍 빌드빌드란 개발자가 작성한 소스코드를 브라우저가 실행가능한 형태로 변환하고 여러 파일을 하나 또는 소수의 파일로 묶어 최적화하는 과정입니다. 🤔 빌드가 왜 필요할까 1️⃣ 브라우저 호환성 문제 해결브라우저마다 지원하는 자바스크립트 문법이 다릅니다. const, async/await, Promise 같은 최신 문법(ES6+)은 구형 브라우저에서 동작하지 않기 때문에 실행 가능한 문법으로 변환을 해주어야 합니다.트랜스파일링(Transpiling) 을 통해 최신 코드를 구버전 문법으로 변환해줍니다. 2️⃣ 모듈 번들링 (Module Bundling)의존성이 있는 여러개의 파일들을 하나의 파일로 합쳐주는 역할 우리가 작성하는 코드는 보통 여러 개의 파일(모듈)로 나뉩니다.브라우저는 기본적으로 ES Mod..
-
실행 컨텍스트🍌 자바스크립트 2025. 9. 22. 22:29
🔍 실행 컨텍스트📖 코드가 실행되는 환경을 구성 🎯 역할식별자를 관리하는 스코프를 관리렉시컬 환경을 이용실행 순서를 관리하고 실행 순서를 보장실행 컨텍스트 스택을 이용실행컨텍스트는 언제 생성되는지 알기 위해서는 소스 코드의 종류를 알아야 합니다. 😶 4가지 타입의 소스코드와 이에 따라 생성되는 실행 컨텍스트전역 코드전역 실행 컨텍스트함수 코드함수 실행 컨텍스트eval 코드eval 실행 컨텍스트모듈 코드모듈 실행 컨텍스트 💡 실행 컨텍스트 생성 1️⃣ 작성한 소스코드는 자바스크립트 엔진의 생성 과정을 통해 실행 컨텍스트를 생성변수 선언, 함수 선언등을 위한 메모리 공간이 해당 컨텍스트 내에서 설정생성단계에서 호이스팅 발생 2️⃣ 자바스크립트 엔진의 실행 과정을 통해서 결과를 도출실행 컨텍스트가 ..
-
웹 서버와 WAS💻 computer science/🌐 network 2025. 9. 17. 16:29
📌 정적 웹 페이지와 동적 웹 페이지 🔍 정적 웹 페이지웹 서버에 이미 저장된 정적 자원(HTML, CSS, Javascript, 이미지 파일 등)을 클라이언트에게 전송서버가 웹 페이지 요청을 받으면 추가 과정없이 응답을 전송저장된 데이터를 변경할 때까지 페이지가 동일하게 유지 🔍 동적 웹 페이지서버에 저장된 HTML 파일이 그대로 브라우저에 나오는 것이 아닌 동적으로 만들어지는 웹 페이지데이터를 가공해 사용자에게 맞춤형으로 화면을 보여주어 데이터베이스와 웹 애플리케이션 서버가 필요클라이언트에서 요청을 보내면 웹 애플리케이션 서버에서 데이터베이스를 조회하거나 외부 서버에서 데이터를 읽어 HTML을 렌더링 🔖 정리구분정적 웹 (Static Web)동적 웹 (Dynamic Web)내용미리 완성된 HT..
-
🧑🏻💻 구글 엔지니어는 이렇게 일한다 (3) - 지식공유📕 book/🧑🏻💻 구글 엔지니어는 이렇게 일한다 2025. 9. 17. 00:30
🚀 3. 지식공유가장 중요한 사실은 조직에 배움의 문화가 자리 잡혀야 한다는 것이고 그러려면 사람들에게 모르는 걸 인정할 수 있도록 돕는 심리적 안전을 제공해야 합니다.📖 3.1 배움을 가로막는 장애물조직 전체에 전문성을 공유하기는 결코 쉬운 일이 아니라 배움의 문화가 견고하게 뒷받침하지 못하면 여러가지 문제에 부딪히게 됩니다. 1️⃣ 심리적 안전 부족불이익이 두려워서 스스로 위험을 감수하거나 실수를 드러내기 꺼리는 환경이 현상은 두려움이 팽배한 문화 혹은 꼭꼭 숨기려는 경향으로 나타나곤 함 2️⃣ 정보 섬조직의 각 부서가 서로 소통하거나 자원을 공유하지 않아서 지식이 파편화됩니다.이런 환경에서는 일하는 방식을 각각의 부서가 제각기 만들어나가서 여러 현상이 나타남정보 파편화정보 중복정보 왜곡 3️⃣ ..
-
Logging LibraryNode.js 2025. 9. 16. 23:02
👍 Logging의 이점1️⃣ 디버깅 및 문제해결에 도움로그는 애플리케이션의 상태, 동작에 대한 자세한 정보를 제공해 문제를 더 쉽게 식별하고 해결하는데 도움을 줍니다. 2️⃣ 성능 모니터링응답시간, 리소스 활용도 등의 성능 측정 항목을 추적하는데 도움을 주어 개발자가 애플리케이션을 최적화할 수 있습니다. 3️⃣ 보안 모니터링로그를 사용해 잘못된 요청이나 데이터에 무단으로 엑세스 시도하는 보안관련 이벤트를 모니터링할 수 있습니다. 4️⃣ 운영시 정보 수집사용자 행동 및 시스템 상태 등에 대한 정보를 수집해서 이용할 수 있습니다.pageview 등 ✅ Node.js 로깅의 Best PracticesNode.js에서 로깅을 할 때 따르면 좋을 best practices를 알아보려고 합니다. 1️⃣ 안정된 ..