유자맛바나나의 Dev-log

1. Object.assign() 메서드 const object1 = {a: 1, b: 2}; const object2 = {c: 3, d: 4}; const mergedObject = Object.assign({}, object1, object2); console.log(mergedObject); // Output: {a: 1, b: 2, c: 3, d: 4} Object.assign() 메서드는 JavaScript에서 두 개의 객체를 병합하는 가장 간단한 방법이다. 두 개 이상의 객체를 인수로 전달하면, 모든 객체의 속성을 결합한 새 객체가 생성된다. 2. Spread operator '...' const object1 = {a: 1, b: 2}; const object2 = {c: 3, d: 4};..

❑ Situation: 최초 Page 랜딩 시 서버로부터 받은 데이터를 state에 초기화하고 싶다 네이버 웹 페이지에 가면 내가 접속한 그 때 웹 페이지에 보여줄 데이터들을 서버로부터 받아 보여준다. 내가 원하는 것도 최초 Page 오픈 시 Axios를 이용해 서버로부터 데이터를 받아 state에 초기화하고, 해당 state를 화면에 보여주는 것이다. 참고로, Problem1에서 살펴 보겠지만 Axios를 이용해 서버로부터 받은 결과는 Promise다. 따라서 본 포스팅은 최초 Page 랜딩 시 Promise의 데이터를 state에 초기화하는 방법(useEffect를 활용)으로 이해해도 좋다. [Basic knowledge] 함수형 컴포넌트의 state의 초기화 방법 기본적으로 함수형 컴포넌트의 sta..

Question1 상황 아래와 같이 React Router를 이용해 "/path"로 이동하도록 작성한 버튼1을 클릭하면 웹브라우저의 URI에 /path가 추가되며 해당 페이지(컴포넌트)로 이동한다. 여기서 궁금한 점, 그림2처럼 동일한 경로(/path)로 웹서버에 요청하는 버튼을 만들면 될까? Path Page로 이동할까? 아니면 웹 서버에 요청하게 될까? 각 버튼에 작성된 코드 버튼1: React Router를 이용해 "/path" 경로의 페이지로 이동 버튼2: 웹서버 Nginx에게 "/path" 경로로 요청 정답 버튼 1을 클릭할 경우: "/path" 경로의 페이지(컴포넌트)로 이동한다 버튼 2를 클릭할 경우: "/path" 경로(URI)로 웹서버(Nginx)에게 요청한다 어떻게 같은 경로(/path..

React App Build 1. 개발 PC에서 Build 1.1. React App Build create-react-app으로 생성한 React 프로젝트는 webpack 번들러로 빌드 결과물을 생성한다. 터미널에서 React 프로젝트 디렉토리로 이동 후 아래 명령어를 입력한다 npm run build 1.2. Build 확인 build가 완료되면 프로젝트 디렉토리에 build가 추가된다. index.html을 보면 들여쓰기와 띄어쓰기가 전혀 되어 있지 않은데, 웹 브라우저는 들여쓰기와 띄어쓰기가 없어도 구분할 수 있기 때문에 용량 최소화를 위해 전부 제거된 상태인 것이다. 1.3. Git Push React App을 Build하는 곳을 Server PC에서 할 수 있다. 그렇게 하려면 npm을 설치해..

Flexbox란? Flexbox는 Flexbox는 크게 'Container와 Item' 그리고 '중심축과 교차축' 두 가지 개념으로 이해한다. 개념 1. Container와 Item 첫번째는 Container와 Item의 개념이다. flex를 적용하기 위해선 Item을 담기 위한 Container tag의 display 속성을 flex로 적용하면 된다. 그리고 Container와 Item 각각에 적용되는 속성들을 파악해 적절한 속성값을 파악해 적용하는 것이 중요하다. 적용1과 적용2에서 display와 flex-direction을 이용해 기본 적용 예시를 살펴보고, Container 속성과 Item 속성을 하나씩 적용해보며 Flexbox를 이해한다. 적용1. flex box 적용 HTML item1 it..

1. Display (Box 유형과 특성) 각 박스 태그에 Display 줄 수 있는 속성 값(박스 유형)은 블록(Block), 인라인(Inline), 인라인-블록(Inline-Block) 세 가지 유형이 있다. 세 가지 유형의 주요 특징은 다음과 같다. 특성 블록(Block) 인라인(Inline) 인라인-블록 (Inline-Block) 출력 시작 위치 새로운 라인(줄바꿈 됨) 현재 라인의 현재 위치(줄바꿈 X) 인라인 박스와 동일 타 박스들과의 관계 같은 라인에 다른 블록 박스들과 연속해서 표시 불가 같은 라인에서 다른 인라인 박스들과 연속해서 표시(줄바꿈 없음) 인라인 박스와 동일 박스 속성들의 사용 가능 여부 모든 박스 속성 지정 가능 박스 크기, 상하 마진 지정 불가 (width, height, ..

Selector: HTML의 어떤 tag를 고를 것인지 규정하는 문법 Selector의 종류 Selector 기호 역할 및 설명 Universal * 모든 tag에 적용하는 기호 Type tag명 특정 tag에만 적용 State : 콜론 기호는 CSS에서 State라 부르며 마우스 hover와 같은 상태에 따라 스타일링 한다. tag 명 옆에 붙여서 작성한다. Attribute [속성명] Attribute라 부르며 속성을 갖는 tag를 스타일링 한다. tag 명 옆에 붙여서 작성한다. ID #id 해당 id를 갖는 곳에만 적용 Class .class 해당 class를 지정한 곳에 적용 [참고] ID와 Class의 차이 ID 문서 내 유일한 요소에 스타일을 적용할 때 사용한다. 주로 , 와 같이 문서 내 ..

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 같은 스크립트를 포함하거나 불러올 수 있다. *출처: 위키피디아 *마크업 언어: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 ..

보호되어 있는 글입니다.