codestates 46

[코드 스테이츠] 56일차, "8주차 복습(2) - CORS, 미들웨어"

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

[코드 스테이츠] 55일차, 8주차 복습(1) - React 데이터 흐름, Effect Hook"

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

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

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

[코드 스테이츠] 52일차, "내 머리속의 404"

먼저, 전제를 깔겠다. 백엔드가 나쁘진 않다 깊이 배우면 뭔가 재미있을 것 같다. 공부하면서 진짜로 그렇게 생각했다. 하지만, 와 이거 진짜 머리가 멍 해지는 것 같다. React 비동기까지만 해도 그래도 오류가 뜨면 왜 오류가 났는지 잘 파악할 수 있었다. 그렇게 될 수 있었던 건 내가 코드 스테이츠 수업으로 React 와 비동기를 배울 때 정말 복습을 빡세게 하고 열심히 공부했기 때문일 것 같다. 그런데 이 서버는 뭔가 답이 없다. 이걸 뭐라고 표현을 해야할까. 그냥 에러가 뜨면 어떻게 수정해야할지 감이 잡히지 않는다. 이 말은 곧 내가 서버에 대한 개념이 매우 부족하다는 것을 의미한다. 인정한다. 아무래도 나는 프론트엔드를 지향하다 보니 그쪽 공부에 몰두하는 건 당연했다. 그러다 이 서버의 개념에 ..

[코드 스테이츠] 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

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

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

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

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

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