전체 글
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..
Java-알고리즘 ( bubble sort )
0. 알고리즘 연습 방법 알고리즘을 잘 작성하기 위해서는 잘 작성된 알고리즘을 이해하고, 스스로 만들어봐야 함 모사! 그림을 잘 그리기 위해서는 잘 그린 그림을 모방하는 것부터 시작 연습장과 펜을 준비합니다 알고리즘 문제를 읽고 분석한 후에, 간단히 테스트용으로 매우 간단한 경우부터 복잡한 경우 순서대로 생각해보면서, 연습장과 펜을 이용하여 알고리즘을 생각해봅니다. 가능한 알고리즘이 보인다면, 구현할 알고리즘을 세부 항목으로 나누고, 문장으로 세부 항목을 나누어서 적어봅니다. 코드화하기 위해, 데이터 구조 또는 사용할 변수를 정리하고, 각 문장을 코드 레벨로 적습니다. 변수가 코드에 따라 어떻게 변화하는지 손으로 적으면서, 임의 데이터로 코드가 정상 동작하는지를 연습장으로 펜으로 검증합니다. 1. 버블 ..
Java-알고리즘 ( 공간 복잡도 )
공간 복잡도 알고리즘 계산 복잡도는 다음 두 가지 척도로 표현될 수 있음 시간 복잡도: 얼마나 빠르게 실행되는지 공간 복잡도: 얼마나 많은 저장 공간이 필요한지 좋은 알고리즘은 시행 시간도 짧고, 저장 공간도 적게 쓰는 알고리즘이다. 통상 둘 다를 만족시키기는 어려움 시간과 공간은 반비례적 경향이 있음 최근 대용량 시스템이 보편화되면서, 공간 복잡도보다는 시간 복잡도가 우선 그래서! 알고리즘은 시간 복잡도가 중심 1. 공간 복잡도 ( Space Complexity ) 프로그램을 실행 및 완료하는데 필요한 저장공간의 양을 뜻함 총 필요 저장 공간 고정 공간 ( 알고리즘과 무관한 공간 ): 코드 저장 공간, 단순 변수 및 상수 가변 공간 ( 알고리즘 실행과 관련있는 공간 ): 실행 중 동적으로 필요한 공간..
JAVA-자료구조 (Heap)
1. 힙 (Heap) 이란? 힙: 데이터에서 최댓값과 최솟값을 빠르게 찾기 위해 고안된 완전 이진 트리 (Complete Binary Tree) 완전 이진 트리: 노드를 삽입할 때 최하단 왼쪽 노드부터 차례대로 삽입하는 트리 - 힙을 사용하는 이유 - 배열에 데이터를 넣고, 최댓값과 최솟값을 찾으려면 O(n)이 걸림 - 이에 반해, 힙에 데이터를 넣고, 최댓값과 최솟값을 찾으면 O(log n)이 걸림 - 우선순위 큐와 같이 최댓값 또는 최솟값을 빠르게 찾아야 하는 자료구조 및 알고리즘 구현 등에 활용됨 2. 힙 (Heap) 구조 힙은 최댓값을 구하기 위한 구조 (최대 힙, Max Heap)와, 최솟값을 구하기 위한 구조 (최소 힙, Min Heap) 로 분류할 수 있음 힙은 다음과 같이 두 가지 조건을 ..
React-Native ( style 속성과 StyleSheet API 이해하기) - part4
컴포넌트 배치 관련 스타일 속성 탐구하기 (코드는 맨 아래에) flex: 1과 height: '100%'의 차이 height: '100%'스타일은 높이와 무관하게 부모 컴포넌트의 높이를 모두 가져오므로 ( Dimensions.get('window').height )값을 설정한 것과 같은 효과가 나타난다 하지만 flex: Integer 는 자식 요소 끼리 부모 컨테이너의 공간을 나눠 가지는 역할을 수행할 때 사용됩니다. flexDirection 스타일 속성 React-Native는 flexDirection의 기본값이 'height'이기 때문에 위의 그림에서 TopBar의 컨테이너를 'row'로 나누고 flex의 비율을 1씩 할당한 것입니다. 또한 Content 부분은 비율을 각각 1 2 3 으로 차등 분배..