Je개발 일지

[ 연휴의 TODO ] 코드 스테이츠) 코플릿 문제 // 재귀 1 ~ 15 // 자료구조 1 ~ 13 코드 스테이츠) 과제 리팩토링 // beesbeesbees // Tree ui // Stringfy-json // Underbar // Async and Promise // Stateairlines-client & Stateairlines-server // React Custom Component // Cmarket Redux 패스트 캠퍼스) 인강 듣기 [React] // 리액트 맛보기 3 ~ 30 // React 공식문서로 디테일 잡기(초급) 1 ~ 11 // React 공식문서로 디테일 잡기(고급) 1 ~ 19 [Node.js] // ch 04. 모던 자바스크립트 살펴보기 1 ~ 6 // ch 05...

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

오늘은 생각보다 과제로 할 내용이 별로 없었다. 덕분에, 빨리 끝내고 빨리 개념을 복습할 수 있어서 좋았다. 그리고 다른 스터디 그룹원 분들 페어 프로그래밍 하는 곳에 가서 다른 분들이 작성하는 코딩을 보면서 내가 잘못 알고 있었던 것들을 조금씩 수정해 나갔다. 사실, 과제를 수행하는게 내가 개념이 완벽해서 과제를 통과했다기 보다 오류를 해결하다보니 과제가 통과된 것 같아서 개념에 대해 바로 잡을 기회가 흔치 않았는데, 다른 분들이 작업하시는 것을 보고, 또 다른 분들로부터 질문을 받으면서 개념을 좀더 확고하게 잡는 시간이 됐다. ...과제를 진행하고, 복습만 해서 그런지 지금 딱히 공부할 내용을 적기가 좀 애매하다. 기술 블로깅은 주말에 몰아서 하는데, 이것도 과제만 엄청 하다 보니 개념을 어떻게 적어..

1. 비동기적 처리란? 대부분의 함수는 동기적으로 처리된다. 동기적이란 어떤 기능을 실행하고, 그다음의 기능을 실행한다는 의미다. 이건 마치 같은 라인에 선 계주와 같다. 한 선수가 목표한 거리를 다 지나야지만 바통을 넘겨받은 선수가 달릴 수 있다. 대부분의 기능은 이렇게 실현된다. 그런데, 만약에 너무 오래 걸리는 작업이 있다면? 예를 들어 우리가 유튜브를 본다고 하자. 유튜브에서 동영상을 불러들이는 시간은 다른 메뉴바를 불러들이는 시간보다 오래 걸린다. 그런데, 만약 동영상을 불러들이고 나서 다른 기능이 구현된다고 하면 사용자는 아무것도 없는 브라우저의 로딩이 끝나기만을 기다려야 할 것이다. 그러면 사용자들에게 불편을 주고 웹 애플리케이션에 안 좋은 인상만 남길 것이다. 그렇다면, 반대로 동영상을 모..

오늘 배운 개념은 비동기다. 페어 프로그래밍으로 한 과제는 비동기로 함수를 구현하는 것이었다. 그런데 코드를 작성하는 내 입장에서는 함수를 구현한다기보다 오류를 수정하는 게 과제의 주 업무라 느꼈다. 분명, 함수는 구현한 것 같은데 테스트에 통과되지 않아서 통과되지 않은 오류를 해석하고 수정 작업하는데만 모든 시간을 쏟은 것 같다. 오류가 뜨면 뭐가 문제일까 구글링을 엄청 하고, 구글링을 해도 답이 나오지 않으니까 Test를 담당하는 test.js 파일을 열어서 뭘 원하는 건지 분석까지 해냈다. 덕분에 오류를 해결하는 스킬을 많이 기르긴 했는데 이걸 개념처럼 뭔가 설명하기가 애매하다. 테스트에서 틀린 것을 보고 트러블 슈팅하는 스킬이 늘었지, 무언가를 더 배웠다는 느낌이 들지 않아서 그런 것 같다. 여하..

Section 2 가 시작된 이래 숨가쁘게 달려 오다가, 오늘 한 번 숨 좀 돌린 것 같다. 오늘 저번 Section 1의 고차함수 내용을 복습했다. 말은 복습이지 사실상, 개념을 다시 한 번 상기시키기 위해 페어 프로그래밍으로 과제들을 수행했다. 우리가 흔하게 쓰는 배열의 메소드들을 직접 구현했다. 배열의 메소드들(map, reduce, filter)은 그 안에 콜백 함수를 넣어주는 고차함수다 보니 배열의 메소드들을 직접 구현해봄으로써 고차 함수의 개념을 더 잘 익히게 됐다. Section 1일 때는 그렇게 괴롭혔던 고차함수가 이렇게 반가울 줄은 몰랐다. 고차함수를 구현하다 보니 "할만하다"라는 생각을 했다. 어떻게 보면 그렇게 생각할 수 있을 정도까지 성장했다는 것을 의미하기도 하지만, 다른 말로는 ..

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

오늘 페어 프로그래밍은 매우 쉬웠다. 우리가 배운 것에 비하면. 배운 내용은 클래스와 인스턴스, 프로토타입이다. 다른 프로그래밍 언어라면 그냥 클래스와 인스턴스만 있는데 자바 스크립트는 프로토타입 기반 언어이기에, 그 프로토타입을 통해서 억지로 클래스와 인스턴스 비슷한 것을 만들어낸 것이라고 한다. 사용해보니 내용은 이해가 됐다. 그러나 이게 어떻게 사용되는지는 아직 확신이 안 선다. 복습을 좀더 해봐야겠지만, 지금으로써는 클래스 문법의 특징은 무엇이며, 이 클래스와 인스턴스, 프로토타입의 차이가 각각 무엇인지 그 개념을 이해한 것으로 만족을 하고 활용 방법은 더 알아봐야할 것 같다. 그리고 오늘 간단하게 이제부터 매일 풀어 볼 toy problem 문제를 맛보기로 보았다. 어.. 이걸 어떤 비유로 들면..