코딩하는 라이언

Vanilla JavaScript로 처음 학습을 시작했을 때, 파일 간 의존성을 관리하기 위해 여러 개의  가볍게 알아보는 8. text/babel 또는 application/babel설명: Babel을 통해 트랜스파일링할 자바스크립트 코드를 포함.용도: ES6+ 문법을 ES5로 변환하여 실행할 때.특징:브라우저에서 실행하기 전에 Babel 트랜스파일러가 필요.9. type 속성을 생략한 경우설명: 기본값은 text/javascript로 처리됩니다.용도: 일반적인 자바스크립트 실행.마무리모던 웹 개발에서는 주로 type="module"을 사용하여 모듈화를 지원합니다.데이터 처리를 위해 application/json 또는 application/ld+json과 같은 MIME 타입이 유용합니다.type 속성은..

요즘 채용공고에 WebPack와 같은 번들러를 이용한 개발 환경 설정 경험이 자격 요건으로 올라와 있는 것을 자주 보게되었습니다. 궁금했지만 미뤄오던 React 개발 환경 셀프 세팅을 시작하였습니다. 개발 시작 처음부터 cra(create react app)를 통해 편하게 리액트 개발을 해온지라 초기 개발환경 설정은 간단하지만 어떤 프로젝트냐에따라 하나하나 설정할 것이 많다는 것을 알게되었고 이론으로만 듣던 프로젝트가 무겁다는 말이 무엇을 의미하는 지 새삼 느끼게되었습니다. 해당 글에서는 Vite React를 이용해 Socket.io로 간단한 채팅앱을 만들어보려합니다.  해야할 일은 아래와 같습니다.ToDos ✏️Vite React TypeScript 설정하기App.tsx 파일 vite 서버로 실행하기프..

자주 사용하는 노션용 마크다운 문법 들은 정리한 게시물입니다. 마크다운 문법이 궁금하다면 아래 버튼을 통해 사이트를 확인해주세요마크다운 공식 문서 바로가기 ✔️ 제목, 소제목 설정하는 법⌨️ 키보드 입력 : # + Space샵 (#)의 개수를 이용해 제목, 소제목을 빠르게 입력할 수 있습니다. ( # 3개가 최대)🔖 예시#제목1##제목2###제목3✔️ 인용구 설정하는 법⌨️ 키보드 입력 : 큰따옴표 `"` + `Space`🔖 예시이런 표시를 인용구라고 합니다.✔️ 인라인 코드블럭 사용하는 법백틱(`)으로 글자를 감싸면요런 형태가 됩니다. Mac은 영문 버전에서tab버튼 위의~\ 버튼을 누르면 백틱을 사용할 수 있습니다.✔️ 코드블럭 사용하는 법백틱( ` )을 세번 입력하면 코드블럭이 생성됩니다. 코드..

동기와 비동기란?소프트웨어 개발에서는 "동기(Synchronous)"와 "비동기(Asynchronous)"라는 개념이 자주 등장합니다. 어떤 경우에 동기를 사용하고 비동기를 사용하는지에 대해 간단한 개념 설명을 통해 알아보겠습니다.동기와 비동기의 개념동기(Synchronous)동기란 작업이 순차적으로 진행되는 방식을 말합니다. 하나의 작업이 끝나야만 다음 작업이 시작됩니다.특징: 작업이 서로 "맞물려" 진행됩니다. 이전 작업이 완료될 때까지 대기해야 하므로 실행 순서가 보장됩니다.비동기(Asynchronous)비동기란 작업이 병렬적으로 진행되는 방식을 말합니다. 하나의 작업이 완료될 때까지 기다리지 않고, 동시에 다른 작업을 진행할 수 있습니다.특징: 대기 시간이 없으며, 결과가 준비되면 알림을 받거나 ..

❔ API 어디까지 쓰이는걸까?API의 개념Application Programming Interface, 프로그래밍 언어가 제공하는 기능을 제어할 수 있도록 제어할 수 있게 만든 인터페이스입니다. (출처: MDN) 위와 같은 설명만으로는 API가 무엇인지, 개발을 처음 접하는 사람들은 한 번에 이해하기 힘들 수 있습니다. API는 애플리케이션에서 데이터를 읽거나 쓰기 위해 사용하는 인터페이스입니다.🗝️ 여기서 인터페이스란?인터페이스(interface)는 상호 간의 소통을 위해 만들어진 접점입니다. 서로 다른 소프트웨어가 소통할 수 있도록 도와주는 다리 역할이라고 볼 수 있습니다. 이는 특정 기능이나 데이터를 다른 프로그램에서 사용할 수 있도록 만들어 놓은 "약속" 또는 "규칙"이라고 생각하면 됩니다.예..

