전체 글22 DOM, 이건 알고가자 프론트 개발자라면 DOM이 무엇인지는 모두 아실텐데요.이번 글에선 DOM에 대해 다시 한번 복습해봅시다.DOM의 정의우리가 작성한 HTML 코드는 단순히 텍스트에 불과합니다.여기서 브라우저는 이 텍스트를 읽어서 화면에 그리기 위해, 각 HTML 요소를 객체로 변환합니다.이 객체들이 서로 부모 - 자식 관계로 얽혀 나무 모양의 구조를 이루는데, 이를 DOM 트리라고 부릅니다.왜 DOM이 필요할까?DOM이 없다면 JS는 HTML의 내용을 바꿀 방법이 없습니다.DOM 덕분에 JS는 다음과 같은 일을 할 수 있습니다.내용 변경: 버튼을 클릭 시 텍스트를 바꿈스타일 수정: 특정 요소의 색상을 빨간색으로 변경요소 추가/삭제: 리스트 항목을 새로 만들거나 삭제이벤트 처리: 사용자의 클릭이나 키보드 입력을 감지DOM의.. 2026. 4. 8. webSocket 넌 뭐냐(2) 이번 글에선 저번 글에서 예고했듯이 webSocket의 예시 코드를 살펴봅시다.글을 읽기 전에 저번 글을 읽고 오신다면 더욱 이해하기 편하실겁니다. webSocket 넌 뭐냐(1)오늘은 WebSocket에 대해 간단히 정리해보려고 합니다.최근 진행 중인 프로젝트에서 WebSocket을 직접 사용하게 되면서, 이 기술이 왜 등장했고 어떤 상황에서 유용한지 한 번 정리해볼 필요성을 느tccelestyn6248.tistory.comWebSocket 코드 예시바로 본론으로 들어가서, 가장 기본적인 WebSocket 코드부터 살펴보겠습니다.let socket = new WebSocket("wss://example/chat");socket.onopen = function(e) { alert("[open] 커넥션이.. 2026. 3. 31. webSocket 넌 뭐냐(1) 오늘은 WebSocket에 대해 간단히 정리해보려고 합니다.최근 진행 중인 프로젝트에서 WebSocket을 직접 사용하게 되면서, 이 기술이 왜 등장했고 어떤 상황에서 유용한지 한 번 정리해볼 필요성을 느끼게 되었습니다. 그래서 이번 글에서는 WebSocket의 개념부터, 기존 방식과의 차이, 그리고 실제 사용하면서 느낀 점까지 가볍게 풀어보려 합니다.WebSocket은 왜 등장했을까?먼저 WebSocket이 등장하게 된 배경부터 살펴보겠습니다.초기의 인터넷은 지금처럼 복잡하지 않았습니다.단순히 터미널 환경에서 텍스트를 주고받는 수준의 통신이 전부였죠.이후 더 직관적이고 구조화된 통신을 위해 HTTP가 등장합니다.HTTP는 흔히 **프로토콜(통신 규칙)**이라고 부르며, 웹의 기본이 되는 핵심 기술입니다.. 2026. 3. 30. 비동기? 동기? 이게 다 뭐야? 개발을 하다보면 비동기와 동기라는 용어를 자주 접하게 될것이다.이 용어들은 데이터를 주고 받는 형식이다.그럼 이제 이 용어들을 더욱 자세히 알아보자.동기웹페이지를 새로고침하면서 데이터를 불러오는 방식이다.페이지를 바꾸면 페이지 자체가 로딩된다. 가장 대표적인 예시는 from 형식이다.from 형식은 데이터 값을 입력받아 서버에 보내주는 역할을 한다.데이터 값을 서버에 보내주게 되면 서버로부터 새로운 웹페이지를 받아서 화면에 보여주는 형식이다.장점비동기보다 코드가 간단하다.요청과 응답이 순차적으로 진행된다 -> 코드의 간결성과 직관성을 유지가능하다.동기 통신은 요청을 보낸 후 응답을 받아야지만 다음 작업을 수행한다. 즉, 요청과 응답의 순서를 보장할 수 있다.예를 들어 A와 B라는 두 개의 요청을 보냈다면.. 2026. 3. 26. 대체 CI/CD가 뭐길래? 여러분들이 개발자라면 이 말을 꼭 들어봤을 겁니다. CICD그렇다면 대체 CICD가 무엇이길래 개발자들의 사이에서 계속 언급되는 걸까요?이번 글에선 그 CI/CD를 한번 알아봅시다. 정의CI/CD는 애플리케이션 개발 단계부터 배포까지 과정을 자동화하여,빠르고 안전하게 코드의 변경을 배포하기 위한 자동화 파이프라인입니다.쉽게 말해, 개발자들이 개발에만 집중할 수 있도록 귀찮고 번거로운 일은 자동화로 돌린다는 말입니다.그럼 이제 CI와 CD를 한번 나누어 각각 살펴봅시다.CI, 넌 누구냐CI는 Continuous Integration, 즉 지속적인 통합을 의미합니다.예를 들어봅시다. 만약 여러분이 다른 사람과 협업을 진행중입니다. 각자 브랜치를 만들어 오랜 시간 동안 따로 개발을 진행한 뒤 한 번에 머지를 .. 2026. 3. 19. 프론트엔드 상태관리? immer으로 간단하게 프론트엔드 개발자들이 사용하는 연산자가 있습니다.바로 Spread 연산자입니다.하지만 데이터 구조가 깊어지고 복잡해질수록 코드는 더러워지며, 소위 말하는 Spread 연산자 지옥이 생성됩니다.이번 글에선 이러한 Spread 연산자에게 고통받았을 사람들을 위해 더욱 간편한 immer이라는 라이브러리를 소개해볼 것입니다.Spread 연산자?먼저 Spread 연산자가 무엇이고, 이것이 왜 안 좋은 지부터 설명해 드리겠습니다.Spread 연산자는 JS에서 객체나 배열의 값을 바꿀 때, 원본을 유지하기 위해 사용되는 연산자입니다.이는 프론트엔드 개발자들이 매우 자주 사용하고 애용하는 연산자 중 하나이죠. 하지만 위에서 말했듯, 데이터 구조가 깊어진다면 코드가 매우 더러워지는 문제가 발생합니다.const state.. 2026. 3. 10. 이전 1 2 3 4 다음
