프론트엔드 49

[패캠 인강] 비동기적 처리 (Promise)

1. Promise 를 사용하는 이유 예전에 비동기 작업을 할 때 콜백 함수를 사용했다. 하지만 양이 많아지기 시작하면 코드가 난잡해진다는 단점이 발생한다. 바로 위의 사진처럼 콜백 지옥이라는 걸 볼 수 있다. 그걸 막기 위해 도입된 문법이 Promise 다. 직접 코드를 작성하며 얼마나 깨끗해지는지 확인해보자. 우리는 코드를 통해 초를 세는 함수를 작성해보고자 한다. 1) 콜백 지옥 먼저, 콜백 함수로 비동기를 구현했을 때의 상황이다. function second (sec, callback) { setTimeout(() => { const now = sec + 1 console.log(`${now}초`) if (callback) { callback(now) } }, 1000) } second(0, n ..

[코드 스테이츠] 53일차, express.json() 인데 왜 POST할 때마다 SyntaxError: Unexpected token

오늘 이 오류 하나 해결하기 위해 2시간 30분을 썼다. 페어 프로그래밍 과제 중에 발견한 문제인데, 이것만 없었어도 이렇게까지 힘들진 않았을 것 같다. 오죽했으면 구글링을 너무 해서 페어분과 내가 찾은 사이트보다 찾지 않은 사이트를 찾는 게 더 빠를 정도였다고까지 얘기를 했다. 이거 해결했을 때 소름이 확 끼쳤다. 오늘은 이거 하나 오류 해결한 게 가장 큰 수확이었던 것 같다. 스터디 그룹으로 프로그래머스 문제를 계속 풀고 있다. 문제를 풀때마다 나는 항상 level 3 에서 막히는 것을 느낀다. 아무래도 자료 구조에 대한 응용력이 없다 보니 그런 것 같다. 지금 실력 상으로는 level 2까지는 효율성은 좋지 못하더라도 어떻게든 풀 수 있게 됐는데 level 3에는 보이지 않는 벽에 막힌 것 같은 느..

[코드 스테이츠] 50일차, React 와 비동기 환상의 콜라보레이션

지금 머리가 너무 멍~ 하다. 뭔가 어려웠던 건 아니었는데 정규 수업시간 끝나기 전에 같은 스터디 그룹원께서 해주신 개념 질문이 도화선이 돼서 장렬한 불꽃놀이 한 번 했다. 거기서 멈췄어야 했는데 새로 잡힌 개념으로 원래 제출했던 과제 코드 리팩토링 하다보니까 머리가 어질어질하다. 하지만, 덕분에 useEffect 라는 개념은 정말 제대로 잡을 수 있었던 것 같다. 뭔가 빙빙 돌아서 다시 원점으로 돌아온 것 같긴 하지만, 0도와 360도는 다르듯이 결국 원점이라 해도 공식 문서 찾아보고 직접 코드 작성하며 개념을 깨우친 시간은 정말 값진 것 같다. 페어 프로그래밍이 있었는데 페어분께서 아프셔서 결국 나 혼자 진행해야 했다. 간만에 혼자서 과제를 하다보니 스스로 생각해야하는 시간이 길어졌다. 하지만, 남과..

[코드 스테이츠] 49일차, "7주차 복습 (2) - 2티어 아키텍처, 프로토콜, HTTP, 브라우저 작동원리"

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

[코드 스테이츠] 48일차, "7주차 복습 (1) - 비동기, fetch"

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

[코드 스테이츠] 45일차, 내일부터 또 다른 개념 HTTP

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

[패캠 인강] 비동기적 처리 (타이머 함수)

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

[코드 스테이츠] 44일차, 트러블 슈팅 백만 번

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

[코드 스테이츠] 43일차, Section 1 주제가 숨구멍

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

[코드 스테이츠] 42일차, "6주차 복습 (2) - 자료구조"

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