기록하고 싶은 것들

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

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

오늘은 OAuth에 대해 배우고, 관련 실습을 진행하였다. OAuth 인증을 중개해주는 메커니즘 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화하는 프로토콜 (ex google, github, facebook 로그인) 실습 구현 단계는 아래와 같다 우선 실습전에, https://github.com/settings/developers 위의 링크에서 OAuth 앱을 등록해 주었다. 개발환경에서 진행했기 때문에, Authorization callback URL을 (http://localhost:3000)로 리디렉션하였다. 그리고 ClientId와 ClientSecret을 서버에 저장하여 사용하였다. 로그인 클라이언트 Login.js 로그인 버튼을 클릭시, GitHub로부터 사용..

오늘은 토큰에 대해서 배웠고, 토큰을 이용한 로그인, 로그아웃 실습을 진행하였다. 실습 중에서 가장 어려움을 겪었던 부분이 있었는데, 그 부분을 간단히 적어보려고 한다. 토큰 웹 보안에서의 토큰은 인증과 권한 정보를 담고 있는 암호화된 문자열 의미 이를 이용해 특정 애플리케이션에 대한 사용자의 접근 권한을 부여가 가능하다 오늘 진행한 실습의 전체적인 과정과 유사한 이미지이다. 이중에서 오늘 가장 어려움을 겪었던 부분은 F, G, H 부분이다. 이 부분에 대해서 설명을 하자면, accessToken이 만료된다면 refreshToken을 이용하여서 다시 accessToken을 얻어온 뒤, 클라이언트로 보내는 과정이다. 이 과정에서 어려웠던 점은 조건 분기를 적절하게 해야되는 것이었다. 쿠키로부터 받아온 ac..

오늘은 Cookie에 대해서 배웠고, 실습을 진행하였다. 쿠키 HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버에서 사용자의 컴퓨터에 저장하는 작은 기록 정보 파일 실습 - 로그인 로그아웃 구현 클라이언트와 서버가 쿠키를 주고 받으면서 로그인, 로그아웃을 구현을 실습하였다. 작동흐름에 따라 실습내용을 정리해보고자 한다. 로그인 1. 서버로 로그인 요청 우선 Axios를 통하여 로그인을 처리하는 post 요청을 보내준다. 클라이언트 axios.post("http://localhost:4000/login", {loginInfo, checkedKeepLogin}) 2. 서버에서 로그인 요청 처리 서버 /login.js data에 저장된 아이디, 비밀번호와 요청받은 ..

오늘은 리덕스를 이용하여 상태관리를 해보는 실습을 진행하였다. 시작하기에 앞서서, 한 곳에 모든 코드를 작성하지 않고, Redux코드를 action, reducers, store 디렉토리로 분리해주면서 코드를 작성했다. Store.js 리덕스 확장프로그램을 사용할 경우 발생하는 에러를 방지해주는 composeEnhancers를 선언해주고, createStore 메서드를 활용해 Reducer를 연결하며, composeEnhancers 로 에러를 방지해주며 Store를 생성해준다. inititalReducer.js Dispatch에게서 전달받은 Action 객체의 type값에 따라서 상태를 변경시키는 함수를 작성한다. 카트에 item을 추가하는 ADD_TO_CART, 카트에서 item을 제거하는 REMOVE..

오늘은 Redux에 대하여 공부하였다. Redux란? React의 전역 상태를 관리해주기 위한 툴 중의 하나로, 전역 저장소로 부터 직접 state를 꺼내 사용하며 Props Drilling을 방지에 효과적이다. Props Drilling 상위 컴포넌트에서 props를 전달받아, 하위 컴포넌트에게 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미 Redux의 구조 Redux는 다음과 같은 순서로 상태를 관리 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 이 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달. Reducer 함수는 Actio..

오늘은 Autocomplete, ClickToEdit UI를 구현해 보는 시간을 가졌다. Autocomplete 코드 import { useState, useEffect } from "react"; import styled from "styled-components"; const deselectedOptions = [ "rustic", "antique", "vinyl", "vintage", "refurbished", "신품", "빈티지", "중고A급", "중고B급", "골동품", ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = "0 4px 6px rgb(32 33 36 / 28%)"; const activeBorderRadius = "1rem 1rem 0 ..

오늘은 React로 자주 사용하는 UI 컴포넌트의 기능 구현을 해보는 시간을 가졌다. Modal, Toggle, Tab, Tag 의 각각의 코드와 설명을 적어보려고 한다. Modal 코드 import { useState } from "react"; import styled from "styled-components"; export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. width: 100%; height: 100%; position: relative; `; export const ModalBackdrop = styled.div` // TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니..

오늘은 CDD와 CDD개발도구, useRef에 대하여 공부하였다. CDD Component Driven Development를 뜻하며, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발, 재사용할 수 있는 UI 컴포넌트를 제작해 놓는 방식을 뜻한다. Styled-Component CSS의 일관적이지 않은 패턴 문제와 CSS를 컴포넌트 영역으로 불러오기 위한 CSS-in-JS의 대표적인 예시이며, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발 가능 Styled-Component의 기능 1. 컴포넌트 만들기 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 3. Props 활용하기 4. 전역 스타일 설정하기 Storybook Storybook은 UI 개발 즉, Compon..