문미새 개발일지

앱개발을 위해 에뮬레이터를 설치했다. 처음에는 에뮬레이터를 설치할 수 있는 안드로이드 스튜디오 프로그램을 사용했는데, vscode에 비해 불편한 부분도 많고 무엇보다 렉이 걸려서 좀 버벅거리는 감이 있었다. vscode로 넘어왔으나 에뮬레이터를 사용하려면 안드로이드 스튜디오를 들어가서 실행시켜줘야 사용할 수 있는 매우 귀찮은 단점이 생겼다.이를 위해 앱플레이어를 설치했고 최종적으론 뮤뮤앱플레이어라는 프로그램으로 앱을 실행했다. 앱플레이어로 프로젝트를 연동하려면, 현재 실행되고 있는 에뮬레이터를 연동해줄 필요가 있다.모든 앱플레이어를 설치하면 설치 폴더 내에 adb라는 실행 파일이 존재하는데, 본인이 설치한 뮤뮤앱플레이어는 설치 파일의 shell폴더에 adb파일이 들어있었다.1. 해당 경로를 환경 변수 P..

오늘도 공식문서의 중요성을 뼈저리게 깨닫고 갑니다..원래 야추 다이스게임을 이전에 구현했던 퍼즐 프로젝트에 묶어서 게임 모음 사이트로 만드려고 했는데, 생각보다 야추 다이스를 플레이하기 위해 생성되는 테이블이 좀 많아서 프로젝트를 그냥 분리하려고 한다. 더군다나 supabase의 rsl을 해제한 상태로 유지했더니 무단 접근이 발생한건지 보안 알림 메일이 오면서 테이블이 삭제됐다. 그래서 이왕 삭제된 김에 Mysql을 학습해서 적용할 예정이고, 웹으로 하기엔 야추다이스의 기능이 너무 허전하기 때문에 간단한 앱으로 만들어 볼 예정이다.학습 목적으로 지인들과 Flutter 프로젝트를 진행한 적이 있었는데, React 방식의 코드에 익숙해서 그런가 widget 코드가 너무 적응이 어려웠다. 하지만, React-..

매번 과제 전형이나 코테에서 떨어지는데, 실력이 미숙해서 그런지 아직도 취업의 길은 멀다. 하지만 여러 과제 전형을 맛보면서, 그동안 고려하지 않았던 부분이나 놓치고 있던 지식들을 습득할 수 있었기에 도움이 많이 되었다. 먼저, 본인은 개발할 때 어떤 기능을 구현해야 하면 성능과 최적화를 보류하고 순 기능만을 개발하곤 한다. 이후로 추가적인 수정을 통해 부족한 부분을 메꾸면 좋은데, 기능 구현에 만족해서 리팩토링을 많이 하지 않고 컴포넌트 분리정도까지 하여 코드 정리만 했었다. 그러다보니 최적화에 대한 질문에 뭐라 답을 하기가 어려웠다. 아는게 없으니..  가장 인상 깊게 배운 건 css 스타일에 관한 질문이었다. 지금까지 스타일에 대한 부분은 유지보수성이나 애니메이션의 효율성 정도만 고려하며 작성했었는..

next의 배포엔 vercel을 많이 사용한다고 해서 퍼즐 프로젝트를 vercel로 배포했다.https://misaepuzzle.vercel.app/ Puzzle Game misaepuzzle.vercel.app 완성된 프로젝트는 아니고 간단하게 퍼즐을 맞추고 랭킹에 자동 등록할 수 있게만 해놨기 때문에 테스트만 마치고 계속 기능들을 추가해야한다.vercel에 배포하려면 몇 가지 할 일이 있는데, .env파일 같은 키값이나 url값 등이 있다면 배포 시에 적용되지 않기 때문에  vercel에 등록해야 한다.  vercel 회원가입해서 깃허브 계정과 연동해주면 프로젝트 레포지토리나 올가니제이션을 선택할 수 있다. 등록하면 연결한 레포지토리가 보우측에 있는 점 세개 클릭하고 설정 들어가서 Environmen..

무료로 사용하기 좋은 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..

기존에 학습중이던 넥스트 프로젝트인 퍼즐 맞추기를 하고 있었는데, 퍼블리싱에 작업하는 시간을 줄이기 위해 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를 ..