본문 바로가기

전체 글

 (172)
🌟[매일메일] 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)에 의해 인증되었음을 보장함.인증서를 통해 서버가 신..

티스토리툴바