본문 바로가기
728x90

Todo78

Vite+React+Styled-Components 개발 환경 세팅하기 (feat. Socket.io이용한 chat App만들기) 앞선 포스팅Vite React TypeScript 개발환경 설정하기https://devchaeyoung.tistory.com/72Vite React chatApp 만들기 ToDos ✏️Vite React TypeScript 설정하기App.tsx 파일 vite 서버로 실행하기프로젝트에 맞는 CSS 설정하기socket.io를 이용한 채팅 만들기완료된 프로젝트 보일러플레이트 보러가기 >> https://github.com/devchaeyoung/vite-chat-app01. 사용하려는 css라이브러리 선택하기js in css : styled-components간단한 프로젝트여서 빠른 스타일링을 위해 상대적으로 손에 익은 js in css인 styled-components를 선택했습니다.사이트 참고@emotio.. 2025. 1. 9.
HTML Script 태그 type 속성이 필요한 이유? Vanilla JavaScript로 처음 학습을 시작했을 때, 파일 간 의존성을 관리하기 위해 여러 개의  가볍게 알아보는 8. text/babel 또는 application/babel설명: Babel을 통해 트랜스파일링할 자바스크립트 코드를 포함.용도: ES6+ 문법을 ES5로 변환하여 실행할 때.특징:브라우저에서 실행하기 전에 Babel 트랜스파일러가 필요.9. type 속성을 생략한 경우설명: 기본값은 text/javascript로 처리됩니다.용도: 일반적인 자바스크립트 실행.마무리모던 웹 개발에서는 주로 type="module"을 사용하여 모듈화를 지원합니다.데이터 처리를 위해 application/json 또는 application/ld+json과 같은 MIME 타입이 유용합니다.type 속성은.. 2025. 1. 9.
Vite+React개발환경 설정하기 (feat. socket.io를 이용한 chat App) 요즘 채용공고에 WebPack와 같은 번들러를 이용한 개발 환경 설정 경험이 자격 요건으로 올라와 있는 것을 자주 보게되었습니다. 궁금했지만 미뤄오던 React 개발 환경 셀프 세팅을 시작하였습니다. 개발 시작 처음부터 cra(create react app)를 통해 편하게 리액트 개발을 해온지라 초기 개발환경 설정은 간단하지만 어떤 프로젝트냐에따라 하나하나 설정할 것이 많다는 것을 알게되었고 이론으로만 듣던 프로젝트가 무겁다는 말이 무엇을 의미하는 지 새삼 느끼게되었습니다. 해당 글에서는 Vite React를 이용해 Socket.io로 간단한 채팅앱을 만들어보려합니다.  해야할 일은 아래와 같습니다.ToDos ✏️Vite React TypeScript 설정하기App.tsx 파일 vite 서버로 실행하기프.. 2025. 1. 8.
🐴 노션 사용 가이드 자주 사용하는 노션용 마크다운 문법 들은 정리한 게시물입니다. 마크다운 문법이 궁금하다면 아래 버튼을 통해 사이트를 확인해주세요마크다운 공식 문서 바로가기 ✔️ 제목, 소제목 설정하는 법⌨️ 키보드 입력 : # + Space샵 (#)의 개수를 이용해 제목, 소제목을 빠르게 입력할 수 있습니다. ( # 3개가 최대)🔖 예시#제목1##제목2###제목3✔️ 인용구 설정하는 법⌨️ 키보드 입력 : 큰따옴표 `"` + `Space`🔖 예시이런 표시를 인용구라고 합니다.✔️ 인라인 코드블럭 사용하는 법백틱(`)으로 글자를 감싸면요런 형태가 됩니다. Mac은 영문 버전에서tab버튼 위의~\ 버튼을 누르면 백틱을 사용할 수 있습니다.✔️ 코드블럭 사용하는 법백틱( ` )을 세번 입력하면 코드블럭이 생성됩니다. 코드.. 2025. 1. 6.
동기와 비동기 쉽게 이해하기 동기와 비동기란?소프트웨어 개발에서는 "동기(Synchronous)"와 "비동기(Asynchronous)"라는 개념이 자주 등장합니다. 어떤 경우에 동기를 사용하고 비동기를 사용하는지에 대해 간단한 개념 설명을 통해 알아보겠습니다.동기와 비동기의 개념동기(Synchronous)동기란 작업이 순차적으로 진행되는 방식을 말합니다. 하나의 작업이 끝나야만 다음 작업이 시작됩니다.특징: 작업이 서로 "맞물려" 진행됩니다. 이전 작업이 완료될 때까지 대기해야 하므로 실행 순서가 보장됩니다.비동기(Asynchronous)비동기란 작업이 병렬적으로 진행되는 방식을 말합니다. 하나의 작업이 완료될 때까지 기다리지 않고, 동시에 다른 작업을 진행할 수 있습니다.특징: 대기 시간이 없으며, 결과가 준비되면 알림을 받거나 .. 2025. 1. 6.
API 쉽게 이해하기, API 어디까지 쓰이는걸까? ❔ API 어디까지 쓰이는걸까?API의 개념Application Programming Interface, 프로그래밍 언어가 제공하는 기능을 제어할 수 있도록 제어할 수 있게 만든 인터페이스입니다. (출처: MDN) 위와 같은 설명만으로는 API가 무엇인지, 개발을 처음 접하는 사람들은 한 번에 이해하기 힘들 수 있습니다. API는 애플리케이션에서 데이터를 읽거나 쓰기 위해 사용하는 인터페이스입니다.🗝️ 여기서 인터페이스란?인터페이스(interface)는 상호 간의 소통을 위해 만들어진 접점입니다. 서로 다른 소프트웨어가 소통할 수 있도록 도와주는 다리 역할이라고 볼 수 있습니다. 이는 특정 기능이나 데이터를 다른 프로그램에서 사용할 수 있도록 만들어 놓은 "약속" 또는 "규칙"이라고 생각하면 됩니다.예.. 2025. 1. 5.
728x90

티스토리툴바