100일은 해야지

next.js를 공부하다가 chunk buffer stream에 대해 나와서 의미를 작성해두려고 함. Chunk (청크)데이터의 조각대용량 파일을 작은 청크로 나누어 메모리에 로드하거나, 네트워크에서 데이터를 청크로 받아 처리할 때 사용됨Buffer (버퍼)데이터를 임시로 저장하는 메모리 영역데이터를 일시적으로 저장하여 처리 속도를 향상시키는 데에 사용됨Stream (스트림)데이터의 연속적인 흐름을 나타냄입력 스트림은 데이터를 읽어오는 데 사용되고, 출력 스트림은 데이터를 보내는 데 사용 그래서 셋의 관계??chunk는 데이터 조각, 작은 크기로 이루어진 데이터buffer는 chunk를 임시로 저장하는 메모리 공간, 일정량의 데이터를 저장할 수 있음stream은 buffer에 저장된 데이터를 처리하고, ..

😳 검색 엔진 최적화 SEO? 검색 엔진 최적화 SEO, 검색 결과 상위에 노출되도록 하게 하는 작업이라고 알고 있다. 거의 물에 발만 닿은 수준으로 알고 있는데 이번 기회에 발이라도 담가보려... 한다. 정말 간단히... 🙄 SEO란? SEO는 "Search Engine Optimization"의 약자로, 웹 사이트나 웹 페이지가 검색 엔진 결과 페이지에서(SERP) 상위에 나타나도록 최적화하는 과정, 이를 통해 더 많은 유기적인 트래픽을 유도하고, 온라인 비즈니스나 정보 제공 웹사이트의 가시성을 향상시킬 수 있다. 🧐 그러면 프론트엔드 입장에서 SEO는? 프론트엔드 개발자는 웹 페이지의 디자인, 구조, 사용자 경험 및 성능을 구축하는 역할을 한다. 이 모든게 검색 엔진 최적화에 영향을 미친다. 따라..

🤔 웹 표준? 🤔 웹 접근성? 🤔 웹 호환성? 웹 표준과 웹 접근성 웹 호환성 이 세 가지가 웹 개발의 핵심 원칙이라 한다. 그러면 이 세 가지에 대해서 잘 알아야 하겠지만, 내 머리에 다 들어가지.... 않기 때문에! 내 머릿속에 간단히라도 담기 위해서 글 작성을 해본다. 😳 웹 표준 (Web Standards)이란? 👉 언어와 기술의 일관성을 위한 웹 표준 👉 웹 표준은 웹 페이지를 구성하는 HTML, CSS, JavaScript 등의 언어와 기술을 표준화하는 규칙과 지침의 집합이다. 👉 모든 브라우저에서 동일한 방식으로 해석하고 표시할 수 있도록 한 것을 말한다. 👉 한마디로! 웹에서 지켜야 하는 표준적인 규칙 🤔 왜 웹 표준을 준수해야 하는 걸까? 👉 크로스 브라우징 호환성 사용자들이 어떤 브라우..

😳 Promise란? ES6에서 도입된 비동기 작업을 처리하기 위한 객체 콜백 지옥(callback hell)의 코드 복잡성을 해결하고, 가독성을 향상시키기 위해 도입되었다. 🌀 Promise는 세 가지 상태를 가진다. 👉 Pending(대기 중) : 비동기 작업이 아직 완료되지 않은 상태 👉 Fulfilled(이행됨) : 비동기 작업이 성공적으로 완료된 상태 👉 Rejected(거부됨) : 비동기 작업이 실패한 상태 🌀 Promise 객체의 기본적인 메서드 👉 then : Promise가 성공적으로 이행되면 호출되는 메서드 👉 catch : Promise가 거부되었을 때 호출되는 메서드, 오류 처리를 위해 사용 👉 finally : Promise가 이행되거나 거부되었을 때 무조건 호출되는 메서드 🌀 P..

