Web

[리액트] 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은 서로 중첩해서 사용할 수 있으며, 여러번 중첩도..

[웹접근성] 꾸밈 요소의 이미지 처리

이미지에는 alt값이 필수이다. 하지만 내용이 없는 꾸밈 요소의 이미지는 어떻게 처리하면 좋을까? 스크린리더가 이미지를 무시하는 좋은 방법 css의 background 속성 사용 태그에 alt 속성을 빈 값으로 사용 태그에 aria-hidden 사용 태그에 role="presentation" 사용 스크린리더가 아이프레임을 무시하는 좋은 방법 이미지 폰트 사용시 주의 css의 가상 선택자의 content는 스크린리더가 읽는다. 이미지 폰트를 스크린리더가 읽지 못하도록 aria-hudden="true" 속성을 삽입하고 숨김 텍스트로 그 의미를 삽입한다. address 출처: https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore

[자바스크립트] 제어 구문

제어 구문은 프로그램의 처리 흐름을 제어하는 문장이다. 제어 구문을 배우면 알고리즘에 담긴 논리를 표현할 수 있고 본격적으로 프로그램을 만날 수 있다. 문장은 위에서부터 아래 방향으로 작성한 순서대로 실행된다 => 순차적 실행 순차적 실행 흐름을 변화시키는 문장을 제어 구문이라고 한다. 분류 제어 구문 설명 조건문 if/else, switch, try/catch/finally 조건에 따라 처리를 분기 반복문 while, do/while, for, for/in, for/of 조건을 만족하면 처리를 반복 실행 점프문 break, continue, throw 프로그램의 다른 위치로 이동 조건문 조건문은 조건식의 값에 따라 실행 흐름을 분기한다. if / else '만약 ~ 이라면 ... 그렇지 않으면 ...'..