I'm a Fig, Not a Pig

목차 1. DOM (Document Object Model) 이란? 2. DOM의 문제점 3. Virtual DOM 보통 자바스크립트를 배우면서 자연스럽게 리액트도 배우게 된다. 그럼 리액트를 왜 사용하게 됐냐는 질문을 받으면 뭐라고 답해야 할까? 많은 사람들이 사용하니까, 인기있는 라이브러리니까 등 여러 답변이 있겠지만, 만족스럽지는 못한 답변이라고 생각한다. 그래서 앞으로 리액트의 등장배경, 내부동작들을 정리하며 어떠한 이유에서 리액트가 등장했고, 또 왜 리액트를 사용해야 하는지에 대해 공부하려고 한다. DOM은 HTML, CSS, JS를 익히면서 알게된 개념인데, 리액트에서 Virtual DOM 이라는 개념으로 또 만나게 됐다. Virtual DOM이란 무엇일까? 우선 DOM의 의미부터 살펴보자. ..

1. initial 모든 CSS 속성에는 기본값(initial/default value)이 있다. 예를 들면 대부분의 브라우저에서 color 속성의 기본값은 black이다. initial 속성값은 해당 속성을 기본값으로 초기화 시켜준다. 따라서 태그의 중첩이 있을때 부모 요소의 속성을 상속받지 않고 기본값으로 초기화 하고 싶은 경우 사용할 수 있다. 다음 예제를 살펴보자. This is heading This is a paragraph.This is child element! h1 { font-size: 2rem; } p { font-size: 1.5em; } span{ font-size: initial; color: tomato; } body 태그는 자식 요소로 h1 태그와 p 태그를 가진다. p 태그..

로그인 .logo와 .logo_img 사이에 작은 공백이 생겼다. 단순하게 아래와 같이 a 태그를 공백없이 모두 붙여주면 해결 되지만 가독성이 좋지 않아서 잘 사용하지 않는다. 따라서 공백을 제거하려면 .logo에 font-size: 0;을 적용하면 된다. .logo { font-size: 0; }

목차 1. flex-basis 2. flex-grow 3. flex-shrink 1. flex-basis flex-basis는 flex 아이템의 크기를 설정하기 위해 존재하는 속성이다. 아이템의 크기를 직접 설정한다는 점에서 width와 유사하지만 1. flex-basis는 width나 height와 달리 flex-direction의 영향을 받는다는 점 2. flex-basis와 width가 동시에 적용될 경우 flex-basis가 더 높은 우선순위를 갖는다는 점의 차이가 있다. flex-basis의 기본 값은 auto로, - width를 따로 설정하지 않으면 컨텐츠가 차지하는 width와 같은 값이되고 - width를 설정하면 설정값과 동일한 값이 된다. .container { display: flex..

1. 불필요한 파일 삭제하기1. public 폴더index.html을 제외하고 모두 삭제하기   2. src 폴더App.js, index.js를 제외하고 모두 삭제하기  삭제했다면 아래와 같이 된다.  2. index.html, index.js, App.js 수정// index.html // index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( , document.getElementById('root'));// App.jsfunction App() { ret..

이메일 폼을 만들던 중.. 이메일이 유효하지 않은 상태에서 다음 버튼을 누르면 주황색으로 변하는 문제가 있었다. (이메일이 유효한 상태에서만 주황색으로 변하게 하고 싶음) 내가 원하는 건 변하지 않게 하는 것..! 그래서 active를 사용해서 이메일이 유효하지 않은 경우 버튼 클릭 시 그레이 색으로 유지되도록 코드를 짰는데 계속 주황색으로 바뀌었다. 구글링 도중 스택오버플로에서 나와 비슷한 상황이신 분을 발견했고 active가 아닌 focus로 하는게 적절하다는 답변을 보았다. 이후에 active 대신 focus를 적용했더니 문제해결! 그래서 오늘은 active와 focus에 대해 알아보았다. active와 focus acitve나 focus 둘 다 user의 action에 따라 스타일링의 변화를 주고..

리액트에서는 화면이동을 위해 Link 와 useNavigate 라는 두 가지 방법을 사용한다. 1. Link 라이브러리 설치 npm install react-router-dom --save​ // Router.js function Router() { return ( ); } export default Router; // Login.js import React from "react"; import { Link } from "react-router-dom"; function Login() { return ( 회원가입 ); } export default Login; 첫번째 방법은 Link 컴포넌트를 사용하는 것이다. Link는 상품 리스트에서 상세 페이지 이동 시와 같이 클릭 시 바로 이동하는 로직 구현시에 ..

이메일, 비밀번호 정규식 const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/; const passwordRegEx = /^[A-Za-z0-9]{8,20}$/ /^ : 시작 $/ : 끝 [A-Za-z0-9] : 영문 대소문자 혹은 숫자로 시작 ([-_.][A-Za-z0-9]) : 두 번째 글자부터는 영문 대소문자 혹은 숫자이며 - _ .이 들어갈 수 있음 * : 문자 또는 숫자가 0개 이상 나타남 @가 중간에 반드시 들어가야 함 도메인 부분도 마찬가지로 영문 대소문자 혹은 숫자로 시작하며 그 다음부터-_.이 들어갈 수 있음 . 이 최소한 하나는 반드시 들어가야 함 .뒤에 com..

오늘은 효율적인 효율적인 구조를 짜기 전 CRA 초기세팅 후 생성되는 폴더와 파일들에 대해 알아보려고 한다. CRA 초기세팅 후 디렉토리들 살펴보기  CRA로 초기세팅 후 생성되는 파일 구조이다. node_modulesCRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더package.jsonCRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일모든 프로젝트마다 package.json이 하나씩 존재한다."dependencies"리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능.실제 코드는 node.modules 폴더에 존재한다."scripts"start : 프로젝트 development mode(개발 모드) 실행..

리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게 리액트는 따로 내장 클래스가 존재하지 않는다. 따라서 리액트에서 AJAX를 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다.  그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까? 리액트와 함께 쓰면 좋은 HTTP Client 라이브러리가 많지만 여기에선 리액트에서 많이 쓰이는 것 중에 하나인 Fetch API를 비교하며 axios 라이브러리를 알아볼 것이다. 1. AJAX (Asynchronous Javascript And X..