분류 전체보기 (62) 썸네일형 리스트형 Turborepo를 사용하여 모노레포 구성하기: Storybook 포함 안녕하세요. 이번 글에서는 프론트엔드 개발 환경에 모노레포를 도입하는 방법을 소개 하도록 하겠습니다 모노레포는 하나의 코드베이스에서 여러 애플리케이션과 패키지를 효율적으로 관리할 수 있는 구조입니다. 특히 여러 앱과 패키지를 한 곳에서 관리할 때 Turborepo는 빠른 빌드, 의존성 관리, 최적화된 캐싱을 통해 생산성을 높여줍니다. 이 글에서는 app과 package 폴더로 구성된 모노레포 프로젝트를 단계별로 구성하고, 각 폴더의 역할을 정의하는 과정을 안내합니다.프로젝트 구성도프로젝트는 다음과 같이 구성됩니다. project-root/├── apps/│ ├── app1/│ ├── app2/│ └── storybook/└── packages/ ├── ui/ ├── apiclient.. 4년차 비전공자 개발자의 생존기 (1) 어느덧 나도 4년차 개발자가 되었다.정확히는 돈을 받고 일한지는 만 3년이 조금 넘었고, 무급으로 창업팀의 일원으로 개발을 시작했던 경험까지 하면 3년 7개월 정도 되었다. 1. 평범한 대학생에서 창업팀의 서버 개발자로 때는 바야흐로 2020년 산업공학을 전공하던 내가 개발자를 꿈꾸게 되었다. 이유는 당시 주식시장의 엄청난 상승으로 인해서 돈은 주식으로 벌고 일은 재미를 위해서 하자!! 라는 건방진 생각이 뇌를 지배 하였고, 나는 개발자가 되기 위한 여러 방법을 시도하게 되었다. 당시 대학 3학년이고 비전공자 였던 나를 뽑아줄 회사는 전무 하였기에, 대학생 창업팀 혹은 개발 동아리에 들어 가야겠다고 생각을 했었는데 대학생 커뮤니티 에브리타임 앱을 통해서 타 학교 창업팀에 조인 하게 되었다.이 창업팀에서.. 리액트 따라만들기 3. 성능 향상 및 fibers 이 글은 이 아티클을 따라 실습을 진행하며 작성한 글입니다. 이 전편의 내용은 링크를 통해 확인 해주세요! 전편에서는 리액트의 렌더 함수를 직접 구현하여 리액트를 사용하지 않고, 컴포넌트를 렌더링 하는 것 까지 구현을 했습니다. 전편에서 만든 yuact는 렌더링 재귀적으로 진행 하고 있는데, 커다란 돔을 한번에 렌더링 하게 될 경우 메인스레드를 너무 오래 차지하기 때문에, 이를 조금 수정해야 합니다. 따라서, 작업을 작은 단위로 나누고 각 작업이 끝난 후, 다른 할 일이 있다면 렌더링을 중단해야 합니다. 브라우저의 requestIdleCallback을 사용하면 브라우저가 유휴 상태 일때 콜백을 실행 할 수 있다. let nextUnitOfWork = null; function workLoop(deadli.. 웹 페이지 최적화를 위해 알아야 할 것들을 공부한 것. 참고: https://12bme.tistory.com/140 리액트 따라 만들기를 하다가 동시성의 원리가 궁금해져서 따로 알아본 것들에 대하여 의식의 흐름대로 정리합니다. 맨날 이런거 저런거 찾아보다가 정작 원래 하려고 했던 것들의 진행이 늦어집니다 ㅠ 참고한 블로그의 글은 개발을 시작하고 나서 읽은 기술과 관련된 글 중에 최고네요,, 정말 하나같이 몰랐던 내용들 ( 아무도 알려주지 않았던)이 가득합니다.. 여러번 읽어도 좋을 것 같다. 브라우저의 렌더링 과정 돔 요소와 스타일에 기반을 둔 레이아웃 계산 계산 요소의 화면 표현 (페인팅) 먼저 html 테그들을 파싱해서 돔트리를 구성함 css를 한데 모아 cssom 이라는 트리 구조의 스타일 구조체를 생성함 이 둘을 한데 모아 레이아웃을 계산 => 렌더 .. 리액트 따라만들기 2편. createElement 함수 구현하기 전편: https://kiwitrip.tistory.com/entry/리액트-따라-만들기-1편 github: https://github.com/leeyh-kor/make_react TODO: react의 create element 함수를 구현한다. createTextElement 함수를 구현한다. 두 함수를 오브젝트로 묶어서 사용 가능하게 구현한다. 오직 show만 가능한 render 함수 구현 (업데이트 및 삭제는 나중에 구현) createElement함수 createElement 함수는 element 트리를 반환한다. element 의 자식 요소들이 text(string or number)일 경우 textElement를 반환하고, 아닐 경우 오브젝트를 그대로 반환한다. function createEl.. 리액트 따라 만들기 1편. 이 글은 https://pomb.us/build-your-own-react/ 를 참고하여 리액트를 구현하는 과정을 담은 글입니다. 깃헙 주소: https://github.com/leeyh-kor/make_react 이 프로젝트를 시작한 계기 리액트를 더 잘 다루는 방법을 고민하던 중에 우아한 테크 코스를 진행했던 지인이 우테코에서는 "java로 스프링 프레임워크를 만드는 과제를 진행한다"고 했던 것 이 기억이 났다. 곰곰이 생각 해 보니, 직접 spring 을 만들어 보면 spring의 구조와 철학을 자연스레 익히면서 더 깊이있게 이해하라는 취지의 과제인 것 같다. 나는 react를 더 깊이 이해하기 위해서 같은 방법을 사용하고자 한다. todo: create element 없이 element 정의하기 .. SSG! Static Site Generator 한번 생성되면 바뀌지 않는 페이지(정적 html)들을 미리 빌드 단에서 생성 해두고 사용하는 서버 사이드 렌더링의 한 방식이다. next js팀에서 권장하는 방식이기도 하다. 장점 빌드 단에서 미리 만들어 두기 때문에 굉장히 빠르다. (기본적인 ssr은 요청이 들어오면 페이지를 만듬) + ssr의 장점을 모두 가져감 단점 컨텐츠가 동적으로 바뀌는 페이지에서는 사용이 어렵다. 동적 페이지 (url에 따라서 동적으로 바뀌는)에는 적용이 어렵다. ssr! 작동 클라이언트의 페이지 접속 요청 (request) 서버에서 리소스 확인 후 서버측 스크립트 실행, html 컨텐츠 준비 (프론트 서버 -> 백엔드 서버로 필요한 데이터 요청 작업 및 페인팅) 브라우저는 서버에서 완성된 html( 인터렉티브 하지는 않지만, 컨텐츠는 다 보이는 상태 )을 다운로드 한다. 브라우저는 javascript를 다운로드 하고 실행한다. (이 때 react 같은 웹 프레임워크( 리액트는 라이브러리) 들이 실행되면서 페이지가 interactive하게 바뀐다. 사용자가 페이지를 이동할 경우 위 동작 반복! 장점 csr보다 클라이언트의 네트워크 환경에 영향을 덜 받음. 서버에서 완성된 페이지를 내려주기 때문에, 네트워크 요청 횟수가 적기 때문에! FP(First Painting) 및 F.. 이전 1 2 3 4 ··· 8 다음