😳 콜백 함수(callback function) 👆 콜백함수란 ? 다른 함수의 인자로 넘겨지고, 해당 함수의 실행이 끝나면 호출되는 함수를 말한다. 👂 콜백함수는 언제 사용할까? 👉 비동기 작업이 완료된 후에 그 결과를 처리하는 데 사용된다. 👉 setTimeout, setInterval 등의 타이머 함수에 사용되어 특정 시간이 지난 후 실행할 작업을 정의할 수 있다. 👉 이벤트 핸들러에서 사용되어 특정 이벤트가 발생한 후에 실행할 작업을 정의할 수 있다. ↘ ↗한마디로 말하자면 특정 작업의 실행 순서를 지정하거나 조절하기 위해 사용된다는 말입니다. 👀 아래 예시를 통해서 콜백함수를 더 알아보자. firstFunc의 콜백함수로 secondFunc을 정의했을때, firstFunc은 비동기 작업(setTim..

😵‍💫 동기??? 비동기?? 👆 먼저 동기와 비동기의 차이에 대해 알아보자. 👉 동기(Synchronous) 동기는 데이터의 요청과 결과가 한 자리에서 동시에 일어나는 것을 말한다. 동기적인 작업은 순서대로 진행하면서 이전 작업이 완료된 후에야 다음 작업이 실행되기 때문에 , 이전 작업이 완료될때까지 무한대기 해야한다는 단점이 있지만, 작업이 한 번에 하나씩 순차적으로 처리되기 때문에 코드의 흐름과 순서를 예측하기 쉽다는 장점이 있다. 👉 비동기(Asynchronous) 비동기는 동시에 일어나지 않는다는 것을 의미한다. 비동기적인 작업은 순서대로 진행되지 않고, 작업이 완료되지 않아도 다음 작업이 실행된다. 작업이 완료되면 결과를 반환하거나 콜백 함수를 호출하여 결과를 처리한다. 작업이 완료되기 전에 다..

💭 AJAX(Asynchronous JavaScript and XML) AJAX는 JavaScript를 통해 서버와 비동기적으로 데이터 주고받는 기술입니다. AJAX는 XML, JSON, HTML 등의 형식으로 서버와 데이터를 교환할 수 있습니다. 🧐 서버랑 비동기적으로 통신?? 👉 서버 서버는 유저가 데이터를 요구하면 데이터를 보내주는 프로그램 원하는 데이터 URL로 get요청을 하면 서버가 데이터를 보내줌 👉 비동기적 통신 비동기적이라는 의미는 요청과 응답이 서버로부터 도착할 때까지 기다리지 않고, 다른 작업을 계속할 수 있다는 것을 의미 AJAX는 XMLHttpRequest 객체나 Fetch API를 이용하여 서버와 통신하는데, 사용자의 동작에 상관없이 웹 페이지의 다른 작업을 계속할 수 있도록 하..

CSR(Client-side Rendering) CSR은 웹 애플리케이션의 렌더링 방식 중 하나입니다. CSR은 클라이언트 측에서 서버에 초기 HTML을 요청하면 서버는 빈 HTML을 주고, 그다음 브라우저에서 JavaScript와 같은 언어를 사용해서 웹 페이지를 동적으로 생성하고 렌더링 해줍니다. CSR의 장점 사용자 경험 향상 : CSR은 웹 페이지를 로드한 이후 클라이언트 측에서 동적으로 콘텐츠를 생성하고 업데이트하기 때문에 사용자와의 상호작용에 따라 필요한 부분만 서버에 요청하고 렌더링 하기 때문에 페이지 업데이트가 빠르고 반응성이 높습니다. 서버 부하 감소 : 브라우저에서 렌더링 작업을 처리하므로 서버 부하가 상대적으로 적습니다. 서버와 클라이언트 분리 쉬움 : 서버는 API역할을 수행하거나 ..