개발하는 인사담당자 개발하는 인사담당자

1. node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node -v 로 설치 여부 확인 가능 2. vs_code 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and avail..

■ React memo : 강화된 컴포넌트를 반환하는 고착 컴포넌트 ※ 고착 컴포넌트 : 컴포넌트 하나를 인자로 전달받아서 강화 컴포넌트를 반환해주는 것 React memo 를 통해서 만들어진 고착 컴포넌트는 전달받는 프롭이 값이 바뀌지 않으면 렌더링이 일어나지 않게 메모이제이션 해주는 성능이다. ■ 배포하기 npm install -g serve 명령어 설치하기 build 파일 배포하기 같은 공유기 사용하는 사람들이 접속할 수 있는 주소 firebase deploy 공유 시 다음과 같이 출력 가능

■ 라우팅 : 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 네트워크 장치들을 통해 전달되는데 실시간으로 어디로 가야하는지 갈 길을 알려줌 이런 경로를 정해주는 행위 자체와 그런 과정 다 포함하여 일컫는 말 ■ 페이지 라우팅 : 어떤 요청에 따라 떤 페이지를 돌려줄 지 결정하는 것 MPA(Multipage Application) : 여러가지 페이지를 가지고 있다가 맞는 페이지를 보여줌 npm install react-router-dom@latest : 최신 버전 react router 설치 이동 시 리액트 내 Link 활용 경로는 to={ } 를 통해 설정 ■ Path variable ■ Query String useSearchParams 사용 QS 변경도 가능 ■ Page Mov..

■ useRef MutableRefObject html DOM 요소에 접근할 수 있다. 다음과 같이 ref={ } 를 통해 input 에 접근이 가능하다. 현재(current) 가리키는 값을 포커스 처리해준다. getTime() : 시간을 숫자로 반환

■ React 란? : 리액트란 Facebook 에서 만든 JavaScript 사용자 인터페이스(UI) 라이브러리이다. ■ React 를 사용하는 이유 그렇다면 기존 웹개발에서 왜 React 가 주목을 받고 있을까? 1. 화면 전환의 부드러움 (SPA + Virtual DOM) 현재 토스, 인스타크램, Naver Vibe(Vue) 사이트를 들어가면 화면 전환이 부드럽게 진행된다. 이는 React 나 Vue 와 같이 SPA 의 특징이다. SPA 는 최초 생성된 DOM (Document Object Model) 을 유지하면서 변경 사항만 업데이트를 한다. 여기서 이를 도와주는 것이 바로 Virtual DOM 이다. Virtual DOM 은 실제 DOM 의 복제본(자바스크립트 객체로 표현된 DOM)으로, 웹 ..

Link 는 React 에서 제공하는 a태그 역할을 하는 컴포넌트 상태변경 함수 = Setter ★ 상태가 변경된 후에 useEffect()가 지정한 함수가 실행된다. ⚫ useState(): 상태 생성 및 초기화 ⚫ useEffect(): 상태 변경 후 콜백되는 함수 등록 변수가 아닌 상태로 선언하는 이유는 변수의 경우에는 함수가 끝나면 사라지지만, 상태는 사라지지 않는다. 더불어 만약 상태의 값이 변경되었을 때 상태는 해당 부분을 리랜더링 해준다. 상태를 변경할 떄는 상태 변경 함수를 통해 변경해야 한다. 어려운 이유 1. 자바스크립트 문법 2. 복제하고 값을 대입해야 하는 것 -> 이전 상태는 회손하면 안된다. 새로운 전체 배열을 만들어서 대체해야 한다. 상태 usestate, reduce 전역변수..

■ React 란? ● 웹 및 네이티브 유저 인터페이스를 위한 라이브러리 ● 웹페이지를 개별의 컴포넌트로 만들고 붙이는 형식으로 하나의 페이지를 만든다. ● SPA(Single Page Application) 사용 - 페이지별로 돔이 생성되고 랜더링을 하기 때문에 화면이 깜빡인다. 그러나 SPA 는 단일돔 사용하고 유지하면서 변경 사항만 업데이트 한다. - 지속적으로 데이터를 UI 에 나타내는 애플리케이션에 유리하다. ※ react18 부터는 Next.js 가 기본이다. ■ SPA 렌더링 방식 1. 클라이언트 사이드 렌더링(CSR 브라우저) - React ● 랜더링을 위한 모든 파일(JS) 받아야해서 처음 다운로드하는 번들의 크기가 크다. ● 초기 네트워크 트래픽 증가로 화면 로딩 느림 ● 서버 실행 환..

■ create 구현하기 delete 는 버튼 클릭 시 삭제되도록 할 때 링크 사용 시 문제 될 수 있다. 따라서 delete 는 페이지 개념이 아니라 버튼같은 operation(동작) 개념으로 사용하는게 낫다. 사용을 위해 Control.js 를 별도로 만들고 App.js import 한다. 이벤트를 실행했을 때 실행되어야 하는 함수를 핸들러라고 부른다. Control.js 에 onClick 함수를 넣어준다. 함수 안에서 onChangeMode() 함수를 실행시키고 인수로 'create' 값을 전달해준다. 전달받은 값을 _mode 로 이름짓고 이를 setState 를 통해 mode 의 값을 변경해준다. create 클릭 시 모드가 create 로 변경된 것을 확인 가능하다. 이제 각 create, up..