기록하고 싶은 것들

오늘은 코드분할, React.lazy()와 Suspense에 대해서 공부하였다. 코드분할이란? 코드를 해석하고 실행하는 정도가 느려졌는지 파악해서, 번들을 나눈 뒤에 지금 필요한 코드만 불러오고 나중에 필요한 코드는 나중에 불러오는 아이디어 이를 통하여 대규모 프로젝트의 앱인 경우에도 페이지의 로딩 속도를 개선 가능 React.lazy()와 Suspense() React에서 코드 분할하는 방법은 dynamic import(동적 불러오기)를 사용하는 것이다. Rect.lazy() 통해 컴포넌트를 동적으로 import를 할 수 있어, 사용 시 초기 렌더링 시간을 줄 일 수 있다. 하지만 단독으로 쓰일 수는 없고, React.Suspense 컴포넌트의 하위에서만 React.lazy로 감싼 컴포넌트를 사용할 수..

오늘은 Custom Hooks에 대해서 공부했다. Custom Hooks란? 개발자가 스스로 커스텀한 훅을 의미하며 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용 가능하게 만드는 것을 의미한다. 즉, 반복되는 로직을 하나로 묶어 재사용하기 위함이다 여러 url을 fetch 하는 경우 동일한 로직으로 작동되며 상태 변경을 반복되는 경우가 있다. custom hooks를 이용하면 반복되는 로직을 하나의 함수로 뽑아내어 재사용이 가능해진다. custom hooks의 장점 상태관리 로직의 재활용이 가능하고 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며 함수형으로 작성하기 때문에 보다 명료하다는 장점 (e.g. useSomething) Custom Hooks 예시 적용 전 // Log..

styled-components를 사용 이유 기존 css 파일을 이용한 스타일링은 css 파일이 너무 길어져서 수정하려는 스타일의 위치를 찾기 어렵고, className이 중복되어 헷갈리는 경우가 있었다. 따라서 스타일을 바로 입힐 수 있고, props를 전달 받아서 컴포넌트를 만드는 styled-components 라이브러리를 사용해보기로 했다. 사용해본 경험이 별로 없어서 막막했던 면이 있었는데, 사용방법들을 조금씩 찾아보고 적용하다가 보니 생각보다 사용하기 편리했던 것 같다. styled-components 사용 예 components/MyButoon.js 아래는 styled-components로 새롭게 작성한 MyButton.js이다. 한 파일내에서 직관적으로 스타일을 입힐 수 있었다, 또한 기존..

Redux로 리팩토링하려는 이유 작성했던 일기장은 useContext, useReducer를 이용하여 전역적으로 상태 관리를 해주었다. useContext를 사용하면, 컨텍스트를 상태값 / 액션으로 나누어서 리렌더링 문제를 해결해야하고, 상태값, 액션을 따로 Provider로 적용해야하기 때문에 코드가 지저분해 보이기도 하였다. 또한 useReducer 의 경우 새로운 상태 값을 생성 할 때 해당 Context 내부에 포함된 컴포넌트들이 상태값의 일부에만 관심이 있더라도 강제로 re-render 되기 때문에 성능 문제가 발생 할 수 있었다. Redux 를 사용하면 저장소 상태의 특정 부분만 사용하고 해당 값이 변경 될 때만 re-render 할 수 있다. 따라서 상태관리 방식을 useContext에서 R..

오늘은 CSS 애니메이션에 대해서 배웠다. @keyframes 라는 키워드를 활용하여 애니메이션 효과를 나타내는데, 우선 css 키프레임 블록을 생성한 뒤, 애니메이션을 적용시키고 싶은 요소에 animation 속성으로 키프레임 이름을 불러와서 사용을 한다. 회전하는 키프레임 예시 @keyframes lotate { 0% { transform : rotate(0deg) } 50% { transform : rotate(180deg) } 100% { transform : rotate(360deg) } } /* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */ /*3초 동안 lotate 애니메이션이 재생*/ #logo { animation : lotate..

