stuckon__Mars

🎠 프로젝트 완성도 신경 안 쓸 거라고 한 게 불과 몇 분 전이면서 기깔난 메인 페이지가 만들고 싶어졌다. 프로젝트 실행하면 제일 먼저 보이는 게 메인 페이지니까 그래도 만들어두면 더 자주 들여다볼 의지가 생기지 않을까.. 하는 게 내 변명🎠 어떻게 만들지 고민하다가 니코 선생님의 클론 코딩 강의를 들었던 게 떠올라 메뉴바를 만들고 랜덤으로 이미지가 변하게 하기로 했다. 가운데는 내가 좋아하는 팝송 가사를 넣을 예정이다. (뭐 쓸진 안 정함)🎠랜덤이면 useEffect를 써야 하나? 아직 제대로 공부하지 않았으니 새로고침 하면 랜덤 이미지가 나오는 기능까지만 구현했다.1. header 컴포넌트 생성컴포넌트를 더 빨리 생성하기 위해 사용할 수 있는 기능이 있다.Snippets : 반복되는 코드나 패턴..

🎠 낮에 커피 먹은 게 아직도 작용을 해서 잠이 안 온다. 침대에 누워서 멀뚱멀뚱 뭐 하지 고민하다가 리액트 복습을 하기로 했다. 2차 프로젝트에서 리액트 네이티브를 써서 리액트를 많이 까먹기도 했고 useState, useEffect 사용법을 제대로 익히고 싶었다.🎠완성도 높은 웹을 만드는 것보다 리액트 사용 방법 공부에 더 초점을 두기로 했다. 그리고 1. 챗 gpt 사용 자제 2. 공식 문서 읽기를 눈앞의 목표로 삼았다.1. 리액트 프로젝트 생성하기npx create-react-app {프로젝트 명}  터미널에 위 명령어를 입력하면 프로젝트가 만들어진다. 난 prac-app이라는 프로젝트를 생성했다. 생성이 완료되고 폴더를 확인하면 이렇게 프로젝트 명으로 새 폴더가 생성된 걸 확인할 수 있다. ..

🎠 useEffect의 개념을 정리하고 예시를 통해 사용법을 알아본다.1. useEffect의 정의컴포넌트가 렌더링 될 때마다 side effect를 실행시키는 React Hook이다.🔔side effect컴포넌트가 렌더링 된 이후에 비동기로 처리되어야 하는 효과들useEffect(() => { //useEffect가 동작하고 실행할 로직 ...}, [/*의존성 배열*/]); 2. useEffect 작동 조건페이지가 처음 렌더링되고 난 후 무조건 한 번 실행된다.useEffect 배열로 지정된 useState 값이 변경될 때마다 실행된다.3. useEffect 사용법컴포넌트가 처음 나타났을 때만 실행useEffect(() => { console.log('hi!');}, []);만약 배열을 생략..

🎠useState의 이론과 예시를 공부한다.1. useState의 정의컴포넌트에 state변수를 추가할 수 있는 React Hookconst [ state, useState ] = useState(initialState) 2. useState 사용법1. 컴포넌트에 state 추가하기 - 컴포넌트의 최상위 레벨에서 useState를 호출하여 하나 이상의 state 변수 선언import { useState } from 'react';function MyComponent() { const [ age, setAge ] = useState(42); const [ name, setName ] = useState('Taylor');- useState는 두 개 항목이 있는 배열을 반환한다.  첫 번째 항목 : 현..

🎠 리액트가 무엇인지, 왜 프론트에서 사용되는지 알기 위해 리액트의 개념을 정리하고자한다.1. 리액트의 정의사용자 인터페이스를 위한 자바스크립트 라이브러리- "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 기반으로 복잡한 UI를 구성하도록 돕는다.- 선언형 : 상호작용이 많은 UI르 만들 때 생기는 어려움을 줄여준다. 데이터가 변경되면 React는 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다.- 빠르고 확장 가능한 웹 앱을 구축하는데 도움을 준다.- 사전 빌드된 구성 요소가 제공되지 않아 처음부터 React 앱 구성 요소를 만들어야 한다.🔔라이브러리란?미리 작성된 코드 그룹으로 작업을 쉽게 완성시켜 준다. 재사용 할 수 있는 기능을 미리 구현한 후 필요한 곳에서 호출될 수 있도록 만들어진 도구의..