개발을 하다 보면, 자바스크립트에서 객체를 다룰 때 단순한 변수 복사와 다르게 객체의 복사는 사용하는 방식에 따라 예상과 실제 로직의 값이 다르게 나오기도 한다. 이는 객체가 참조 타입으로 지정되기 때문이며, 원본과 복사본이 어떻게 연결되는지에 따라 동작이 달라진다. 특히, 얕은 복사와 깊은 복사의 차이를 이해하지 못하면 원본 객체가 의도치 않게 변경되는 문제가 발생할 수 있다. 이를 올바르게 활용하려면 먼저 원시 값과 객체 값이 메모리에 할당되는 방식을 이해한 뒤, 두 복사 방식의 차이와 사용해야 하는 상황을 명확히 알아야 한다. 그렇다면 자바스크립트에서 데이터가 어떻게 저장되고, 복사될 때 어떤 방식으로 동작하는지 알아보자. 자바스크립트의 데이터 타입 자바스크립트의 모든 값은 원시 타입(Numbe..
자바스크립트는 동적 타이핑 언어로, 변수 선언 시 타입이 정해지지 않고 변수에 할당된 값(원시 값 또는 객체 값)에 의해 타입이 결정된다. 또한 자바스크립트는 약타입 언어이므로, 타입 에러 대신 암묵적 타입 변환이 발생하게 된다. 이러한 특성은 자바스크립트를 유연한 언어로 만들어 주지만, 동시에 예상치 못한 버그를 초래할 수도 있다. 예를 들어, null과 undefined의 차이를 정확히 알지 못하면 조건문에서 의도치 않은 결과를 얻을 수 있다. 또한 객체를 복사할 때 참조가 공유된다는 사실을 모른다면 한 곳에서의 변경이 예상치 못한 사이드 이펙트를 일으킬 수 있다. 따라서 자바스크립트의 데이터 타입을 제대로 이해하면 변수에 저장되는 값의 특성을 명확히 파악할 수 있어 불필요한 버그를 예방하고, 효율적..
들어가기에 앞서:이 글은 2025년 2월을 기준으로 작성되었습니다. 저는 웹 개발자로, 2022년도에 컴퓨터과학과 3학년에 편입해 내년 2월 졸업을 앞두고 있습니다. 평소 비전공 개발자분들께 방통대를 추천하는 편이고 이번 학기에도 지인 한분이 입학하게 되어 (벌써 4명째 추천 입학..) 학교 생활을 안내드리기 위해 이 글을 작성했습니다. 제게는 직장의 우선순위가 더 높기 때문에, 학교를 효율적으로 다니는데 중점을 두고 있고 글도 일정 관리, 과제물/시험 응시 방법에 중점을 두고 작성되었으니 참고 부탁드립니다. 이하 본문은 평소의 블로그 스타일대로 ~다. 체로 작성합니다. 학교 중요 스케줄 확인하기 ✔️ 방송통신대학교(이하 방통대)의 대부분 일정은 온라인으로 진행되기 때문에 일정 관리를 도와줄 사람이..
📚 한빛미디어 서평단 활동을 위해서 책을 협찬받아 작성된 서평입니다. 깊이 있는 개발 전문 서적 시리즈로 유명한 오라일리에서 리액트 관련 신간이 출판되었다는 소식을 듣고, 「전문가를 위한 리액트」를 신청했다. 더구나 2024년 12월 말 초판이 나온 신간으로, 최근 빠르게 변화하고 있는 리액트 최신 기술 동향을 잘 반영하고 있을 것이라는 기대감도 있었다. 이 글이 본 책이 어떤 내용으로 구성되어 있는지 궁금한 분들께 도움이 되길 바란다. 「전문가를 위한 리액트」의 목차는 다음과 같다. 입문 지식JSX가상 DOM재조정자주 묻는 질문과 유용한 패턴 (hooks, state, 최적화, 패턴 등)리액트의 서버사이드리액트의 동시성프레임워크 (remix, next.js)리액트 서버 컴포넌트리액트의 ..
모던 프론트엔드 프레임워크인 리액트나, 뷰에서 대부분의 요청을 비동기로 진행해야 한다는 이야기를 자주 듣곤 한다. 그렇다면 왜? 굳이 비동기 프로그래밍을 해야 할까? 에 대한 궁금증이 생겼다. 따라서 비동기가 뭔지, 왜 비동기 프로그래밍을 하게 됐는지, 어떻게 하는지, 어떤 장점이 있는지를 흐름에 따라서 간단하게 정리해보고자 한다. 동기와 비동기 동기는 어떤 작업을 요청했을 때, 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식이다. 반면 비동기는 어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다리지 않고, 다른 작업을 먼저 수행하고 있다가 요청했던 작업이 종료되면 그에 대한 추가 작업을 진행하는 방식이다. 예시를 들어 설명해보자면 동기는 음식을 주문한 후 그 요리가 완료되어 내게 ..
웹 프론트엔드 개발자로서 단순히 개발하는 것에 그치지 않고 사용자 경험과 동료들과의 협업을 고려해 더 나은 코드를 작성하는 방법을 항상 고민하게 된다. 그러던 중 이 책을 알게 되었고,'라이프사이클부터 웹사이트 구축까지' 라는 문구가 표지에 있어 전반적인 내용을 포괄적으로 다룰 것 같아 꼭 읽어보고 싶었다. 「더 나은 웹개발을 위한 가이드」라는 이름처럼 이 책은 HTML, CSS, JavaScript, TypeScript 뿐만 아니라 최신 개발 경향, 다양한 디바이스별 개발 방법까지 폭넓은 주제를 다루고 있어 유익했다. 특정 기술에 깊게 집중하는 대신, 웹 개발의 흐름을 넓은 시각에서 이해할 수 있었다. 특히 요새 개인적으로 많이 사용하는 중인 CSS Grid에 대한 구체적이고 실용적인 설명이 포..
캔버스의 개념캔버스의 개념 HTML5에 새롭게 등장한 요소인 캔버스. 캔버스는 이름처럼 코드를 이용해 그림을 그릴 수 있는 공간을 제공한다. 코드에 단순히 라는 태그만 작성하게 되면 화면에 무언가 나타나거나 하지는 않는다. 캔버스라는 영역 위에 자바스크립트를 이용해 하나하나 그림을 그려가야 원하는 결과물을 볼 수 있다. 이런 기능을 활용해 애니메이션, 데이터 시각화 등의 다양한 그래픽 작업에 사용된다. 캔버스의 장점 이러한 캔버스 태그를 사용해 그래픽 작업을 하게 되면, 아래와 같은 장점이 있다.브라우저 안에서 직접 렌더링하기 때문에 그래픽 성능이 뛰어나다.또, 요즘의 모던 브라우저는 캔버스 태그를 지원하기 때문에 파이어폭스, 크롬, 엣지 가리지 않고 호환성에 유리하다.그리고 다양한 그래픽 요소를 사..
지금이 그때인 것 같다. 초심자의 행운 이후 잔인한 시험에 든 시간이. 부트캠프 수료 후 취업 했을 땐 개발을 모르던 내가 여기까지 해냈다는 성취감이 컸다. 하지만 만 1년 차가 된 지금은 내가 잘하고 있는 건지, 또 잘하는 개발자들에 비해 내가 너무 모자란 건 아닌지 많은 생각이 든다. 요새 마음을 다잡으려 제일 좋아하는 책인 「연금술사」를 다시 읽고 있는데, '무언가를 찾아 떠나는 여정은 항상 초심자의 행운으로 시작해서 잔인한 시험으로 끝난다.'라는 문장이 지금 내 상황과 너무 잘 맞는다고 생각했다. 그럼 난 이 시험을 어떻게 이겨낼 수 있을까. 그간의 나를 돌아보고, 앞으로의 여정을 다잡기 위해 회고글을 작성해 본다. 회사에서의 나는?잘한 점1. 뷰에 대해 알게 되었다.리액트만 알고 뷰는 하나도 몰..
브라우저 기반의 개발을 하는 프론트엔드 개발자더라도, 개발을 하다보면 결국 CS를 공부해야 한다고 느끼게 된다. 프로그래밍 언어는 결국 컴퓨터를 기반으로 하기 때문이다. 어떻게 공부하면 좋을까 고민을 하던 찰나, 컴퓨터 구조와 운영체제 기초를 다질 수 있는 이 책을 알게 되었다. 컴퓨터 구조와 운영체제 핵심 노트는 컴퓨터 구조를 왜 알아야 하는지부터 차근차근 시작해서 운영체제와 알고리즘까지 전반적인 개념을 폭넓게 배워볼 수 있는 목차로 구성되어 있다. 기본기를 다지는 책답게 단순히 글자로만 설명되어있는게 아니라, 그림이나 도표를 이용해 설명해주는 부분도 좋았다. 특히나 알고리즘은 그 순서가 어떻게 되는지 직접 써보면서 이해하곤 했는데 책에 이미 깔끔하게 정리가 되어있어 그 흐름대로 짚고 넘어갈..
업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다. 객체의 getter, setterconst person = { firstName: 'Olivia', lastName: 'Kim', get fullName() { return `${this.firstName} ${this.lastName}`; }, set fullName(name) { [this.firstName, this.lastName] = name.split(' '); }};console.log(person.fullName); // Olivia Kimperson.fullNam..
