분류 전체보기
빙액트(3)
3. 브라우저와 작업 동시에 하(는 것처럼 보이)기 전 챕터에서 render를 구현했지만 재귀적으로 render를 하며 엘리먼트가 커진다면 브라우저가 렌더링이 끝날때까지 동작을 할 수 없는 문제가 있었다. 이 문제를 해결하기 위해 이 챕터에서 렌더링 작업을 더 세분화하고 브라우저가 끼어들 수 있게 할 것이다. 먼저 알아야 할 지식이 있는데 그것은 requestIdleCallback 함수이다. https://developer.mozilla.org/ko/docs/Web/API/Window/requestIdleCallback window.requestIdleCallback() - Web API | MDN window.requestIdleCallback() 메서드는 브라우저의 idle 상태에 호출될 함수를 대기..
빙액트 (2)
1. createElement 우리는 이제 우리가 만든 리액트로 대체 할 것이다. 앞서 살펴 봤듯이 JSX를 JS로 변환하면 createElement를 호출한다. 이는 type과 props를 가진 객체 엘리멘트를 반환한다. 이를 우리가 만든다면 아래와 같다. function createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => (typeof child === 'object' ? child : createTextElement(child))), }, }; } function createTextElement(text) { return { type: 'TEXT_ELEME..
빙액트 (1)
우리 빙먹 프로젝트에 사용할 리액트의 이름은 빙액트다. 빙액트를 구현하는 과정이 쉽지만은 않을 것이다. 하지만 쫄지말자. 쉽지않다는 것은 얻어 갈 것도 많다는 것!!! 아 설레네~~ 먼저 리액트를 구현하기 전에 기본 개념을 알아야 한다. 먼저 JSX로 정의된 엘리먼트가 어떻게 JS로 변환되는지,이를 어떻게 React는 createElement 하는지에 대해 알아야 한다. 기본 개념 const element = Hello // JSX -> JS const element = React.createElement( "h1", { title: "foo" }, "Hello" ) JSX는 바벨과 같은 빌드 툴에 의해 JS 코드로 변한해준다. 변환받은 JS 코드에서 React.createElement는 인자 값들로..
세번째 프로젝트 시작
엘리스에서 진행하는 정규 프로젝트를 끝내고 바로 세번째 프로젝트를 진행하려고 한다. 다른 스터디도 좋지만 프로젝트를 경험하는 것이 가장 많이 성장할 수 있다고 생각한다. 뭐든 직접 해봐야 내것이 되니깐! 서론 나는 그 동안 궁금해왔던 리액트를 배우고 사용해보고자 첫 번째 프로젝트를 진행하였다. 그 경험을 통해 기본적인 리액트의 사용방법은 익혔다고 생각하고 뿌듯함도 느낀다. 하지만 동시에 리액트는 어떻게 동작하는 것 일까 라는 궁금증이 계속 생겼다. 그러던 중 우아한테크캠프를 지원하며 운이 좋게도 1차를 통과해 2차 과제시험을 공부 하던 중 큰 깨달음을 얻었다. 과제는 컴포넌트 방식으로 웹을 구현하는 것이었고, 공부를 하며 Vanilla JS 로 컴포넌트 방식으로 구현을 할 수 있는데 리액트도 컴포넌트 방..
프로젝트 회고
https://github.com/TeamEliceSnail/photocalendar 프로젝트를 진행하며 5주간의 프로젝트가 어느새 끝이 났다. 맨땅부터 시작해서 무엇을 만들까 서로 의견을 나누던 첫주와 어떤 오류가 있고 서로 필요한 부분들을 의논하면서 개발했던 나머지 주들과 그 사이사이의 피드백들, 모두 소중한 경험이라고 생각한다. 나는 이번 프로젝트에서 React의 경험을 얻고자 했고 이를 이뤘다고 생각하지만 완전 만족하지는 못하겠다. 리액트를 리액트답게 코딩을 했냐 하면 그런 확신은 가지기 힘들었다. 프로젝트를 진행해오며 모르는 것 투성이였고 이렇게 개발하는 것이 맞나 라는 의문도 들때가 있었다. 리액트답게 코딩을 하는 것은 무엇일까 생각해보면 컴포넌트를 세밀하게 나누어 이곳저곳에서 가져다 쓸 수 ..