Web

Next.js - _document와 _app에 대하여

Next.js에는 두 가지 중요한 기본 페이지가 있습니다. 뱌로 _document와 _app입니다. _document와 _app은 페이지에 공통적으로 적용될 내용을 작성하곤 하는데, 둘이 정확히 어떻게 다른지와 어떤 내용을 작성해야 하는지에 대해 정리해 보겠습니다. App페이지 _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃의 역할을 합니다. 규칙 1. Component 속성값은 서버에 요청한 페이지가 됩니다. (Ex http://localhost:3000/home에 접속하면, Component는 home컴포넌트를 가리킵니다.) 2. pageProps는 getInitialProps, getStaticProps, getServerSideProps중 하나를..

Advanced Web Programming - 멀티미디어 태그

임베디드 콘텐츠 태그 : 이미지 파일 삽입 : 그래픽 그리기 : 오디오 파일 삽입 : 동영상 파일 삽입 : 미디어 요소 트랙 삽입 : 미디어 소스 삽입 : 개체 삽입 이중 가장 중요하다고 생각되는 몇가지 태그만 적겠습니다. 이미지에 제목 추가하기 [그림1] Test 위와 같이 크기하고 alt, title, 그리고 caption까지 넣을 수 있습니다. 그리고 오디오 파일을 넣고 싶으면 를 멀티미디어를 넣고 싶으면 를 external content와 같은 같은 개체를 삽입하고 싶다면 를 삽입하면 됩니다. ( object.swf, myvideo.mov... ) 이런 말이 있기도 합니다. 또한 현대의 최근 브라우저들은 브라우저 플러그인들을 제거하기 시작했습니다. 또한 이에 의존하는 는 일반적이게 사용되지 않고 ..

Advanced Web Programming - HTML 기본태그

여기 Advanced Web Programming에는 내가 고급웹프로그래밍 시간에 배운 것들을 짧게 정리하고 실습해본 파일들을 공유하고자 한다. 특수문자 처리 # 풀스택 개발자를 위한 웹 프로그래밍 # HTML5 & CSS3 & JavaScript & JQuery © 한빛아카데미 ® 2017 특수 문자 처리 태그 또한 입력한 그대로 화면에 표시하고 싶다면 pre태그를 쓰면 된다. ... Text is a pre element is displayed in a fixed-width font. and it preserves boths spaces and line breaks ... 텍스트 텍스트 관련 태그에는 아래와 같이 존재한다. : 볼드체로 표시 :..

Next.js - Advanced Custom app + next-redux-wrapper를 활용한 data pre-rendering

이번에는 최상위 컴포넌트에서 데이터를 랜더링 시키고 하위 컴포넌트에서 이를 재사용할 수 없을까에 대한 궁긍즘으로 조사를 시작했습니다. 먼저 참교한 공식문서를 알려드리겠습니다. https://github.com/kirill-konshin/next-redux-wrapper GitHub - kirill-konshin/next-redux-wrapper: Redux wrapper for Next.js Redux wrapper for Next.js. Contribute to kirill-konshin/next-redux-wrapper development by creating an account on GitHub. github.com 기본적으로 next-redux-wrapper를 사용하였습니다. 코드 // page..