Je개발 일지

[ 오늘의 TODO ] 코드 스테이츠) 목~금 내용 복습 // Redux 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 스터디 그룹) 프로그래머스 문제 풀기 생활) 물 1L 이상 마시기 생활) 1시간 이상 걷기 [ 오늘의 복습 ] 1. 상태 관리 React 뿐만 아니라 프론트엔드 개발 전체에 걸쳐서 상태 관리는 매우 중요하다. 여기서 상태란 State, 즉 변하는 데이터다. 특히 UI, 프론트엔드 개발에서는 동적으로 표현되는 데이터라 한다. 1) 상태관리의 중요성 예를 들어 Youtube를 생각해보자. 댓글을 다는 것도 동적으로 표현되는 데이터고, 좋아요를 누르는 것과 플레이 리스트에 영상을 담는 건 전부 동적으로 변하며 표현되는 데이터다. 이를 더 깊게 파고 들어가 본다면 상태에 따라서 각..

[ 오늘의 TODO ] 코드 스테이츠) 월~수 내용 복습 // Styled-Component // useRef 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 1시간 이상 걷기 [ 오늘의 복습 ] 오늘 복습 내용을 확실하게 숙지하려면 CSS 의 기본적인 내용과 리액트의 개발 특징을 좀 알고 있어야 했던 것 같다. 1. Styled-Component 리액트는 단방향 데이터 흐름과 함께 대표적인 특징으로 꼽는 것이 컴포넌트 단위로 개발한다는 것이다. 페이지가 모두 완성됐는데 갑자기 내비게이션 바를 수정해달라는 요청이 들어왔다. 만약에 컴포넌트 단위로 개발하지 않았다면 CSS파일 등 내비게이션 바와 얽혀 있는 모든 것을 수정해야 한다. 하지만, 컴포넌트 단위로 개..

[ 오늘의 TODO ] 코드 스테이츠) 목~금 내용 복습 // CORS // 미들웨어 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 [ 오늘의 복습 ] 1. CORS 브라우저 보완에 관해 CORS, XSS, CSRF 등이 존재한다. 그중에서도 우리는 널리 사용되고 있는 CORS 에 대해서 확인해보도록 하자. 1) 등장 배경 CORS 가 등장하기 전, 서버는 클라이언트라는 파일을 갖고 있었다. 유저가 서버에 요청을 하면 서버 안에 있는 클라이언트를 받아서 통신하거나 클라이언트 안에 Static 하게 존재하던 데이터를 받아왔다. 이런 과정은 서버에서 요청자에게 일방적으로 제공하는 과정이다. 이런 일방적인 관계까 유지될 수 있는 이유는 서버가 항..

[ 오늘의 TODO ] 코드 스테이츠) 월~수 내용 복습 // React 데이터 흐름 // useEffect 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 스터디 그룹) 프로그래머스 문제 풀기 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 [ 오늘의 복습 ] 1. React에서의 데이터 흐름 React 개발의 큰 특징은 컴포넌트 단위라는 점이다. 디자인을 받으면 UI를 쪼개서 컴포넌트를 만들고 페이지를 조립해 나가는 상향식 방식이 일반적이다. 더불어, React 공식문서에서 React를 소개할 때 붙는 키워드가 있으니, 바로 "단방향 데이터 흐름"이다. 단방향 데이터 흐름이란, 한쪽 방향으로만 데이터가 흐른다는 것인데 데이터의 흐름은 하향식이다. 1) 컴포넌트 앱을 만들 때는 상향식(b..

[ 오늘의 TODO ] 코드 스테이츠) 목~금 내용 복습 // 클라이언트 - 서버 아키텍처(2티어 아키텍처) // 프로토콜 // HTTP // 브라우저 작동 원리 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 // 이번에 개념이 너무 빡셌다.. 운동할 시간이 전혀 없었음 [ 오늘의 복습 ] 1. 클라이언트 - 서버 아키텍처 (2티어 아키텍처) 스마트폰 앱을 생각해보자. 우리가 스마트폰에서 다운 받는 앱 중에는 와이파이나 데이터가 있어야지만 정상적으로 작동되는 것이 있는가 하면 없더라도 작동되는 앱이 있다. 전자의 경우, 대표적인 예로 Youtube 가 있을 것이다. 후자의 경우에는 카메라 어플이 있다. Youtube라면 방대한 양의 동영상이..

