짹뚜 스튜디오

서버에 이미지를 업로드하기 위해 사용하는 multipart/form-data 형식을 처리하기 위해 multer 미들웨어를 사용한다. 설치 npm install multer 사용법 먼저 multer를 변수에 저장해준다. const upload = multer({ storage: multer.diskStorage({ destination: (req, file, callback) => { callback(null, "./uploads"); }, filename: (req, file, callback) => { const fileName = Date.now() + ext; callback(null, fileName); }, }), limits: { fileSize: 10 * 1024 * 1024 }, }); s..

애플리케이션과 실행에 필요한 환경변수, 디펜던시들을 컨테이너에 하나로 묶어서 서버 및 다른 PC에서도 동일한 환경에서 실행할 수 있게 도와주는 툴 VM vs Docker VM은 호스트 OS 위에 게스트 OS 전체를 가상화하여서 격리된 환경을 만든다. 전체 OS를 가상화 하였기 때문에 무겁고 리소스를 많이 사용해서 성능상 문제가 있다. 이러한 문제를 해결하기 위해 Container 엔진으로 프로세스만 격리하는 방식이 등장했다. 하나의 호스트 OS를 공유하고 Container 엔진을 통해 애플리케이션들이 각자의 격리된 환경에서 실행한다. Container 엔진 중 가장 유명한 것이 Docker이다. Docker 구성요소 Dockerfile 어플리케이션을 구동하는데 필요한 파일들이 무엇인지, 어떤 라이브러리나..

CSS만을 이용해서 삼각형을 만들기 위해서는 Border를 사용하면 된다. 정사각형 모양의 박스에 Border를 추가하게 되면 다음과 같이 생긴다. 이때, Border끼리 만나는 지점을 잘 보면 대각선으로 만나고 있다. 이때, 박스의 width와 height를 0으로 하고 Border의 크기를 늘리면 다음과 같아진다. Border들이 삼각형 모양을 하고 있다. 이 상태에서 원하는 위치의 Border를 제외하고 나머지 Border를 transparent를 하게 되면 삼각형 하나만 남게 된다.

div에 텍스트를 수평/수직 가운데 정렬을 하고 싶을 때 다음과 같이한다. text-align: center를 추가한다. line-height을 div의 height의 동일한 값으로 추가해준다.

합병 정렬 분할 정복 알고리즘 중 하나이고 안정 정렬에 속하는 정렬 알고리즘이다. 알고리즘 합병 정렬은 다음과 같이 진행된다. Divide: 입력으로 받은 배열을 같은 크기의 2개의 배열로 길이가 1이 될 때까지 나눈다. (배열의 길이가 1일 때 배열이 정렬이 된 상태라고 본다.) Conquer: 2개의 정렬된 배열을 하나의 배열로 정렬을 하면서 합친다. 입력으로 받은 배열을 배열의 길이가 1개가 될 때까지 절반으로 나눠준다. 2개의 정렬된 배열을 서로 인덱스 0부터 비교하면서 더 작은 값을 또 다른 배열에 넣어준다. 2개의 배열 중 하나의 배열에서 모든 값을 새로운 배열에 넣을 때까지 반복한다. 만약 하나의 배열의 값들을 모두 넣어주면 남은 배열의 값들은 새로운 배열에 push 한다. 나눠진 모든 배열..

Github Actions에서 이벤트로 on:push를 사용할 때 만약 push를 해도 이벤트가 트리거 되지 않게 하기 위해서는 커밋 메시지에 다음과 같은 명령어를 추가해준다. [skip ci] [ci skip] [no ci] [skip actions] [actions skip] 예시) chore: update README.md [skip ci]

CSR (Client Side Rendering) CSR이란 렌더링이 클라이언트에서 일어나는 것을 뜻한다. 서버에 HTML과 JS 파일 요청을 보내면 서버가 파일들을 보내주고 클라이언트에는 파일들을 받아서 렌더링을 한다. 사용자의 행동에 따라 필요한 부분만 서버에 요청을 해서 렌더링 하기 때문에 빠른 인터렉션을 기대할 수 있다. 첫 페이지 로딩 시간이 길다. 서버에서 HTML 파일을 받지만 HTML 파일 내부에는 아무런 내용이 없다. React를 예로 들면, index.html 에는 만 존재한다. 그래서 HTML 파일을 받고 JS 파일을 받은 후에 JS 파일을 실행하면서 렌더링이 된다. 그래서 필요한 파일을 모두 받은 후에 렌더링이 되기 때문에 초기 로딩 시간이 길다. 나머지 페이지를 로딩하는 시간은 빠..

이번에 진행한 프로젝트는 커뮤니티 활동에 참여를 하면 보상으로 토큰을 지급하고 획득한 토큰으로 NFT를 구입할 수 있는 서비스이다. 팀원들과 모여서 가장 먼저 한 일은 우리의 서비스에 어떠한 기능들을 추가할 것인지 서로 의견을 나눴고 다음과 같이 결론이 나왔다. 글을 작성하면 토큰을 지급한다. 글에 좋아요를 누르면 글 작성자에게 토큰을 지급한다. 댓글을 달면 댓글을 단 사람에게 토큰을 지급한다. 회원가입 시 토큰을 지급한다. 자신이 만든 글들을 엮어서 출판할 수 있는 쿠폰을 NFT 형태로 판매한다. NFT를 구매할 때는 토큰을 사용한다. 클라이언트에서 서버로 API 요청을 하면 서버는 DB에서 정보를 가져와서 클라이언트에 데이터를 보내준다. 그런데 서버에서는 DB에서 데이터를 가져오는 것과 동시에 특정 ..

팀원들과 Opensea 클론 코딩 프로젝트를 진행했다. 일단은 블록체인과 프론트만 구현을 해서 Opensea를 구현하기로 했다. Opensea에서 제공하는 무료 API를 활용해서 이더리움 테스트넷인 Rinkeby에 존재하는 NFT들을 조회할 수 있고 각 Collection 및 NFT들에 대한 상세정보도 API로 제공하기 때문에 사용했다. 그러나 무료 API는 API 키 없이도 사용할 수 있는 장점이 있지만 모든 기능을 사용할 수 없기 때문에 Opensea의 모든 부분을 구현할 수는 없었다. 일단 우리가 중점으로 둔 기능들은 다음과 같다. 현재 Rinkeby 네트워크에 존재하는 NFT들 리스트로 출력 각 NFT에 대한 상세정보 페이지 출력 NFT 민팅 기능 NFT 판매 목록에 등록 NFT 구매 기능 htt..

스마트 컨트랙트로 ICO를 구현해보려고 한다. 일단은 ICO를 구현하기 위해서 필요한 기능들을 보면 다음과 같다. ERC20 토큰 스마트 컨트랙트 (ICO를 통해 판매하고자 하는 토큰) 돈을 전송받으면 토큰을 발행해야 한다. 한 명이 모든 토큰을 구매하면 안 되기 때문에 구매할 수 있는 토큰 양에 제한을 둬야 한다. 정해진 시간 내에서만 토큰을 구매할 수 있어야 한다. 목표 모금액을 달성하지 못하면 환불해줘야 한다. ICO가 진행 중일 때는 구매한 토큰을 전송하지 못해야 한다. 해당 글에서는 각 기능에 대해 중요한 부분과 직접 프로그래밍을 하면서 헤매었던 부분들 위주로 설명을 하고 전체 코드는 깃허브에서 확인할 수 있다. https://github.com/JJakDDo/ICOPractice GitHub ..