분류 전체보기
[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를 크게 넘어서기 힘들다. 오히려 네트워크 요청 수가 많아져 더 느릴 수도 있다. 변경이 잦은 데이터가 아니라면..
[React] Flux Pattern
[React] Flux Pattern
2022.01.16🎯 Flux Pattern 2014년에 Facebook에서 제안한 웹 애플리케이션 아키텍처 패턴 Unidirectional(단방향) data flow를 활용해서 데이터의 업데이트와 UI 반영을 단순화한다. React의 UI 패턴인 합성 컴포넌트와 어울리도록 설계가 되었다. redux, react-redux 라이브러리의 Prior art 📝 Flux Pattern vs MVC Pattern MVC 패턴에서는, View에서 특정 데이터를 업데이트하면 연쇄적인 업데이트가 일어난다. 앱이 커지면 업데이트의 흐름을 따라가기 힘들다. 즉, 업데이트의 근원을 추적하기 힘들다. Flux는 하나의 Action이 하나의 Update만을 만들도록 한다. 특정 유저의 인터렉션이 여러 UI 컴포넌트가 사용하는 데이터에 영향을 ..
[React] 상태관리란 무엇인가?
[React] 상태관리란 무엇인가?
2022.01.16🎯 상태 관리 상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것이다. 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함한다. 📝 MPA와 SPA에서의 상태 관리 MPA에서는 서버의 데이터를 이용해 페이지를 렌더링 하므로, 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않는다. SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리한다. 그 외의 데이터는 Client만의 데이터로 유지한다. 📝 상태 관리 기술의 도입 상태가 많지 않거나, 유저와의 인터렉션이 많지 않다면 매 작업 시 서버와 동기화하더라도 충분하다. 앱이 사용하는 데이터가 점점 많아지고, 유저와의 인터렉션 시 임..
[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 컴포넌트 등은 자바스크립트에 대한 지식만으로 구현하기 힘듦. 유지보수가 용이하고 확장 가능한 코드를 작성 스타일에 관련된 코드를 ..
[styled-components] styled-components란?
[styled-components] styled-components란?
2022.01.11🎯 styled-components란? 자바스크립트 파일 안에 스타일을 정의하고, React 컴포넌트처럼 활용할 수 있다. 자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성할 수 있다. (변수 생성, 반복문, 조건문, 함수, 모듈) 별도의 CSS 파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을 때 유리하다. 스타일 코드와 컴포넌트 코드 간의 결합을 나누고 싶을 때 유리하다. tagged template literal이라는 문법을 활용할 수 있다. CSS 코드에 post-css, minification, Sass 적용할 수 있다. CSS 코드를 겹치지 않게 처리해준다. 클래스 이름 자체가 hash다. ⇒ 겹치지 않는다. 해당 컴포넌트에만 스타일 적용된다. 📝 styled-component..
[Sass] Sass 맛보기
[Sass] Sass 맛보기
2022.01.11🎯 Sass 맛보기 Syntactically Awesome Style Sheets. CSS Preprocessor. SCSS, Sass 문법을 지원한다. 모듈, 믹스인, nested style, 변수, 조건문, 반복문 등의 기능으로 CSS를 프로그래밍 언어적으로 활용하도록 확장. styled-components는 Sass를 기본적으로 지원한다. 📝 & .reset-button { &.active {} &.disabled {} &:hover {} &:not(:first-of-type) {} & + & {} & ~ & {} & > button {} } &는 자기 자신을 나타내는 placeholder다. &.active {}는 컴파일하면 reset-button.active{}로 치환된다. 기존 CSS의 sel..
[CSS] CSS Box Model - box-sizing
[CSS] CSS Box Model - box-sizing
2022.01.11🎯 CSS Box Model - box-sizing width, height는 디폴트로 content-box의 크기를 정의된다. width : 100px으로 정의 시, content의 크기만 100px이 되며, padding, border의 크기는 100px에 추가된다. content-box의 경우, width값에서는 padding, border의 길이를 포함하지 않는다. border-box : padding, border를 width, height에 포함한다. 보통 이해하기 쉬운 레이아웃을 정의하기 위해 box-sizing:border-box를 선호한다.
[React] 리액트 앱에서의 스타일링 방법
[React] 리액트 앱에서의 스타일링 방법
2022.01.11🎯 리액트 앱에서의 스타일링 방법 📝 CSS import CSS(혹은 SCSS, Sass) 파일을 import 해서 사용한다. 필요한 모든 CSS 스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리 가능하다. 🛠 Button.jsx import 'button.css' function Button({ children }) { return ( {children} ) } 🛠 button.css .button { background-color: orangered; color: white; width: 140px; height: 40px; } 🛠 App.jsx import Button from './Button' function App() { return ( Submit ) } 📕 CSS import..