전체 글

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