본문 바로가기
반응형

Development/Frontend skills18

[typescriipt] Union , Narrowing Union : 값이 허용된 타입을 두개 이상의 가능한 타입으로 확장하는 것 let physicist = Math.random() > 0.5 ? "TEST" : 100; 실제 위와 같은 코드에서는 아래와 같이 판단한다. Narrowing : 값이 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는것 let animal: number | string; animal = 'tiger'; number 와 string 으로 선언했지만 값 할당을 통해서 string 타입으로 확인되었기 때문에 string 관련 메소드만 사용 가능 하다. 아래와 같이 조건문을 통해서도 타입이 결정될수 있다. let physicist = Math.random() > 0.5 ? "TEST" : 100; typeof physicis.. 2023. 2. 15.
[javascript] JSX ? html 태그로 표현되어있는 문법을 createElement 로 변환해준다. const vdom = 헤더 첫번째 두번째 위에 있는 코드가 아래와 같이 변환이 된다. "use strict"; const vdom = /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("h1", null, "\uD5E4\uB354"), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", { style: "color:red" }, "\uCCAB\uBC88\uC9F8"), /*#__PURE__*/React.createElement("li", { s.. 2023. 1. 13.
[javascript] webpack.config.js 설정 개요 node.js 문법을 써야 한다. entry 에 있는 명령어를 읽어서 변환과정을 거쳐서 output 으로 전달함. entry -> module -> plugin -> output 으로 전달됨 const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); module.exports = { mode: "development", entry: "./src/app.js", output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", }, devServer: { compress: true, port: 9999, }, module: { rules: [.. 2023. 1. 13.
[javascript] 배열 연산의 형태 여러가지 배열 연산 형태 함수 형태나 쓰임이 많다보니 코드를 봤을때 대체 무슨 의미인지 파악이 어려워서 공부하다가 형태를 기억하면 좋을것 같아서 남겨놔봤다. type Book = { title: string; copyright?: string; author?: string; }; const books: string[] = [ "헨리 6세", "리처드 3세", "실수 연발", "말괄량이 길들이기", "헨리 8세", ]; // foreach 문 books.forEach((book: string, idx: number, books: string[]) => { console.log(book, idx); }) // map 사용1 const bookObject: Book[] = books.map((book:stri.. 2022. 12. 23.
[Javascript] 함수 형태 매일 봐도 까먹는 자바스크립트 함수형태들... function fn(x){ return x + 100; } const result = fn(10); # 이름없는 함수 const fn2 = function (){ return 100; }; fn2(); # 즉시 실행 함수 (function(){ console.log('test') })(); # Arrow 함수 const fn3 = () => { return 100; } const fn4 = () => 100; # Generator 함수 # 최초 호출하면 함수가 실행되지 않고 실행 준비상태로 만듬. # 그리고 객체를 반환하며 이 객체에는 함수를 실행할 도구가 담겨져 있다. # 도구를 이용해서 함수를 실행하고 멈추고 할수 있음. function* fn5(){ .. 2022. 12. 20.
[React] Warning: Each child in a list should have a unique "key" prop. React 에서 Key 가 필요한 이유 Map 사용시 고유한 Key 가 필요하다. React 는 상태를 메모리에 저장하고 있다가 변경된 부분만 렌더링 한다. Key 값이 없으면 모든 데이터를 비교해야 하지만 Key 가 있으면 Key만 비교하면 된다. {props.users.map((user) => ( {user.username} ({user.age} years old) ))} Map 에서 index 를 Key로 하면 안되는 이유 0번의 index 가 삭제되면 React 가 변경을 감지하여 리렌더링 되고 0번 부터 다시 매핑한다. 1번 인덱스가 0번으로 매핑이 된다. 결론적으로 인덱스가 추가되거나 삭제되면 값이 바뀌기 때문에 index 를 key 로 사용하는것은 안좋다. 2022. 8. 12.
[React] React.useState() 값과 함수를 반환한다. 함수는 값을 변화시킨후 컴포넌트를 리렌더링한다 여러개의 state 를 정의할 수도 있고 object로 관리할수도 있다. const [enteredTitle, setEnteredTitle] = useState(''); const [enteredAmount, setEnteredAmount] = useState(0); const [enteredDate, setEnteredDate] = useState(); const [userInput, setUserInput] = useState({ enteredTitle: '', enteredAmount: 0, enteredDate: '' }) 주의 할 점은 update 시 object에 있는 일부 키만 업데이트 한다면 다른 키들이 사라진다. 아래와.. 2022. 8. 12.
[React] edX - Introduction to ReactJS Module2 내용정리 edX사이트에서 Introduction to ReactJS 강의를 들으면서 정리한 내용입니다. 2018/04/18 - [Development/React] - edX - Introduction to ReactJS Module1 내용정리 Class Components - Class Component Class Component 는 Functional Component 와 다르게 React Component 가 라이프사이클 메소드(Life Cycle method) 와 상태(state) 를 가질수 있도록 해준다. Class Component는 this.state, this.props 를 가지고 있다. 1 2 3 4 5 class Welcome extends React.Component{ render(){ ret.. 2018. 5. 30.
edX - Introduction to ReactJS Module1 내용정리 edX사이트에서 Introduction to ReactJS 강의를 들으면서 내용을 정리해봤다. What is ReactJS?ReactJS 는 상태에 따라서 View 레이어를 만들어 주는 라이브러리이다.React Compnents는 Virtual DOM 을 생성한다. ReactCompnent의 상태가 변경되면 새로운 Virtual DOM을 생성하고 차이점을 분석한다. 그리고 효과적인 방법으로 HTML DOM 에 반영한다. Rendering Elements- React ElementsReact Elements 는 DOM 노드에 표현되는 Object 이다. JSX를 사용해서 syntax를 작성한다. React Elements와 React Components는 다르다. React Elements를 DOM 에 표.. 2018. 4. 18.
[npm] 왠지 자주 쓸것 같은 npm 명령어 npm 업데이트npm install -g npm npm 으로 설치한 글로벌 패키지 목록npm list -g --depth=0 npm 으로 설치한 글로벌 패키지 업데이트npm update -g npm 으로 설치한 글로벌 패키지 삭제npm uninstall -g [패키지명] npm 최신 버전으로 업데이트npm install -g npm 추후에.. 또 필요한게 있으면 추가 해야겠다... 2018. 4. 17.
npm install --save --save-dev 맨날 붙여넣기만 하다가 오늘은 갑자기 의문이 들었다.npm install --save 하고 --save-dev가 대체 뭔 차이지? 잘 안쓰고 맨날 찾아서 붙여넣기만 하니 알리가 있나.. 그래서 찾아봤다. 구글 검색을 해보니 아래와 같은 글이 있었다. https://www.linkedin.com/pulse/npm-dependencies-vs-devdependencies-daniel-tonon 내가 쓴 내용은 위에 링크의 글을 일부 번역한 글이다. npm install module --save 특정 A 모듈을 Install 할 때 --save 옵션을 넣으면 package.json 에 dependencies 목록에 포함된다. Dependencies 목록에 있다는 것은 현재 npm 모듈이 A 모듈 없이는 사용할.. 2017. 5. 30.
map() 메소드 사용 React 에서 사용하는 map() 메소드는 파라미터를 전달하여 새로운 배열을 생성한다. 최근에 본 자바의 Stream 에서 map 의 기능하고 비슷해보인다. 아니 아마도 java가 functional 프로그래밍을 지원하려고 하면서 비슷하게 구현해놓은것 같다. 아래와 같은 contractData 라는 state를 저장해 놓는다. 123456789101112 constructor(props){ super(props); this.state={ contactData:[ {name:"Abet", phone:"010-0000-0001"}, {name:"Betty", phone:"010-0000-0002"}, {name:"Charlie", phone:"010-0000-0003"}, {name:"David", pho.. 2017. 1. 16.
728x90
반응형

티스토리툴바