ALL

[Day 55] 2022-0907: TodoList gh-pages 배포

🐈오늘 공부한 것 ✔️TodoList 리덕스 툴킷 리팩토링 및 배포 https://hyejj19.github.io/react-todo/ 거의 한달간 useState를 사용했다가, styled-components를 연습해봤다가 리덕스 툴킷까지 적용하는 연습을 했던 투두리스트 버전 1을 깃헙 페이지로 배포했다. 최적화까지 해보려고 했는데 일단 다른 것도 만들어 본 뒤 다시 보면 새로울 것 같아 여기서 마무리... 상태를 많이 사용하지도 않고 컴포넌트도 몇 개 없다보니 새로 배운 내용으로 고치는 것은 별로 오래걸리지 않았는데, 좀 힘들었던 부분이 createSlice 를 만들어서 state를 셋팅해주는 부분... 처음 알게 되었는데 immer.js 라이브러리가 사용되면 state가 Proxy 객체로 보이기 때..

[Day 54] 2022-0906 : 웹 접근성

🐈오늘 공부한 것 ✔️웹 접근성 웹 접근성이란 말 그대로 '모든' 사용자가 환경에 구애받지 않고 동등한 수준의 정보와 기능을 접근할 수 있도록 하는 것이다. 대표적인 예시로는 대체 텍스트를 넣거나 콘텐츠를 명확하게 구분할 수 있는 시각적인 효과와 정보를 제공하는 것이 있다. 웹 접근성 향상을 위해서 WAI-ARIA 와 같은 방법을 사용할 수 있는데, HTML 시맨틱 태그로 의미 전달이 충분하다면 굳이 사용할 필요가 없으나, 그렇지 못한 경우에는 사용할 수 있다. WAI-ARIA 는 HTML 태그 안에 role, state, property 라는 속성으로 분류하여 적용할 수 있다. role은 현재 html 태그와 기능이 서로 대응되지 않을 때 요소의 역할에 대해 추가적인 정보를 제공할 수 있고, state..

[GIT] git clone 시 port22: Connection timed out 에러 해결

터미널에서 평소와 같이 git clone 명령어를 사용하고 있었는데, 한참이 걸리더니 Permition Denied 에러가 발생했다. ssh키가 문제인가 하여 전체 키를 삭제하고 재등록을 한 뒤, 아래 코드로 ssh 접속을 확인하였다. ssh -T git@github.com 여기서 port22: Connection timed out 에러가 발생해서 구글링을 하니 ~/ .ssh/config 파일을 수정하여 포트 설정을 변경해주어야 했다. 카페 와이파이에서 비슷한 에러가 많이 발생했다는 것을 보니, 지난주 금요일 와이파이를 새로 설치하면서 뭔가 바뀌었기 때문에 이런 에러가 발생한 것 같다. 1. .ssh/config 파일 편집 아래 코드를 입력하면 .ssh 파일 아래 config 파일을 생성하거나, 수정할 ..

[Day 53] 2022-0905 : react-redux, 웹 표준화, SEO, 알고리즘

🐈오늘 공부한 것 ✔️react-redux 복습 https://friedegg556.tistory.com/218 주말에 복습한 내용인데 오늘 아침에 정리를 마무리했다. 과제까지 풀면서 했던 내용인데도 어이없는 곳에서 실수한 부분이 꽤 있어서, 그 부분까지 같이 정리했다. 이후에 리덕스 툴킷도 같이 공부했는데 그건 추가로 더 공부한 뒤에 정리해보겠음. ✔️웹 표준화와 SEO 이번 유닛의 주제는 웹 표준화, SEO(Search Engine Optimization) 그리고 웹 접근성이다. 예전에 HTML을 처음 접했을 때 배웠던 내용들을 복습하는 느낌이었다. 특히 meta 태그의 두 가지 종류, name과 property에 대해서 새롭게 알게 되었다. 먼제 인터넷과 웹이 있을 때, 인터넷은 전 세계적으로 연결..

[Redux] React-Redux 라이브러리 : Counter 예제만들기

오늘은 리액트와 리덕스를 함께 사용할 때 권장되는 공식 라이브러리인 react-redux 라이브러리를 알아보고, 이를 사용해 간단한 카운터 예제를 만들도록 하겠다. Redux 에 대한 내용은 아래 포스팅을 통해 정리해두었다. [Redux] 상태관리 라이브러리 : Redux 원리 살펴보기 🤔리덕스란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리로, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. friedegg556.tistory.com 🤔react-redux 라이브러리란 무엇인가? 리덕스는 독립적인 라이브러리로 여러 UI 라이브러리 혹은 프레임워크와 함께 사용할 수 있는데, 예시로 Vue, Angular, Ember, React 그리..

[WIL] 2022 - 08 W4

