전체 글

Next.js - Getting Started - 1

Next.js React로 완전한 웹 애플리케이션을 처음부터 빌드하려면 고려해야 할 중요한 세부 사항이 많이 있습니다. 코드는 webpack과 같은 번들러를 사용하여 번들링되고 Babel과 같은 트렌스파일러를 사용하여 변환되어야 합니다. code spliting과 같은 production최적화를 수행해야 합니다. 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링할 수 있습니다. 서버 측 렌더링 또는 클라이언트 측 렌더링을 사용할 수도 있습니다. React앱을 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 할 수도 있습니다. Next.js는 위의 문제에 대한 최고의 해답을 제공합니다. Next.js 시작 ( 공식문서 ) Pages Next.js 에서는 '.js', '.jsx', '.ts'..

Webpack 설정

자바스크립트 개발자의 딜레마 자바스크립트 언어의 문법은 빠르게 진화하고 있지만 정작 자바스크립트 코드를 실행해주는 환경은 이를 받쳐주지 못하는 경우가 많습니다. 예를 들어 브라우저의 경우 종류가 워낙 다양해서 어떤 브라우저가 어떤 문법을 지원하는지 일일이 파악하기 힘들 정도이고, 노드 (NodeJS)의 경우에도 버전별로 지원하는 언어 문법이 다르기 때문에 브라우저 만큼은 아니지만 비슷한 문제를 겪게 됩니다. Babel: JavaScript transpiler/Compiler 컴파일(compile)은 인간이 작성한 소스 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 과정을 의미하지만, 트랜스파일(transpile)은 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스 코드의 형태만 ..

Next.js ( CSR && SSR )

오늘날 웹 어플리케이션 개발을 한다고 하면 대부분 리액트 앵귤러 뷰와 같은 자바스크립트 기반 프레임워크를 통해서 개발을 하게 됩니다. MPA란 다양한 페이지를 만들어 매 요청마다 새로운 페이지를 요청해서 화면에 렌더링 해주는 전통적인 웹 방식이다 MPA의 단점 하지만 매번 새로운 HTML을 서버로부터 받아오고 전환 시마다 화면 깜빡임이 있다는 단점이 있습니다. 그 후로 AJAX라는 것이 나타나면서 동적으로 서버에서 원하는 정보를 받아와서 화면 깜빡임도 없는 SPA를 사용하게 되었습니다. CSR && SSR SPA는 웹 애플리케이션에 필요로 한 정적 리소스를 초반 한번에 모두 다운로드 하고 그 후 페이지 갱신이 필요로 할 때 필요로 한 데이터만 전달받아서 클라이언트에서 페이지를 갱신하기 때문에 자연스럽게 ..

Java-알고리즘 ( insertion sort )

1. 삽입 정렬 (insertion sort)란? 삽입 정렬은 두 번쨰 인덱스부터 시작 해당 인덱스(key 값)앞에 있는 데이터(B)부터 비교해서 key 값이 더 작으면, B 값을 뒤 인덱스로 복사 이를 key값이 더 큰 데이터를 만날때까지 반복, 그리고 큰 데이터를 만난 위치 바로 뒤에 key값을 이동 2. 어떻게 코드로 만들까? 알고리즘 연습 방법에 기반해서 단계별로 생각해봅니다. 데이터가 네 개 일때 (데이터 갯수에 따라 복잡도가 떨어지는 것은 아니므로, 네 개로 비교 로직을 이해해보자) 예: dataList: [9, 3, 2, 5] 처음 한번 실행하면, key값은 9, 인덱스(0) - 1 은 0보다 작으므로 끝: [9, 3, 2, 5] 두 번째 실행하면, key값은 3 9보다 3이 작으므로 자..

Java-알고리즘 ( selection sort )

1. 선택 정렬 (selection sort) 란? 다음과 같은 순서를 반복하며 정렬하는 알고리즘 주어진 데이터 중, 최솟값을 찾음 해당 최소값을 데이터 맨 앞에 위치한 값과 교체함 맨 앞의 위치를 뺀 나머지 데이터를 동일한 방법으로 반복함 2. 선택 정렬을 어떻게 구현하면 좋을까? 데이터가 세 개 일떄 예: dataList = [9, 1, 7] 처음 한번 실행하면 1, 9, 7 이 됨 두 번쨰 실행하면 1, 7, 9가 됨 데이터가 네 개 일떄 예: dataList = [9, 3, 2, 1] 처음 한번 실행하면 1, 3, 2, 9 가 됨 두 번쨰 실행하면 1, 2, 3, 9 가 됨 세 번째 실행하면, 변화 없음 3. 알고리즘 구현 // src/com.company/Sort/SelectionSort.ja..