끄적끄적 메모장

Redux는 JavaScript(자바스크립트) 상태관리 라이브러리 이다. 또한 Redix의 본질은 Node.js 모듈이다. 여기에서 상태 관리 도구란 뭘까? 상태 -> React에서 State는 component 안에서 관리되는 것이다. 1) 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다. 2) 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. 3) 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다. 4) 상태를 관리하는 상위 컴포넌트에서 게속 내려 받아야 한다. (Props drilling 이슈 발생) 위에 사항들처럼 상태 관리의 복잡성을 해결해주는 상태 관리 툴이 있습니다. - React Context - Redux - Mobx 위 상태..

JavaScript(JS)와 JavaServer Pages(JSP)는 모두 웹 개발에 사용됩니다. 하지만 목적에 따라 몇 가지 중요한 차이가 있습니다. JavaScript(JS) : 클라이언트 측 언어로, 웹 브라우저에서 실행됩니다. 주로 정적인 HTML 문서와 달리 동적인 화면을 웹페이지에 구현하기 위해 사용하는 스크립트 언어이다. JavaServer Pages(JSP) : 서버측 웹 프로그래밍중 하나이다. HTML 코드 내에 직접 자바코드를 삽입하여 웹서버에서 동적으로 웹페이지를 생성해주고 웹 브라우저에게 돌려주는 Server측 언어이다.

서버란? - 유저가 데이터를 달라고 요청을 하면 데이터를 보내주는 프로그램입니다. 데이터를 달라고 요청할 때는 정확한 규격에 맞춰서 요청을 해야 서버에서 데이터를 받을 수 있습니다. 1. 어떤 데이터인지 (URL 형식) 2. 어떤 방법으로 요청할지 (GET, POST) GET - 데이터를 가져올 때 POST - 데이터를 보낼 때 GET, POST 요청을 날릴때 단점으로 브라우저가 새로고침이 됩니다. 이 단점을 보완하기 위해 AJAX 기능을 사용합니다. AJAX란? - 웹페이지의 전체 페이지를 새로 고치지 않고, 페이지의 일부분만을 서버에서 가지고 와서 '웹페이지 화면을 동적으로 변경하는 방식입니다. AJAX로 GET/POST 요청하는 방법 3개가 있습니다. 1. XMLHttpRequest 옛날 문법 사용..

useEffect 함수란? React component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 React Hook입니다. import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); let [count, setCount] = useState(0) return ( { setCount(count+1) }}>버튼 ) } 위 소스 처럼 콜백함수 내에 소스를 적으면 컴포넌트가 mount & update 시 실행이 됩니다. 즉, 버튼을 클릭할때마다 '안녕' 이 콘솔창에 나타나게 됩니다. 하지만, import {useState..

styled-components는 무엇일까? - 기존 돔을 만드는 방식인 css, scss 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않고, 동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 styled-components라고 합니다. https://styled-components.com/ styled-components CSS for the Age styled-components.com 먼저 styled-components를 사용하기 위해서 환경설정을 해주어야 합니다. npm install styled-components 환경설정이 문제 없이 진행되었으면, import styled from "styled-components"; let YellowBtn = styled..

각 페이지들을 이동시키기에 편하게 해주는 라이브러리가 있습니다. https://reactrouter.com/en/main Home v6.21.2 | React Router I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com react router DOM 6는 React 애플리케이션에서 라우팅을 관리하기 위한 라이브러리 입니다. , , , . 등 라우팅을 도..

함수란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록입니다. 이렇게 생성된 함수는 필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있습니다. function addNum(x, y) { return x + y; } 또한 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하며, 함수는 다른 함수 내에 중첩되어 정의될 수 있습니다. 위 코드에서 addNum -> 함수이름 : 함수를 구분하는 식별자 x, y -> 매개변수 : 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수 reunrn -> 반환문 : 함수의 실행을 중단하고, 다음에 명시된 표현식의 값을 호출자에게 반환함 함수의 정의를 하였으면, 이제 함수를 사용해야 하니 함수의 호출을 할것입니다..

코딩애플에서 React 강의를 수강중에 정리하고자 현재 글을 올려보고자 합니다. https://codingapple.com/course/react-basic/ React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌 Next.js는 프론트엔드부터 서버까지 만들 수 있는 React기반 프레임워크입니다. 이것만 사용해도 풀스택 웹개발이 가능합니다. Next.js 사용시 서버사이드 렌더링이 쉽기 때문에 React, Vue만 사 codingapple.com 1. React에서는 let, const, var 로 변수값을 저장할 수 있다. 또한 useState를 쓰는 경우가 있는데, 자주 변경될 것 같은 html 부분은 state 로 만들어 놓아라. ( 자동으로 재 렌더링 시켜준다. ) 2. Rea..