💛한 주간 공부한 것 ✔️부트캠프 리액트 커스텀 컴포넌트 만들기 리덕스 - 상태관리와 FLUX 패턴 ✔️알고리즘 버블정렬 알고리즘과 최적화 (코플릿) 부분집합 알고리즘 (코플릿) 완전탐색 알고리즘 구현문제 (스터디) ✔️개인공부 TodoList : CSS IN JS 적용, 삭제, CSS 효과 추가, 미디어쿼리 적용 깃 브랜치, PR 등 협업플로우 연습 + 커밋 메시지 규칙 쏙쏙 들어오는 함수형 코딩 ~ chapter 1 💛좋았던 점 이번주는 코드스테이츠에서 진행했던 과제 리뷰에 초점을 맞추어서 공부했다. 컴포넌트를 만들고 상태를 관리하는 일이 실무에서도 중요할 것 같았고 또 복습하고 정리하지 않으면 잊어버릴 것 같은 부분이 많았음. 컴포넌트를 만들고 상태를 관리하는 핵심 내용을 실제로 적용해보는 연습이 ..

[Day 52] 2022-0903 : Redux, git push --mirror, 완전탐색 알고리즘

🐈오늘 공부한 것 ✔️Redux 정리 https://friedegg556.tistory.com/215 리덕스 공식문서의 fundamentals 챕터에 있는 바닐라 자바스크립트에 적용된 리덕스 코드를 분석하며 정리해보았다. 자바스크립트에서 동작하는 방법을 보니 리덕스의 원리(?) 에 대해서 더 이해하기가 쉬웠고, 왜 react-redux 라이브러리가 리액트에서 이를 쉽게 사용할 수 있게 도와주는지 더 잘 알게 되었다. 바닐라 자바스크립트에서는 데이터의 변경을 자동으로 감지하지 않기 때문에 subscribe 같은 별도 함수에 콜백함수를 전달해야하고, 또 DOM 이벤트를 감지하도록 이벤트 리스너를 설정하는 등 조금 복잡한 과정이 있었다. 리액트에서는 상태가 업데이트 되었을 때 화면을 변경할 수 있고 또 컴포넌..

[Redux] 상태관리 라이브러리 : Redux 원리 살펴보기

🤔리덕스란 무엇인가? 자바스크립트에서 상태관리를 할 수 있는 라이브러리로, 변경되는 상태 데이터를 전역 저장소에 보관하여 관리함으로써 상태관리의 복잡성을 해소할 수 있는 도구이다. 특히 리액트 프로젝트에서 많이 사용되지만, 리액트와는 독립적인 라이브러리로 바닐라 자바스크립트에서도 사용할 수 있다. 리액트에서 컴포넌트 단위로 코드를 작성하고, 컴포넌트 안에서 상태가 존재한다면 여러 컴포넌트에서 해당 상태에 접근하기 위해 필연적으로 props drilling 이 일어날 수밖에 없다. 이는 코드의 복잡성을 증가시키고 그렇기 때문에 유지보수가 어렵고 앱의 동작을 예측하기 힘들어진다. 리덕스에서는 상태와 컴포넌트 구조를 분리시킴으로써 상태가 업데이트되는 흐름을 추적하기 쉽게 하고, 결과적으로 컴포넌트를 구성하는 ..

[Day 51] 2022-0901 : 리액트 상태관리, Redux

🐈오늘 공부한 것 ✔️리액트의 상태관리 어제의 props drilling 체험(?) 과제에 이어, 그 과제를 Redux 를 사용해 리팩토링하는 과제를 진행했다. 먼저 상태 관리란, 컴포넌트와 상태를 분리하여 관리하는 개념이다. 상태를 임의의 두 가지 기준으로 나눈다면 로컬 상태(컴포넌트 안에 존재하는 상태) 와 글로벌 상태(전역으로 관리되는 상태) 가 있을 수 있다. 기존의 방식에서는 로컬에서 useState로 상태를 생성하여 컴포넌트에 props로 내려주는 방식으로 상태가 관리되었다면, 리덕스나 리액트 context 같은 상태관리 도구에서는 전역으로 상태를 관리할 수 있는 저장소를 제공하여 필요한 컴포넌트에 바로바로 전달해 줄 수 있다. 전자와 같은 방식의 경우 하위로 상태를 내려주기 위해서, 그 상태..

[Day 50] 2022-0831 : Props drilling 체험(?), 미디어쿼리, 알고리즘

🐈오늘 공부한 것 ✔️Props drilling 과제 오늘은 리덕스를 공부하기 전에 hooks 로 상태를 관리하며 기능을 구현하는 과제를 했다. 장바구니 과제였는데, 처음에 컴포넌트 구조를 파악하고 state를 어떻게 props 로 내려줄지 생각하는 부분이 살짝 어려웠다. 알아보기 힘들긴 하지만... 간단하게 이런 식으로 도식화(?) 를 해봤는데 다시 리뷰를 해보자면... 먼저 App.js 안에 ItemsListContainer 컴포넌트와 ShoppingCart 컴포넌트가 존재한다. 이 최상단 컴포넌트 안에서 items와 cartItems 라는 상태를 관리하고 있는데, 상태와 상태 변경 함수를 각각의 컴포넌트에 props 로 내려주어 상태 끌어올리기로 변경시켜주어야 함. 요구사항은 크게 3가지가 있었는데..