개발자 메론빵

본 웹사이트는 초등학교 저학년을 대상으로 하여 컴퓨터의 입력장치에 대한 학습을 위해 제작되었습니다.무단 복제 및 타 용도 활용을 금합니다. 활용 문의는 visveryver2@gmail.com 으로 연락 바랍니다.

본 웹사이트는 초등학교 코딩 수업의 오리엔테이션을 위해 제작된 자기소개 및 성향 분석 도구입니다.수집된 데이터는 수업 운영 목적으로만 활용되며, 무단 복제 및 타 용도 활용을 금합니다. 활용 문의는 visveryver2@gmail.com 으로 연락 바랍니다.

📌 설치npm init 프로젝트 폴더의 패키지 관리자 초기화. vite를 사용할 경우 npm init vitenpm i phaser Phaser 설치📌 개발 환경 설정body { margin: 0;}#app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin: 0;}new Phaser.Game({ type: Phaser.WEBGL, width: '100%', height: '100%', physics: { default: 'arcade', arcade: { ..

정규식을 사용할 때 마다 서치를 하게 돼서 내가 보려고 쓰는 포스팅..이 포스팅을 제일 자주, 많이 들여다볼 듯 하다! 그리고 지속적으로 업데이트 될 예정😸📌 기초 패턴. : 임의의 한 문자에 매칭 (개행 문자 제외)^ : 문자열의 시작$ : 문자열의 끝* : 앞의 패턴이 0번 이상 반복됨+ : 앞의 패턴이 1번 이상 반복됨? : 앞의 패턴이 0번 또는 1번 존재{n} : 앞의 패턴이 정확히 n번 반복{n,} : 앞의 패턴이 n번 이상 반복{n,m} : 앞의 패턴이 n번 이상, m번 이하로 반복📌 문자 클래스[abc] : a, b, c 중 하나의 문자에 매칭[^abc] : a, b, c가 아닌 문자에 매칭[a-z] : 소문자 a부터 z 중 하나의 문자에 매칭[A-Z] : 대문자 A부터 Z 중 하나의..

💬 반응형 웹을 개발하면서 height를 100vh로 설정하는 경우 일부 화면이 모바일 브라우저 내 상단바 혹은 하단바에 의해 가려지는 문제가 있었다. vh(viewport)는 상하단바를 제외한 영역을 기준으로 한다. 따라서 다음과 같은 viewport 단위를 적절하게 사용해주어야 한다.📌vh (Viewport Height)vh는 스크린의 height를 기준으로 하여 백분위로 높이를 나타낸다. 예를들어 스크린 height가 800px인 경우 1vh는 8px이 되는 것이다. 모바일에서는 상하단바 유무와 상관없이 일정한 크기로 동작하는 정적 viewport 단위이다.📌dvh (Dynamic Viewport Height)dvh는 동적 viewport height를 기준으로 하여 백분위로 높이를 나타낸다...

📌Tuple to Object배열(튜플)을 받아, 각 원소의 값을 key/value로 갖는 오브젝트 타입을 반환하는 타입을 구현하세요.const tuple = ['tesla', 'model 3', 'model X', 'model Y'] as consttype result = TupleToObject // expected { 'tesla': 'tesla', 'model 3': 'model 3', 'model X': 'model X', 'model Y': 'model Y'} 반복문이므로 Mapped type을 사용해야 한다.T 배열의 n번째 요소를 K라고 하고, K가 key일 때 value도 K로 정의할 수 있다.참고로 튜플을 순회할 때에는 number를 사용하면 된다.type TupleToObject =..

📌PickQ. T에서 K프로퍼티만 선택해 새로운 오브젝트 타입을 만드는 내장 제네릭 Pick를 이를 사용하지 않고 구현하세요. interface Todo { title: string description: string completed: boolean}type TodoPreview = MyPickconst todo: TodoPreview = { title: 'Clean room', completed: false,}Pick을 사용하지 않고 내장 제네릭 Pick을 구현하는 문제이다. 우선 문제를 풀기 전 Pick 타입에 대해 확인해보고자 한다. Pick 타입이란 기존 인터페이스나 객체 타입에서 필요한 속성들만 선택적으로 사용할 수 있도록 한다. Pick일 때 T는 원본 타입, K는 선택할 ..

HTTP브라우저와 서버가 http를 통해 통신할 때 통신 과정은 다음과 같다browser에서 server에 httpRequest(요청)을 보낸다.요청을 받은 server는 brower에 요청에 해당하는 httpResponse(응답)을 보낸다.통신이 종료된다.http 통신의 경우 server는 browser의 요청을 받아야만 응답할 수 있고 server가 주체적으로 browser에 데이터를 보낼 수 없다.server의 응답 후에는 http 통신이 종료되기 때문에 실시간으로 데이터를 업데이트해주기 위해서는 일정 시간 간격으로 계속해서 요청을 보내야 한다.WebSocketWebSocket(WS)은 http 방식과는 다르게 Connection Open-Close 여부에 따라 통신한다.browser와 server..

기획서가 나온 후 API 개발과 디자인이 나오기까지 프론트 엔드는 사실상 할 수 있는 일이 별로 없다.심지어 API 개발과 디자인이 원래 지정된 기간을 지키지 못하고 밀리게 되는 일이 때때로 생기는데, 그렇다고 최종 마감 기한도 같이 밀리느냐 하면 그건 또 아니다.어쨌든 마감은 점점 다가오고 가만히 있을 수는 없으니 프로젝트 구조를 설정한 후 현재 기획서를 보고 페이지를 나누고 UI는 어느 정도 틀만 잡아둔다. 더불어 API가 필요 없는 기능적인 부분 모두 구현하고도 시간이 남는다면 가짜 데이터 및 API를 만들어 요청을 보내볼 수 있는데 이 때 사용할 수 있는 것이 MSW(Mock Service Worker)다.📌MSW(Mock Service Worker)MSW는 Service Worker를 사용해 ..

FSD 구조를 사용할 때 TanStack Query를 더 효율적으로 사용하기 위해 QueryFactory 형식으로 API요청 관리해주면 좋다는 FSD 공식문서 내용을 보고 queryFactory를 적용 해보기로 한다. qeuryFactory는 queryOptions로 구성한다.📌queryOptionsqueryKey와 queryFn을 재설정 없이 공유하기 위해 queryOptions를 사용할 수 있다. 한 곳에서 공통 옵션을 정의해주어 반복 설정해주지 않아도 된다는 이점이 있다.const getLearnerStatus = (learnerId: string) => queryOptions({ queryKey: ['learnerStatus', learnerId], queryFn:..