전체 글79 나만의 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. 플러그인 세미나 1회 - 주니어 개발자 취업 / 이직 전략과 맹점 나는 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. 리액트(React)의 역사 모던 리액트 Deep Dive 들어가며 내용을 토대로 정리한 내용입니다.현재 Front-end 시장은 React를 사용하는 회사들이 대부분입니다. 물론 TypeScript와 Next.js 등과 함께 사용되고 있습니다. 입사 후 너무 당연한 듯 React를 사용해왔지만, React가 등장하게 된 배경과 발전 과정들을 정리하고가면 좋을 것 같아 정리해보았습니다.React의 등장React는 2011년 지금의 메타인 페이스북의 뉴스피드 페이지에서 처음 선보여진 라이브러리입니다. 최근에는 전자정부 표준 프레임워크의 프론트엔드 개발 도구로도 채택이 되었다고 하는데, 이는 안전성과 유지보수성을 중요시하는 정부의 개발도구로도 채택이 될 만큼 안정성이 확보되었고 많은 개발자 사이에서 널리 쓰이고 있다고 이해할 수 있습니.. 2024. 5. 7. Next.js + Typescript + tailwindcss + yarn berry + ESLint + Prettier 조합으로 프로젝트 세팅하기 이번에 개발하게 될 프로젝트는 제목과 같이 Next.js, Typescript, tailwindcss, yarn berry, ESLint, Prettier 조합으로 사용하여 구성했습니다. 1. 우선 Next.js에 CNA(create-next-app)을 통해 Project 생성하기$ npx create-next-app@latest그리고 나오는 리스트에는 위와 같이 체크해줬습니다!- TypeScript, ESLint, Tailwind CSS를 사용할 것으로 Yes를 선택해주었습니다.- 'src/' 디렉토리를 사용할 것이고, 이번에는 사용해보지 않았던 App Router 방식을 사용해보기로 하고 Yes를 선택해주었습니다.- alias를 customize 할 것인지에 대한 부분은 No를 선택해주었습니다. 설치.. 2024. 5. 2. 운영체제(OS)란? 운영체제(OS, Operating System)란?개발자가 아니더라도 한 번쯤은 들어 봤을 윈도우, 리눅스, MacOS, 안드로이드(AOS), iOS들이 바로 운영체제이다.운영체제도 하나의 프로그램이다. 참고로, 현존하는 프로그램 중 가장 규모가 큰 프로그램 중 하나다.하지만 다른 프로그램들과는 조금 다른 특별한 프로그램이다.운영체제도 프로그램이므로 다른 프로그램들과 마찬가지로 메모리에 적재되어야하는데, 운영체제의 경우에는 항상 컴퓨터가 부팅될 때 메모리 내 커널 영역이라는 공간에 따로 적재되어 실행되게 된다. 운영체제의 역할운영체제는 응응프로그램과 하드웨어 사이에서 응용 프로그램에 필요한 자원을 할당하고 응용 프로그램이 올바르게 실행되도록 관리하는 역할이다.운영체제는 사용자가 실행하는 응용 프로그램이.. 2024. 4. 29. 이전 1 2 3 4 5 ··· 9 다음
