주니어 개발자가 되고 싶은 미짱

컴포넌트 import 및 export 하기 컴포넌트의 가장 큰 장점은 재사용성으로 컴포넌트를 조합해 또 다른 컴포넌트를 만들 수 있습니다. 컴포넌트를 여러 번 중첩하게 되면 다른 파일로 분리해야 하는 시점이 생깁니다. 이렇게 분리하면 나중에 파일을 찾기 더 쉽고 재사용하기 편리해집니다. 라고 문서에 나와 있다. 어떻게 분리하는가? 자바스크립트에서 모듈 하는 방법과 동일하다. 파일을 따로 관리하여 해당 컴포넌트를 export(내보내기) 하고 원하는 곳에 둘때는 import (가져오기)를 하면된다. import Header from '../header/Header' import * as S from './style' import { Outlet } from 'react-router' export defaul..

Commponent? 마크업(HTML)으로 뿌릴 수 있는 JavaScript 함수다. 라고 공식 사이트에 정의되어있다. 쉽게 말하자면, JavaScript 함수에 마크업을 작성 및 UI 관련된 코드 작성하고 그 해당 컴포넌트를 씀으로써 마크업 부분을브라우저에 그려주며 상호작용을 도와주는 역할이다. 그럼 누군간 말할 것이다. 기존 자바스크립트로도 가능하지 않은가? 기존 자바스크립트를 이용한다면 html 파일과 js 파일을 따로 관리하며 코드 짤 때 파일을 번갈아 보면서 짜야하며 DOCTYPE html> memo 메모 add function displayMemo(memo) { const ulEl = document.querySelector('ul'); const liEl = document.createEle..

RTK(Redux Tool-kit) Query 정의 API 호출 및 Redux store 내에서 상태 관리를 하는 데이터를 가져오고 캐싱하는 라이브러리. => API endpoint를 쉽게 정의하고 관리할 수 있도록 유틸리티 세트와 사용자 정의 가능한 API를 제공. 기반 Redux toolkit의 createAsyncThunk와 createSlice 기반으로 구축 . 기능 자동 로딩 상태 관리 자동 오류 처리 및 재시도 보류 중인 요청 자동 취소 자동 캐싱 및 네트워크 인식 무효화 데이터를 항상 최신 상태로 유지하기 위한 자동 백그라운드 리페칭 자동 요청 중복 제거 기능으로 동일한 요청이 여러 번 전송되지 않도록 방지 사용 방법 리액트 프로젝트 시작 시 CRA, 또는 vite 초기 설정 이후 초기 설정..

Props - properties 의 줄임말로, (비구조할당)상위 컴포넌트에서 하위 컴포넌트로 값/변수를 전달하기 위해서 사용. - props 를 쓰는 것이 좋은 이유는, 하위 컴포넌트를 마치 백지수표처럼 쓸 수 있다 백지 수표처럼?? => 틀은 유지한 채로, 값만 우리가 원하는대로 바꿔서 여러 개의 변수를 사용한다. 즉, 백지 수표처럼 수표모양은 그대로인데 원하는 금액을 적어 해당 금액을 사용가능하다 State state를 설명하기 전에 import React from 'react' function First() { var test = 0; const countUp = () => { test = test+1; }; return ( {test} 카운트업! ) } export default First 이러..

React란 Meta (전 Facebook) 에서 2011년에 만든 프론트엔드 라이브러리 (프레임워크) React의 작동원리 SPA(Single Page Application) => 하나의 HTML 파일만 보여주고 내부 요소는 모두 자바 스크립트를 활용해 변경 시키는 것. 기존의 방식은 페이지가 변경될때 마다 무조건 새롭게 HTML, CSS파일을 표시해야했던 예전 방식보다 훨씬 효율적 Virtual Dom with Diff Algorithm DOM은 HTML 문서를 통해서 생성된 자바스크립트를 통해서 조작 가능한 요소들. (쉽게 말하면 크롬 개발자도구에서 보이는 그 요소들을 생각하면 된다.) React는 가상으로 HTML 요소들을 생성하고 (Virtual DOM), 현재 화면에 표시되는 HTML 요소들(..

변수 선언 키워드 변수 선언 키워드에는 var, let, const 가 있다. var 선언 할당 재할당 가능, 호이스팅이 일어난다. let 선언 할당 재할당이 가능하다. const 선언과 동시에 할당이 일어난다. 해당부분 과제하다 다른 조에 가서 퀴즈 풀다 틀려 해당 부분을 작성하게 됨

속성 선택자(Attribute) [Attr] : 속성을 포함한 요소 선택 속성 선택자를 사용할 때 사용하는 특수 기호는 [](대괄호 square brackets) 밑에 예제로 이해보자 disable이라는 속성에 red 색상을 부여 HTML 삽입 미리보기할 수 없는 소스 [type]에 orange 부여 HTML 삽입 미리보기할 수 없는 소스 [type ="value"] : 속성의 해당 값이 있는 요소 선택 HTML 삽입 미리보기할 수 없는 소스 TIL keypoint html 속성 및 속성값을 찾아서 css로 변경가능하다 느낀 점 페이지 컨셉에 맞는 부분을 해당 부분으로 스타일 할수 있다는 걸 알았다 오늘의 학습 만족도 ⭐⭐⭐⭐⭐

https://github.com/seon-mikim/localstorage GitHub - seon-mikim/localstorage: Learn local storage Learn local storage. Contribute to seon-mikim/localstorage development by creating an account on GitHub. github.com 강의시간에 팀과제를 위해서 필요하다고 하기도 했고 궁금해서 해당 부분에 대해서 공부했다. 사실 스토리지를 이용한 투두리스트를 만들어볼려하는데 쉽지가 않았다 대체 왜안될까? 추가적인 공부가 필요해보여서 조금 더 탐구하기로 하였다. https://velog.io/@yodiodine/LocalStorage로-투두-리스트-만들기 Loca..