AI Platform / Web

안녕하세요. 한파이입니다. 여러 가지 이유로 Tistory를 떠나 블로그를 이전하려 합니다. Nextjs나 Reactjs로 직접 블로그를 만들어서 진행할 예정이고, 현재 목표는 2023년 전에 블로그를 오픈하고, 1분기 전에 서비스 하나를 오픈하고자 합니다. 좀 더 전문적인 모습으로 다시 찾아뵙도록 하겠습니다. (현재 블로그는 정보전달이 아니라, 간단히 자료 저장소로 사용 예정입니다.)

React를 처음 배우면, useState를 상태관리를 위해 사용한다. 이 글을 보고 있는 여러분도 적어도 한번 정도는 사용해 봤을 것이다. useState는 리액트에 제공하는 가장 기본적은 Hook으로 useEffect와 함께 가장 많이 사용된다. 상태관리가 무엇인지에 대해 알아본 후 useState의 본질적인 사용법에 대해 알아보도록 하자. React에서 State state란 무엇일까? 쉽게 말하면 state는 데이터라고 생각하면 이해가 빠르다. 따라서 상태관리란, 데이터 관리라고 할 수 있다. 공식 문서에 따르면 state를 구분하는 방식은 아래와 같다. 시간에 따라, 변한다면 state가 아니다. parent component에서 Props를 받을 수 있다면, state가 아니다. 기존의 sta..

퀵 정렬(Quick Sort)란, 피벗(pivot, 기준값)을 기준으로 큰 데이터와 작은 데이터를 찾아서 위치를 변경하는 정렬 방식이다. 퀵 정렬(Quick sort) 동작 순서 오름차순으로 정렬하는 방법에 대해 알아보자. 기준점이 될 index를 pivot으로 설정한다.(random value) 새로운 리스트 2개를 만들고, pivot 값보다 작은 값들과 큰 값들을 모아서 각각 리스트에 담는다. pivot값을 기준으로 작은 값이 모든 리스트는 왼쪽, 큰 값들의 리스트는 오른쪽으로 붙인다. 1-3을 재귀로 반복한다. 퀵 정렬(Quick sort) 구현 퀵 정렬의 구현 방법은 아래와 같다. def quick_sort(collection): """ Examples: >>> quick_sort([0, 5, 3..

모달(Modal)이란, 원하는 내용을 화면 위에 띄워 표현하는 방식이다. 기본적으로 많은 UI 라이브러리에서 쉽게 제작이 가능하다. 오늘은 Modal을 Component로 만들고 Nextjs/React에 적용하는 법을 알아보자. 모달을 만들기전에 알아야할 개념중 첫번째가 Portals라는 개념이다. 우리는 필요한 위치에 Component로 만들어 모달을 넣어줄 것이다. 그리고 추가로, 다른 Component보다 앞에 표시가 되려면 z-index를 사용하여 표현을 한다. 이때, 중요한 것은 부모의 z-index가 작다면, 자식의 z-index가 아무리 크더라도 부모의 z-index를 따르게 된다. 그렇기 때문에 Modal 자체를 종속적으로 Component 내부에 넣으면 다른 컴포넌트보다 앞에 있지 않는 ..

javascript에서 파일 타입을 확인/제한하는 방법, React에서 파일 타입을 확인/제한하는 방법, Nextjs에서 파일 타입을 확인/제한하는 방법에 대해 모두 알아보자. 기본적으로 파일을 업로드하는 로직이 있어야 한다. JavaScript 파일 업로드 type 제한 우선은 HTML/JavaScript 로직으로 우선 확인을 해보자. 상태창 input element를 통해 파일을 추가할 수 있도록 만든다. 그리고 자바스크립트 로직을 아래와 같이 작성해 준다. // Our application only allows GIF, PNG, and JPEG images const allowedFileTypes = ["image/png", "image/jpeg", "image/gif"]; const input =..

redux-toolkit이란 redux를 조금 더 쉽게 사용하기 위해 나온 라이브러리이다. 이 글에서는 개념보다는 쉽게 프로젝트에 redux를 적용할 수 있도록 코드 위주로 설명해 보겠다. 구현 정도는 redux로 전역 변수를 관리하는 부분까지 진행할 예정이다. 왜냐하면 Redux-Saga나 Redux-thunk 같은 미들웨어는 최근 프런트 진영에서 포일러플레이트 이슈로 잘 사용하지 않고, 대신 react-query, SWR 같은 라이브러리는 사용하는 추세이기 때문이다. 하지만, react-query나 SWR은 서버와 동기화를 위해 사용되는 것이기 때문에, 완전한 전역변수 관리는 불가능하다. 따라서 Frontend 자체의 전역변수 관리는 Redux나 Recoil을 사용하는 것이 좋다. redux-tool..

nextjs 한 번의 설정으로 모든 파일에서 사용할 수 있는 global css 적용하는 방법에 대해 알아보자. Nextjs가 12 버전에서 13 버전으로 업데이트되면서, 디렉터리 구조가 co-location이 강화된 형태로 많이 변경되었다. 따라서 특정 간단히 12 버전에서 전역 스타일 적용 방식을 알아보고, 13 버전으로 넘어가도록 하겠다 Nextjs 12. 전역 스타일 적용하기 13 버전 초반 버전까지도 12버전과 동일한 디렉토리를 사용하기 때문에, 13 버전이라도 헷갈리는 경우가 있으니 조심하자.. 따라서 우선 12와 13 버전의 가장 큰 차이점은 _app.tsx/_document.tsx(_app.js/_document.js)의 유무라고 할 수 있다. page 폴더 안에 앞의 파일이 있다면, 지금..

ffmepg란 미디어 플레이어나 인코딩 프로그램에 주로 사용되는 라이브러리이다. 우선은 ffmepg 자체에 대해 알아보도록 하자. 그 후에 브라우저에서 영상편집기가 작동할 수 있도록 만들어보자. ffmpeg 우선 ffmpeg 자체에 대해 알아보자. 공식문서에 들어가면 아래의 글이 나온다. ffmpeg를 사용하여 비디오 및 오디오 파일을 변환하고, 편집/ 스트림 전송/ 필터링 / 캡퍼 / 재생할 수 있다. 이는 다양한 운영체제에서 사용가능하며, 커맨드 라인 인터페이스를 통해 사용가능하다. ffmpeg 공식 사이트에서 운영체제에 맞는 파일을 받아서 설치해주면 된다. 기본적인 명령어는 아래와 같다. 1. 커맨드 문법 $ ffmpeg [options] -i [입력 파일 경로] [출력 파일 경로] 명령어 자체는 ..