분류 전체보기

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. JSX jsx는 javascript + xml의 줄임말이다. 이걸 쓰면 html마냥 쓸수가 있다. 파악해보기 근데 이걸 어떻게 html마냥쓸 수가 있지???라는 생각이 들었다. 이건 과연 내부적으로 어떻게 처리가 되는걸까? 바벨의 트랜스파일링을 확인해보자 링크에서 위 이미지를 직접확인할 수 있다. jsx라는 함수로 변환되는 것을 볼 수 있다. 좀더 복잡한 형태는 어떨까? 요렇게 변환되는 것을 볼 수 있다. jsx함수 파악하기 그럼 jsx함수는 어떻게 작동하는지를 보자 우선 jsx나 jsxs나 똑같이 jsxProd를 호출한다. 그리고 위의 import문을 보면 알 ..

멤버십 7주차를 마쳤다. 굉장히 바쁘고, 동시에 좀 뿌듯했던 한주였다. 저번 주의 해이해짐이 사라지고, 다시 열정을 찾아올 수 있었다. 배우고 느낀 것들 리액트 렌더링 방식 이해하기 기존의 코드는 innerHTML과 템플릿리터럴, 이벤트 기반으로 DOM요소를 직접적으로 조작하는 방식이었다. 여기서 관심사를 조금 더 분리하고, 컴포넌트를 보다 컴포넌트 형태로 관리하기 위해서 JSX를 도입하여 리액트의 렌더링을 구현해보는 형태로 변경했다. 이 과정에서 JSX가 어떻게 변환되는지, 리액트의 virtual DOM은 어떻게 부분렌더링에 기여하는지 등에 대한 이해도를 높힐 수 있었다. 수많은 리액트관련 글들, 그리고 책까지 많은 정보들을 접하고 개념을 이해했다고 생각했지만, 전혀 이해하고 있지 못했었나보다. 굉장히..

기존에 웹서버를 직접 구현해봤었는데, 이제는 그 원리를 알았으니, 이미 만들어진 좋은 도구를 사용해야할 때라고 생각해서 번들러를 도입하고자 했다. 그러던 중, 어떻게 번들링이 일어나는지 의문이 생겼고, 번들링 과정에 대해 찾아보게됐다. 번들러를 왜쓰고, 기능은 무엇이 있으며, 어떻게 번들링이 일어나는지 알아보자. 번들러 왜쓰는데 React, Angular, Vue 등 프레임워크가 등장하고, 점점 js파일이 많아지면서 하나의 페이지에서 사용되는 js파일들이 엄청나게 많아지기 시작했다.이러면 한 페이지가 로드될때 모든 js파일을 네트워크를 통해 받아와야 한다. 번들링 없이 ESM만을 사용해 만든 프로젝트의 경우, 이런식으로 모든 js파일을 http요청을 통해 받아오는 것을 확인할 수 있다. 이 모든 파일을 ..

