잡다하다

특징과 기능에 대한 정리를 마쳤으니 이제 프로젝트를 생성해 보겠다. NEXT.JS 특징과 기능 [NEXT.JS] #1 특징과 기능 회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다. NEXT.JS를 통해 FRONTEND 개발을 할 거기 때문에 학습을 해두라고 들었고, 이에 따라 차근차근 학습하기 위해 글을 작성하게 되었다. 참조 https many.tistory.com create-next-app 방장은 MAC을 사용하고 있고, 다른 프로젝트들이 있어 node가 여러 버전이 설치되어 있다. 이번에 node 18버전을 설치했고, 해당 버전으로 변경 후 next.js를 설치하였다. 추가 라이브러리는 우선 모두 설치하지 않았다.(No 선택) npx create-next-app ✔ What is you..

회사에서 진행하는 프로젝트에서 REACT.JS가 선택되었다. NEXT.JS를 통해 FRONTEND 개발을 할 거기 때문에 학습을 해두라고 들었고, 이에 따라 차근차근 학습하기 위해 글을 작성하게 되었다. 참조 https://kyounghwan01.github.io/blog/React/next/basic/#app-tsx NEXT.JS 특징 NEXT JS는 React로 만드는 서버사이드 렌더링 프레임워크이다. ☞ js는 클라이언트 언어로 알고 있었는데, next js는 서버사이드 프레임워크라고 한다. 서버사이드 렌더링(SSR)을 함으로써 다음과 같은 장점이 발생한다. 1. 서버에서 자바스크립트를 로딩하여 클라이언트 측에서 로딩하는 시간이 줄어든다. 2. 클라이언트사이드 렌더링의 경우 자바스크립트가 로드되지 ..

회사에서 판매하는 솔루션에 보고서 형식의 웹페이지가 필요하게 되었다. 내가 만들게 되었고, 무료로 사용할 수 있는 차트라이브러리 중 가장 깔끔한 chartJS를 사용해 만들어보게 되었다. 1. 기본적인 차트 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 //document.getElementById를 통해 canvas의 ID를 가져오고, new Chart로 생성한..

홈페이지를 만들 때, 길이 아래로 길어지게 된다면 아래 동영상처럼 내비게이션 바를 만들 때가 있다. 클릭을 해서 해당 contents로 이동이 가능해야 하고, 스크롤로 이동할 때도 현재 스크롤 위치에 맞춰서 바의 모양도 변경이 되어야 하는데, 이 때 필요한 것이 window.scroll() 이다. $(window).scroll(function () { var scrollValue = $(document).scrollTop(); console.log(scrollValue); }); 해당 함수를 소스에 적용하고 웹에서 개발자 도구를 연 후에 스크롤을 이동시켜보면 현재 스크롤의 위치가 console.log를 통해 보이게 된다. TEST1 TEST2 TEST3 TEST4 위와 같이 4개의 div가 있을 경우 해..

[함수의 매개변수가 1개일 때] ES5 ES6 var one = function one(a) { return console.log(a); }; let one = a => console.log(a); [함수의 매개변수가 2개일 때] ES5 ES6 var two = function two(a, b) { return console.log(a, b); }; let two= (a, b) => console.log(a, b); [함수의 내용이 여러 개일 때] ES5 ES6 var three = function three(a, b) { console.log(a); console.log(b); }; let three = (a, b) => { console.log(a); console.log(b); } [함수의 매개변수..

var numbers = [19, 1, 3, 37, 8]; // 최대값을 구해보자 var max = numbers.reduce(function (prev, cur) { return prev > cur?prev:cur; }); console.log(max); // 37이 출력된다. // 최소값을 구해보자 var min = numbers.reduce(function (prev, cur) { return prev > cur?cur:prev; }); console.log(min); // 1이 출력된다.