본문 바로가기

개발자 강화

(129)
🌟[매일메일] 브라우저 렌더링 파이프라인이란? (FE.241224/241213) (개발자 강화/프론트엔드) 2025. 1. 29. 00:42 브라우저 렌더링 파이프라인이란?브라우저가 웹페이지를 화면에 표시하기 위해 거치는 과정 [1단계] DOM 생성브라우저가 HTML 파일을 받으면, byte 단위로 읽기 시작함브라우저의 HTML 파서(Parser)는 byte를 문자(character)로 변환하고, 이 문자를 다시 HTML 토큰으로 변환함HTML 토큰은 각 HTML 태그와 그 안에 포함된 텍스트, 속성 등을 의미함 HTML 토큰이 생성되면, 브라우저는 이를 기반으로 DOM 트리를 생성함.DOM 트리: HTML 문서 구조를 트리 형태로 표현한 것. 각 태그가 node가 되어 부모-자식 관계 형성함 [2단계] CSSOM 생성브라우저는 CSS 파일을 파싱(parsing)함.CSS 파일은 byte로 전송되므로, 브라우저는 이를 문자로 변환하고 CSS ..
[매일메일] Record를 VO가 아닌 DTO로 사용하는 이유? (BE.250128) (개발자 강화/백엔드) 2025. 1. 29. 00:20 Record란?Java 16에서 정식 출시된 특별한 클래스 유형기존 클래스 생성 시 반복적으로 작성하던 보일러플레이트 코드를 줄이는 데 중점을 둠자동으로 생성자, getter, equals(), hashCode(), toString() 메서드 생성함public record User(String name, String email, int age) {} VO(Value Object)란?도메인 모델 내에서 특정 개념이나 값을 표현하는 객체객체 간의 값 기반 비교를 지원하며, 값이 동일하면 같은 객체로 간주함비즈니스 로직과 밀접하게 연관되어 있으며, 특정 값에 대한 제약 조건이나 유효성 검증 로직을 포함함 Coordinates라는 이름의 VO를 구현해, (x,y) 좌표 값의 유효성을 검증하거나, 좌표를 이동시키..
🌟[매일메일] useEffect란? useLayoutEffect와 차이 (FE.250113/250128) (개발자 강화/프론트엔드) 2025. 1. 28. 23:47 useEffectuseLayoutEffect실행 시점랜더링이 완료되는 시점(렌더링 후 화면에 직접적인 영향 없음)랜더링 후 DOM이 업데이트 되기 직전(화면이 그려지기 전)동기/비동기비동기적동기적예시사용자 데이터를 API에서 가져옴(데이터 렌더링 후 화면 업데이트)이벤트 리스너를 추가함DOM 크기를 측정해서 다른 요소 위치 조정(요소 높이 측정해 레이아웃 높이 조정)코드useEffect(()=> {  fetchData().then(data=>setData(data));},[]);useLayoutEffect(()=>{const height=ref.current.offsetHeight;setHeight(height);},[]);참고기본적으로 사용너무 많이 실행되면 렌더링 느려짐 useEffect 호출 시점은..
🌟[매일메일] 자바스크립트의 Event Loop와 테스트 큐란? (FE.250122/241218) (개발자 강화/프론트엔드) 2025. 1. 28. 00:05 Javascript는 싱글 스레드 언어.한 번에 한 작업만 처리할 수 있는 단일 콜 스택을 가짐. (원래 동기적 언어)브라우저나 Node.js 환경이 제공하는 비동기 처리 매커니즘을 활용해 여러 작업을 동시에 수행 가능함.브라우저: 자바스크립트 엔진은 setTimeout, fetch 등을 WebAPI에 넘겨 비동기 처리. 완료 시 테스크 큐로 이동. Node.js: 이벤트 루프가 콜 스택이 비어있는 지 확인하고 테스트 큐에서 대기중인 작업을 콜 스택으로 옮겨 실행.콜 스택: 현재 실행 중인 코드가 쌓임, 테스크 큐: 비동기 작업이 완료되면 그 결과를 대기시키는 곳이벤트 루프 덕에 UI 업데이트나 사용자 입력 처리를 수행하면서도, 비동기 작업을 블로킹 없이 병렬적 처리 가능함.setTimeout(callb..
[매일메일] HTTPS란? (BE. 250127) (개발자 강화/백엔드) 2025. 1. 27. 23:31 HTTP(Hypertext Transfer Protocol)웹 브라우저(클라이언트)와 웹 서버 간에 데이터 주고받기 위한 통신 프로토콜.암호화되지 않은 평문 데이터를 전송해 제 3자가 정보를 조회할 수 있음. (보안 취약)네트워크 패킷 가로채서 로그인 정보, 개인 데이터 유출하는 중간자 공격(Man-in-the-Middle-Attack) 위험 존재. HTTPS(Hypertext Transfer Protocol Secure)HTTP에 보안 기능(SSL/TLS 암호화)이 추가된 프로토콜.암호화된 데이터를 전송해 제 3자가 정보를 조회할 수 없음.인증서(Certificate)를 통해 서버가 신뢰할 수 있는 기관(CA, Certificate Authority)에 의해 인증되었음을 보장함.인증서를 통해 서버가 신..
[매일메일] undefined와 null의 차이점? (FE.250127) (개발자 강화/프론트엔드) 2025. 1. 27. 22:12 undefined: 자바스크립트에서 자동으로 할당되는 값. 아직 값을 할당하지 않은 상태.- 변수가 선언된 후 값 할당이 되지 않으면, 자바스크립트에서 변수에 undefined를 자동으로 부여함- let a;가 선언되면, 자바스크립트는 자동으로 a에 undefined 할당함 null: 개발자가 의도적으로 할당하는 값. 의도적으로 값을 비워 둔 상태를 나타냄.- 변수에 값이 없음을 명확히 표현하기 위해 개발자가 null을 할당함- let b = null; b라는 변수에 값이 비어있음을 의도하기 위해 null을 할당한 것 느슨한 비교(==)에서는 null과 undefined가 같게 처리되지만엄격한 비교(===)에서는 null과 undefined가 다르게 처리됨 메모리 관리에서 undefined와 nullnu..
🌟[공부] React의 트리 쉐이킹이란? (개발자 강화/프론트엔드) 2025. 1. 26. 22:13 React의 트리 쉐이킹(Tree Shaking)?자바스크립트에서 사용하지 않는 코드를 제거해 번들 크기를 줄이는 최적화 기법ES6의 모듈 시스템(ESM)에서의 정적 분석(Static Analysis)을 기반으로 이루어짐* 정적 분석(Static Analysis)- 프로그램을 실행하지 않고, 코드 자체의 문법 구조(Syntax Tree)를 분석함.- 프로그램 구조, 흐름, 의존성 이해하고 최적화 또는 오류 탐지 수행함.- 어떤 모듈이 다른 모듈에 의존하는지, 어떤 함수나 변수가 실제로 사용되는지 추적함.- ES6 모듈의 import/export 키워드는 정적으로 정의되어, 분석기가 전체 코드를 미리 파악할 수 있음. *정적으로 정의- 코드가 런타임에 결정되지 않고, 컴파일 시점이나 분석 시점에 구조와 동..
[매일메일] CommonJS와 ES Module(ESM) 차이점이란? (FE.250103) (개발자 강화/프론트엔드) 2025. 1. 26. 21:35 CommonJS, ES Module(ESM) 자바스크립트에서 모듈을 관리하고 불러오는 방식  CommonJSES Module사용 환경Node.js 환경브라우저, Node.js 환경모듈 로드동기적SSR 환경에서 유리함(모든 모듈 로드 후 실행)비동기적(브라우저에서 모듈 로드 , 페이지 로딩 속도 저하 X)모듈 키워드(가져옴/내보냄)require / module.exportsimport / export트리 셰이킹어려움(사용되지 않는 코드 제거하기 어려움)유리함(사용되지 않는 코드 제거하고 번들 크기 줄임)예시const moduleA = require('./moduleA'); moduleA.sayHello(); module.exports = {     sayHello: function() {         c..
[개발] DB Trigger란? (개발자 강화/백엔드) 2025. 1. 24. 22:56 DB Trigger란 무엇일까... 살면서 가장 쿼리를 많이 써보고 있어 지금...사람살려... DB Trigger란?DB에서 특정 이벤트(INSERT, UPDATE, DELETE)가 발생하면, 별도의 호출 없이 자동으로 실행됨특정 작업을 자동화하거나, 변경 사항 기록에 사용함데이터 무결성 보장: 특정 비즈니스 규칙을 강제해서 데이터 일관성을 유지함Trigger의 구성 요소Event: 트리거가 실행되는 조건 INSERT, UPDATE, DELETETiming: 트리거가 이벤트 전 or 후 언제 실행되는지Table: 트리거가 적용될 테이블Trigger Body: 트리거가 실행도리 때 수행할 SQL 문이나 로직.Trigger 사용 예시CREATE TABLE EmployeeLogs ( log_id INT..
[매일메일] WAS와 웹서버의 차이점? (BE.250124) (개발자 강화/백엔드) 2025. 1. 24. 22:29 웹 서버: 정적 리소스 처리, 요청 분배, 캐싱, HTTPS 처리정적 컨텐츠(HTML, CSS, JS, 이미지 등)를 제공하는 역할클라이언트 요청이 정적 파일이 아니면 요청을 WAS로 전달함.캐싱과 압축 기능을 통해 리소스 제공 속도를 최적화할 수 있음WAS(Web Application Server): 동적 요청 처리, 비즈니스 로직 수행, 데이터 연동 등.HTTP 요청을 받아 어플리케이션 로직을 실행하거나, 데이터베이스와 상호작용해 동적 콘텐츠 생성서블릿(Servlet) 컨테이너를 통해 Java 서블릿이나 JSP(Java Server Pages) 같은 기술을 실행함더보기서블릿1. 서블릿 = Server+Applet    Applet: 클라이언트 측에서 실행되는 작은 Java 프로그램    Servlet..