개요Vercel에서 만든 React 프레임워크 Next.js는 가면 갈수록 많이 사용되고 있다.지난 몇 년간 꾸준히 발전하며,이 추이가 계속되면 하루 아침에 Next.js가 앞서있을 것 같다고 생각도 했다.필자 또한 프론트엔드 개발자로서 기본적인 이해도를 높이고,제대로 사용해보고 싶어서 Next.js를 나만의 방식으로 파헤쳐보자는 결심을 하게 되었다.이 글은 Next.js가 처음이신 분들께 조금이나마 도움이 될 수 있을 것이라고 생각한다.  사전 지식 정리Next.js에 대해 이야기할 때면 항상 같이 있는 키워드가 있다. 바로, SSR(Server Side Rendering), CSR(Client Side Rendering)이다.이야기 하기전 키워드에 대한 정의를 바로 짚고 넘어가보도록하자.SSR은 초..

문자열 리터럴 타입 문자열을 하나의 타입으로 지정하여 사용하는 것. type selectedGroup = 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null; const GroupFilter = ({ selectedGroup, setSelectedGroup, }: { selectedGroup: 'BTS' | '뉴진스' | '블랙핑크' | '세븐틴' | null; setSelectedGroup: React.Dispatch; }) => { return ( setSelectedGroup('BTS')} > BTS setSelectedGroup('뉴진스')} > 뉴진스 setSelectedGroup('블랙핑크')} > 블랙핑크 setSelectedGrou..

