분류 전체보기 (25) 썸네일형 리스트형 Next.js 기본 Next.js SSR 개발을 위한 React 프레임워크 장점 프론트엔드에서 SSR 개발 가능 SSR 개발로 클라이언트 렌더링 속도 상승, 검색 엔진 최적화 가능 설치 npm install next react react-dom # or yarn add next react react-dom 명령어 next dev - 개발자 모드 실행 핫 로드, 오류 보고 등 개발에 최적화된 모드 next build - 애플리케이션 빌드 next start - 빌드된 애플리케이션으로 실행 MPA(멀티 페이지 어플리케이션)/SPA(싱글 페이지 어플리케이션) MPA(Multiple Page Application: 여러개의 페이지로 이루어진 앱) 페이지 마다 해당하는 문서(HTML)이 있음 페이지 이동 시 해당하는 문서를 서버에서 전송함 [기존의 웹 서비스 방식?] SPA(Single Page Application: 하나의 페이지로 이루어진 앱) 페이지의 이동없이 하나의 페이지에서 내용이 변경되며 보여주는 웹 페이지 MPA의 장점 러닝커브가 비교적 낮음 SPA의 장점 서버에 문서 전체를 요청하지 않아 효율적인 데이터 처리가 됨 문서 전체를 렌더링하지 않아 렌더링이 비교적 빠름 결론 되도록 SPA를 사용하자 SSR(서버 사이드 렌더링)/CSR(클라이언트 사이드 렌더링) Rendering(렌더링) 웹페이지를 표시하는 행위 SSR(Server Side Rendering: 서버에서 렌더링) 서버에서 렌더링하여 클라이언트에게 전달 CSR(Client Side Rendering: 클라이언트에서 렌더링) 서버에서 문서(HTML, JS, CSS 등)를 받아 클라이언트에서 렌더링 SSR 장점 렌더링 속도 상승 SEO(Search Engine Optimization: 검색 엔진 최적화) 가능 CSR 장점 서버 시스템에 부담이 적음 결론 정적인 컨텐츠 표시 시 SSR 역동적인 컨텐츠 표시 시 CSR 두가지를 적합한 곳에 사용 build tool gulp 1. gulp란 코드에서 반복적이고 자주 사용되는 일은 자동화해주는 빌드 툴생산성에 큰 도움이 되므로 프로젝트 진행시 많이 사용 2. gulp 설치 1 node.js를 설치2 터미널(cmd) 실행3Window npm install -g npm npm 최신 버전으로 업그레이드 npm install -g gulp-cli vue-cli 설치macOS sudo npm install -g npm npm 최신 버전으로 업그레이드 sudo npm install -g gulp-cli vue-cli 설치4 gulp init package.json 생성5 npm install --save-dev gulp gulp 모듈 설치6 npm install --save-dev gulp-(플러그인이름) 플러그인 설치 3. gulpfi.. RESTFul API 1. RESTful REST는 제약을 두지 않고 구체적인 가이드라인이 없다.RESTful이라는 개념을 통해 가이드라인이 제시된다.여러 개발자들이 비공식적으로 의견을 제시한 것들로 명확한 정의는 없다. 2. REST(Representational State Transfer) 네트워크 상에 서버와 클라이언트가 통신하는 방식 #REST를 정의하기 위한 조건1) '클라이언트-서버' 구조2) 무상태성3) 캐시 처리 가능4) 계층화5) Code on demand6) 인터페이스 일관성 3. URI(Uniform Resource Identifier) 인터넷의 리소스를 식별하기 위해서 만들어진 것을 의미 1) 규칙소문자를 사용하이픈(-, hyphen)을 사용확장자를 사용금지 #/user, /member, /group 등.. 이벤트 버블링, 캡처링, 위임의 정의 정리 1) 이벤트 버블링 특정 요소에서 이벤트가 발생했을 때 상위 요소들로 전달되어 가는 이벤트 전파 방식 2) 이벤트 캡처 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식 3) 이벤트 위임 하위 요소에 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식 # 특정 요소에 이벤트 리스너를 추가하지 않고 한 부모에 추가, 이 이벤트 리스너는 버블링 된 이벤트를 분석해 자식 요소 찾는다. 비동기 ajax 1. 동기, 비동기란 1) 동기적 통신(synchronous) 순차적으로 통신작업은 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기 2) 비동기적(asynchronous) 순차적으로 통신하지 않어 좀 더 유연하게 통신작업이 종료되지 않은 상태라도 대기하지 않고 다음 작업을 실행 2. Ajax(Asynchronous Javascript And XML) 비동기적으로 웹페이지에서 일부 정보가 달라졌을때 리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신해주는 기술 3. JSON(JavaScript Object Notation) JavaScript에서 객체를 만들 때 사용하는 표현식을 의미, 사람도 이해하기 쉽고 기계도 이해하기 쉬우면서 데이터의 용량이 작음 #Ajax 요청에 대한 서버.. 크롬 개발자도구 디버깅 1. 버그란 컴퓨터의 프로그램이나 시스템의 오류 2. 디버그(디버깅) 디버그은 컴퓨터 프로그램의 논리적인 오류를 찾아내는 테스트 과정을 뜻. 3. 크롬 개발자 도구 크롬 브라우저에 내장된 개발 관련 도구 디버깅뿐 아니라 모바일 기기 시뮬레이터, 네트워크 분석 등 다양한 일을 함 #실행법 마우스 오른쪽 클릭 -> 검사 #주 사용 탭 Elements DOM을 확인하고 CSS를 수정 Console 로그를 확인하고 스크립트 명령어를 입력하는 탭 Sources 자바스크립트 디버깅의 가장 핵심적인 영역 4. 디버깅 법 #예제 코드1234567891011121314151617181920212223242526272829303132333435363738394041 test ul { width: 200px; height:.. 이전 1 2 3 4 다음