이전 게시글 (https://0422.tistory.com/312) 을 통해 나름대로 웹서버를 구현해보았다. 그렇다면 진짜 사용되는 모듈들은 어떻게 구현되어있는지 확인해보자. webpack-dev-server 이녀석은 서버를 어떻게 띄우고 있을까? 이건 examples에 있는 코드인데, 확인해보면 lib/Server에서 Server Class를 가져와서 server인스턴스를 만든 후 server.start()를 통해 시작시키고 있는 것을 확인할 수 었다. 그럼 Server Class를 뜯어보자. https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js 여기서 확인해보자. 확인해볼만한 부분은 1번과 2번일 것이다. 일단 initiali..

멤버십 6주차를 마쳤다. 왜 5주차가 없냐고? 1주 명절겸 인터미션이라 잘 쉬고 왔다. 배우고 느낀것들 페어코딩 소프트웨어 장인, 함께 자라기 등 다양한 소프트웨어 도서들에서 강조하던 페어코딩을 이번 기회를 통해 진행해보았다. 원래는 비대면으로 진행하려했지만, 페어가 마침 서울에 살고, 이번 기회가 아니면 또 언제 해보겠어~ 라는 생각에 만나서 진행해보기로 했다. 진행방식은 네비게이터-드라이버 형태로, 30분씩 코딩을 하고 쉬었다가 역할을 바꿔서 수행했다. 우리는 크게 테일윈드 도입과 웹서버를 직접 띄워보는 두가지 도전을 했는데, 페어코딩으로 진행하니 새로운 것을 도입하고자할때의 부담감이 덜했고, 좀 더 적극적으로 도전할 수 있었다. 아마 이번 주차를 페어코딩으로 진행하지 않았더라면 나는 아마 테일윈드를..

프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static 설정만 하면 전부 설정이 완료된다. 그런게 나는 지금까지 이런 도구를 사용하면서 과연 이게 어떻게 동작하는가?에 대해서는 한번도 생각해본 적이 없었다. 이번 기회를 통해 제대로 파악해보자. createServer https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 J..

멤버십 4주차를 마쳤다. 학습 스프린트가 마무리되었다. 챌린지와 비교해서 4주가 정말 빠르게 갔던 것 같다. 하나의 프로젝트가 마무리되었으니 어떤 것들을 시도해보았고, 배우고 느꼈는지 써볼 생각이다. 시도해본 것들사실 처음 시도해본 것들 투성이다. 사실 클라이언트 코드를 바닐라 코드로 이렇게 제대로 구조를 잡아본 것조차 처음이다. 하지만, 다른 프로젝트와 다르게 스프린트는 학습을 목표로 한다는 점에서달랐다. 덕분에 스프린트 과정을 하나의 샌드박스로 인식하고, 많은 새로운 시도들을 해볼 수 있었다. 프론트엔드컴포넌트간 관리하기일단 어떻게 컴포넌트를 만들지부터 생각했다. 더 깔끔한 방식을 찾기위해서 처음에는 클래스로 해보고, 이후에는 싹다 갈아엎어서 함수형으로 변경해보기도 했다. 이후에는 어떻게 컴포넌트의 ..

나는 등수를 매기는 것에 익숙하다. 초등학교에 입학한 이래로 점수와 등수라는 압박은 항상 내 곁에 있었던 것 같다. 누구는 몇 등을 했니, 누구는 몇 점이니 이런 대화들이 익숙했고, 이런 이야기들은 대학교를 다니고 있는 지금도 마찬가지다. 등수는 그대로고 점수를 학점으로만 바꿔보면 정말 변한 것이 없다. 20년이 다되가도록 이렇게 살아가고 있다보니 이런 것들은 어느새 무의식의 영역에 자리잡았다. 그래서 어느 순간부터 뭘 하든 무의식적으로 등수를 매겨왔던 것 같다. 그리고 동시에 등수가 나의 목표이기도 했다. 누구보단 잘해야지 얘보단 내가 잘하지라는 생각을 하기도 했고, 얘가 나보다 잘한다고? 라는 생각을 갖기도 했었던 것 같다. 하지만 최근들어, 여러가지 경험을 하면서 이런 생각들이 잘못되었음을 찬찬히 ..

1. https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies 2. https://seob.dev/posts/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%BF%A0%ED%82%A4%EC%99%80-SameSite-%EC%86%8D%EC%84%B1/ HTTP 쿠키 - HTTP | MDN HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이 developer.mozilla.org 아래 글은 위 사이트들의 글을 읽고 이해한 바로 작성되었으며, 사실과 다를 수 있습니다. 사실과 다른 부분이 있으면 댓글로..

멤버십 3주차를 마쳤다. 배우고 느낀 것들 코드는 썩는다. 좀 긴 기간으로 스프린트를 진행하다보니 내 코드가 썩고있다는걸 실시간으로 느낄 수 있었다. 작성할땐 잘 읽히던게, 다음날이 되면 읽히지 않는... 굉장한 현상을 겪었다. 결합도가 가면 갈수록 높아지는 느낌을 받았다. 계속해서 분리하려고 했지만 정말 쉽지않았던 것 같다. 그래서 리팩터링을 읽으면서 프로젝트를 진행했다...만 아직 얼마 못읽어서 실질적으로 뭔가 개선해본건없다. 그래도 나름대로 다른 활동 멘토링이나 여러 곳에서 질문을 해본 결과 나름대로의 결론을 낼 수 있었다. 고건 바로... 테스트코드를 미리, 기능 구현 중간중간에 작성하기 왜 이런 결론을 내리게되었느냐... 기본적으로 유닛테스트를 작성하게되는데, 유닛테스트는 단일한 함수를 테스트하..