본격적으로 리액트를 공부하려고 할 때, 터미널에 가장 먼저 치는 명령어는 npm(yarn) 또는 npx가 포함된 명령어야.그럼 이 npm, yarn, npx가 무엇인지 간단하게 알아보자!NPM (Node Package Manager)NPM은 Node Package Manager의 약자로, Node.js의 기본 패키지 관리자야. Node.js와 함께 설치되고, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용돼.주요 기능패키지 설치:의존성 설치: npm install --save개발 의존성 설치: npm install --save-dev패키지 제거: npm uninstall 패키지 업데이트: npm update 패키지 실행: npm run 글로벌 패키지 설치/제..

안녕 친구들! 요즘 개발자들 사이에서 핫한 **타입스크립트(TypeScript)**가 뭔지 궁금하지 않아?프론트엔드 개발자를 꿈꾼다면 타입스크립트 들어는 봤는데, 몰라서 찾아보다가 들어왔을거라 생각해.프론트개발자를 꿈꾸는 나와 같이 타입스크립트의 매력에 대해 알아보자. 가볍게 즐기면서도 확실하게 이해할 수 있도록 설명해줄게!타입스크립트는 자바스크립트의 슈퍼셋이야. 자바스크립트의 모든 기능을 포함하면서도 강력한 타입 시스템을 추가한 언어지. 덕분에 개발 단계에서 타입 관련 오류를 미리 잡아낼 수 있어서 큰 프로젝트에서도 안정적으로 코드를 관리할 수 있어. 그래서 요즘 개발자들 사이에서 인기가 많지.왜 타입스크립트를 사용해야 할까?1. 오류 감소타입스크립트를 사용하면 자바스크립트의 흔한 문제인 타입 강제 변..

**타입스크립트(TypeScript)**를 VSCode에서 사용하는 방법과, 윈도우 사용자들을 위한 설정 변경 방법을 알아볼게.타입스크립트는 자바스크립트의 슈퍼셋으로, 정적 타입 검사를 추가해서 코드의 품질을 높여주는 언어야. 그럼 시작해볼까?설치타입스크립트를 사용하려면 먼저 타입스크립트와 관련 패키지를 설치해야 해. 터미널에서 아래 명령어를 입력해줘.> npm i typescript> npx tsc -v # 버전 확인> npm i ts-node> npx ts-node -v # 버전 확인더보기🤚🏻npm은 뭐고 npx는 뭐에요? npm: 패키지를 설치하고 관리하는 도구.예: npm install 패키지이름 (패키지 설치)npx: 패키지를 실행하는 도구, 패키지를 설치하지 않고도 일회성으로 실행 가능...

오늘은 웹 페이지에서 일어나는 여러 가지 이벤트에 대해 얘기해볼게.자바스크립트로 페이지를 더 인터랙티브(interactive)하게 만들려면 이벤트를 잘 이해하고 활용하는 게 중요해.이벤트란?**이벤트(event)**란 브라우저에서 발생하는 상호작용을 말해. 예를 들어 사용자가 마우스를 클릭했을 때, 더블 클릭했을 때, 키보드 버튼을 눌렀을 때, 스크롤을 했을 때 등등이 있어. 이런 상호작용이 발생하면 자바스크립트에서는 이벤트가 발생했다고 표현해. 이벤트는 크게 세 가지로 구분할 수 있어:이벤트 타겟(event target),이벤트 타입(event type),이벤트 핸들러(event handler).이벤트 타겟이벤트 타겟은 이벤트가 일어난 문서 객체를 의미해.예를 들어, 버튼을 클릭했다면 그 버튼이 이벤트..

안녕! 반가워, 나는 평범한 컴공 대학생이야.오늘은 웹 개발의 기초 중 하나인 DOM에 대해 알려줄게. 혹시 웹 페이지를 꾸밀 때 HTML과 CSS만 써봤다면, 이제는 자바스크립트를 통해 페이지를 동적으로 제어하는 방법도 알아두면 좋아!이를 위한게 바로 Documents Object Model => DOM이야!DOM이 뭐야?**DOM(Documents Object Model)**은 웹 페이지를 자바스크립트로 제어하기 위한 모델이야. 웹 브라우저에 표시되는 HTML 태그들을 자바스크립트가 이해할 수 있게 객체로 변환한 거라고 생각하면 돼. 이를 통해 자바스크립트가 웹 페이지의 요소들을 선택하고, 수정하고, 삭제할 수 있는 거지.다시 말해서, 웹 브라우저가 HTML 문서를 파싱해서 객체 형태로 변환한 결과물..

오늘은 함수에 대해 알아보자. 함수는 프로그램에서 아주 중요한 개념이야.쉽게 말해, 함수는 하나의 특별한 목적을 가지고 코드를 실행하도록 만드는 문법이야.다양한 방법으로 함수를 정의하고 사용할 수 있어. 그럼, 하나씩 살펴볼까?함수 선언식과 함수 표현식자바스크립트에서는 함수를 두 가지 방법으로 정의할 수 있어: 1. 함수 선언식과 2. 함수 표현식.그리고 두 가지 방법을 알게 되면 3. 화살표 함수도 사용할 수 있게 될거야!1. 함수 선언식 (Function Declaration)함수 선언식은 함수를 미리 선언하는 방식이야. 이렇게 하면, 함수가 정의되기 전에 호출할 수 있어.function sayHello() { console.log("Hello!");}sayHello(); // "Hello!" 출력..

오늘은 프로토타입에 대해 알아보자. 프로토타입은 자바스크립트에서 객체들이 서로 기능을 공유할 수 있게 해주는 중요한 개념이야. 잘 이해해보면, 프로그래밍이 훨씬 쉬워질 거야!생성자 함수와 프로토타입먼저, 우리는 생성자 함수를 이용해서 여러 개의 객체를 만들 수 있었지? 예를 들어볼게:)생성자 함수를 모른다면 내가 쓴 글을 한 번 읽어보는 것을 추천할게! -> 읽어보기function MakeAnimalObject() { this.animalName = "곰"; this.animalType = "고양이"; this.animalAge = 8; this.animalGender = "male"; this.lastVisit = "2023-08-11"; this.getLastMedical = functio..

오늘은 생성자 함수에 대해 이야기해볼 거야. 이름만 들으면 조금 어렵게 느껴질 수도 있지만, 사실은 아주 간단한 개념이야. 자, 시작해볼까?동물 병원 이야기먼저, 동물 병원을 예로 들어볼게. 동물 병원에서는 많은 동물들이 진료를 받지. 예를 들어, 강아지 '뽀삐'와 '무지', 그리고 고양이 '곰'이가 있다고 해보자. 이 동물들의 정보를 저장하려면 이렇게 작성할 수 있어.let animal1 = { animalName : "뽀삐", // 이름 animalType : "강아지", // 종 animalAge : 10, // 나이 animalGender : "male", // 성별 lastVisit: '2020-10-21', // 마지막 방문일 getLastMedical : ..