TIL

[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가지가 있었는데..

[Day 49] 2022-0830 : React Custom Components - 자동완성 , 인라인 에디터

🐈오늘 공부한 것 ✔️React Custom Components Advanced 오늘도 어제에 이어 리액트 UI 컴포넌트 제작 실습을 했다. 구현한 내용은 자동완성 컴포넌트와 inline edit 컴포넌트. 특히 어려웠던 부분은 1. 자동완성에서 현재 hover 위치에서부터 키보드 이벤트 시작 2. inline edit 의 전체 플로우를 잘 이해하지 못함. edit 컴포넌트는 라이브세션 전까지 거의 이해를 못해서 반쯤 포기했다가 생각보다 쉬워서 허탈했다. 오늘도 어제와 마찬가지로 전체적인 구현 방법과 새롭게 알게된 내용 위주로 기록. 1. 자동완성 요구 조건 : 입력시 미리 지정된 자동완성 옵션을 드롭다운으로 보여주고, 클릭 혹은 키보드로 선택시 그 값을 input창에 띄워주어야 함. x 버튼 클릭시 현..

[Day 48] 2022-0829 : Custom Components, useEffect 복습, Git 협업 Flow

🐈오늘 공부한 것 ✔️React Custom Components styled-components 라이브러리를 활용해 리액트 커스텀 컴포넌트 제작 과제를 실습했다. 오늘 만든 부분은 모달창, 토글버튼, 탭 메뉴 그리고 태그였다. 전체 코드를 적기 보다는 각 컴포넌트를 어떻게 만들었는지 글로 복기해보고 새롭게 알게된 부분을 정리해보겠음. 1. 모달 요구 조건 : 버튼 클릭시 모달 창과 모달 배경이 뜨고, 모달 배경 || 모달 창 내의 X 버튼 클릭시 모달이 닫혀야 함. 모달이 뜨는 상태와 뜨지 않는 상태 추적을 위해 boolean 값을 담고 있는 state를 만들고, 버튼 클릭시 상태가 변경되도록 onClick 이벤트로 상태변경 함수를 실행시켜주었다. attr : 과제 코드에 styled.div.attr( ..

[Day 46] 2022-0826 : CDD, CSS IN JS, SASS

🐈오늘 공부한 것 ✔️CDD : Component Driven Development 컴포넌트 주도 개발, 말 그대로 html css js 관심사를 분리하지 않고 ui 컴포넌트별로 분리하여 개발한 뒤 각 컴포넌트를 조립해 페이지를 만들어나가는 개발 방식이다. CDD 를 도와주는 개발 도구에는 storybook과 styled-component 가 있는데, 각각 ui 컴포넌트를 관리하고 또 CSS 를 js 코드 안에 넣어서 컴포넌트별로 관리할 수 있게 한다. ✔️CSS의 발전과 CSS IN JS CSS 가 처음 등장한 이후로 웹페이지의 복잡성이 증가했는데, 규모가 커지고 복잡해질수록 CSS가 가진 문제점이 많이 생겨났다. 일단 CSS 코드 자체는 캡슐화도 되지 않고 스타일 중복을 막기가 쉽지 않은데 이를 해결..

[Day 45] 2022-0825 : UI / UX 분석

🐈오늘 공부한 것 ✔️UI / UX 분석하기 https://recruit.navercorp.com/main.do NAVER Careers BOARD THE NAVERSHIP recruit.navercorp.com 피그마로 클론한 사이트는 네이버 Careers 페이지이다. 심플해서 피그마 사용 방법을 익히기 좋을 것 같아서 골랐는데, 약간 아쉬운 점은 굉장히 미니멀해서 다양한 컴포넌트를 적용하는 예제는 아니라는 것. 아래는 피그마 프로토타입. Figma Created with Figma www.figma.com 1. 먼저 사용한 디자인패턴은 크게 드롭다운 메뉴와 GNB(네비게이션)바 그리고 캐러셀 - 이미지 슬라이드가 있다. 이미지 슬라이드는 일반 캐러셀처럼 자동으로 이미지를 넘기는 것은 아니고, 드래그해..

[Day 44] 2022-0824 : 피그마로 클론하기

🐈오늘 공부한 것 ✔️피그마 사용법 익히기 피그마를 이용해 실제 사이트를 클론하는 과제를 진행했다. 디자인 툴을 많이 다뤄봤기 때문에 익숙한 부분도 있었지만, 컴포넌트 생성으로 기능이 동작하도록 한다던지 이벤트를 발생시키는 부분이 많이 어려웠다. 헤맸던 기능을 정리해보려고 한다. 1. 먼저 개별 Frame 을 생성한 뒤에 이들을 Component set 으로 만들어 각 frame 에 다른 frame으로 이동할 수 있는 change to 기능을 만드려고 했다. frame 에 interaction 을 추가하고, After Delay 이벤트를 넣은 뒤에 change to 를 선택했는데, change 될 프로퍼티를 입력할 수 있는 칸이 전혀 뜨지 않았다. 원인이 뭔지 몰라서 1시간을 헤맸는데 알고보니 하위 컴포..

[Day 43] 2022-0823 : UX/UI + 브라우저 렌더링 과정(1)

🐈오늘 공부한 것 ✔️UI / UX https://friedegg556.tistory.com/205 더 좋은 웹앱을 만들기 위한 기본 개념, UI와 UX에 대해서 공부했다. 프론트엔드 분야에서 UI 란 주로 GUI 를 의미하는 것이다. UI가 좋다고 해서 무조건 좋은 UX를 제공한다고는 할 수 없지만, 나쁜 UI가 나쁜 UX를 제공할 수는 있다. 오늘은 반응형 디자인의 break point에 대해서도 알아보았는데, UI 레이아웃의 컬럼과 거터에 break point에 따라서 고정된 치수를 정해두고 반응형으로 디자인하면 훨씬 더 일관성 있으면서 매끄러운 UI를 만들 수 있는 것 같다. +) 디스코드에 디자인 시스템에 대한 참고 영상을 보게 되었는데, 상당히 인상깊었다. 일단 일관적인 디자인이라는 것도 사용..

[Day 42] 2022-0822 : 재귀함수2 (재귀 지옥...)

🐈오늘 공부한 것 ✔️재귀함수 복습 재귀함수에 대한 이해가 부족하여 풀었던 문제를 다시 복습했다. 라이브세션에서 재귀 함수에 대해 강의해주셨던 부분은 아래와 같다. 1. 문제를 동일한 방식으로 쪼갠다. => recursive case 2. 더 이상 쪼개지지 않을 때 그 상태가 재귀의 탈출 조건이 된다. => base case 3. base case 를 해결하면 쪼개졌던 문제를 한번에 해결할 수 있다. 재귀 함수를 푸는 이상적인 방법인데, base case를 간단하게 도출할 수 있거나 재귀 호출 방법을 쉽게 파악할 수 있으면 괜찮지만, 재귀를 호출하는 조건이 복잡해지면 엄청 어렵게 느껴진다. 특히 이진 트리나 그래프를 탐색할 때 식을 어떻게 짜야 재귀 호출로 문제를 풀 수 있는지.. 감이 전혀 오지 않고 ..

[Day 41] 2022-0819 : 재귀함수

🐈오늘 공부한 것 ✔️섹션 3 시작 ! 섹션 3 대단원의 막이 올랐다(박수~~👏👏) 프로젝트를 제외하고 섹션은 4까지 있는데, 벌써 절반을 넘었다고 생각하니 기분이 묘했다. 이번 섹션의 목표는 "사용자 친화적이고 안전한 웹앱 만들기" 이다. 사용자 친화적인 UX/UI 를 구성하고, 리액트 심화와 리덕스, 웹 표준과 마지막 인증, 보안까지 많은 내용을 짧은 시간안에 배워야 한다. 지난 세션에서는 리액트 얼레벌레... 서버 얼레벌레... 이런 느낌이었는데 이번 섹션에서는 보충 내용을 많이 공부해서 두 배로 배워가고싶다...! ✔️재귀 함수 재귀 함수란 자기 자신을 계속해서 호출하는 함수를 의미한다. 계속해서 호출할 때 종료조건이 없다면 스택 오버플로우가 발생할 수 있으니 반드시 종료 조건이 필요하고 또 반대..