코딩 썸네일형 리스트형 최소직사각형 최소직사각형 코드function solution(sizes) { let maxWidth = 0; let maxHeight = 0; for (let i = 0; i 가로가 긴 명함이 있을수도 있고 세로가 긴 명함이 있을수도 있기 때문에, maxWidth, maxHeight를 먼저 초기화해준다.명함 개수만큼 반복하며 w와 h를 초기화해주는데, 가로, 세로 중 더 긴 변을 w에 넣고 짧은 변을 h에 넣어서 비교군을 유지시켜준다.모든 명함을 비교할 때까지 반복하며 큰 값을 계속 업데이트 해주면서 모든 명함을 만족하는 가장 큰 가로와 세로를 곱한 값을 반환해준다. 더보기 마지막 두 원소 마지막 두 원소 코드function solution(num_list) { var answer = []; for(let i=0; i num_list[i-2]) { answer.push(num_list[i-1] - num_list[i-2]); break; } else { answer.push(num_list[i-1]*2); break; } } answer.push(num_list[i]); } return answer;}마지막 원소와 그 전 원소를 비교해서 배열 값을 하나 더 추가해주기 위해 num_lis.. 더보기 vercel 배포 next의 배포엔 vercel을 많이 사용한다고 해서 퍼즐 프로젝트를 vercel로 배포했다.https://misaepuzzle.vercel.app/ Puzzle Game misaepuzzle.vercel.app 완성된 프로젝트는 아니고 간단하게 퍼즐을 맞추고 랭킹에 자동 등록할 수 있게만 해놨기 때문에 테스트만 마치고 계속 기능들을 추가해야한다.vercel에 배포하려면 몇 가지 할 일이 있는데, .env파일 같은 키값이나 url값 등이 있다면 배포 시에 적용되지 않기 때문에 vercel에 등록해야 한다. vercel 회원가입해서 깃허브 계정과 연동해주면 프로젝트 레포지토리나 올가니제이션을 선택할 수 있다. 등록하면 연결한 레포지토리가 보우측에 있는 점 세개 클릭하고 설정 들어가서 Environmen.. 더보기 supabase 연결, 랭킹 페이지 구현 무료로 사용하기 좋은 supabase를 퍼즐 프로젝트에 연결했다. supabase를 사용한 이유supabase는 어느 회사에서 면접 보는 중에 면접관님이 알려주셨다. 협업도 중요한데 개인의 기량을 위해 개인 프로젝트 하는 것도 괜찮을 것 같다며, 무료에다 sql기반으로 혼자서 풀스택처럼 할 수 있다고 사용을 추천해주셨다.supabase는 firebase의 대체제로 firebase와 다르게 PostgreSQL 기반의 서비스를 제공하기 때문에 데이터베이스나 파일 저장 등의 기능들이 가능하다고 한다. Supabase의 주요 기능PostgreSQL 데이터베이스강력한 SQL 데이터베이스(JSON, 관계형 데이터, 실시간 변경 감지 지원)를 제공하며, Firebase와 다르게 완전한 SQL을 지원한다.리얼타임 데이.. 더보기 퍼즐 만들기 메인 페이지 추가 설치한 tailwind를 사용하여 스타일 구성을 변경하고, 기존의 게임 페이지는 /game 경로로 이동시켰다.프로젝트가 실행될 때 메인 페이지에는 닉네임, 퍼즐 개수, 퍼즐 선택 입력을 추가하고 게임 시작 버튼 클릭 시 /game 페이지로 이동하도록 구현했다.현재 퍼즐 이미지는 3개를 넣어놨는데, 화질과 가독성이 떨어지는 부분이 있어 나중에 깔끔한 퍼즐로 변경할 예정이다. 내용을 입력하고 게임시작을 누르면 alert창이 뜨며 확인 버튼을 누르면 game 페이지로 이동한다. 이동 시 입력한 닉네임을 확인할 수 있으며, 이동 횟수와 시간, 물음표가 보인다. const handleDrop = (event: React.DragEvent) => { event.preventDefault(); if (d.. 더보기 next.js에서 tailwind 에러 기존에 학습중이던 넥스트 프로젝트인 퍼즐 맞추기를 하고 있었는데, 퍼블리싱에 작업하는 시간을 줄이기 위해 tailwind를 사용해보려고 했다. https://tailwindcss.com/docs/installation/framework-guides/nextjs Install Tailwind CSS with Next.jsSetting up Tailwind CSS in a Next.js project.tailwindcss.com공식문서에 따라 설치를 진행했다.npm install tailwindcss @tailwindcss/postcss postcsstailwind에 있는 postcss를 함께 설치한다. const config = { plugins: { "@tailwindcss/postcss": {}.. 더보기 퍼즐 만들기 그저께 정보처리기사 필기를 보고왔다. 이제는 아예 컴퓨터로 체크하고 답안 제출을 하다보니 시험지도 없어 문제 추출도 못 하는 것 같더라.다 풀고 점수 확인하니 72점 안정권으로 들어왔다. 합격자 발표는 3월 12일인가 했는데 아마 크게 변동은 없을거라 붙었다 생각하고 실기도 천천히 준비하려고 한다. 퍼즐const PUZZLE_ROWS = 5;const PUZZLE_COLS = 5;퍼즐의 열과 행 개수를 5개로 초기화했다. 처음엔 10개씩 해서 100개의 퍼즐로 해볼까했는데 이미지가 어려우면 못 풀겠더라. 그래서 무난하게 5x5로 했다.퍼즐에 사용할 이미지는 어디서 가져온지 모르는 흑정령 그림. 쓸만한 이미지를 찾던 중에 사진 폴더에 있길래 가져왔다. 지피티한테 물어본 결과 퍼즐을 만드는 방식은 css를 .. 더보기 Promise.all() Promise.all()여러 개의 프로미스를 동시에 실행하고, 모든 프로미스가 완료될 때까지 기다리는 자바스크립트의 내장 메소드주어진 프로미스 배열의 모든 프로미스가 성공적으로 이행되면 모든 결과를 배열로 반환하지만, 하나라도 거부되면 즉시 실패하며, 첫 번째 거부된 프로미스의 이유를 반환한다. 문법Promise.all([promise1, promise2, promise3, ...]) .then(results => { console.log(results); // 모든 프로미스의 결과가 배열로 반환 }) .catch(error => { console.error(error); // 하나라도 실패하면 첫 번째 오류를 반환 }); 동작 방식입력: Promise.all()은 배열이나 이터러블 형.. 더보기 이전 1 2 3 4 5 6 ··· 50 다음
