TIL5 Next.js 기초편: 리액트 시작하기 프로젝트에서 React를 사용하려면 unpkg.com 이라는 외부 웹사이트에서 2개의 React 스크립트를 로드하면 됩니다. react 는 핵심 React 라이브러리입니다. react-dom 은 DOM과 함께 React를 사용할 수 있도록 하는 DOM 관련 메서드를 제공합니다. 일반 JavsScript로 DOM을 직접 조작하는 대신 react-dom의 ReactDOM.render() 메소드를 사용해서 React에 #app 요소 내에서 태그를 렌더링 하도록 지시할 수 있다. 하지만 해당 코드로 실행하면 이런 에러를 만난다. JSX가 뭔가요? JSX는 친숙한 HTML과 유사한 구문으로 UI를 설명할 수 있는 자바스크립트용 구문 확장이다. JSX의 좋은 점은 다음 세 가지 규칙을 제외하고는 HTML 및 Jav.. 2022. 5. 22. NEXT.JS 기초편: 명령형 VS 선언적 프로그래밍 위의 코드는 사용자 인터페이스를 업데이트 하는 방법에 대한 단계를 작성한 명령형 프로그래밍의 좋은 예이다. 그러나 사용자 인터페이스를 구축할 때 개발 프로세스의 속도를 높일 수 있기 때문에 선언적 접근 방식이 선호되는 경우가 많다. DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용을 선언할 수 있게하면 더 좋을 것이다. (어떻게?) 야 컴퓨터. 나 뭐 해줘! 즉, 명령형 프로그래밍은 요리사에게 피자를 만드는 방법에 대한 단계별 지침을 제공하는 것과 같다. 선언적 프로그래밍은 피자를 만드는 필요한 단계를 고려하지 않고 피자를 주문하는 것과 같다. 개발자가 사용자 인터페이스를 빌드하는데 도움이 되는 널리 사용되는 선언적 라이브러리는 리액트다. React: 선언적 UI 라이브러리 개발자는 사용자 인터페이.. 2022. 5. 22. NEXT.JS 기초편: HTML vs the DOM 브라우저 개발자 도구 내부의 DOM 요소를 보면 DOM에 요소가 포함되어 있음을 알 수 있다. 페이지의 DOM은 소스 코드로 사용자가 만든 원본 HTML 파일과 다르다는 것을 알 수 있다. HTML은 초기 페이지 콘텐츠를 나타내는 반면 DOM은 작성한 JavaScript 코드에 의해 변경된 업데이트된 페이지 콘텐츠를 나타내기 때문이다. 일반 JavaScript로 DOM을 업데이트하는 것은 매우 강력하지만 장황할 수 있다. 일부 텍스트와 함께 요소를 추가하기 위해 이 모든 코드를 작성했으니 말이다. 앱이나 팀의 규모가 커지면 이런식으로 구축한다는 것은 점점 더 어려워질 수 있다. 이런 접근 방식을 사용하면 개발자는 컴퓨터가 작업을 수행하는 방법을 코드로 알려주는 것에 더 많은 시간은 할애한다. 그렇다면 우.. 2022. 5. 22. [TIL] 모노레포 개념편 모노레포 정의 모노레포란 버전 관리 시스템에서 두 개 이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략 전략이다. 전략 모노레포 등장 배경 모놀리식 애플리케이션의 한계 때문에 나왔다. 모놀리식이란 모듈화 없이 설계된 소프트웨어 애플리케이션을 말한다. 모놀리식 구조의 한계는 모듈화를 통해 해결이 가능한데 이것이 멀티레포. 멀티레포 구조 = 폴리레포 구조 동일한 말이다. 분리된 각 모듈은 멀티레포 구조에서 고유한 저장소가 있는 독자적인 프로젝트가 되는데 각 프로젝트는 자율성이 높고 독립적인 개발, 린트, 테스트, 빌드, 게시, 배포 파이프라인이 존재한다. 이러한 멀티레포의 문제점은 번거로운 프로젝트 생성임. 프로젝트를 새로 진행할 때마다 매번 똑같은 비슷한 코드 뿐만 아니라 다음과 같은 .. 2022. 5. 18. 이전 1 2 다음
