framework
[Next.js] 공유된 컴포넌트 사용하기
[Next.js] 공유된 컴포넌트 사용하기
2020.01.21이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. Next.js는 결국 페이지라는 것을 알 것입니다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 pages 디렉토리 안에 넣으면 페이지를 만들 수 있습니다. 그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있습니다. 내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있습니다. 무슨 자바스크립트 프레임워크를 쓰던지 이와 같은 기능을 기대할 것입니다. 이번 수업에서 우리는 공통된 헤터 컴포넌트를 만들고 여러 페이지에서 이를 사용할 것입니다. 마지막으로는 레아아웃 컴포넌트를 구현하고 이것이 어떻게 여러 페이지가 어떻게 보일 지를 정하는 데 도움을 줄 것..
[Next.js] 페이지 간 이동하기
[Next.js] 페이지 간 이동하기
2020.01.20이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. 이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다. export default function About(){ return( This is the about page ); }이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다. 다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 태그를 사용해왔습니다. 그러나 클라이언트 사이..
[Next.js] Next.js 시작하기
[Next.js] Next.js 시작하기
2020.01.15🤔 Next.js란? 단일 페이지의 자바스크립트 애플리케이션을 만드는 것이 꽤나 어려운 일이라는 것을 다들 알고 있을 것이다. 다행히도, 우리에게는 다양한 선택지의 프레임워크와 라이브러리가 있다. 그럼에도 불구하고 원하는 애플리케이션을 만들 수 있기까지는 상당한 러닝커브가 있다. 우리가 배워야 할 것들은 CSR(Client Side Rendering), 페이지 레이아웃, API 등이다. 그것만 있는가? 특정 페이지는 SSR(Server Side Rendering)이 필요할 수 있다. 따라서 우리는 더 간단하지만, 수정하기 쉬운 어떤 것이 필요하다. PHP를 이용했을 때, 웹 앱이 어떻게 만들어지는 지 생각해보자. 파일을 만들 것이고, PHP 코드를 작성하고, 간단하게 배포하면 된다. 라우팅에 대해서 그렇..
[Vue.js] 🖖 Vue.js 기초 지식
[Vue.js] 🖖 Vue.js 기초 지식
2019.08.22[Vue.JS 2.0] 소개 및 시작하기 Vue는 다른 프레임워크나 라이브러리에 비해 신생언어 가볍고, 복잡도가 낮아서 사용이 편하고 시작하기 쉽다. 이름처럼 View에만 초점을 두었기 때문에 다른 라이브러리나 프레임워크와 혼용하기 쉽다. 처음 시작하는 단계의 과정이 복잡하다. 한글화가 잘 되어있다. React보다 성능이 뛰어나다. React에서 JSX를 사용하는 것처럼 Vue도 비슷한 템플릿을 사용한다.(원한다면 JSX도 사용 가능하다.) 템플릿의 장점은 HTML파일에서 바로 사용할 수 있다는 점이다. SSR이 지원된다. HTML Hello, {{ name }} JS var app = new Vue({ el: '#app', data: { name: "geon" }, }); [Vue.JS 2.0] Dir..