타입 가드 Typescript에서 변수의 타입을 좁히는데 사용되는 메커니즘 사용자 정의 타입가드 타입 서술어 사용 function isFish(pet: Fish | Bird): pet is Fish { return (pet as Fish).swim !== undefined; } 보통 타입 가드는 isFish 와 같이 is를 많이 붙인다. is 는 타입 가드에서 사용되는 키워드이다. pet is Fish 파라미터(pet)가 실재 해당 타입(Fish)인지 구분하는 키워드이다. return (target as Developer).swim !== undefined 는 pet에 swim 프로퍼티가 있으면 Fish 타입으로 취급한다. interface Bird { fly: () => void; layEggs: ()..

개요현재 사내에서 진행 중인 프로젝트 CSVtoHex를 개발중이다. 해당 프로젝트는 회사 자제 솔루션 제품에 들어가는 CSV 파일을 Hex로 읽을 수 있는 프로그램을 만드는 것이 목적이다. 프로젝트 기능 명세는 아래와 같으며 오늘 구현했던 것은 CSV 파일 업로드 기능 그리고 변환 없이 다운로드 되는 과정을 구현해보려고 한다.  기능 세부 사항으로 쪼개기우선 이 기능의 목적을 기억하자. 파일을 업로드하는 기능이라는 것. 여러 방법이 있겠지만, 나는 크게 두 가지로 분류했다.파일 업로드 기능 구현하기"업로드" 버튼 혹은 이 기능을 하는 요소를 통해 파일 업로드하기drag&drop을 통해 파일 끌어와서 업로드하기업로드 한 파일 값 보여주기그리고 기본적인 UI를 만들어주었다. ..

개요사내에서 진행 중인 프로젝트에 CSV 파일을 읽어들여서 데이터를 변환하는 프로그램을 제작 중이다. CSV 파일 내용을 가져와서 변환된 모습을 보여주어야 하기 때문에 내가 가장 보편적으로 다루는 형태로 내용을 가지고 있어야만 했다.가장 많이 쓰는 형태, JSON프로젝트를 하면서 가장 많이 쓰이는 데이터 형태가 어떤 형태일지 생각해보니, 객체 형태라는 것이 가장 많이 떠올랐다. 서버로 부터 데이터를 받았을 때도, 혹은 여러 정보를 하나의 객체로 표현할 때도 JSON 모양으로 받아오는 경우가 가장 많았고 이를 사용하기로 했다. 어떤 것을 고려해야할까?해당 파일의 샘플은 아래와 같다. 이 파일의 내용을 문자열 형태로 받을 것이다. 아직 진짜 파일 업로드 기능을 구현한 것은 아니기에, 파일..

개요지난 9월 UNITHON 10회차가 끝나고,회고록은 작성했지만 사용했던 기술에 대한 설명이 부족하다고 느껴져 작성하게 되었다.기획서는 여기를 참고하면 될 것 같고,지금부터는 내가 맡은 부분인 지도 부분을 어떻게 활용했는지 작성해보려고 한다. 기능 쪼개기우선 내가 하고자 하는 기능을 하나의 퀘스트를 깬다 생각하고 작성해보았다.그랬더니 아래와 같이 정리할 수 있었다.우리의 주 목적은 지도를 활용해 내 최애가 다녀간 장소,최애의 맛집 혹은 최애의 생일을 축하 할 수 있는 생일 카페에 대한 정보를 제공하는 것이다.나는 이 지도를 활용해 사용자에게 정보를 제공해야한다. 지도를 화면에 띄웁시다!첫 번째, 지도를 화면에 띄우기 위해 지도 API를 활용해야했다.네이버 지도, 구글 지도.. 등 다양한 지도 API가 ..

어셈블리어 기계어와 대응되는 로우 레벨 언어이다. 컴파일이 빠르고 유지보수가 힘들어 거의 사용되지 않지만 하드웨어 디버깅을 할 때 유용하게 사용됨. 레지스터 소량의 데이터, 처리중인 중간결과를 일시적으로 기억해두는 고속의 저장영역이다. CPU는 자체 저장 기능이 없는데, 이를 보완하는 역할을 한다. 32비트는 E(AX) 64비트는 R(AX)와 같이 표현된다. Intel과 AT&T문법이 존재하며, 둘은 호환되지 않는다. Intel : 뒤에서 앞으로, 숫자를 그대로 사용, 명칭 그대로를 사용 AT&T : 앞에서 뒤로, 숫자 앞에 $를 붙여서 사용, 명칭 앞에 %를 붙임 !! 단순히 계산한 값은 동일하지만 저장되는 레지스터가 달라져 이후 계산 시 결과가 달라짐 범용 레지스터 EAX 사칙연산 등 산술에 사용되고..

데이터 타입 확인 데이터 shape, size, dtype을 확인할 수 있다. 사용법 import cv2 img = cv2.imread('data/messi5.jpg') print(img.shape) print(img.size) print(img.dtype) 이미지 나누고 합치기 이미지 나누기 : 이미지 합치기 : import cv2 img = cv2.imread('data/messi5.jpg') b,g,r = cv2.split(img) cv2.imshow('b', b) cv2.imshow('g', g) cv2.imshow('r', r) img = cv2.merge((b,g,r)) cv2.imshow('image',img) cv2.waitKey() cv2.destroyAllWindows() 이미지 리사이..

opencv 영상 파일 읽는 법 우선 OpenCV 라이브러리를 설치해야합니다. 다음 명령어를 입력하여 설치할 수 있습니다. pip install opencv-python OpenCV를 가져옵니다. import cv2 영상 파일을 읽을 땐 'cv2.imread()' 함수를 사용해야합니다. 이 함수는 이미지 파일의 경로를 입력으로 받고 이미지를 반환합니다. import = cv2.imread('영상파일경로.jpg') 읽은 이미지를 화면에 표시하거나 다른 작업을 수행 할 수 있습니다 OpenCV로 다양한 영상 처리 작업하기 예시 코드 cv2.imshow('이미지 창 제목', image) cv2.waitKey(0) cv2.destoryAllWindows() cv2.imshow() 함수 : 이미지를 화면에 표시하..

다이나믹 프로그래밍 연산 속도와 메모리 공간을 최대한으로 활용할 수 있는 효율적인 알고리즘을 작성하는데 해결할 수 있는 대표적인 방법. 큰 문제를 작은 문제로 나누어 푸는 문제를 일컫는 말 / 한 번 계산한 문제는 다시 계산하지 않도록 하는 알고리즘 DP는 다음의 조건을 만족할 때 사용할 수 있음 최적 부분 구조 (Optimal Substructure) 큰 문제를 작은 문제로 나눌 수 있고, 작은 문제의 답을 모아 큰 문제를 해결할 수 있는 경우를 의미 중복되는 부분 문제 (Overlapping Subproblem) 동일한 작은 문제를 반복적으로 해결해야 하는 경우 피보나치 수열 피보나치 수열이란 이전 두 항의 합을 현재의 항으로 설정하는 특징을 가진 수열이다. 점화식 풀이 _ 단순 재귀 함수 def f..