전체 글
이게(this) 뭐야
this this는 무엇일까요? 자바스크립트에서 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달받습니다. 또 this는 함수 호출방식에 따라 this에 바인딩되는 객체가 달라집니다. 문제는 함수는 다양한 방식으로 호출할 수 있습니다. 그 말은 this가 가리키는 것은 호출 방식에 차이가 있다는 것입니다. 예시를 살펴봅시다 일반 함수 내부에서의 this console.log(this); function square(number){ // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. console.log(this); return number * number; } square(2); 일반 함수 내부에서 this는 기본적으로 전역 객..
빙액트 - styled-component(반의 반쪽) 적용
우리는 이제 빙액트를 구현하였는데 이제 css를 다룸에 있어서 styled-component를 사용하고자 했다. 그 이유는 애초에 리액트에서의 개발환경을 다 가져가고 싶기 때문이 가장 큰 것같다. 또 어떻게 구현됐을지 궁금하고 재밌기도 하고.. ※ 주의: 내 생각대로 구현하였으며 기존의 기능과 크게 다를 수 있음 먼저 styled-component의 동작방식을 보면 class를 랜덤한 값으로 지정해준다. 또 이 클래스를 css로 넣어줌으로써 스타일이 적용된다. 이를 활용해 js에서 css작성 클래스를 지정해 넣어보자. 먼저 styled-component를 적용해 렌더를 해보면 type에서 에러가 나는 것을 볼 수 있다. 이 에러가 발생하는 이유는 우리는 지금 createElement에서 type을 그대로..
빙액트 (5)
지난 번에 구현하였던 Vritual DOM에 이어 함수형 컴포넌트를 지원하기 위한 작업을 이어서 해보자. 7. 함수형 컴포넌트 함수형 컴포넌트에서는 두 가지 면에서 차이가 있는데 함수형 컴포넌트에서 만들어진 fiber는 DOM 노드가 없고 자식들을 props에 직접 가져오는 대신 함수를 실행하여 얻는다. 그래서 함수형 컴포넌트의 경우 따로 구현을 해줘야하기 때문에 조건 로직을 구현한다. function performUnitOfWork(fiber) { // 함수형 컴포넌트에서 만들어진 fiber는 DOM 노드가 없고 children을 props에서 직접 가져오는 대신 함수를 실행하여 얻는다. // 이를 판별하는 조건문을 만든다. const isFunctionComponent = fiber.type inst..
빙액트(4)
힘든 렌더링 과정은 얼추 끝난 것 같지만 브라우저가 렌더링 중에 개입한다면 미완성된 UI를 보게되는 이슈가 있었다. 이를 모든 작업이 끝난 다음에 전체 fiber 트리를 DOM에 커밋하는 방법으로 해결해보자. 5. 렌더와 커밋 먼저 모든 작업이 끝난 다음에 커밋을 할 대상인 루트 fiber를 추적해보자. 이를 work in progress 루트라는 뜻으로 wipRoot라고 부르겠다. let wipRoot = null; function render(element, container) { // 1. 렌더 실행 시 다음 단위 작업에 루트 fiber 설정 wipRoot = { dom: container, props: { children: [element], }, alternate: currentRoot, // ..
빙액트(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의 경험을 얻고자 했고 이를 이뤘다고 생각하지만 완전 만족하지는 못하겠다. 리액트를 리액트답게 코딩을 했냐 하면 그런 확신은 가지기 힘들었다. 프로젝트를 진행해오며 모르는 것 투성이였고 이렇게 개발하는 것이 맞나 라는 의문도 들때가 있었다. 리액트답게 코딩을 하는 것은 무엇일까 생각해보면 컴포넌트를 세밀하게 나누어 이곳저곳에서 가져다 쓸 수 ..