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

크롬의 v8 c++ 로 웹브라우저 이외에 곳에서도 실행 가능했다. Node.js 는 자바스크립트를 브라우저가 아닌 곳에서도 실행시켜보자는 뜻에서 나오게 되었다. 자바스크립트 실행환경 (런타임) node 파일명 : node 를 통해 자바스크립트 파일 실행시키는 법 모듈 : 어떤 기능을 담당하는 분리된 파일 각각을 뜻함 module.exports 로 모듈 내보내기 가능하다. require 을 통해 모듈 불러와서 사용 가능하다. ■ npm(Node Package Manager) : Node.js 패키지 관리 도구 다른 사람들이 만들어 놓은 패키지를 다운받을 수 있다. npm init 을 통해 package.json 파일 만들 수 있다. package.json 우리가 만들 패키지의 정보를 기록하는 환경 설정 파..

■ Truthy { } [ ] "0" (문자열 안 값) "false" (문자열 안 값) Infinity 42 (숫자) ■ Falsy null undefined "" (빈 문자열) 0 (숫자 0) -0 NaN

delete : property 삭제하는 것 (연결 끊는 것) person.name = null 이 방법을 추천 name in person : 해당 프로퍼티가 객체 안에 있는지 확인하는 법 Object.key(객체) : 객체안에 있는 key 값들을 배열로 반환 받을 수 있다. arr.includes(인자) : 받은 인자와 일치하는 값과 타입이 있는지 확인 arr.indexOf(인자) : 배열안에 존재하는 인덱스를 출력해줌, 만약 없다면 -1을 출력 arr.findIndex((elm) => {elm.color === "blue"}) : 콜백 함수를 통해 우리가 원하는 값과 일치하는 배열의 인덱스 출력 arr.find() : 우리가 원하는 요소를 출력 arr.filter() : 특정한 조건을 만족하는 요소 ..

■ 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) 받아야해서 처음 다운로드하는 번들의 크기가 크다. ● 초기 네트워크 트래픽 증가로 화면 로딩 느림 ● 서버 실행 환..

■ 프레임워크(Framework) 란? : 프레임 워크는 Application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공해주는 것이다. 이런 뼈대 위에 개발자가 코드를 작성해서 Application 을 완성한다. 뼈대가 있기 때문에 객체 지향 개발을 하면서도 일관성 부족과 같은 문제를 해결해주는 장점이 있다. 따라서 소프트웨어에서 프레임워크를 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합이라 한다. ■ 라이브러리(Library) 란? : 프레임워크를 검색하면 가장 많이 나오는 개념 중 하나가 라이브러리다. 그렇다면 라이브러리란 무엇일까? 라이브러리란 특정 기능에 대한 도구 혹은 함수들을 모은 집합이다. 즉, 프로그래머..

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