분류 전체보기
-
네이버 2025 컨퍼런스 DAN 25 참여 후기일상😎 2025. 11. 8. 16:43
네이버 측에서 부스트캠프 웹 모바일 캠퍼들이 기술적인 전문성과 인사이트를 가진 개발자로 성장하는 데 도움이 될 수 있도록 팀네이버 컨퍼런스인 DAN25 티켓을 제공해주셨다는 이야기를 듣고 바로 티켓 신청을 했는데 운 좋게도 이번 DAN25 컨퍼런스에 참여하게 되었습니다! 감사합니다!! 이번 행사는 NFT 티켓을 통해서 진행되었고 DAN NFT 행사에 참여해 커피도 받았습니다 ☕ 🔍 왜 DAN 이지?왜 네이버의 컨퍼런스 이름에 ’네이버‘ 가 없는 이유는 뭔지 궁금했는데요..!플랫폼(Platform) 의 한국어 표현에서 유래했다고 합니다! 🎢 GroundDAN25 GROUND에서는 여러 체험 프로그램과 DAN25 NFT 이벤트, 그리고 한정판 콜라보 굿즈도 얻을 수 있었어요 🙂 GROUND는 ..
-
React의 State 업데이트 큐FE/React 2025. 10. 23. 14:13
🧑🏻💻React의 State 업데이트 큐(Queue)🚀 BatchReact는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다림 이를 통해 너무 많은 리렌더링이 발생하지 않고도 여러 컴포넌트에서 나온 다수의 state 변수를 업데이트 가능.하지만 이벤트 핸들러와 그 안에 있는 코드가 완료될 때까지 UI가 업데이트되지 않는다 따라서 React가 여러 상태 업데이트를 단일 리렌더링으로 그룹화하여 성능을 향상하는 것!! 🖥️ 예시 코드import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {nu..
-
UI 표현하기FE/React 2025. 10. 23. 14:07
React 는 사용자 인터페이스(UI)를 렌더링하기 위한 JS 라이브러리버튼, 텍스트, 이미지와 같은 작은 요소 로 구성React를 통해 작은 요소들을 재사용 가능하고 중첩할 수 있는 컴포넌트로 조합가능🧩 ComponentReact 애플리케이션은 컴포넌트라고 불리는 독립된 UI 조각들로 이루어짐 React 컴포넌트는 마크업을 얹을 수 있는 JavaScript 함수마크업, CSS, Javascript를 앱의 재사용 가능한 UI 요소인 사용자 정의 컴포넌트로 조합 ↗️ 컴포넌트 import / export컴포넌트의 가장 큰 장점은 재사용성이다.컴포넌트를 조합해 또 다른 컴포넌트를 만들 수 있다.컴포넌트를 이렇게 여러 번 중첩하면 다른 파일로 분리해야 하는 시점이 있다.분리를 하여 파일을 더 찾기 쉽고 재사..
-
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️⃣ 자바스크립트 엔진의 실행 과정을 통해서 결과를 도출실행 컨텍스트가 ..