OneMoreEnergyDrink OneMoreEnergyDrink

Next.JS토픽 소개프리렌더링Vercel을 이용한 호스팅파일 시스템 기반 라우팅등 Next.JS로 해결할 수 있다.리액트를 활용한 클라이언트 사이드 렌더링의 경우 초기로딩이 느리고 검색 엔진에 제공할 수 있는 정보가 적다.프로젝트 생성위 코드로 next.js 프로젝트를 생성할 수 있다.위 명령어로 개발 모드로 들어갈 수 있다.npm run devnpx create-next-app .css 적용@를 이용하여 전역 경로를 설정할 수 있다.위와 같이 app.js 에서 import 하면 전역 css를 적용할 수 있다.전역 css 적용하기다음과 같이 css를 적용할 수 있다.styles에서 css를 정의한다.초기 프로젝트는 다음과 같이 4개의 디렉토리를 가지고 있다.Next.js에서 css 적용하기.라우팅페이지..

코드잇 부스트에서 조각집이라는 토이 프로젝트를 진행하였다.교내 산학 프로젝트에서 진행했던 프로젝트 이후로 프론트엔드로 프로젝트를 해본 것은 이번이 두번째였다.코드잇에서 기능 목록 및 피그마 디자인을 주어 기존 프로젝트에서 가장 스트레스를 받았던 디자인을 하지 않아도 되어서 편했다.약 3주의 기간이 주어졌지만 추석 연휴 및 교내 축제 일정이 껴있었고, 축제에서 맡은 역할이 있었기 때문에 실질적으로는 1주일밖에 개발을 진행하지 못했던거 같다. (사실 전부 핑계이고 내가 나태했었다..)기술 스택?이전 산학 프로젝트에서는 리액트를 활용하여 웹 개발을 했었고, 이번 코드잇의 커리큘럼에서도 리액트 위주로 학습을 진행했기 때문에 자연스럽게 리액트를 선택하게 되었다.Typescript를 2주 정도 배운 뒤에 진행됐던 ..

이 알고리즘은 배열에서 연속된 부분 배열의 구간 합 중 가장 큰 값을 찾는 알고리즘이다.보통 배열에서 최대 연속 구간합을 찾을 때에는 정렬 후 투포인터를 사용하게 되는데,위 알고리즘은 정렬할 수 없는 경우에 유용하게 사용할 수 있다.시간 복잡도는 O(n)이다.카데인 알고리즘의 기본 아이디어현재부분합, 최대부분합 두개의 변수를 사용한다.배열의 각 요소를 순회하면서 현재까지의 최대 부분합을 추적한다.현재 요소를 포함하는 것이 유리한지, 아니면 새로운 부분 배열을 시작하는 것이 더 유리한지를 비교하여 현재 부분합을 업데이트한다.전체 배열을 순회하면서 최대 부분합을 갱신합니다.카데인 알고리즘 구현 (C++)#include #include #include // std::maxint maxSubArraySum(c..

Trie(트라이)는 문자열을 저장하고 효율적으로 검색하기 위한 트리 기반 자료구조이다.트라이 자료구조는 특히 문자열 집합에서 특정 문자열을 빠르게 검색하거나 공통 접두사(prefix)를 찾는 데 효율적이다. 1. Trie의 기본 구조Trie는 트리와 유사한 구조를 가지며, 각 노드는 하나의 문자 또는 값을 나타낸다. 루트 노드(Root Node): Trie의 시작점으로, 비어 있는 상태로 시작한다.자식 노드(Children Nodes): 각 노드는 자식 노드를 가질 수 있으며, 자식 노드는 해당 문자로 이어지는 문자열을 나타낸다.말단 노드(Terminal Node): 특정 문자열의 끝을 표시하는 노드이다. 보통 플래그나 특수한 값을 사용하여 말단 노드를 표시한다.2. Trie의 주요 연산삽입(Insert..

Git 시작하기Git이란?Git은 프로그래머의 협업 및 버전 관리를 위한 툴이다.개발자라면 필수적으로 사용할 수 있어야 한다.GitHub란?Git은 버전 관리를 할 수 있는 툴이고,GitHub는 Git으로 관리하는 프로젝트를 올려 둘 수 있는 사이트이다.Git 써보기repository와 commitRepository: 프로젝트 디렉토리가 버전(변경사항)별로 저장된다.Commit: 프로젝트 디렉토리의 특정 모습을 하나의 버전으로 남기는 행위repository 만들기디렉토리 안에서 git init을 통해 깃에 연결할 수 있다.연결되면 .git이라는 디렉토리가 내부에 생성된다.첫 commit 해보기git config user.name "qktjwl123"git config user.email "qktjwl12..

유닉스 커맨드 시작하기유닉스 커맨드란?유닉스로부터 파생된 여러 운영체제가 있고 대부분 비슷한 커맨드를 공유하는데,웹 배포, 서버 컴퓨터 사용 등 여러 작업에서 유닉스 커맨드를 사용한다.그를 유닉스 커맨드라고 부른다.유닉스는 1970년대초에 개발된 운영체제이다.터미널? shell? bash?터미널: 인풋을 받고, 아웃풋을 출력해 주는 프로그램shell: 커맨드를 해석해 주는 프로그램shell은 여러 종류가 있고 그 중 bash(Bourne again shell)을 제일 많이 사용한다.커맨드의 기본 형태cal -j 10 2020위 커맨드는 2020년 10월달을 달력을 출력한다.또 -뒤에 알파벳을 붙인 것을 옵션이라한다.명령에 뒤에 따라 붙는 단어를 인자/아규먼트라고 한다.커맨드 매뉴얼: manman에 아규먼..

리액트로 데이터 다루기배열 렌더링하기mock 데이터 추가하기json파일을 생성해주고 이를 js 파일에서 import 하여 사용할 수 있다.mock 데이터는 네트워크로 받아온 데이터를 흉내내는 파일이다.map으로 배열 렌더링하기map 메소드 안에서 jsx를 리턴하면 jsx를 여러개 추가한 것처럼 동작한다.sort로 정렬 바꾸기items.sort( (a,b) => b.rating - a.rating ) items.sort( (a,b) => b[rating] - a[rating] )sort 함수를 이용하여 mock 데이터를 정렬 시킨 뒤 렌더링 할 수 있다.filter로 아이템 삭제하기app.js에서 handleDelete함수를 정의하여 ReviewListItem의 Prop으로 보낸다.그 뒤 ReviewLis..

에라토스테네스의 체(Sieve of Eratosthenes)에라토스테네스의 체는 고대 그리스의 수학자 에라토스테네스가 고안한 소수 판별 알고리즘이다.이 알고리즘은 2부터 시작하여 특정 숫자의 배수를 지워 나가는 방식으로 소수를 찾는다.작동 원리 2부터 N까지의 모든 정수를 나열한다. 나열된 정수 중 남아 있는 가장 작은 숫자를 찾고, 이를 소수로 마킹한다.이 숫자의 배수들을 모두 리스트에서 제거한다.리스트에 남아 있는 숫자 중 가장 작은 수를 찾아 위의 과정을 반복한다.리스트에 더 이상 제거할 수가 없을 때까지 반복한다.구현 in C++#include using namespace std;//2~1000까지 소수를 찾아 테이블에 마킹한다#define MAX 1000bool table[MAX+1];int m..