[ 오늘의 TODO ] 코드 스테이츠) 월~수 내용 복습 // 비동기 (진짜 빡세네) // Node.js 모듈 사용 // fetch 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 스터디 그룹) 프로그래머스 문제 풀기 // 멀리 뛰기 // Weekly 2주차 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 [ 오늘의 복습 ] 1. 비동기란? 1) 동기(Synchronous) 비동기의 반대는 동기다. 우리가 사용하는 일반적인 함수들은 동기적으로 작동한다. 동기적으로 진행한다는 의미는 이전 것의 완료 시점과 다음 것의 시작 시점이 같은 상황을 의미한다. 내가 4년 동안 일했던 아웃백 스테이크 하우스의 사정을 예시로 들어보자. 아웃백에서는 거의 동시에 온 손님이라도 먼저 발을 들인 손님 순서대로..

[ 오늘의 TODO ] 코드 스테이츠) 목~금 내용 복습 // 자료구조 개념 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 스터디 그룹) 프로그래머스 문제 풀기 (~월) // 하노이의 탑 (구글링해서 풀리긴 하는데... 내가 직접 푼 게 아니라서 찝찝함) 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 // 다시 운동하기 위해 노력해보겠습니다. [ 오늘의 복습 ] 1. 자료구조 1) 자료구조란? 여러 데이터들을 묶어 저장하고 사용하는 방법을 정의한 걸 자료구조라고 한다. 여기서 데이터라는 건 실생활의 모든 값을 의미한다. 하지만, 데이터의 값은 그 자체로 의미를 지니진 못한다. 예를 들어 100m 라는 데이터가 있다고 하자. 여기서 100m는 100m 달리기의 100m 인지, 맛집에 가기..

[ 오늘의 TODO ] 코드 스테이츠) 월~수 내용 복습 // 객체지향 // 재귀함수 패스트 캠퍼스) 인강 3개 이상 듣기 // optional // 요즘 복습해야할 게 너무 많아서 안 돼 스터디 그룹) 프로그래머스 문제 풀기 (~월) // 하노이의 탑 // 기능 구현 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 [ 오늘의 복습 ] 1. 객체 지향 1) Class, Instance 클래스는 자동차 설계도, 인스턴스는 자동차 설계도로 만든 자동차라고 생각하면 좋을 것 같다. 자동차 설계도인 클래스를 만들 때는 일반적으로 함수 정의하듯이 만들 수 있다. 이때 키워드는 일반 함수 정의하듯이 function으로 적어줄 수 있으나, ES6 문법 이래 class 라는 키워드로 클래스를 생성할 수 있게 되었다..

[ 오늘의 TODO ] 코드 스테이츠) 4~5주차 내용 복습 // DOM // 고차함수 // React 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 [ 오늘의 복습 ] 1. 오늘도 어제와 별반 다를 게 없다 일단 복습을 했는데 좀 빠른 시간 내에 했고, 대신에 React는 패캠 강의와 겹치는 부분이 좀 있어서 React로 새로운 프로젝트를 하나 만들었다. 프로젝트 만든 것은 여기가 아닌 패캠 인강 React 기술 블로깅으로 올릴 예정이다. 내일부터 Section 2 가 시작되는데 조금 긴장된다. 잠깐 코스 내용을 봤는데 다음주에 배우는 게 모듈화, 재귀함수, 자료구조 등을 배운다. 진짜 좀 무섭긴 하다. 하지만 어떻게든 공부 시간을 투자해..

[ 오늘의 TODO ] 코드 스테이츠) 지금까지의 내용 복습 // 1~3주차 내용 // 대표적으로 더 열심히 공부한 건 조건문, 반복문, HTML, CSS, Linux, Git 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 [ 오늘의 복습 ] 1. 정말 솔직하게 말하면 복습할 것이.. 별로 없다! 진짜 솔직히 말할게요. 저 HA 공부 진짜 빡세게 공부해서 A부터 Z까지 학습해서 할 게 별로 없어요! 그래도 코드 스테이츠 다음 Section 2를 넘어가기 위해서 좀더 개념을 탄탄하게 잡기 위해 다시 한 번 복습을 강행했다. 복습한 내용들은 여기에 기술 블로깅하기 보다는 이전에 복습한 글들을 업데이트 했다. 오늘 공부는 대부분 패캠 강의로 했다..