Proxy Proxy 는 정석적인 과정 없이 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 우회할 수 있습니다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 됩니다. 여기서 React 앱이 서버로부터 받은 응답 데이터를 다시 브라우저로 전달하는 방법을 쓰기 때문에 브라우저는 CORS 정책을 위반했는지 모르게 됩니다. 브라우저를 proxy 기능을 통해 속이는 것입니다. proxy 적용 전 흐름 proxy 적용 후 흐름 Proxy 사용법 Proxy 사용법은 2가지로 나뉜다. webpack dev server proxy React Proxy 사용법 webpack dev ..
DOM 이란? 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리구조로 구성한 것이 DOM이다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다. 한 마디로 브라우저가 HTML 웹 페이지를 인식하는 방식을 계층화시켜 트리구조로 만든 객체(Object) 모델을 DOM이라 한다. DOM에는 node 와 element 개념이 ..
Figma 클론 여기서 클론이란 Figma를 사용해서 기존 운영 중인 서비스의 화면의 디자인을 따라서 만들어 보는 것을 의미한다. Bare Minimum Requirements Figma로 프로토타입을 제작해 봅니다. 최소한 Lo-Fi 수준의 프로토타입을 구현해야 합니다. 페이지 이동이 가능해야 합니다. 스크롤 이벤트가 있어야 합니다. 최소한 1개의 마스터 컴포넌트와 인스턴스를 만들어야 합니다. Figma 클론 결과물을 제출해 주세요. Figma 클론 구현하기! 이번에 페어와 어떤 사이트를 해볼지 정하다 블로그 사이트인 velog의 디자인을 따라서 만들어보기로 했다. 시간이 6시간을 주었지만 직접 디자인을 해보니 시간이 너무 빨리 지나가 구체적으로 완성을 하지못하였고, 아직 실력이 많이 부족해 구현을 하..
이번주는 새로운 section에 들어가 한 주동안 재귀,UI/UX, Figma 를 학습하였다. 어제는 Figma 를 공부했는데 튜토리얼 해보고 할만하다고 생각했는데 페어분이랑 과제를 하면서 멘붕이 왔다.... 어떤 부분이 부족한지 찾아보고 개념을 정리하면서 Figma랑 좀 더 친해져야될 것 같다. 🔥 Figma란? Figma는 2016년 9월에 출시된 UI 디자인 & 프로토타이밍 툴로, 출시 이후로 꾸준히 점유율을 높여가다가 지금은 UI/UX 업계에서 가장 인기 있는 툴이 되었다. Figma 는 웹 기반 UI 도구 피그마의 가장 큰 특징(장점이기도 함)이라고 불리는 부분은 윈도우, 맥, 웹 브라우저 어디서에서 접근이 가능하다는 점이다. 웹 기반 프로그램으로 별도 앱 설치를 하지 않아도 되기 때문에 활용 ..
프로토타입 체인(Prototype Chain) 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근시 객체 자신의 것뿐 아니라 __proto__가 가리키는 링크를 따라서 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 접근할 수 있다. 즉, 특정 객체의 프로퍼티나 메소드 접근시 만약 현재 객체의 해당 프로퍼티가 존재하지 않는다면 __proto__가 가리키는 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례로 검색하는 것이 바로 프로토타입 체인이다. 모든 프로토타입 체이닝의 종점은 Object.prototype 이다. 하위 객체는 상위 객체의 프로퍼티나 메소드를 상속받는 것이 아니라 공유한다. 해당 객체에 없는 프로퍼티나 메소드를 접근할 때 프로토타입 체이닝이 일어난다...
저번주 금요일부터 월요일까지 수업 정규시간으로는 2일을 걸쳐 페어와 함께 koans 문제를 풀었다. 문제를 풀면 풀 수록 성취감이 있고 문제의 난이도도 적당해서 알아가는 재미가 있었다. 검색만 1시간 넘게 했던 부분들이 많았는데 페어분의 도움으로 문제를 잘 풀어나갔던것 같다. ✅ expect 함수 : 테스트 하는 값과 기대하는 조건(matcher)을 비교한다 expect(테스트하는값).(기대하는조건=expression 또는 value) expect(A === B).to.be.true expect(A + 1).to.equal(B) expect(A[1]).to.deep.equal('young') // to.deep.equal ---> 배열의 요소나 객체의 속성이 서로 같은지 확인하는 matcher '==' ..
JavaScript에서는 6개의 자료형(number, string, boolean, undefined, null, symbol)을 원시 자료형으로 구분한다. // 원시 자료형(primitive type): number, string, boolean, undefined, null 42, 'string', true, undefined, null 원시자료형이 아닌 모든 자료형은 참조 자료형이다. 배열, 객체가 대표적인 참조 자료형이며, 함수도 참조 자료형으로 분류한다. // 참조 자료형(reference type) [0, 1, 2] // 배열 {name: 'kimcoding', age: 45} // 객체 function sum (x, y) { return x + y } // 함수 원시 자료형과 참조 자료형의 ..
오늘은 Linux와 Git의 기초학습을 하였다. 오늘은 실습하는 시간 보다 설치하고 어디가 왜 설치가 안되는지 구글링 하고 해결하는데 시간을 더 많이 쓴 것 같다. terminal를 이용하여 파일을 생성하고 이동하고 복사하고 등 많은 것들을 할 수 있음에 놀라웠고 이 안에서 과제를 제출을 할 수 있다는 사실에 정말 신기했다. Bare Minimum Requirements node.js 프로그램인 index.js를 실행시켜서 CLI에서 결과를 확인하세요. range 모듈을 설치하고, 사용법을 알아보세요. 짝수를 생성하는 getListMultiplesOfTwo 함수를 range 모듈을 이용해서 작성하세요. npm run test 스크립트를 통해 제대로 작성했는지 테스트할 수 있습니다. 테스트 케이스를 전부 ..
오늘은 3일동안 배운 js 기초를 활용하여 계산기가 구현이 되도록 코드를 입력해보았다. 오늘도 하면서 정말 많은 멘붕이 있었다... 그래도 Pair와 함께해서 좀 더 수월하게 풀어나갈 수 있었던 것 같았다. ✍️ 계산기 구현 Bare Minimum Requirements 계산기에는 5가지 종류의 버튼이 있습니다. 숫자 버튼 연산자 (+, -, *, /) 버튼 소수점 버튼 계산 (Enter) 버튼 초기화 (AC) 버튼 ⭐️ 기능 구현 순서 1. 화면의 첫 번째 칸에 숫자 나타내기 2. 화면의 두 번째 칸에 숫자 나타내기 3. 화면에 출력된 숫자와 연산자로 계산하기 4. 화면 상의 값을 초기화하기 코드 실행 calculate 함수 계산기 작동 해설 1. 연산시 script.js의 calculate 함수를 활..
반복문 코플렛 문제를 풀면서 어려웠던 부분들이 정말 많았던 것 같다. 사실 지금도 보면서도 아직 이해가 안가는 부분들도 있다.... ✍️ countCharacter 문자열과 문자를 입력받아 문자열에서 문자(letter)가 등장하는 횟수를 리턴해야 합니다. 내가 쓴 코드 function countCharacter(str, letter) { let result=0 for(let i=0; i < str.length; i++){ if(str[i]===letter){ result= result+1 } }return result } 풀이 ex) // countCharacter('abca','a') //1. str[0]=a //2. str[1]=b //3. str[2]=c //4. str[3]=a //총 갯수 2개 ..
