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

컴포넌트 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..

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 선언과 동시에 할당이 일어난다. 해당부분 과제하다 다른 조에 가서 퀴즈 풀다 틀려 해당 부분을 작성하게 됨

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..

전역 변수를 선언하는 이유는? - 전역, 다시 말해 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하는 것. 전역 변수의 문제점 암묵적 결합 - 암묵적 결합 : 모든 코드가 전역 변수를 참조하고 변경하는 것을 혀용 하는 것. 변수의 스코프(유효범위)가 크면 클수록 코드의 가독성 ⬇ , 의도치 않게 상태가 변경될 수 있는 위험성 ⬆ . 긴 생명 주기 전역변수는 생명주기가 길다. - 메모리 리소스도 오랜 기간 소비 - 전역 변수의 상태를 변경하는 시간도 길고, 기회도 많음. - var 키워드 같은 경우 변수의 중복 선언 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복성 있음 ➡ 의도치 않은 재할당됨. 스코프 체인 상에서 종점에 존재 - 스코프 체인 : 스코프는 계층적으로 연결되며, 변수를 검색 ..

변수의 생명주기(life cycle) - 변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다 그리고 소멸. 변수는 자신이 선언된 위치에서 생성되고 소멸. -변수의 생명주기가 필요할까? 변수의 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 메모리 공간을 점유하게 된다. (메모리의 경량화?)=> 코공이 개인적 생각이므로 잠시 취소선 지역 변수의 생명 주기 - 함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸. (함수의 생명주기와 일치) function foo() { var x = 'local'; // 변수 x 생성 및 값 할당 console.log(x); return x; }; foo();// output value local console.log(x);..