본문 바로가기

Front-end

 (97)
리덕스는 무엇이고, 왜 사용하는가? 🔧 리덕스 리덕스란, 자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구입니다. 복잡한 상태 관리가 이루어지는 SPA(Single Page Application)에서 특히 유용하게 사용됩니다. 물론, 리덕스는 리액트 뿐만 아니라 jQuery, Angular 등을 사용하는 애플리케이션에서도 사용할 수 있지만, 이번 글은 리액트와 함께 사용하는 리덕스에 대해서 공부해보고자 합니다. 🤔 들어가기 앞서, 리액트 상태 관리에 대한 간략한 설명 리액트를 사용하면서, 상태 관리를 하는 것은 매우 중요한 요소 중 하나입니다. 만약, 부모 컴포넌트(stateful한 컴포넌트)에서 상태를 전달받는 자식 컴포넌트들이 있는 아래 모습과 같은 상황이 있다고 가정해 봅시다. 리액트의 데이터 흐름은 단방향..
React JS Crash Course - Get icons (5) - react 아이콘 받기 : npm i react-icons - package.json에서 설치된걸 확인할 수 있다 - import하여 사용한다
React JS Crash Course - PropTypes (4) - App.js에 title을 component에 사용할 수 있도록 연결 PropTypes 자바스크립트의 유연한 특성 때문에 작성이 편한 반면, 파일이 많아지면 생산성이 떨어진다는 점 때문에 타입스크립트를 많이 사용하는데, 반드시 자바스크립트를 이용해 앱을 개발해야 하는 상황에서는 이러한 문제점을 피하기 위해 PropTypes를 활용하는 것을 권장한다. PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다. - Styling할때 index.css파일을 사용한 - Js파일 안에서 Styling하는법 Github Code: https://github.com/b..
React JS Crash Course - App component & JSX (3) - 요즘엔 hooks로 functions를 많이 이용한다 -기본 App.js파일 - 해당 부분을 클릭하여 react(Javascript로 변경해준다) - 필요없는 기본파일 삭제하기 - div에서 밖에서 작성하면 컴파일 오류가 난다 - 기본파일들이 id=root에 감싸져 있다. - 만약 className을 주고싶지 않다면 이렇게 사용하면 된다 - 변수(variable) - components 폴더에 파일을 만든다 - Header.js처럼 첫문자는 대분자로 써서 사용한다. - ES7 React/Redux/GraphQL/React-Native snippets 설치하기 - 단축키를 사용하여 편하게 Component를 사용할 수 있다 ( rcc, rce 등등) - Arrow function도 쉽게 사용할 수 있다..
React JS Crash Course - Create a React app (2) ▶ 리액트 앱 설치하기 ( node.js 설치되어 있어야함 ) ▶npx create-react-app my-app ▶ cmd에서 폴더 들어가서 VScode 열기 ▶ 리액트 생성 확인 ▶ 리액트 실행하기 npm start ▶ http://localhost:3000/ 접속 ▶화면을 표시하는 index.html
React JS Crash Course - Intro & Slides (1)
자바스크립트 최신 문법 (ES6, ES11) ES-6 /////////////////////////////////////////// // Shorthand property names /////////////////////////////////////////// // key와 value가 같으면 생략할 수 있다 { const ellie1 ={ name: 'Ellie', age: 18, } const name = 'Ellie'; const age = '18'; // Bad const ellie2 = { name: name, age: age } // Good const ellie3 = { name, age, } } /////////////////////////////////////////// // Destricturing Assignment //////..
자바스크립트 Tutorial By Ellie (11) 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs // async & await // clear style of using promise :) // 1. async async function fetchUser() { // do network request in 10 secs.... return 'ellie'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await // await은 async가 붙은 함수 안에서만 사용한다. function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } asy..

티스토리툴바