분류 전체보기98 나만의 React 만들기(Build your own react) - STEP 3 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 3 - Concurrent Mode이전 step까지의 코드에서 리팩터링이 필요한 부분이 있다. 그 부분을 먼저 수정하고 진행해 보자.바로 render function 내부에 재귀로 호출하는 부분이다.element.props.children.forEach((child) => render(child, dom)); [왜 문제가 될까?🧐]렌더링을 시작하면 완벽한 element tree를 렌더링 할 때까지 멈추지 않는다. element tree가 크면 메인 스레드를 오랫동안 차단할 수 있다. 그러면 브라우저가 사용자 입력 처리나, 애니메이션을 매끄럽게 유지하는 것과 같은 우선순위가 높은 작업을 .. 2024. 9. 5. 나만의 React 만들기(Build your own react) - STEP 2 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 2 - The render functionSTEP1 코드에 이어 이제 render function을 만들어보자.ReactDOM.render 버전을 Didact.render로 만들어보는 것이 이번 step의 목표다.function createElement(type, props, ...children) { return { type, props: { ...props, children: children.map((child) => typeof child === "object" ? child : createTextElement(child) ), .. 2024. 9. 4. 나만의 React 만들기(Build your own react) - STEP 1 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.STEP 1 - The createElement Function이제는 React 코드를 우리만의 React인 Didact로 대체해보자.우선 createElement function을 만들어보는 것이 이번 step의 목표다. JSX를 JS로 변환하는 createElement 함수를 만들어보자.const element = ( bar )const container = document.getElementById("root")ReactDOM.render(element, container) 우선 STEP 0을 다시 되짚어보면,위 코드 element JSX가 babel에 의해 변환이 되면 아.. 2024. 9. 4. 나만의 React 만들기(Build your own react) - STEP 0 https://pomb.us/build-your-own-react/ 을 기반으로 학습 내용을 정리한 글입니다.React가 제공해 주는 기능들을 당연한 듯 사용해 왔지만,React 내부가 어떻게 동작하는지 궁금해본 적 없이 당연한 듯 사용하기를 n년...그리고 모던 React Deep Dive를 사고 앞 챕터 부분을 분명 읽었는데 역시 빠르게 휘발되어 버렸다... build-your-own-react 에서 알려주는 대로 차근차근 따라가며 확실히 이해하는 과정 기록을 위해 블로그를 작성한다.왜냐면 사실 한번 쭉 따라 해봤는데, 완벽히 이해했나요? 아니요🙂↔️... 상태이기 때문이다.다시 차근차근.. 이제는 알고쓰자 React! 실습을 하며 같이 진행해야 하기 때문에 해당 문서에서 지원하는 리액트 버전을 .. 2024. 9. 3. 플러그인 세미나 - 주니어 개발자 취업 / 이직 전략과 맹점 나는 F-lab 멘토링을 진행하고 있다. k사 출신의 멘토님과 지금까지 3번을 진행했고, 멘토링은 한 주에 한 번 한 시간 동안 진행된다. 지난주 금요일부터 플러그인이라고 F-lab에서 주관하는 첫번째 세미나가 진행되었다 :)앞으로 매주 1번 진행 예정이고 유익한 인사이트를 제공하며 소통이 목적이다.지식의 선순환, 경험 공유를 통한 좋은 마인드셋 함양, 주니어 개발의 고민 해소, 성장과 커뮤니티의 장 형성을 목표로 진행된다.단, 이번 세미나는 F-lab 멘티와 수료생을 위한 내부 세미나로 진행되었다.안내를 보니 추후에는 공개 세미나도 진행될 예정이라고 한다...! 주니어 개발자 취업 / 이직 전략과 맹점이라는 주제로 Elkein 멘토님(NHN, 넷마블, 크래프톤 출신의 10+년차)이 진행하셨는데, 백엔드.. 2024. 9. 3. [Error] Page "src/app/~.page.tsx" has an invalid "default" export 문제 원인현재 프로젝트 진행 중에 서버 API로 요청을 받아 처리하지 않기 때문에,하드코딩으로 데이터를 임시로 넣어 아래와 같이 처리하고 있었습니다!interface Event { imageSrc: string link: string}interface EventPageProps { list: Event[]}const EventTempList = [ { imageSrc: '/images/sample.jpg', link: '/' },]export default function EventPage({ list = EventTempList }: EventPageProps) { return (...)} dev 환경에서 구동했을때는 전혀 오류가 나지 않고 잘 화면이 나왔는데,docker로 build되는 과정.. 2024. 5. 10. 이전 1 ··· 3 4 5 6 7 8 9 ··· 17 다음
