All

[리액트] Redux

1. Redux? 리액트 전역 상태 관리 라이브러리 여러개의 컴포넌트가 개별적으로 관리하는 상태값들을 하나의 파일에 모아서 통합 관리하는 것이 목적 컴포넌트끼리 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다. React나 다른 뷰 라이브러리와 함께 사용할 수 있다. 2. Redux 기본 요소 Slice 리덕스에서 관리하고자 하는 상태값과 상태값 갱신 기능을 포함하는 단위 모듈 상태값 - 리덕스를 통해 관리하고자 하는 전역 상태값 리듀서 - 상태값을 갱신하기 위한 함수(=액션함수)들을 포함하고 있는 모듈 액션함수 - 리듀서에 포함된 메서드들로서 상태값을 갱신하는 역할을 수행한다. Store Slice를 저장하고 있는 통합 모듈 이 모듈을 ReactA..

[리액트] export와 export default의 차이

리액트에서 export와 export default는 모듈을 내보내는 데 사용되는 키워드이다. 이 두 키워드를 JavaScript 모듈 시스템에서 사용되며, 다른 파일에서 해당 모듈을 가져와 사용할 수 있도록 한다. export 👉 import 시 { 함수이름 } ~ 로 불러온다. export default 👉 import 시 { } 가 필요없다. export export는 모듈에서 특정한 요소(함수, 변수, 클래스 등)를 내보내는 역할을 한다. export 키워드를 사용하여 특정 요소를 내보내면, 해당 요소는 다른 파일에서 import 키워드를 사용하여 가져올 수 있다. export는 여러 개의 요소를 동시에 내보낼 수 있으며, 내보낸 요소들은 이름을 가지고 있어야 한다. 이러한 요소들은 가져올 때 동..

[리액트] Props

🎀 Props properties의 줄임말 props는 읽기 전용이다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다. 아래와 같은 함수들은 순수 함수라고 호칭한다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과 값을 반환하기 때문이다. function sum(a, b) { return a + b; } 반면에 다음 함수는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다. function withdraw(account, amount) { account.total -= amount; } 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다. props 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용 App.js impor..

[자바스크립트] axios

Axios 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)애서는 XMLHttpRequest를 사용한다. 특징 브라우저를 위해 XMLHttpRequests생성 node.js를 위해 http 요청 생성 Promise API를 지원 요청 및 응답 인터셉트 요청 및 응답 데이터 변환 요청 취소 JSON 데이터 자동 변환 XSRF를 막기위한 클라이언트 사이트 지원 XMLHttpRequests(XHR) XHR 객체는 서버와 상호작용할 때 사용한다. XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터는 가져올 수 있다. 이를 활용하면 사용자의 작업을 방해하지 않고 페이지의..

[리액트] Components

🎀 Components 개념적으로 컴포넌트는 JavaScript 함수와 유사하다. React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 "props"라고 한다. 처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있지만, 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타낸다. UI 일부가 여러 번 사용되거나(Button, Panel, Avatar), UI 일부가 자체적으로 복잡한(App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋다. 😚 컴포넌트의 이름은 항상 대문자로 시작한다. React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다. 예를 들어 ..

[리액트] JSX 문법

🎀 JSX 란? JavaScript를 확장한 문법이다. React에서는 본직적으로 렌더링 로직이 UI로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "컴포넌트"라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다. 관신사의 분리 : 컴퓨터 과학에서 관심사 분리는 컴퓨터 프로그램을 별개의 섹션으로 분리 하기 위한 설계 원칙이다. React는 JSX 사용이 필수는 아니다. 🎈 JSX에 표현식 포함하기 const name = 'Josh Perez'; const element = Hello, {name}; fu..

[리액트] Router

리액트는 SPA(Single Page Application) 방식 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태이다. 1) Router 분배하는 기능을 수행하는 소프트웨어나 하드웨어 대표적인 라우터로는 아이피공유기가 있다. React의 Router는 URL에 의해 컴포넌트를 분배하는 기능을 한다. HTML5에서 Javascript에 추가된 기능중 history객체를 통해 URL을 변조하는 기능이 있다. 리액트의 Router는 이 기능을 활용하여 현재 페이지의 URL을 다양하게 변조하여 거기에 각각의 컴포넌트를 분배한다. 2) SPA 개발의 장점 페이지 이동 없이 JS에 의해 화면이 갱신되므로 실제로 네트워크 통신이 발생하지 않아 실행 속도가 빠르다. 3) SPA 개발의..

[리액트] 시작하기

개발환경 구성하기 1) Node.js 설치확인 window 명령프롬프트 실행 : Winkey + R > cmd (엔터) 명령어 수행 : node --version MacOS 터미널 실행 : cmd + space > terminal (엔터) 명령어 수행 : node --version 결과값이 출력되지 않을 경우 설치 설치하기 https://nodejs.org 에서 프로그램 내려받아 설치. 대부분의 경우 LTS 버전 권장. Mac M1 버전의 경우 17 이상 버전 필요함. 설치 완료 후 열어두었던 명령프롬프트나 터미널을 종료하고 재시작. 앞서 수행한 버전확인 명령어를 통해 설치 완료 확인. 2) yarn npm install -g yarn 3) visual studio code 작업시 도움되는 extensi..

[자바스크립트/HTML] Img onerror

외부파일 로드 중 img 태그에 이미지가 로드가 안될 때 1. 대체이미지로 변경 onerror="" 사용 대체이미지마저 없을 경우를 대비해서 null을 넣어준다. 2. display: none 참고 https://www.w3schools.com/jsref/event_onerror.asp onerror Event W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com

[CSS 방법론] BEM 방식

BEM ( Block, Element, Modifier ) 목적 또는 기능을 전달한다. 구성 요소의 구조를 전달한다. 선택자 특이성을 항상 낮은 수준으로 유지한다. B (Block), 블록 : 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의 E (Element), 요소 : 구성 요소 안쪽에는 하나 또는 그 이상의 요소가 있을 수 있다. M (Modifier), 변경자 : 블록 또는 요소는 변경자를 이용하여 변형을 표시할 수 있다. Block 독립적인 의미를 가지는 추상화된 컴포넌트 환경에 영향을 받으면 안된다. (e.g. margin이나 position 금지) Block을 재사용하거나 위치를 변경하는 등 Block의 독립성을 보장해야 한다. Block은 서로 중첩해서 사용할 수 있으며, 여러번 중첩도..