새로움으로 가득한,

꾸준한 사람이 되자😎

Vue.js

Vue 란? - 사용자 인터페이스를 만들기 위한 프로그레시브 자바스크립트 프레임워크 - MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 Vue 를 사용하는 이유? 웹앱을 만들기 위해 사용되는 프레임워크에는 React / Angular / Vue가 있고, 그중 가장 많이 사용되는건 React 이다. 그런데 React 라는 선택지를 나두고 Vue를 선택하는 이유로는 어떤것이 있을까? 1. 같은 기능을 구현할 경우 비교적 쉽다. : 리액트, 앵귤러, 뷰 간의 기능적 차이는 거의 없으며, 결과물 또한 동일하게 만들 수 있다. 하지만 그 중 뷰가 가장 문법적으로 간결하고 쉽다. 2. Right-way (답정너) : 리액트는 코드의 자유도가 높고, 개발자가 원하는 방식으로 ..

2022.06.01

Git

😎 목표 깃허브 대문(프로필)을 꾸며보자 👉 깃허브 메인 프로필 만들기 1. New Repository 만들기 [ 체크 리스트 ] ✔ Repository name은 github 계정과 똑같은 이름으로 설정! ✔ Public 확인 ✔ Add a README file 체크 2. README.md 생성 Repository를 생성하면 생성된 페이지로 이동하게 되는데 내 깃헙 메인에도 자동으로 생성된것을 확인 할 수 있다. 수정은 연필 아이콘을 클릭해 내용을 수정하면 된다. 3. README.md 수정 README는 마크다운 언어(+ Github Flavored Markdown)를 이용하여 작성해준다. - html에서 사용하는 등의 태그들을 사용 가능하다. - width, align 속성들을 이용해서 이미지나 위..

2022.03.13

React.js

🤷‍♀️ 프롭스 드릴링 단방향 흐름인 리액트를 사용하는데 발생한 문제점. 코드작성과 수정에 상당한 악영향을 끼침 🤷‍♀️ 어떻게 처리할 것인가? 모든데이터는 자식인 프로바이터(공급자 컨포넌트)에게 모든 데이터를 준다. 프로바이터는 자신의 자손에게 직통으로 데이터 줄수있다(프롭스 드릴링 사라짐) => 깔끔, 가독성 좋아짐 모든 데이터에 접근할 수 있는 컴포넌트들의 영역을 Context(문맥=글의방향)라고 표현 한다. 🤷‍♀️ 이용방법 Context 생성 const MyContext = React.createContext(defaultValue); Context Provider를 통한 데이터 공급 {/*이 Context안에 위치할 자식 컴포넌트들*/} Provider 컴포넌트는 value 프롭스를 받아 안에..

2022.03.05

React.js

🤷‍♀️ useReducer - 상태관리를 돕는 리액트 훅스 - 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 - useState 대체 가능 => 상태변화 로직들을 컴포넌트에서 분리하여 컴포넌트를 가볍게 작성할수있다. 🤷‍♀️ 사용방법 const [state, dispatch] = useReducer(reducer, 1); 비구조화 할당을 통해서 사용하며, 0번째 인덱스는 state, 1번째 인덱스는 상태를 변화시키는 액션을 발생시키는 함수를 넣어주면 된다. 또한, useReducer함수 호출시 dispatch가 상태변화를 일으킬때 일어난 상태변화를 처리해주는 reducer 함수를 꼭 전달해줘야 하며, 두번째 인자로 전달하는 값은 state의 초기값이 된다. const red..

2022.03.04

React.js

목표 - 프로젝트 전체 최적화 작업 나머지 최적화 하기 1개의 게시물을 삭제 했는데 나머지 아이템까지 리렌더링 일어남 => 게시물이 많거나 이미지가 포함될 경우에는 큰 메모리가 낭비 되기 때문에 심각한 문제가 발생! 1. 최적화의 시작은 React.memo로 컴포넌트를 묶어주는것! export default React.memo(DiaryItem); 2. useEffect를 활용해서 어떤 아이템이 리렌더링 되고 있는지 확인 (리프레시 전체 렌더 확인) useEffect(() => { console.log(`${id}번째 아이템 렌더!`); }); 0번 부터 19번의 아이템이 찍히는걸 확인할 수 있다. 3. App 컴포넌트의 onRemove 와 onEdit 최적화 const onRemove = useCall..

2022.03.01

React.js

목표 - 현재 진행한 코드 중 낭비되고 있는 부분 찾아 최적화 하기 찾는 방법 어떤 컴포넌트가 낭비되고 있는지 크롬 도구로 찾을 수 있다. 이미지와 같이 일기 삭제를 했는데 에디터 전체가 렌더 된것으로 확인된다. 👀 코드를 수정해보자 1. onCreate함수에 React.memo로 묶기 // 아래처럼 직접 묶는건 함수길이가 길어질 경우 햇갈릴 수 있음. const DiaryEditor = React.memo(({onCreate}) => { ~~ // 그럴경우 하단 export default에 묶어주는 방식으로 하기! export default React.memo(DiaryEditor); React.memo로 묶인 DiaryEditor를 내보내는 것 이기 때문에 기존방식과 결과가 동일하다. 2. useEf..

2022.02.24

React.js

🤷‍♀️ 컴포넌트 조건 업데이트가 필요한 이유? 지금까지는 부모 컴포넌트가 가지고 있는 데이터 A의 상태가 업데이트 되면 A를 받는 자식 뿐만 아니라 리렌더가 필요없는 자식까지 렌더링이 되었는데 이는 연산의 낭비 이다. 이러한 상황을 해결하기 위해서 React.memo를 활용해 함수형 컴포넌트에게 업데이트 조건을 걸어주면 업데이트 조건에 일치하는 컴포넌트만 리렌더링 하여 성능 최적화를 할 수 있다. 🤷‍♀️ React.memo 란? React.memo는 고차 컴포넌트 이며, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 사용방법은 React.memo로 리렌더링을 원하지 않는 컴포넌트를 감싸주면 되는데, props가 바뀌지 않으면 리렌더링 하지 않는 강화된 컴포넌트를 돌려준다. 쉽게 ..

2022.02.24

React.js

목표 - 현재 일기데이터를 분석하는 함수 제작 - 해당 함수의 일기 데이터의 길이가 변화하지 않을 때는 값을 다시 계산하지 않도록 하기 - Memoization 이해하기 Memoization 이란? 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법 => 연산 과정 최적화 🤔 어떻게 적용할 것인가? data state가 가지고 있는 1~5 까지의 감정 점수중에 기분이 좋은 일기의 카운팅, 기분이 나쁜 일기의 카운팅, 그에 따른 비율을 알아 내는 함수를 만들자! function App() { const [data, setData] = useState([]); // 👉 A const dateId = useRef(0); c..

2022.02.23

Git

GitHub Pages란? GitHub Pages는 GitHub가 제공하는 기능중에 하나로, 무료로 정적인 파일들로 웹 페이지를 만들 수 있도록 해준다. React 프로젝트 GitHub Pages에 배포하는 방법 1. 프로젝트에 gh-pages 패키지를 설치 npm install gh-pages --save-dev 2. package.json 파일열어서 homepage 내용 삽입 "homepage": "https://{사용지명}.github.io/{저장소 이름}" 3. script 부분에 predeploy와 deploy 추가 "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } 4. 저장 및 변경된 파일 git push 5...

2022.02.23