전체 글 (451) 썸네일형 리스트형 🎉 DND 13기 합격 후기 “이번 여름, 다시 한 번 개발자로 숨쉬기!” 원래 오늘 합격 메일이 올 예정이었는데, 오픈 채팅방에 어떤 분이 지금 합격여부 확인 가능하다고하셔서얼른 사이트에 들어가서 합격을 확인해보았습니다.그리고 그 결과는....합격! 야호!합격자 조회를 하면 폭죽 애니메이션과 함께 합격을 격하게 축하해줍니다 호호며칠간 떨리는 마음으로 기다렸는데, DND 해커톤 13기 합격 소식을 받아서 너무 기분이 좋았어요.그동안 여러 프로젝트와 스터디를 병행해왔지만, 이번엔 조금 더 특별한 도전을 하고 싶었거든요!구름톤에 이어서 DND까지 합격이라니, 요즘 재밌는 일들이 많이 벌어지고 있어서 너무 신나네요. DND는 어떤 곳일까?DND(Develop & Dream)는 개발자와 디자이너가 함께 모여 하나의 서비스를 기획하고 완성.. 브라우저 렌더링 성능 최적화! Reflow vs Repaint 완전 정리 🖥️ 브라우저 렌더링 최적화: Reflow vs Repaint브라우저는 HTML, CSS, JavaScript를 해석해 화면에 출력하는데, 이 과정에서 화면을 다시 그리는 작업이 발생합니다.그중 Reflow(리플로우) 와 Repaint(리페인트) 는 성능에 큰 영향을 주는 렌더링 단계입니다. ✅ reflow란?브라우저가 페이지의 레이아웃을 다시 계산하는 과정예를 들어:DOM 구조 변경 (예: 요소 추가/삭제)CSS 스타일 변경 (예: 요소의 크기(width, height), 위치, 폰트 크기 변경)브라우저 창 크기 변경이런 일이 발생하면 브라우저는 다시 레이아웃을 계산하고, 이 과정에서 reflow가 발생합니다.이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주므로, 연쇄적으로 많은 요소에 .. 브라우저에 www.naver.com을 입력하면 무슨 일이 일어날까요? 🌐 브라우저에 www.naver.com을 입력하면 어떤 일이 일어날까요? 지긋지긋한 면접 질문 중 하나. 브라우저에 ~를 입력하면 무슨 일이 벌어질까요!!!!!!!!!!저만 골치아픈가요 🥲우리 모두가 매일같이 사용하는 웹 브라우저.그 주소창에 www.naver.com을 입력하면 어떤 일이 일어나는지, 내부 동작을 단계별로 정리해보았습니다.겉으로 보기엔 단순한 동작처럼 보이지만, 브라우저 내부에서는 꽤나 많은 일들이 벌어지고 있어요. 이 골치아픈 놈을 이제 해결해봅시다. 브라우저에 www.naver.com을 입력하면 벌어지는 일1️⃣ URL 파싱브라우저는 사용자가 입력한 주소를 URL 파싱으로 분석해 프로토콜, 호스트, 경로 등을 파악합니다.예를 들어 https://www.naver.com의 경우:프로.. 🎉 구름톤 14기, 합격했어요! 얼마 전, 개발자 커뮤니티 '구름톤' 14기 모집에 지원했었는데요.원래 내일 결과일인데, 오늘 일찍 결과가 발표났고…! 합격했습니다 :)잠시 낮잠 자다가 일어났는데 합격 메일이 와서 깜짝 놀랐지 뭐에요! 사실 합격은 기대 못하고 있었는데, 뜻밖의 선물 받은 기분이었어요. 처음 구름톤에 대해 알게 됐을 땐,“이런 해커톤 기반 커뮤니티가 있다고?” 하고 신기했어요.딱 제가 좋아하는 분위기더라고요.열정 있는 분들이랑 빠르게 제품을 만들어보고, 서로 아이디어도 부딪히고, 성장도 함께 할 수 있는 기회.그래서 지원서를 쓸 때도 진심을 담아 열심히 작성했는데, 이렇게 좋은 결과가 있어서 정말 기뻐요! 📅 본격적인 일정은 이제부터구름톤은 단순한 해커톤이 아니라,4박 5일 동안 한 공간에서 생활하며 함께 협업하는 집.. 쿠키(Cookie) vs localStorage vs sessionStorage 제대로 알고 쓰기 웹 개발을 하다보면 사용자의 정보를 브라우저에 잠깐 저장해야 할 일이 많습니다. 예로 들어서, 로그인 상태 유지나 장바구니 정보 저장 같은 기능이 있죠.이때 서버에 요청하지 않고 브라우저에 데이터를 잠깐 저장해두는 기술이 바로 오늘의 주제, 웹 스토리지(Web Storage)인데요,오늘은 웹 스토리지가 무엇인지, 그리고 그 종류에 대해서도 자세히 알아보겠습니다. 💡 웹 스토리지가 뭐예요?웹 스토리지는 HTML5에서 새롭게 도입된 기능으로, 쿠키보다 훨씬 강력한 데이터 저장 방식입니다.JavaScript를 통해 브라우저(클라이언트)에 데이터를 저장하는 공간이에요.서버로 전송되지 않아서, 빠르고 가볍게 사용할 수 있어요. 📍 웹 스토리지의 특징브라우저 내에 저장됨 (클라이언트 저장소)서버로 자동 전송되.. 콜백은 왜 불편했을까? 자바스크립트 비동기의 발전 과정 한눈에 보기 📦 자바스크립트 비동기 처리 완전 정복: Callback → Promise → async/await자바스크립트를 배우다 보면 꼭 한 번은 부딪히는 개념이 있습니다.바로 비동기 처리. 그리고 그 핵심은 콜백(callback), 프라미스(Promise), async/await입니다.이 글에서는 비동기 처리 방식이 어떻게 발전해왔는지,왜 콜백만으로는 부족했는지, 그리고 async/await이 왜 깔끔한지 단계별로 정리해보겠습니다. ⏳ 비동기 처리가 필요한 이유자바스크립트는 단일 스레드 기반 언어예요.그래서 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 그대로 실행하면 전체가 멈춰버려요.이를 방지하기 위해 브라우저나 Node.js는 이런 작업을 비동기(Asynchronous)로 처리합니다... 동기? 비동기? 밥 먹고 카톡하면서 이해해보자 동기(Synchronous)와 비동기(Asynchronous)는 "코드가 실행되는 흐름(방식)"을 의미하는 기본 개념이에요.특히 자바스크립트(JavaScript)에서는 단일 스레드(single-threaded) 기반의 언어이기 때문에, 한 번에 하나의 작업만 할 수 있어요. 그래서 이 개념이 아주 중요합니다. 1. 동기(Synchronous)✔ 정의한 작업이 완전히 끝나야 다음 작업을 실행하는 방식자바스크립트는 기본적으로 동기적으로 실행됩니다.즉, 코드는 한 줄씩 순서대로 실행돼요. 📋 예시console.log('1');console.log('2');console.log('3');결과:123 ⚠️ 단점만약 한 작업이 오래 걸리면(예: 파일 읽기, API 요청 등)→ 그 작업이 끝날 때까지 다른 작업이 .. CORS 에러가 뭔데 자꾸 막는 건데? (프록시로 뚫자!) 프론트엔드 개발을 하다 보면 한 번쯤은 만나는 에러가 있습니다.Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy.처음엔 "이게 뭔데? 내가 뭘 잘못한 거지?" 싶고, 나중엔 "아 또 이거야…" 싶죠.오늘은 이 CORS 에러가 왜 발생하는지,또 이를 해결하는 프록시란 무엇인지,그리고 Next.js(App Router 기준)에서 이걸 프록시로 어떻게 해결할 수 있는지 찬찬히 정리해볼게요. 🧠 CORS란 뭐예요?CORS는 Cross-Origin Resource Sharing의 줄임말이에요.말 그대로 "다른 출처(origin)의 리소스를 브라우저가 공.. 이전 1 2 3 4 ··· 57 다음
