츄리닝개발자

terminal에서 get-ExecutionPolicy를 실행하여 터미널 실행권한을 먼저 확인한다. 권한 종류Restricted: default 값, 스크립트만 실행가능AllSigned: 서명된 신뢰가능한 스크립트 파일만 실행가능RemoteSigned(개발시 권장): 로컬에서 생성된 스크립트, 서명된 스크립트 실행가능Unrestricted (보안에 취약해짐) : 모든 스크립트 실행가능ByPass: 경고나 차단없이 스크립트 실행가능Undefined: 권한 설정이 안되어있음 보통 개발하면서 권장되는 권한은 RemoteSigned므로 아래와같은 명령어로 권한 설정을 해주자Set-ExecutionPolicy RemoteSigned 혹은 로컬에서 돌릴시 로컬 웹 서버로 실행시키는 명령을 사용하자 Nodenpx h..

앱을 만들때 android, ios로 각각 만들어야 되는데 React Native를 사용하면 한번에 두가지를 잡을 수 있다. React Native를 더 쉽게 만든게 Expo다. 다만 단점이 있는데 android나 ios에서 업데이트된 기능이 React Native로 넘어오기까지 시간이 걸리고 이게 또 Expo로 넘어오는데까지 시간이 또 걸린다. https://expo.dev/ ExpoExpo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.expo.dev 1. 일단 회원가입을 진행해준다.  2. Expo 앱을 모바일에 설치해준다. Expo는 이제..

웹 페이지는 상단에 favicon 모양이 있다. 확장자는 .ico인데png 확장자를 ico로 변환해주는 사이트가 있다.  https://convertico.com/ 변환후 파일이름을 favicon.ico로 해준뒤 index.html과 같은경로에 위치시켜주면 된다.  보통 아래의 코드를 html에 넣어줘야하는데 요즘에는 브라우저에서 루트에 위치한 파비콘을 가져가다 쓴다.

npm install cra-template-typescript -g 위 패키지가 없어서 안될가능성이 있으니 이것을 적용혹은 이전 프로젝트 캐시가 남아있을수 있으니 npm uninstall -g create-react-app위 명령어로 캐시를 한번 삭제해준다.  이전에는 --template typescript를 설정해줘도 적용이 안되었던것이 위 패키지를 설치해주니 아래와같이 정상적으로 적용이 되었다.

1. node js를 설치해준다. LTS버전으로  2. yarn을 설치해줘야한다. # 맥북에서 설치 brew를 설치한후brew install yarn  3. 루트 디렉터리에 CRA(create-react-app) 세팅yarn create react-app 사용할폴더이름 -template typescriptcd 사용할폴더이름 4. react router dom 추가yarn add react-router-dompackage.json에 dependency가 추가된다 dev dependency에 추가해줄 경우 로컬 환경에서 개발 및 테스트할때만 사용되는 패키지들을 정의한다. yarn add --dev @types/react-router-dom

visual studio code에서 아래순으로 명령을 실행시켜준다. // 패키지를 만들어준다. npm init -y npm install webpack-cli --save-dev //실행할 웹서버를 설치/ 트랜스파일러로 babel을 설치 npm install webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev package.json { "name": "2.3", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "build": "webpack", "test": "echo \"Err..

리액트에서는 요소의 리스트를 나열할 때 key를 넣어줘야한다. key는 React에서 변경하거나 추가 또는 제거된 항목을 식별하는데 도움이된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야한다. key에는 유니크한 값을 넣어주는데 index는 리스트가 추가되거나 제거되면 해당 리스트들의 키값도 변경되서 추천하지 않는다. {/* before */} 1 2 {/* after */} 3 2 {/* after */} 3 1 2

class 없이 state를 사용할 수 있는 기능이다. React는 원래 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다. React Component 1. Class Component: 더 많은 기능, 더 긴 코드, 더 복잡한 코드, 더딘 성능 import React, { Component } from 'react' export default class Hello extends Component { render() { return { hello my friends! } } } 2. Functional Component: 더 적은 기능, 짧은 코드, 더 심플한 코드, 더 빠른 성능 import React from 'react' export d..

자바스크립트의 원시타입은 불변성(immutable)이고 참조타입은 가변성(mutable)이다. 원시 타입: Boolean, String, Number, null, undefined, Symbol 참조 타입: Object, Array 원시타입은 Call Stack에 저장을하고 참조타입은 Heap에 저장을 하는데 저장하는 방식이 다르다. 둘다 주소와 값을 가지고 있는 형태인데 Heap이 값을 배열형태로 가지고있는데. 이 값의 주소를 Call Stack에서 Heap의 메모리 참조의 ID를 값으로 저장한다. 원시타입: 고정된 크기로 Call Stack 메모리에 저장, 실제 데이터가 변수에 할당. 참조타입: 데이터 크기가 정해지지 않고 Call Stack 메모리에 저장, 데이터의 값이 heap에 저장되고 변수에 ..

super는 자식클래스 안에서 부모클래스의 생성자를 호출할 때 사용한다. - (3) super는 자식클래스 안에서 부모클래스의 메소드를 호출할 때 사용한다. - (6) class Car { (3)constructor(brand) { this.carname = brand; } (6) present() { return 'I have a ' + this.carname; } } class Model extends Car { (2)constructor(brand, mod) { super(brand); this.model = mod; } (5) show() { return super.present() + ', it is a ' + this.model; } } (1)let mycar = new Model("Ford"..