DataTable - JS 데이터 테이블 표현

Data를 테이블 표현하는 것은 모든 데이터 서비스의 기본이다. 매번 이 부분을 구현하고 검색하고, 페이지네이션에 Export 기능까지 따로따로 하는데 이 모든것이 이미 구현이 되어 있다. Datatable.net 꼭 이 라이브러리를 활용하자. 여기서 정리한 모든 내용은 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) DataTable 일단은 한번 보면 안다. 아래 예제 사이트로 가서 봐라 데이터를 표현하는 테이블은 이걸 써야 한다. https://datatables.net/examples/ajax/objects.html 간단하게 Vue.js 를 이용하여 구현한 코드를 보자. Django 에서 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 15.
• textsms

Vue.JS 클릭 이벤트 표기 - @click v-on:click

Vue.js 에서 DOM 에 클릭 이벤트 처리를 하고 싶다면 이벤트를 정의하면 된다. 그 정의 방법은 "v-on:eventname" 이런식으로 정의하면 된다. - 현재 듣고 있는 장고 강의에 소스에 포함된 내용을 공부할 겸 추려본다 - Django 실전 프로젝트 1 - URL Shortener 서비스 ( 패스트캠퍼스 ) 공식 사이트에서 예제를 가져오면, https://vuejs.org/v2/guide/events.html We can use the v-on directive to listen to DOM events and run some JavaScript when they’re triggered. For example: Add 1 The button above has been clicked {{ co..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 12.
• textsms

자바스크립트 함수 파라메터 표현법 변경 이유

함수 선언 부의 변천 - 선언부만 봐도 먼지 확실하게 알 수 있도록 변천되어 왔다. 복잡해 보이지만, 더 명료해 지는 스펙이다. 암묵적인 arguments 가 ...args 로 변경 초기값을 줄 수 있고, Object 를 넣어 줄 수 있다 {...} 형태로 그냥 짧은 정리 팁~

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 9.
• textsms

Static site generator - SSG 정적 사이트 생성기

렌더링의 마지막 기법으로 SSG 정적 사이트 생성기에 대한 내용을 알아보자. 이 부분은 머 지킬이니 강의에서 언급되는 Gastby 등 여러가지 정적 사이트 생성기 엔진을 알고 있어 어려운 개념은 아니다. 아주 익숙한다. 빌드 당시에 페이지를 만들어 아예 정적 html 페이지 결과를 그냥 올려두고 가져가는 형태이니 Runtime 이라기 보다는 Compile time 빌드라고 생각하면 쉽다. 강의 노트 겸 판서 결과 스샷은 아래를 참고하고, CDN 서비스 등에는 이 방법이 가장 최적화된 방법으로 생각된다. 물론 실행시에 먼가 데이터를 가져오거나 변경해야 한다면 이 방식은 사용할 수 없다. 특정 고정된 콘텐츠의 경우에는 이 방법이 가장 효율적인 방법일 것이다. Gastby 말고 SSR에서 언급한 Next.JS..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

서버사이드 렌더링 SSR

이제 서버사이드 렌더링 SSR 에 대해서 간략하게 들은 것을 정리해보자 - from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 이것도 용어에 적힌 대로 이해하면 된다. 서버쪽에서 렌더링을 해서 html을 내려 보내주므로 클라이언트에서 리소스를 할당해서 렌더링을 할 필요가 없다는 것. 일반적으로 서버의 성능이 아주 빠르므로, 렌더링을 강한쪽에서 해주고 결과만 내려줘서 뿌려주는 역할을 하게 해서 일을 분산 시킬 수 있다는 것이다. 여기에 쓰이는 기술로 소개한 것이 Next.JS 자세한 내용은 더 알아보도록 하고, 이것 말고도 서버사이드에서 렌더링 할 수 있도록 하는 기법으로 - hydrate - React DOM - serverside rendering keyword 가 있다나 머라나 (왜..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

클라이언트 사이드 렌더링 CSR

이전 강의에 연속해서 from 조은의 프론트엔드 실무 가이드 : 요구사항 분석과 적정 기술 클라이언트 사이드 렌더링 CSR 에 관한 내용이다. 브라우저 렌더링 101을 통해 전체적인 느낌을 알고 세부적으로 CSR, SSR, Static file 이렇게 설명하는 것 같다. 내용의 말미에 나오는 칠판을 아래에 공부용으로 스샷 강조하는 내용을 간략하게 정리해 보면, 브라우저의 JS (JavaScript) 엔진들이 각자의 Component 를 만들고 JSX 등을 활용해서 바로 DOM을 정의해서 구현하는 것, 이것이 CSR, 클라이언트 사이드 렌더링이라고 말 할 수 있다. 특징적인 내용은 실시간성을 원하는 경우, 자연스러운 페이지 이동을 원하는 경우 혹은 페이지의 일부만 변경되어 자연스런운 렌더링이 필요한 경우 ..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms

브라우저 렌더링 101 - from 조은의 프론트엔드 실무 가이드

크롬 기준의 브라우저 렌더링 101 강의는 fastcampus 의 동영상 강의의 화면을 일부 캡쳐해서 정리해둔다. 전체적인 개요 같은 내용이다. 먼저 모르는 용어 Render Tree DOM 과 CSS 가 적용된 결과물 정도로 이해하고 넘어간다. 이 Render Tree 가 표현되기 위해 (렌더링을 위해), 아래와 같은 3단계의 일이 벌어진다고 알면 된다. 1. Layout 2. Paint 3. Render 라는 과정이 있다는 것을 기억하라는 강사분의 말씀. Layout 부분이 다시 불리게 되면 좀 느려질 가능성이 있으니 피해서 설계하는 것이 좋다. 대충 이해한 바로 써보면, (틀릴수도 있다.) 예제로는 애니메이션을 구현할 때 Position 을 변경할 수 있는데 이 부분은 layout을 변경하는 기술이..

• format_list_bulleted Tech/프론트엔드
• · 2021. 11. 8.
• textsms