heyday2024 님의 블로그

일단 리액트는 처음이라 막막하다....막막하지만! 일단 해보자구요...  먼저, vite를 이용해서 리액트 프로젝트를 손쉽게 만들어주었다. 나는 항상 css 스타일링 하는게 제일 손이 많이 가고, 시간이 많이 걸린다고 생각한다. 그래서 부트스트랩을 이용할까하다가 뭔가 새로운 방식으로 css 스타일링을 하고 싶어서 검색했다.그때 눈에 들어온 tailwindCSS.  Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스 기반의 스타일링 접근 방식을 제공한다고 한다.즉, 부트스트랩처럼 미리 정의된 스타일을 쓰는 건데, Tailwind CSS는 뭐랄까.. 좀 더 자유도가 높은 느낌이다.미리 정해진 스타일들을 내가 원하는대로 조합해서 쓰는 형식!! 확실히 부트스트랩은 컴포넌트가 다 만들어져 있어서..

Compoment컴포넌트는 리액트의 핵심 빌딩 블록 중 하나==> 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성됨.  컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어주기 때문에 사용함. 재사용 가능UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체임! 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현 1. DOM (명령형 프로그래밍): 프로그래머가 컴퓨터에게 "어떻게" 작업을 수행할지를 명시적으로 지시하는 스타일// Hello, World! 화면에 출력하기// 순수 javaScript 명령형 코드const root = document.getElementByI..

React Components컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음. 개념적으로 컴포넌트는 JavaScript 함수와 유사함. “props”(properties에서 따옴)라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환함 1. 함수형// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)function Welcome(props) { return Hello, {props.name};}// 훨씬 쉬운 표현을 해보면 아래와 같죠.function App () { return hello}--->  입력을 받아도 되고 안 받아도 됨.==> 주..

npm VS yarn 공통적 특징둘다 자바스크립트 런타임 환경(아래에서 더 확인할게요 🙂)인 노드(Node.js)의 패키지 관리자애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓습니다. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자에요.차별적 특징NPMnode.js를 설치할 때 자동으로 설치됨Node Package Manager의 약자JavaScript 프로그래밍 언어를 위한 패키지 관리자로, 수많은 JavaScript 라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할을 합니다.YARN2016년에 Facebook, Exponent, Google, Tilde와 같은 회사에서 공동 작업으로..

ttps://react.dev/ ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizatireact.dev- React 공식 홈페이지: "React는 UI 를 만들기위한 라이브러리" React는 라이브러리일까 아님 프레임워크일까??프레임워크?Spring Framework : Java 기반의 웹(백엔드)..

ES6 Modules모듈은 재사용 가능한 코드 조각을 캡슐화하고 다른 자바스크립트 파일에서 쉽게 재사용할 수 있게함. 캡슐화:자바스크립트 모듈은 관련된 함수, 변수, 객체, 클래스 등을 하나의 파일로 그룹화하고, 이를 모듈이라고 함. 이렇게 그룹화를 하게 되면 기능적으로 연관된 코드들을 묶어 관리할 수 있으며, 모듈 외부에서는 내부 구현을 알 필요 없이 제공되는 API를 통해 모듈을 사용할 수 있음!캡슐 안에 중요한 정보와 로직을 넣어 보관! ES6에선 export 라는 키워드를 사용해서 모듈을 만들고, 다른 파일에서 사용할 수 있게함.모듈은 재사용할 수 있는 함수, 객체 또는 원시값을 의미함. 자바스크립트 실행환경: 브라우저 환경 & Node 환경Node 환경에서의 모듈 import 방식은 2가지임!!..

1. Template Literals 변수와 표현식을 문자열 안에 쉽게 삽입할 수 있게 해주는 문법 백틱(`)을 사용하여 문자열을 구성하고, ${변수 이름 혹은 식..} 통해 변수나 표현식을 삽입 let customer = { name: "르탄이" };let item = { name: "커피", price: 4000 };console.log(`감사합니다, ${customer.name}님. ${item.name}을(를) ${item.price}(원)에 구매하셨습니다.`);// 출력: 감사합니다, 르탄이님. 커피을(를) 4000(원)에 구매하셨습니다.  2. Destructuring 객체나 배열의 속성을 보다 쉽게 추출할 수 있게 해주는 문법객체에서의 사용key 가 중요함!! 그래서 순서대로 값을 받는 것이..

변수는 프로그래밍에서 데이터를 저장하고, 그 값을 쉽게 관리하고 재사용할 수있게함.(ex) 사용자로부터 받은 입력을 처리 & 계산 결과를 다시 사용할 때 변수 사용  만약 변수 사용을 하지 않고, 직접 값을 기입해서 사용한다면,코드의 복잡성 증가오류 가능성 증가확장성과 유지 보수성 감소==> 즉, 변수를 이용함으로서 코드의 가독성을 높이고, 적은 변경으로 수정하기 용이함. 또한, 코그의 재사용성을 높임. 변수의 종류 : const, let, var자바스크립트의 주요 스코프 유형: Global. Function, Blocklet과 const는 블록 스코프, var는 함수 스코프 내에서 유효함.let : 재할당 가능, 재선언 불가const: 재할당 재선언 불가var: 재할당 재선언 가능 const, let ..

클로저 (Closure)A closure is the combination of a function and the lexical environment within which that function was declared - MDN(클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합임.) ??? 이게 무슨 말인지 하나씩 해석해보자! 함수가 선언된 렉시컬 환경(record + outer)이란??----> 함수가 선언될 당시의 외부 변수 등의 정보 //클로저const x = 1;function outerFunc() { const x = 10; function innerFunc() { //함수가 선언된 렉시컬 환경 // 렉시컬환경(LE)는 record(식별자 정보), outer(외부 환경 정..

상속(Inheritance)Class는 상속을 통해 다른 Class의 속성과 메소드를 물려받을 수 있음.상속을 통해 기존 클래스의 기능을 그대로 사용하면서 필요한 기능을 추가하거나 수정할 수 있음. 상속을 받는 Class ===  'subclass' 또는 'derived class'상속을 하는 Class ===  'superclass' 또는 'base class'  오버라이드(Overriding)상속받은 부모 클래스의 메서드를 자식 클래스에서 재정의 하는 것 * 참고로 super 키워드는 부모 클래스의 생성자나 메서드를 호출할 때 사용---> 부모 클래스의 생성자를 override하고 싶을 때 super사용해서 부모 class에게도 알려주기...super로 부모 클래스 생성자 호출하기자식 클래스에서 부모..