Je개발 일지

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

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

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

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

1. Truthy, Falsy 자바 스크립트에서 논리 연산자에 true와 false 만 들어가야 하는 것은 아니다. true와 false는 아니지만 true처럼 취급 받는 truthy와 false처럼 취급 받는 falsy라는 값이 존재한다. truthy 는 굉장히 많기 때문에 falsy한 값만 알면 falsy 이외에는 모두 truthy라고 생각하면 된다. 대표적인 falsy는 다음과 같다 1. false (false도 넓은 범위에서 falsy) 2. 0 3. '' (빈 문자열) 4. undefined 5. null 6. NaN 한 가지 주의점이 있는데, 빈 객체 { } 나 빈 배열 [ ] 은 falsy 값이 아니다. 간혹, falsy 값을 좀더 정밀하게 false 처럼 사용하고 싶은 분들은 falsy한 ..

저번 시간에 이어서 남은 과제를 수행하겠다. 1), 4), 6)은 했고 이제 input창 관리인 2), 3), 5) 남았다 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder ..

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

오늘 할 것을 설명하자면 옆의 사진들과 같다. CSS 는 편의상 margin 값만 추가했다. 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder 처리를 해줄 것이다. 6) 마지..

[ 오늘의 TODO ] 코드 스테이츠) 목~금 내용 복습 // React SPA // React State & Props // sprint Advanced 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 // 공부하느라 운동할 시간 없어. 허튼 핑계 아니야. 진심이야. [ 오늘의 복습 ] 1. React SPA 1-1) SPA 란? SPA 는 Single Page Application의 약자다. 이전에 페이지를 넘어갈 때면 HTML을 완전히 새것으로 바꾸는 작업을 했으나 현재는 이 SPA를 통해 업데이트에 필요한 데이터만을 가져오는 방식이 개발됐고 보편화됐다. 많은 데이터를 가져오지 않으므로 사용자의 행동에 빠르게 반응하며, 서버 과부하의 위..

[ 오늘의 TODO ] 코드 스테이츠) 월~수 내용 복습 // 고차함수 개념 // React Intro 개념 코드 스테이츠) 어제 한 거 Advanced 완성 // 거의 모든 시간을 쏟아부었으냐 결국 못해냄 패스트 캠퍼스) 인강 3개 이상 듣기 // optional 생활) 물 1L 이상 마시기 생활) 수-토-일 운동 // 운동은 저 Advanced 때문에 생각도 못함 [ 오늘의 복습 ] 1. 고차함수 1-1) 고차함수의 개념 자바 스크립트에서 함수는 일급객체 취급을 받는다. 일급 객체는 다음과 같은 취급을 받게 된다. 1. 변수에 할당 가능 2. 다른 함수의 인자로 전달 가능 3. 다른 함수의 결과로써 리턴 가능 즉, 일급 객체인 함수는 하나의 데이터처럼 다룰 수 있다. 고차함수란 함수를 인자로 받을 수..