분류 전체보기 (167) 썸네일형 리스트형 [module] import, require, module.exports, export 노드랑 리액트랑 번갈아가면서 하다보면 헷갈릴때가 있어서 정리함 import, require 외부 모듈 가져오는 것 node는 commonJS를 지원 -> require만 가능 module.exports, export 외부에서 사용할수 있게 모듈로 내보내는 것 node는 commonJS를 지원 -> exports, module.exports만 가능 /** moduler객체니 default로 내보내면 변수로 내보내기 때문에 한파일에 한번만 내보내기 가능 **/ // 한개만(module) 내보내기 : commonJS 방식 module.exports = {name: "react"}; // 한개만(default) 내보내기 export default React; /** 객체로 묶어내보내기 때문에 여러개를 묶어 내보.. Error handling과 custom Error 생성 Error handling 다른 언어에서 제공하는 try/catch 구문이 자바스크립트에서도 존재 자바처럼 특정 클래스/메서드 사용할때 강제하는 것도 아니라서 클라이언트 개발할때 거의 쓸일이 없었다.(그냥 if문으로 처리했었다.) 백엔드서버에서 사용하다보면 에러났을 경우에 어떻게 처리할것인지와 어떤 에러를 내서 로그에 기록할 것인지가 중요 자바에서 Exception 상속 받아서 사용자 정의 예외 만들던것처럼 자바스크립트에서는 클래스나 함수(화살표함수는 X)로 커스텀 에러 만들수가 있다. 커스텀에러와 try/catch 생성자함수를 통해 커스텀 에러 정의 가능(function 혹은 class로 정의) 그러므로 arrow function으로는 불가능(TypeError: CustomError is not a c.. Node.js와 Event Roof Node.js 프로그래밍 패러다임 IO: 사용자데이터를 입력받으면(input) 원하는 결과를 내보낸다(output) Network IO가 웹서버(WAS)의 성능을 측정하는데 가장 중요한 요소 Node.js는 Network IO시 다른 WAS가 겪는 동시성 이슈(Thread)를 비동기와 Non-blocking으로 해결 다른 WAS는 Threadfull 방식이라면 순서가 될때까지 대기해야 해서 Multi Thread 필요. Node.js는 Event Driven 방식이기 때문에 이벤트가 발생했을때 기다리지 않고 반응한다. Event Roof Node.js는 Event Driven 방식, 즉 non-blocking으로 처리를 위해 Event Roof 사용 Event Roof는 Stack(Call Stack)과.. [Styled Components]syntex Styled Components npm i styled-components 단점 작성할때 css를 줄 태그는 다 컴포넌트로 만들어야 한다는 점이 가독성을 떨어뜨린다고 생각 css 수정할때마다 해당하는 컴포넌트 파일 위치 찾아야 하는 번거로움 존재 장점 className을 사용하지 않아 외부에 css파일로 빼서 작업했을때 className 중복되서 생기는 문제를 해결함 scss 설치 없이 scss 문법을 사용 가능 자바스크립트식 CSS 문법이 아닌 기존 CSS 문법(단축, 가운데 - 사용) 모두 사용 가능 자바스크립트로 처리하기 때문에 상태처리 하는 css 역할로 매우 우수 react-native에서도 적용되기에 웹과 앱을 둘다 만들어야 한다면 css를 거의 그대로 사용 가능 결론 레이아웃과 scss로 만.. [react-router-dom]BrowserRouter, HashRouter 설치 npm i react-router react-router-dom 라우터 적용 라우터를 사용하기 위해선 최상위 컴포넌트를 묶고 시작해야 한다 import React from 'react'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; const Root = () => { return ( ); }; export default Root;라우터1. BrowserRouter Link 컴포넌트 to속성에 이동할 경로 기술 Route 컴포넌트 path속성을 Link의 to속성과 매핑 component에 컴포넌트 경로 기술 새로고침 하면 경로 못찾아서 에러남 라우터2. HashRou.. [styled-components] syntax Styled Components npm i styled-components 외부 css파일로 빼서 작업하지 않기에 className 중복 문제 해결 scss 설치 없이 scss 문법 사용 가능 기존방식 컴포넌트에 props로 상태값을 전달하고 상태값에 따라 className을 다르게 붙이는 방식 class App extends Component { render() { return ( ); } } const Button = ({ danger }) => ( Hello ); Styled Components 기본문법 const 컴포넌트명 = styled.태그명`...css ` 전역에 스타일 줄때는 createGlobalStyle 모듈 사용 기존 전역 모듈 injectGlobal 없어짐 https://www.st.. [operator] + !! || && + !! || && ||와 &&는 잘쓰면 if문을 훨씬 덜 쓸수 있어서 평범하게 if문을 쓰지 못하는 jsx에서 매우 유용 !!는 이중부정으로 boolean 값으로 형변환 해준다. 는 덧셈 연산자이지만 숫자형 문자열 앞에 쓰면 number 값으로 형변환 해준다 + parseInt()메소드나 Number() 생성자 함수대신 사용할 수 있다. 숫자형 문자열을 숫자랑 === 비교해야 할때 간단하게 사용하기 좋다. let str = "1234"; console.log(typeof parseInt(str), parseInt(str); // number, 1234 console.log(typeof +str, +str); // number, 1234 !! 값이 있으면 true 값이 없는 것들을 전부 false로 변환.. Uncaught ReferenceError: regeneratorRuntime is not defined async/await 사용하다가 본 에러 chrome이 async, await를 지원하는데 에러가 날리가 없어서 이상했는데 babel 문제였다. 해결방법 pollyfill 추가 yarn add babel-polyfill entry: { app: ['babel-polyfill', './app'], }, targets 변경 상위 버젼 크롬만 지원한다. module: { rules: [{ test: /\.jsx?/, loader: 'babel-loader', options: { presets: [ // 배열로 선언하면 babel이 컴파일 할 대상 브라우저도 지정 가능 ['@babel/preset-env', { targets: { // 크롬 최종 버젼으로 부터 2개 버젼 https://github.com/bro.. 이전 1 ··· 15 16 17 18 19 20 21 다음