오늘은 반응형 웹에 대해서 공부하였다. 반응형 웹이란? 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여, 크기에 따라 레이아웃이 변하는 웹 사이트를 의미 미디어 쿼리 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는 구문 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용 가능 media 미디어 타입 (조건(너비 및 높이)) { (CSS 입력하는 부분) } --예제 @media screen (max-width: 400px) { body { color: red; } } 실습 예시 import styled from "styled-components"; im..

기존의 배포한 감정일기장이 너무 단순한 디자인이라서, 피그마로 새롭게 디자인을 만든뒤에, styled component를 이용하여 다시 배포하기로 결심했다. 처음에 피그마를 쓸 때 난해하고, 이런것까지 써야한다고? 생각이 들었는데 이제는 내가 생각한 디자인의 목업을 구현하는데 피그마만한게 없다고 생각이 들었다. 기존의 프로젝트의 구성은 유지하되 디자인만 변경할 것이라, 컴포넌트들의 디자인과 감정을 나타내는 사진들을 변경시켜주었다. 새롭게 만든 디자인으로 적용해보고, styled component 도 사용하여 적용시켜봐야겠다.

오늘은 Section4로 들어간 첫날이자 자료구조에 대해 학습한 첫 날이었다. 기초적인 자료구조인 Stack과 Queue에 대해서 배우고 실제로 구현해 보는 예제를 진행하였다. Stack 먼저 들어간 데이터는 제일 나중에 나오는 LIFO(Last In First Out) 혹은 FILO(First In Last Out)의 특징을 가짐 class Stack { constructor() { this.storage = {}; this.top = -1; // 스택의 가장 상단을 가리키는 포인터 변수를 초기화 합니다. } size() { return this.top+1; } // 스택에 데이터를 추가 할 수 있어야 합니다. push(element) { this.top += 1; this.storage[this.to..

1. 목표 상기하기 웰컴키트 증정 복지 포인트 제공 서울 내 or 판교 위치 자유로운 분위기의 it회사 상반기 내에 취직하기 목표를 상기하기 위한 질문 Q. 현재 ‘내'가 학습을 통해 이루고자 하는 것은 무엇인가? 스스로가 사용해볼 만한 프로젝트를 만들어보고 잘 정리해 놓기! 2. Keep, Problem 작성하기 Keep(만족스러운 부분) Q . 목표를 달성하기 위해 시도했던 것 중 가장 효과적이었던 노력은 무엇인지? 첫번째로, TIL을 기록하고, 오류를 기록하려했던 시도가 가장 효과적이라고 생각했습니다. 대단하고 멋지게 TIL을 적는 것은 아니지만, 하루에 공부한 것을 기록함으로써 무엇을 배웠고, 어떤 부분에서 어려움을 겪었는지를 다시 볼 수 있게되어서 도움이 되었습니다. 두번째로, 직접 프로젝트를 ..

Q . 재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해주세요. 재귀를 요약하자면 자기 자신을 호출하는 것을 의미합니다. 재귀를 활용하기 좋은 상황으로 첫번째로는 구조가 비슷한 주어진 문제가 더 작은 문제로 나뉘어 질 수 있는 경우, 두번째로는 중첩된 루프가 많거나 중첩의 정도를 미리 알 수 없는 경우가 있습니다. 추가적으로 재귀를 활용하면, 가독성이 좋아지고 변수 사용을 줄일 수 있다는 장점이 있지만 함수의 호출이 스택에 쌓이고 값을 반환 하기 전까지 메모리 공간을 많이 차지한다는 단점이 있습니다. Redux Q . 상태관리 라이브러리의 필요성에 대해서 설명해주세요. 리액트에서는 컴포넌트에서 사용되는 state가 변경 시, 컴포넌트가 리렌더링이 됩니다. 이 state의 조작이 필요한 하위 컴포넌..