본문 바로가기

분류 전체보기97

나만의 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.