JavaScript46 바닐라코딩 부트캠프 5주차 후기 바닐라코딩을 시작한지 5주가 지났다. 4주차는 test 및 break 주간이라 따로 후기를 쓰지 않았고, React를 배우고 github 배틀 과제를 했던 5주차 후기를 작성한다. 부트캠프에서 React를 배운다는 점은 이미 알고 있었던터라, 많이 연습하고 들어오고 싶었는데 사실 React는 만족할만큼 충분히 예습하고 들어오진 못했었다. 게다가 나는 Class 기반 Component로 진행되는 강의를 들었던지라, ken 님이 알려주셨던 함수형 Component가 좀 생소해서 어려움이 있었다. 공식문서를 최대한 꼼꼼히 읽으면서 하나 둘 이해하고 있지만 아직 많이 부족하다고 느껴진다. 게다가 테스트 코드도 처음으로 작성해봤는데, 마치 1주차 과제에서 each를 맞닥뜨린 것 같은 느낌이었다. 아는 사람은 아는.. 2020. 2. 9. 200207(금) : Uncontrolled vs. Controlled Component in React React의 컴포넌트를 설명할 때 Uncontrolled Component와 Controlled Component라는 개념이 있다. 이 둘에 대해서 살펴보자. 1. 왜 uncontrolled와 controlled 컴포넌트에 대해 알아야 할까? React는 내부의 상태(state)를 '신뢰 가능한 단일 소스(Single Source of Truth)'로 관리하려는 설계 원칙을 가지고 있다. 즉 자식 컴포넌트가 data가 필요할 경우, 해당 data는 가장 가까운 공통 부모 컴포넌트에게서만 props의 형태로 전달받아서 사용해야 한다. 대부분의 HTML 엘리먼트들(ex. 등)은 엘리먼트가 내부적으로 어떤 데이터를 가지지 않기 때문에 문제될 것이 없다. 하지만 HTML 엘리멘트 중 자체적으로 특정 data를 .. 2020. 2. 7. 200131(금) : CORS 지난 글에 이어 이번에는 CORS에 대한 조사를 통해서 왜 오류가 발생했는지, 어떻게 해결할 수 있는지 작성해보고자 한다. 1. CORS란? CORS(Cross-Origin Resource Sharing)이란, 추가 HTTP 헤더를 사용하여 브라우저에게 한 출처(ex. a)에서 실행 중인 웹 응용 프로그램의 다른 출처(ex. b)의 선택된 자원(ex. json data)에 대한 접근 권한을 알려주는 메커니즘이다. 웹 응용 프로그램은 자신과 다른 출처를 가진 리소스를 요청할 때, cross-origin HTTP 요청을 실행한다. 도대체 이게 무슨 말이냐.. 할 수 있으니 우선 cross-origin HTTP 요청부터 살펴보자면, 예를 들어 http://soldonii.com 이라는 사이트의 프론트엔드 자바.. 2020. 1. 31. 200130(목) : Fetch API 이번주는 바닐라코딩 break week이고, 다음 주부터 3주간 리액트를 배우기에 복습 차원에서 리액트로 아주 간단한 앱을 미니 프로젝트로 살짝 만들어보려고 했다. 그런데 처음부터 난관에 부딪혔다;; componentDidMount() 메소드 내부에서 fetch를 이용해서 원하는 데이터를 요청하고 받아와서 state에 저장하려고 했는데, 아래와 같은 에러가 계속 떴다. 사실 쉽게 해결할 수 있는 방법은 stackoverflow에서 찾을 수 있어서(해결책 링크) 계속 앱을 만들어봐도 되지만... ken님은 항상 모든 에러 메시지를 면밀히 살펴보고 꼼꼼히 조사해보기를 권장한다. 사실 그게 맞긴 하지만 항상 시간 내에 뭔갈 하다보면 그게 쉽지 않은데, 그래도 이번에 break 주간인 김에 내가 원하는 걸 못 .. 2020. 1. 30. 200129(수) : Deep copy vs. Shallow Copy 오늘은 자바스크립트에서 객체를 복사하는 방법에 대해서 포스팅하고자 한다. 그 동안 shallow copy, deep copy 같은 용어와 그 방법에 대해서 여기저기서 들어봤으나 한 번도 제대로 된 주제로 다뤄서 글을 쓴 적은 없었기에 작성한다. 1. '복사'란 간단하지 않다. 자바스크립트에서 복사는 참으로 간단한 듯 하지만 실은 매우 복잡한 문제라 생각한다. 데이터 타입이 원시값인 경우, 즉 string, number, undefined, null, boolean의 경우만 존재한다면 복잡할 것이 전혀 없다. 하지만 객체(배열 포함), 함수 등을 복사할 경우, 그리고 해당 객체 내에 nested 형태의 객체가 또 존재할 경우에는 문제가 복잡해진다. 단순히 stack overflow에만 봐도 자바스크립트의 .. 2020. 1. 29. 바닐라코딩 부트캠프 3주차 후기 2020년 1월 6일(월)에 시작한 바닐라코딩 부트캠프 7이 벌써 3주나 지났다. 지난 3주간을 돌아보며 느낀 점, 배운 점을 정리하고자 한다. 2주차에 자료구조를 배운 것에 이어 3주차에는 정렬 알고리즘에 대해서 배웠다. 가장 기본적인 bubble sort, insertion sort 뿐 아니라 merge sort, quick sort 등에 대해서 배웠고 이 정렬 로직들을 시각적으로 구현하는 간단한(?) 과제가 주어졌다. 이 정렬 로직들도 학원 들어오기 전에 udemy에서 이것저것 들으면서 공부를 하긴 했었는데 시각화를 하는 것은 역시 어렵더라..ㅠㅠ 강의를 듣고 이해를 하긴 했었는데 완전 내 것이 되도록 충분하게 연습하지 못했던 것이 원인인 듯 하다. 그 당시에는 학원 들어오기 전에 최대한 많이 배워.. 2020. 1. 27. 200124(금) : Bubble Sort, Insertion Sort 이번 주에는 대표적인 정렬 알고리즘에 대해서 배우는 한 주였다. 총 4개의 정렬 알고리즘 - Bubble, Insertion, Merge, Quick -을 두 편의 글로 나누어서 1) 특징(시간/공간 복잡도, 장/단점 등), 2) 정렬 알고리즘 로직, 3) 구현 방법을 중심으로 정리하고자 한다. 본 글에서는 우선 Bubble Sort와 Insertion Sort를 정리한다. 정렬 알고리즘과 관련된 첫 글인만큼, 본격적으로 Bubble Sort를 알아보기 전에 도대체 왜 정렬 알고리즘을 배워야하는지에 대해서부터 살펴보자. 다들 아시다시피 자바스크립트에는 이미 내장된 Array.prototype.sort() 메소드가 존재한다. (Sort MDN 문서) 이를 사용하면 복잡한 정렬 로직을 알지 못해도 충분히 쉽.. 2020. 1. 24. 200118(토) : 비동기 - 콜백과 프라미스 1. 비동기 프로그램에서 '지금'에 해당되는 부분과 '나중'에 해당되는 부분 사이의 관계가 비동기 프로그램의 핵심이다. '나중'은 '지금'의 직후를 의미하지 않는다!(즉, 코드에서 '지금' 요청을 보내자마자 바로 응답을 받아서 실행할 수 있지 않다!) AJAX로 예를 들자면, AJAX는 비동기적으로 '지금' 요청하고, '나중'에 결과를 받는다. '지금'부터 '나중'까지 "기다리는" 가장 간단한 방법은 '콜백 함수'라는 장치를 이용하는 것이다. const data = ajax("http://some.url.1"); console.log(data); // data 변수에 원하는 값은 담겨있지 않다! ajax("http://some.url.1", function cbFunc(data) { console.log.. 2020. 1. 18. 200117(금) : this 1. This this가 무엇인지 정확하게 알기 위해서, 죽을 때까지 아래 세 문장만큼은 잊지 말자! this는 1) 함수 자신을 가리키는 것도 아니고, 2) 함수 내부의 스코프를 가리키는 것도 아니다!! this는 '함수 호출 시점'에 바인딩되며, this가 무엇을 가리킬지는 전적으로 '함수를 호출하는 방식'에 달려있다!! 따라서 1) this가 포함된 함수 호출 스택을 추적해서 함수 호출 시점을 파악한 후, 2) 해당 함수가 어떤 방식으로 호출되었는지를 확인해야 한다!! 1) 호출부 this가 무엇을 가리킬지 이해하기 위해서는 '함수를 호출한 지점'을 확인하면 될 것 같지만, 생각보다 쉽지 않다. 중요한 것은 '호출 스택(현재 실행 지점에 오기까지 호출된 함수의 스택)'을 생각해야 한다. functi.. 2020. 1. 17. 이전 1 2 3 4 ··· 6 다음
