creamymood의 개발 공부 발자취 💭

1. state란?2. 어떻게 사용 하는가?3. 연습해볼 수 있는 예제🧞state란?→ 컴포넌트 내에서 변할 수 있는 데이터. → state란 React 컴포넌트의 상태를 의미. 컴포넌트의 기억 저장소라고 생각할 수 있다.예를 들면 쇼핑몰에서 찜 버튼을 클릭하면 해당 상품이 나의 찜 목록에 추가되는 동작처럼 동적으로 변경되어야 하는 데이터를 사용할 때에 state를 사용한다 :)쉽게 말하면, 컴포넌트의 변경할 수 있는 데이터는 state!state가 변경되면 컴포넌트는 리 렌더링되기 때문에 데이터 흐름에 사용되는 값만 ****state에 포함해야 한다. 🧞어떻게 사용할까?→ useState 훅!import { useState } from 'react';const Counter = () => { co..

map()예제로 코드 공부하던 중, 난관에 부딪히게 되어..코드를 다시 하나 하나 뜯어보는 시간을 가졌고요, 그렇게 알게 된 점을 공유 및 정리 하려고 합니다. 🧚‍♀️하나 하나, 맛보고 뜯어봅시다 ! ✨1. import React, { useState } from 'react';React 라이브러리를 가져오고 있다.useState는 React의 훅(hook) 중 하나로, **상태(state)**를 사용할 수 있게 해줌.더보기이건 React 라이브러리 전체를 가져오는 코드야.🔍 왜 필요할까?React를 쓰는 컴포넌트에서는 JSX 문법 (, , 이런 거) 을 쓰지?JSX는 사실 자바스크립트가 이해할 수 있게 변환되면서, 내부적으로 React.createElement() 같은 걸 호출해.그래서 JSX를..

오 ! 자바스크립트 할 때 열심히 했던 배열메소드 🧚‍♀️1. map 복습하기2. map()으로 컴포넌트 반복 렌더링3. key란?4.key를 사용하는 방법5. filter 복습하기6. 데이터 필터링. filter()가, map()과 함께 주로 사용 되는 이유✨map() 빠르게 복습하기map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 콜백을 호출한 결과를 모아 새로운 배열을 반환. 이때 원본 배열은 변경되지 않는다!const array = [1, 2, 3];array.map((el, index, arr) => { console.log(`arr의 요소:${el}, arr의 index:${index}, 순회하는 배열:${arr}`);})// arr의 요소:1, arr의 index:0, 순회하..

어렵다 ..꼬리에 꼬리를 무는 질문의 연속인 새 고ㅏ목 채찍피티.. 미안해. ... 지피티 괴롭혀서 그나마 쉽게 정리할 수 있게 된 파트 🥹 1. 컴포넌트란?2. 컴포넌트 만들기3. 컴포넌트 종류4. 함수형 컴포넌트와 클래스형 컴포넌트 차이5. 클래스형 컴포넌트 함수형 서로 변환해보기💡✨컴포넌트 ?→ 리액트(React)에서 **컴포넌트(Component)**란 UI를 구성하는 독립적인 블록.쉽게 말하면, 웹 페이지의 한 부분을 담당하는 재사용 가능한 코드 조각 ! → 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다.💡✨컴포넌트를 만들어보자❶ 컴포넌트 정의하기: 사용하고 싶은 컴포넌트를 만들기 위해 원하는 마크업을 추가 하기* 리액트 컴포넌트 이름은, 대문자로 시작..

🕊️JSX란 ?JSX는 JavaScript에 HTML을 섞어서 쓸 수 있게 만들어주는 문법그래서 "JavaScript XML"이라는 뜻으로 JSX라는 이름이 붙었고,리액트에서 이걸 쓰면 HTML처럼 쓰면서도 자바스크립트 기능도 같이 쓸 수 있음 !    → JSX는 JavaScript XML→ JSX란, JavaScript를 확장한 문법입니다. - JSX는 JavaScript와 XML/HTML을 합친 것이라고 볼 수 있습니다.- React에서는 JSX를 이용하여 화면에 UI를 나타냅니다.- JSX를 사용하면 하나의 파일에 HTML 구조와 JavaScript를 함께 사용할 수 있습니다.- 기존에는 .html 파일과 .js 파일로 구분하여 작성해 왔습니다. // JSX 문법function App() { r..

공부하던 중, 코드를 따라 쳐보고 싶고, 예제를 연습해보고 싶은데..vite 설치 후에, 어느 파일에 쳐야하는지 몰랐다. 같은 동기분께 여쭤보기도 하고,지피티에게 물어서 알게되어 정리해보기. 일단 리액트 사용 단계(?) 부터 차근차근 알아보자. 한눈에 보기 ! ✨❶ 프로젝트 생성: npm create vite@latest my-react-app --template react❷폴더 이동 & 패키지 설치: cd my-react-app && npm install❸개발 서버 실행: npm run dev------깃 선택-----------❹src 폴더에서 코드 작성❺ 프로젝트 빌드: npm run buildReact 프로젝트 생성 & 실행 단계❶Vite로 React 프로젝트 생성터미널을 열고 원하는 폴더(예: ..

강의를 듣다가, 코드 분석를 따라치며, 궁금한 점 중 알게 된 점을 조금 정리해보겠다.알게 된 점은 틈틈히 추가 될 것  #자바스크립트, 비동기 요청 파트window.addEventListener('load', function(){ request1.open("get", apiRandomDogs) request1.addEventListener('load', function(){ const response = JSON.parse(request1.response) }) request1.send()})강아지 페이지 만들기 중,윈도우 창이 로딩 될 때! 랜덤 강아지 사진을 가져오는 부분이다.여기서 궁금했던 점, 왜 request1 부분의 addEventListener가,, send..

큰 개념별 정리 (목차) 1. 실행 환경 (런타임)Node.js → JavaScript를 서버에서 실행할 수 있게 해주는 환경브라우저(크롬, 사파리 등)에서도 JavaScript를 실행할 수 있지만, Node.js를 사용하면 브라우저 없이 실행 가능 2. 패키지 매니저npm (Node Package Manager) → JavaScript의 패키지(라이브러리)를 관리하는 도구Node.js를 설치하면 npm도 같이 설치됨npm install [패키지명]을 사용해서 패키지를 설치할 수 있음 3. 패키지 (Package)npm을 통해 설치할 수 있는 코드 묶음예시:react → React 라이브러리를 포함한 패키지express → Express.js 웹 프레임워크를 포함한 패키지 4. 라이브러리 (Library..

화이팅 !! 외치며 공부시작 ✨구조 분해 할당 이란 ?배열이나 객체에서 값을 뽑아서 변수에 쉽게 할당하는 문법 뭐하는거야  ? 왜 쓰는거야 ?1. 코드가 짧아지고 가독성이 좋아져!예를 들어, 객체에서 값을 가져올 때 보통 이렇게 해 !const user = { name: "Jane", age: 25 };const name = user.name;const age = user.age;console.log(name, age); // "Jane" 25😵 변수 하나씩 할당해야 해서 코드가 길어져... → 구조분해 할당을 쓰면?const { name, age } = user;console.log(name, age); // "Jane" 25✨ 딱 한 줄로 끝! 깔끔하고 보기 편해!  2. 배열이나 객체에서 필요한 ..

5-1 값값이란 식(표현식)이 평가(=식을 해석하여 값 생성 및 참조 하는 것)되어 생성된 결과. 모든 값은 데이터 타입을 가지며, 메모리에 2진수로 나열 되어 저장.변수는 값을 저장하기 위해, 확보한 메모리 공간 또는 그 메모리 공간의 주소 및 이름이다.따라서 변수에 할당되는 것은 값이다.var sum = 10 + 20;sum 변수에 할당 되는 것은 10+20이 아닌, 평가된 결과의 숫자 30. 5-2 리터럴리터럴은, 사람이 이해 가능한 문자 또는 약속된 기호로써 값을 생성하는 표기법 단순한 숫자 3이 아닌, 숫자 리터럴. 사람이 이해할 수 있게 아라비아 숫자를 사용해 숫자 리터럴 3을 기술하면자바스크립트 엔진은 이를 "평가" 하여 숫자 값 3을 생성. 리터럴은 인간이 이해 가능한 문자(아라비아 숫자,..