엘리스 코딩
[TIL] 엘리스 SW 엔지니어 트랙 Day 059
[TIL] 엘리스 SW 엔지니어 트랙 Day 059
2022.01.17📖 오늘 배운 내용 - 2022.01.13 react-redux 테스트 📝 리덕스 없이 리액트 구현 :: props drilling import {useState} from 'react'; import './App.css'; function App() { const [value, setValue] = useState(0); return ( Root {value} { setValue(value+1) }}> ); } function Left1(props){ return Left1 : {props.number} } function Left2(props){ return Left2 : {props.number} } function Left3(props){ return Left3 : {props.number} } ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 058
[TIL] 엘리스 SW 엔지니어 트랙 Day 058
2022.01.16📖 오늘 배운 내용 - 2022.01.12 상태 관리 Prop Drilling Flux Pattern useState, useRef, useContext, useReducer 📝 상태 관리 [React] 상태관리란 무엇인가? 🎯 상태 관리 상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것이다. 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전 lakelouise.tistory.com 📝 상태 관리 기술이 해결하는 문제들 📕 데이터 캐싱과 재활용 SPA에서 페이지 로딩 시마다 모든 데이터를 로딩한다면, 사용자 경험 측면에서 MPA를 크게 넘어서기 힘들다. 오히려 네트워크 요청 수가 많아져 더 느릴 수도 있다. 변경이 잦은 데이터가 아니라면..
[TIL] 엘리스 SW 엔지니어 트랙 Day 057
[TIL] 엘리스 SW 엔지니어 트랙 Day 057
2022.01.16📖 오늘 배운 내용 - 2022.01.11 Redux 📝 Redux 독립적인 라이브러리 리액트와 독립적이다. 리덕스에서는 단 하나의 객체에 애플리케이션이 사용하는 모든 데이터를 욱여넣는다. 함수를 이용해 상태를 바꾸고 사용한다. !!! 예측 가능한!!! 📝 리덕스 용어 정리 store : state가 저장되는 곳 직접 접근하면 안 된다. dispatch: 상태가 어떻게 바뀔 건가를 정의하는 함수 === 상태 변경 getState: state 전체를 가져온다 subscribe: 상태가 변경되었음을 render에게 알려주는 함수 reducer : 과거의 상태와 액션을 받아서 새로운 상태를 수정하는 담당자 정리 action-dispatch-reducer-state변경-subscribe가 등록되어 있는 rend..
[TIL] 엘리스 SW 엔지니어 트랙 Day 056
[TIL] 엘리스 SW 엔지니어 트랙 Day 056
2022.01.13📖 오늘 배운 내용 - 2022.01.08 자바스크립트 비동기 Promise CORS(Cross-Origin Resource Sharing) 📝 동기 vs 비동기 📕 동기(synchronous) console.log("This is synchronous...") for (let i = 0; i < 1000000000; ++i) { console.log("I am blocking the main thread...") } console.log("This is synchronous...DONE!") 동기(synchronous) 코드는, 해당 코드 블록을 실행할 때 thread의 제어권을 넘기지 않고 순서대로 실행하는 것을 의미한다. 동기 코드는 바로 call stack에 넣어진다. 동기 코드는 main thr..
[TIL] 엘리스 SW 엔지니어 트랙 Day 055
[TIL] 엘리스 SW 엔지니어 트랙 Day 055
2022.01.13📖 오늘 배운 내용 - 2022.01.07 SPA Private Route react-router 📝 SPA와 라우팅 📕 Single Page Application SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식이다. 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낄 수 있다. 📕 Multi Page Application MPA(Multi Page Application)은 서버에 미리 여러 페이지를 두고 유저가 네비게이션 시 요청에 적합한 페이지를 전달한다. 미리 서버에서 전체 페이지를 빌드해 브라우저로 전송된다. 서버에 라우팅을 처리하는 기능이 있고, 서버에서 여러 페이지를 관리한다. 페이지 요청마다 모든 리소스를 다시 받아오므로, 페이지 간..
[TIL] 엘리스 SW 엔지니어 트랙 Day 054
[TIL] 엘리스 SW 엔지니어 트랙 Day 054
2022.01.13📖 오늘 배운 내용 - 2022.01.06 react-router-dom useParams, useNavigate CORS dangerouslySetInnerHTML 📝 react-router-dom (v6) 🛠 설치 npm install react-router-dom@6 📕 사용 :: import { BrowserRouter } from "react-router-dom"; ... ... ReactDOM.render( , document.getElementById("root") ); react-router를 사용하기 위해서는 최상위 컴포넌트에서 리액트 라우터를 사용하겠다고 선언해줘야 된다. ⇒ 📕 Link :: URL 바꾸기 import { Link } from 'react-router-dom'; .. ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 053
[TIL] 엘리스 SW 엔지니어 트랙 Day 053
2022.01.11📖 오늘 배운 내용 - 2022.01.05 CSS import CSS module CSS-in-js Sass Flexbox styled-components 📝 좋은 앱을 만들려면? 번들 사이즈에 대한 고려 CSS 코드가 차지하는 사이즈는 무척 중요한 요소. 앱 성능에 대한 고려 animation, transition 등 유저와의 상호작용에서 스타일 코드의 성능이 중요 요소. 사용자에게 유리한 UI/UX를 고려 스타일링에 대한 지식으로, 고급 테크닉을 적용하여 더 나은 UI/UX를 반영 자바스크립트를 이용한 다양한 스타일 기법 UI 토글링, 애니메이션, 다크 모드, 복잡한 UI 컴포넌트 등은 자바스크립트에 대한 지식만으로 구현하기 힘듦. 유지보수가 용이하고 확장 가능한 코드를 작성 스타일에 관련된 코드를 ..
[TIL] 엘리스 SW 엔지니어 트랙 Day 052
[TIL] 엘리스 SW 엔지니어 트랙 Day 052
2022.01.10📖 오늘 배운 내용 - 2022.01.04 dangerouslySetInnerHTML 카카오 api 사용 📝 이론 시간 코드 import './App.css'; import {useState} from 'react'; function Header(props){ console.log('Header'); function onClickHandler(evt){ evt.preventDefault(); props.onChangeMode('WELCOME'); } return {props.title} } function Nav(props){ let lis = [] function clickHandler(evt){ evt.preventDefault(); props.onChangeMode('READ', Number(evt..
[TIL] 엘리스 SW 엔지니어 트랙 Day 051
[TIL] 엘리스 SW 엔지니어 트랙 Day 051
2022.01.03📖 오늘 배운 내용 - 2022.01.01 Hooks Effect Hook useMemo useCallback useRef useReducer 📝 Hooks 컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. const App = () => { const [username, setUsername] = useState('') return ( {username}님 환영합니다. ) } Hook은 React 함수(컴포넌트, Hook) 내에서만 사용이 가능하다. Hook의 이름은 반드시 use로 시작해야 된다. 최상위 Level에서만 Hook을 호출할 수 있다. (if문, for문 안 쪽 또는 콜백 함수 내에서 호출 X) 즉, 첫 번째 중괄호 안에서만 사용..
[TIL] 엘리스 SW 엔지니어 트랙 Day 050
[TIL] 엘리스 SW 엔지니어 트랙 Day 050
2022.01.03📖 오늘 배운 내용 - 2021.12.31 Props State 📝 Props [React] 리액트 Props란? 🎯 리액트 Props란? 📝 props란? // 컴포넌트 생성 const Welcome = (props) => { retutn Hello, {props.name} ; } // 컴포넌트 사용 const App = () => { return ; } 기본적으로 Component에 원하는 값을 넘겨줄.. lakelouise.tistory.com 📝 State [React] 리액트 State란? 🎯 리액트 State란? import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return (..
[TIL] 엘리스 SW 엔지니어 트랙 Day 049
[TIL] 엘리스 SW 엔지니어 트랙 Day 049
2021.12.31📖 오늘 배운 내용 - 2021.12.30 Hooks props와 state useStates useEffect 📝 Hooks 컴포넌트의 함수가 많아질 때 클래스 구성 요소로 리팩토링 할 필요가 없다. UI에서 로직을 더 쉽게 분리하여 두 가지 모두 재사용 가능하다. 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook 사용 Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화가 가능하다. 📝 props와 state props : 상위 컴포넌트에서 하위 컴포넌트로 데이터를 넘길 때 사용. 상위 컴포넌트에서 전달받는 값 state : 그 컴포넌트 자체가 갖는 속성 → 아래로 넘겨주진 않음(넘겨주게 되면 그건 props라고 볼 수 있다.) 컴포넌트 내부에서 선언하는 해당 컴포넌트의 상..
[TIL] 엘리스 SW 엔지니어 트랙 Day 048
[TIL] 엘리스 SW 엔지니어 트랙 Day 048
2021.12.30📖 오늘 배운 내용 - 2021.12.29 리액트란? SPA JS 문법 복습 JSX Component Props 📝 SPA 페이지 변경이 필요할 때 HTML을 처음부터 불러오는 것이 아닌 변경된 부분만 바꿔준다. 전통적인 페이지는 최초에 서버로부터 html을 전달받고 페이지의 변경이 필요할 때 다시 서버에 요청하여 html을 전달받는다. ⇒ 페이지를 처음부터 다시 불러온다. SPA는 최초에 서버로부터 html을 전달받고 페이지의 변경이 필요할 때 변경이 필요한 부분을 JSON으로 전달받는다. → 페이지에서 변경된 부분만 계산하여 다시 그리게 된다. 📝 리액트란? 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 React의 컴포넌트(component)라고 하는 요소를 이용하면 복잡한 UI를 ..