도야지

map() 함수란? - 자바스크립트 배열의 내장 함수이다. - 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 새로운 배열을 생성한다. 어떨 때 쓰는가? - 반복되는 컴포넌트를 렌더링할 때 사용하면 👍 - for문, 반복문 대체해서 사용하면 👍 문법 arr.map(callbackFunction, [thisArg]) arr.map(callbackFunction(currenValue, index, array),thisArg) callbackFunction : 새로운 배열의 요소를 생성하는 함수, 아래 세가지 인수를 가진다. currenValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 ..

Stateful(상태유지)란? - 클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존함을 의미한다. 더보기 클라이언트와 서버가 송수신을 하며, 클라이언트가 이전 단계에서 제공한 값을 서버에서 저장하고 다음 단계에도 저장한 상태 예시로, 웹 사이트에 로그인을 하면 다른 페이지로 이동해도 로그인이 유지되는 것을 들 수 있다. -> 서버가 클라이언트의 상태를 기억(유지)하고 있어서 가능한 것 클라이언트의 상태를 기억(유지)한다? -> 어딘가에 정보를 저장하고 통신할때마다 읽는다는 의미로 기억하면 된다. -> 여기서 정보는 대게 브라우저의 쿠키, 서버의 세션 메모리에 저장되어 상태를 유지함 🫢 문제점 서버에서 클라이언트의 상태 정보를 저장하고 있는 Stateful의 문제점은, 해당 서버가 멈추거나 다양한..

- "fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists." - git을 push 하면서 위와 같은 에러 발생 💡 해결 방법 1. 원격 저장소 정보 업데이트 2. 원격 저장소 연결 제거 후 재연결 글쓴이는 2번 방법을 사용하였다. 2. 원격 저장소 연결 제거 후 재연결 - 원격 저장소와 연결이 잘되어 있는지 확인 git remote -v 원격 저장소의 URL을 확인할 수 없다면, 원격 저장소와 제대로 연결되어 있지 않은 것이다. - 원격 저장소 연결 제거 git remote remove [원격 저장소 이름(origin, master, m..

DateObject.toLocaleString([locales [, options]) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat Intl.DateTimeFormat() constructor - JavaScript | MDN The Intl.DateTimeFormat() constructor creates Intl.DateTimeFormat objects. developer.mozilla.org 예제(리액트) function ExpenseItem(props) { const month = props.date.toLocaleString('en-US..

props(properties) 란? 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용 컴포넌트끼리 값을 전달하는 수단! 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용함 단방향 데이터 흐름을 갖는다는 것을 알 수 있다. props는 수정할 수 없다 ! 자식입장에서는 읽기 전용 데이터임 예제 // App.js function App() { return ( ); } export default App; //MyName.js function MyName(props) { return Hello, {props.name}! } export default MyName;

SPA - 모던 웹의 패러다임 - 단일 페이지로 기존의 서버 사이드 렌더링과 비교하면, 배포가 간단하고 네이티브 앱과 비슷한 사용자 경험을 제공함 - 웹 앱에 필요한 모든 정적 리소스를 최초에 한번 다운로드함 - 페이지 간 이동시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신 -> 트래픽 감소(DB에 과부하가 적어짐), 새로고침 발생 X 네이티브 앱과 유사한 사용자 경험 제공 - 속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 기대할 수 있음 CONS - 초기 구동속도가 느린 편 Why? 필요한 모든 정적 리소스를 처음에 한번 다운로드 하기 때문 - SEO(검색엔진 최적화) 문제가 존재함 Why? 서버 렌더링 방식이 아닌 클라이언트 렌더링 방식(자바스크립트 기반 비동기 모..

컴포넌트에서 보여줘야 하는 내용이 사용자의 인터랙션에 따라 바뀌어야 할 때 동적으로 어떻게 구현할 수 있는지 알아보자. State란? 먼저 State란 컴포넌트가 가질 수 있는 상태를 말한다. ❗️ 여기서 상태란 컴포넌트에서 동적인 값을 말한다. 예를 들어, 시간이라는 컴포넌트가 있다면 state로 현재 시간을 가질 수 있다. 사용법 react Hooks의 useState라는 함수는 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공한다. 즉, 컴포넌트에서 상태를 관리 할 수 있다는 이야기이다. useState를 사용하기 위해서는 react에서 useState를 import 받아야한다. 이 코드는 리액트 패키지에서 useState라는 함수를 불러와주는 역할을 한다. im..

JSX란? JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법이다. 리액트에서 생김새를 정의할 때 사용하는 문법이다. 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리 HTML 같이 생겼지만, JavaScript 이다. return 안녕; 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 JavaScript로 변환해 준다. JSX 가 JavaScript로 제대로 변환이 되려면 문법들을 준수해야 한다. 1. 태그는 꼭 닫혀있어야 한다. → O → X 👀 Self Closing 태그란? 태그와 태그 사이에 내용이 들어가지 않을 때, 사용하는 태그로 아래와 같은..

first-react 파일을 VS Code에서 열어주고 src 디렉토리에 Hello.js 라는 파일을 생성해 준 후 아래와 같이 작성해준다. Hello.js // 리액트 컴포넌트를 만들 때는 아래의 코드를 통해서 리액트를 불러와야한다. import React from 'react'; function Hello() { return 안녕 } // Hello라는 컴포넌트를 내보내겠다는 의미이다. // 이와 같은 방식은 다른 컴포넌트에서 불러와 사용할 수 있다. export default Hello; 그 다음 App.js에 다음과 같이 작성해준다. App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); ..

리액트를 공부하기 전에 아래와 같이 설치해주어야 한다. 설치해야 하는 것들 Node.js, Yarn, 코드 에디터, Git bash 설치방법 Node.js $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash $ nvm install --lts Yarn https://classic.yarnpkg.com/en/docs/install#mac-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 코드 에디터 개인적으로 VS Code가 편리하여 VS Code를 사용한다. 설치 방법은 https://code.visualst..