TypeScript에서 DOM 요소를 선택하는 방법

TypeScript에서 DOM 요소를 선택하는 방법: 안전하고 효율적인 접근법DOM (Document Object Model)은 웹 페이지의 구조와 내용을 정의하는 중요한 개념이다.HTML 문서의 html, body, div와 같은 요소들은 자바스크립트를 통해 동적으로 조작할 수 있다. 간단히 말해, 문서 객체는 자바스크립트로 수정 가능한 웹 페이지의 구성 요소들이다. 현대 웹 개발에서는 DOM을 직접적으로 다루기보다, React, Vue와 같은 프레임워크를 활용하여 DOM을 간접적으로 다루는 것이 일반적이다.이러한 프레임워크들은 복잡한 UI를 효율적으로 관리하는 데 도움을 주지만, TypeScript의 타입 안전성이나 타입 연습을 위해 직접적인 DOM 접근도 여전히 중요한 학습 대상이라고 생각한다. 이..

• format_list_bulleted Typescript
• · 2024. 8. 29.
• textsms

[수강후기] 프로그래머스 데브코스: 클라우드 기반 프론트엔드 엔지니어링 1기

현재 나는 프로그래머스 데브코스: 클라우드 기반 프론트엔드 엔지니어링 1기 2024/07/15~2024/12/13 과정에 참여중이다.! 졸업과 동시에 어떻게 취업준비를 할까 고민하고 있을 때, 데브코스를 알게되었다.데브코스를 선택한 이유는 커리큘럼 때문이었다.기본기를 중요시하는 나에게 Vanilla JS 과정으로 기본기를 채울 수 있는게 좋았고, 차트 등을 이용하여 대용량 데이터 처리 구현과 시각화하는 방법을 연습하고 싶었던 나에게 `빅데이터 분석과 데이터 시각화 UI 구현` 과정이 매력적이었던거 같다.또한 이 과정은 k-digital Training 으로, 국비지원을 받아 수강료가 무료이며 매달 훈련장려금 30만원 정도가 나와 공부나 프로젝트에 집중할 수 있다는 것이 취준생인 나에게 정말 좋은 환경이었..

• format_list_bulleted 카테고리 없음
• · 2024. 8. 26.
• textsms

[Vercel & Express.js] Vercel을 사용해 Express.js 서버 기반 프로젝트 배포하기

프로젝트 설명 오픈 API인 국립국어원 표준대사전 사전검색 API를 활용하여 끝말잇기 게임을 만들었다.국립국어원 표준대사전 사전검색  API 사용하러 가기 국립국어원 표준국어대사전이 누리집은 대한민국 공식 전자정부 누리집입니다. 오픈 API 1. 표준국어대사전 오픈 API 서비스 소개 표준국어대사전 오픈 API는 검색 플랫폼을 외부에 공개하여 다양하고 재미있는 서비스 및 애stdict.korean.go.kr express.js를 사용한 이유?🚨하지만 오픈 API를 KEY만 넘겨서 그대로 사용하면, 기본적으로 CORS에러가 발생한다.따라서 이번프로젝트에서는 CORS 에러를 해결하고자, express.js를 사용한 node.js 서버를 통해  따로 API 요청과 엔드포인트를 처리하여 cors문제를 해결하였..

• format_list_bulleted FE 개발일지
• · 2024. 8. 22.
• textsms

자바스크립트의 URL 쿼리 스트링 다루기

오늘은 데브코스 FE 수업에서 실습했던 내용인'URL 쿼리 스트링(Query String)'을 다루는 방식에 대해 더 알고싶어따로 조사해보았다.목차도입주제주제 선정 이유내용URL의 구성 요소자바스크립트에서 쿼리스트링을 다루는 이유?url 쿼리 스트링 다루는 2가지 방법쿼리 스트링 다루기 위한 JS 라이브러리마무리배운점 및 부족한 점느낀점주제 자바스크립트의 URL Query String 다루기 주제 선정 이유 URL으로 쿼리를 다루는게 낯설고 관련 개념이 부족해서, url에 관한 기본 개념부터 공부하며 익히고자 한다.또한 수업시간에 배운 .searchParams.set() 말고도 다른 방법으로 쿼리 스트링을 다룰 수 있는지 알아보고자 한다. 주제 탐구 내용 🔍URL의 구성 요소위 예시 URL이 있다고 가..

• format_list_bulleted Javascript
• · 2024. 8. 10.
• textsms

환율계산기 구현하기 only html css js

FE 데브코스 수업시간에입력하는 통화량에 따라 자동으로 환율을 계산해주는환율 계산기를 구현해보았다.🌟완성작 DOM 조작을 연습할 수 있었던좋은 두 번째 과제였다. 참고로, 이용했던 환율 api는 open된 api를 이용했다.🖇️환율 정보 제공 api api가 제공하는 json data에서,이번 환율 계산기에서는 'rates' 객체만 이용하여 구현하였다.🖇️ 환율계산기 github gist 링크 [10팀]신아진 - 환율계산기[10팀]신아진 - 환율계산기. GitHub Gist: instantly share code, notes, and snippets.gist.github.com github gist 링크에서Javascript 코드에 대한 자세한 설명 및 흐름,라이브로 실행할 수 있는 codesand..

• format_list_bulleted FE 개발일지
• · 2024. 8. 6.
• textsms

slider 슬라이더 구현하기 only HTML/CSS/JS

FE 데브코스 수업시간에 swiper 라이브러리에서 제공하는 슬라이드를 사용해본 적이 있었다.https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 슬라이더 컴포넌트는 유용하게 자주 사용되어서사용하는 언어, 프레임워크에 따라 라이브러리는 많은거 같다. 최근 수업에서는 라이브러리로 제공되는 슬라이더를직접 html,css,js로 순수 구현해보았다.구현하면서 힘들었던 점? 사진 갯수에 따라 동적으로 dot를 생성해내고,..

• format_list_bulleted FE 개발일지
• · 2024. 8. 5.
• textsms