유자맛바나나의 Dev-log

React에서 페이지를 이동할 땐 태그가 아닌 태그를 사용한다 태그의 href 속성을 사용할 경우 href 속성을 사용할 경우 HTML을 새롭게 불러오게 된다. 따라서 React의 state(상태)값과 렌더링 된 컴포넌트가 전부 초기화 된다. 이러한 방식은 서버에 새로운 HTML을 요청해 속도가 느릴 뿐 아니라, 단일 URL로 SPA(Single Page Application)로 사이트를 표현하는 React의 방식과 대치된다. 태그의 to 속성을 사용할 경우 React에서는 태그의 문제점을 보완할 수 있도록 react-router-dom 라이브러리의 컴포넌트를 통해 페이지 이동을 하도록 지원한다. 를 사용할 경우 HTML을 초기화하지 않고 페이지를 이동할 수 있다. 예시 App.js react-route..

1. JSX 내에서 Javascript 사용 하는 방법: { } JSX 내에서 {}를 쓰면 Javascript로 해석한다. 따라서 조건문과 반복문 모두 { } 기호를 이용해야 한다. 2. 조건문(if) JSX에서는 중괄호 안에 if문을 직접적으로 사용할 수 없다. 단, 함수로 작성하여 사용 가능하다. 2.1. 외부 함수를 이용 Example Code import React from "react"; const useIf = (i) => { let result; if(i==1){ result = citron } else { result = banana } return result; } const App = () => { const hello = "Welcome to Citron Banana Blog!" re..

개념 JSX는 컴포넌트 간 속성(매개변수)을 전달할 때는 props(properties)라는 개념을 사용한다. 문법 주의: 넘겨 받은 props(속성값)은 read-only 이므로 값을 수정하고 싶다면 반드시 새로운 state에 할당한 후 사용한다(예시3) ... 예시1: Object로 묶어서 전달 App 컴포넌트에서 TestComponent 컴포넌트로 myProp1="citron", myProp2="banana" 속성값을 넘겨줌 예시2: 속성 각각 전달 에서 작성된 속성명(myProp1, myProp2)과 TestComponent.js에서 작성된 매개변수의 이름이 일치해야 한다 TestComponent.js에서 받고싶은 속성명만 명시해도 된다 예) {myProp1, myProp2} → {myProp1}..

State 1. 정의와 개념 state란 지속적으로 상태를 관리할 수 있는 변수를 의미한다. 기존 JavaScript의 let, const로 선언한 변수는 화면이 Re-rendering 될 때 그 값이 초기화 되었지만, state로 선언된 변수는 React가 관리하기 때문에 화면이 Re-rendering 되어도 값이 계속 유지된다. state는 컴포넌트 안에서 관리되며, 컴포넌트는 state의 값이 바뀔 때 마다 화면을 Re-rendering 한다. 2. state 사용의 차이: 함수형 컴포넌트 vs 클래스 컴포넌트 결론부터 말하자면 React 공식 문서에서 함수형 컴포넌트와 useState(React Hook)을 사용할 것을 권장한다. 개념적으로 React 컴포넌트는 항상 함수에 더 가깝습니다. Hoo..

웹 사이트를 기획할 때 기본 구조를 잘 정의하는 것은 중요한 과제다. 간혹 모든 영역을 태그를 이용해 구조를 만든 웹 페이지를 볼 수 있는데, 이는 분명히 잘못된 구조이다. 각 HTML 태그마다 분명한 목적이 있고 해당 목적에 맞도록 잘 배치해서 사용해야 의미가 명확해지고 유지보수에 용이하며 웹 페이지 분석 프로그램에도 유리하다. 웹 사이트를 박스의 집합으로 바라보자 웹 페이지를 구성하는 박스의 역할을 할 수 있는 태그는 다음과 같은 것들이 있다 , , , , , , , , 과 의 차이점 예를 들어 설명하면 은 블로그에서 포스팅 1개로 볼 수 있다. 즉, 은 그 자체로 독립적으로 다른 페이지에서 보여줄 때 문제가 없을때 사용할 수 있다. 따라서 태그와 독립적으로 다른 곳에서 사용해도 문제가 없어야 한다...

정의 종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)로, HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. 레이아웃과 스타일을 정의할 때의 자유도가 높다. 마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다. 출처: 위키피디아 웹사이트 Styling에 적용되는 세 가지 웹사이트에 적용되는 스타일링은 아래와 같이 세 가지가 있다. 이 때 스타일링은 Author style > User style > Browser style 순의 우선 순위로 적용된다. 즉, Author styl..

정의 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. *출처: 위키피디아 *마크업 언어: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 ..

보호되어 있는 글입니다.

1. 클래스 기초 클래스는 Javascript ES6(ECMAScript6)에 추가된 스펙 2. Class 문법과 사용 constructor(): 생성자 함수로 인스턴스를 생성할 때 실행되는 함수이다. Method: 클래스 내에 정의하는 Method는 prototype에 저장된다. Method는 Function과 다름에 주의한다. Method는 특정 객체에 종속된 것으로 객체가 아닌 반면, Function은 객체로 취급된다. Example Code class User { // 멤버 변수 정의 grade = "Master"; // 생성자 함수 constructor(name, age){ this.name = name; // this를 써줘야 클래스의 멤버 변수로 남는다 한다. this.age = age; }..

보호되어 있는 글입니다.