자바스크립트에서 this는 많은 개발자들에게 혼란을 주는 개념입니다. this가 참조하는 값은 코드가 실행되는 문맥(context) 에 따라 달라지기 때문인데요. 특히 함수나 메서드 내에서 this가 어떻게 동작하는지 이해하는 것이 중요합니다. 시작하기 전 this는 호출한 주체라는 것을 기억하고, 이번 포스팅에서 예제와 함께 this를 확실하게 알아봅시다.this에 대한 기본 개념을 파악setTimeout 함수에서의 this 값 파악🔧  JavaScript에서 this란?this는 호출한 주체이다. this는 객체이지만 문제는 이 this가 어떤 객체인지가 헷갈립니다. this의 값은 함수를 호출하는 방법에 의해 결정됩니다.호출한 주체가 없을 경우 기본값인 window가 객체가 됩니다. (전역 스코프..

프론트엔드 개발자로서 성능 최적화는 중요한 과제입니다. HTML 문서에서 JavaScript 파일을 가져올 때, script 태그의 기본 동작과 함께 HTML5에 추가된 defer 및 async 속성을 활용하면 로딩 속도를 개선하고 성능을 최적화할 수 있습니다. 이번 포스팅에서는 각각의 개념과 올바른 사용 예시를 간단하게 알아봅시다.🔖 HTML 코드는 위에서부터 아래로 파싱됩니다.script 태그의 기본 동작HTML로 파일을 작성할 때 script태그를 사용해 JS 파일을 불러올 수 있습니다. 브라우저가 HTML 파일을 위에서부터 아래로 순차적으로 파싱하면서 🔧 script 태그의 문제점 알기script 태그를 head 태그에 위치하거나 body 태그 최상단에 넣을 경우 HTML이 다 파싱되기 전에 ..

DOM과 BOM웹 개발을 시작하면서 JavaScript를 배우다 보면 "DOM"과 "BOM"이라는 용어를 자주 접하게 된다. 처음 접하는 사람들에게는 이 용어들이 다소 생소하게 느껴지는데 이번 포스팅에서 깔끔하게 DOM과 BOM이 무엇인지, 둘의 차이와 역할에 대해 간단히 알아보자.DOM이란?DOM(Document Object Model)은 웹 페이지의 구조와 내용을 표현하는 계층적 모델이다. 브라우저 안에는 웹 문서를 해석할 수 있는 렌더링 엔진(Chrome의 Blink, Safari의 WebKit, Firefox의 Gecko 등)이 있는데 이 렌더링 엔진이 HTML로 작성된 문서를 하나하나 해석한 후, JavaScript로 접근할 수 있도록 문서를 객체화한다. 이렇게 웹 문서를 객체화한 것을 Docu..

벨로그에서 옮겨오는 중 터미널에서 실행하고 싶은 프로젝트 폴더로 이동한 후에 code . 명령어를 이용하여 VS code를 실행할 수 있다.세팅해서 안되길래 게시글을 찾아본 경우만약 이미 code . 명령어 설정을 했는데 실행이 안되는 경우zsh: command not found: code먼저 응용프로그램에 VS code가 설치가 잘 되어있는지 확인해본다. i cloud 사용자라면 그냥 다운로드 폴더 안에 VS code가 설치 되어 있을 수 있기때문에 아무리 세팅을 반복해도 컴퓨터를 껏다키면 적용되지 않는다.처음 세팅하는 경우터미널에서 cmd + shift + p 명령어로 설정 탭을 켠후PATH에 code 명령 설치 또는 Shell Command: Install 'code' command in PATH를..

AWS CloudFront 를 사용하는 이유에 대해 알려면 CDN을 먼저 이해해야한다.1. CDN(Content Delivery Network)이란?CDN은 전 세계에 분산된 서버 네트워크를 활용하여 사용자에게 더 빠르고 안정적으로 콘텐츠를 전달하기 위한 기술이다.기본 원리 - 사용자의 지리적 위치에 가장 가까운 서버에서 콘텐츠를 제공하여 전송 속도를 개선하고 지연(latency)을 최소화한다.장점웹사이트/애플리케이션의 로딩 속도 향상대규모 트래픽을 효율적으로 처리서버 부하 감소DDoS(Distributed Denial of Service) 공격 방어2. AWS CloudFront를 알아보자AWS CloudFront는 AWS에서 제공하는 관리형 CDN 서비스로, 정적(static) 및 동적(dynamic..