키모스토리

Computed Property : 객체내 프로퍼티를 let a = 'age';const user = { name: 'Mike', [a] : 30 // age :30}console.log(user.name, user.age);  객체 메소드 (Object Method) Object.assign() : 객체 복제const user = { name: 'Mike', age: 30}// 이렇게 하면 user 와 같은 객체를 바라보는 참조 변수만 생성됨const cloneUser = user; // 새로운 유저정보를 저장하는 객체 생성const newUser = Object.assign({}, user);// 객체+객체를 복제 가능const newUser2 = Object.assign({ gender:'mal..

객체 리터럴: 단일 사용을 위해 간편하게 객체를 만들어 사용할때let user = { name: 'Mike', age: 30,}  생성자 함수: 위와 같은 데이터 구조를 여러개가 필요할때 사용 (class 와 유사): new 연산자를 이용해 객체를 생성function User(name, age){ this.name = name; this.age = age;}let user1 = new User('Mike', 30);let user2 = new User('Jane', 23);let user3 = new User('Tom', 16);console.log(user1, user2, user3);  생성자 내 메서드 추가 가능function User(name, age){ this.name = name; th..

var, let, const의 차이점중복 선언과 재할당스코프 범위호이스팅중복 선언과 재할당varvar a = 5; console.log(a); // 5var a = 10;console.log(a); // 10a = 15;console.log(a); // 15var 에서는 중복 선언과 재할당이 모두 가능하다.마지막에 할당된 값이 최종으로 변수의 값으로 저장된다.letlet a = 5;let a = 10;cnosole.log(a); // SyntaxError: Identifier 'a' has already been declaredlet 에서는 중복 선언을 허용하지 않는다.중복 선언을 할 경우 SyntaxError 가 발생하게 된다.let a = 5;console.log(a); // 5a = 10;conso..

react 프로젝트가 실행이 되면 home\src\index.js  파일이  실행이 됨 코드를 보면 root element를 찾아서 root.render() 안에 있는 컴포넌트를 실행하도록 되어 있음 const root = ReactDOM.createRoot(document.getElementById('root'));root.render( ); 이때  /pulbic/index.html 파일 안에 있는 안에 의 내용을 삽입해 준 뒤에 브라우저로 랜더링이 된다.  /publc/index.html tag. To begin the development, run `npm start` or `yarn start`. To create a productio..

필요사항 Node.js v14.0.0 이상npm v6.14.0 이상VS Code  #  사용법$ npx create-react-app  # 실제 사용 예제$ npx create-react-app my-app # 경로변경 (change directory)$ cd my-app # 애플리케이션 실행$ npm start 리액트 웹개발을 위한 기본 템플릿이 설치되고 샘플 페이지가 실행이 된다. 예) D:\ReactHome\my-app 경로로 프로젝트를 생성하려면1. vscode => Open Folder 경로를 D:\ReactHome\ 지정하여 오픈2. Terminal > New Terminal 선택 하여 터미널창 열기 3. npx create-react-app my-app 입력 엔터 4. 설치 완료 확인  - ..

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다.싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.  리액트의 장점빠른 업데이트 & 렌더링 속도Virtual DOM Component-Based - 재사용성(Reusability) - 개발 기간이 단축됨 - 유지 보수가 용이함모바일앱 개발에 용이함 (React Native) 리액트의 단점방대한 학습량 - Virtual DOM, JSX, Componet, State, Props 등등의 새로운 개념높은 상태관리 복잡도

웹에서 SPA는 Single Page Application의 약자로, 단일 페이지 애플리케이션을 뜻합니다. 서버로부터 새로운 페이지를 불러오지 않고, 현재 페이지를 동적으로 다시 작성하여 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다.  SPA의 장점은 다음과 같습니다.  배포가 간단합니다웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드합니다전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않습니다네이티브 앱과 유사한 사용자 경험을 제공합니다SPA의 단점은 다음과 같습니다.  초기 구동 속도가 상대적으로 느립니다검색엔진 최적화(Search Engine Optimization, SEO) 이슈가 있습니다SPA는 모바일의 중요성이 커지면서 모바일 ..

웹에서 CSR은 Client Side Rendering의 약자로, 클라이언트 측에서 페이지를 렌더링하는 방식을 의미합니다.  CSR의 특징서버에서 페이지를 미리 준비해 보여주는 것이 아닌, 사용자의 브라우저에서 동적으로 생성되어 렌더링 됩니다  서버로부터 받아온 데이터를 클라이언트에서 JavaScript를 통해 동적으로 조작하여 렌더링합니다  모든 로직, data fetching, templating 및 라우팅은 서버가 아닌 클라이언트에서 처리합니다  CSR과 비교되는 방식CSR과 비교되는 방식으로는 서버에서 페이지를 미리 준비해 보여주는 Server Side Rendering(SSR)이 있습니다  SSR은 인터넷 연결이 느린 사용자에게 유익할 수 있습니다  렌더링이란?렌더링이란 HTML, CSS, Ja..