노트

React SPA & CSRRouting: 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정Page Routing: 브라우저가 웹 서버에 경로의 요청을 보내고 웹 문서를 받아오는 과정Multipage Application(MPA): 여러 페이지를 이동할때마다 원하는 페이지 요청을 보내고 웹 서버가 응답하면 브라우저가 새로고침 되면서 화면이 깜빡임.Singlepage Application(SPA): 새로운 페이지를 요청해도 index.html만 반환하는 서비스 Client Side Rendering(CSR): 클라이언트(브라우저)가 알아서 직접 랜더링 하는 것.CSR은 새로운 페이지로 이동할 때 서버와 통신하지 않고 스스로 화면을 업데이트 하기 때문에 서버와의 통신 대기시간이 사라져 굉..

고양이 검색 사이트 만들기 2요구사항3. 검색 페이지 관련● 페이지 진입 시 포커스가 input 에 가도록 처리하고, 키워드를 입력한 상태에서 input 을 클릭할 시에는 기존에 입력되어 있던 키워드가 삭제● *데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 유저에게 알리는 UI를 추가더보기/* Loading.js */class Loading { $loading = null; data = null; constructor({ $target }) { const $loading = document.createElement('div'); this.$loading = $loading; $target.appendChild(this.$loading); this.data = {sh..

고양이 검색 사이트 만들기요구사항1. HTML, CSS 관련● 현재 HTML 코드가 전체적으로 로만 이루어진 이 마크업을 시맨틱한 방법으로 변경    => 의미없는 를 으로 변경● 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경   ○ 992px 이하: 3개   ○ 768px 이하: 2개   ○ 576px 이하: 1개@media screen and (max-width: 992px) { .SearchResult {grid-template-columns: repeat(3, minmax(250px, 1fr));}}@media screen and (max-width: 768px) { .SearchResult {grid-template-columns: rep..

퍼즐 게임 명세서의 추가 기능 구현해 보기1. 난이도 선택요구사항3x3 뿐만 아니라 4x4, 5x5 등의 다양한 형태의 게임 옵션 구성clip-path나 canvas로 원본 이미지를 잘라서 출력하려고 했는데 생각보다 많은 처리가 필요해서 그냥 미리 4x4, 5x5로 나눠놓은 로컬 파일을 로드하기로 했다.function loadPuzzleImages() { while(puzzleContainer.firstChild) puzzleContainer.removeChild(puzzleContainer.firstChild) gameData.changeOriginalImageSet() gameData.generateImageIndexes() for (let i = 0; i loadP..

리팩토링(Refactoring)리팩토링은 주로 가독성을 높이고 유지보수를 편하게 하기 위해서 코드의 구조를 재조정하는 것을 뜻한다. 리팩토링을 통해 코드의 기반 구조를 단단하게 하고 코드의 이해도를 높일 수 있다면 소프트웨어가 어떻게 설계 되었는지 빠르게 파악할 수 있고 수정이 보다 간단해지며 버그가 발생했을 경우 찾기 쉬워진다. 즉. 리팩토링은 소프트웨어의 설계, 구조 및 구현을 개선하기 위한 고민이라고 할 수 있다.퍼즐 게임 리팩토링1. 조건문 단순화조건문을 보다 명확하게 구성// 이전에 선택한 이미지가 없다면if (!previouslySelecetedElement) {...}// 선택한 이미지가 있다면else { // 이전에 선택한 이미지와 현재 선택한 이미지가 같을 경우 if (previou..

퍼즐 게임 명세서 기반 실습1. 메인 페이지게임 시작 버튼 구현startButton.addEventListener('click', function () { // 게임 페이지 show const gameScreen = document.querySelector('.game-screen') gameScreen.classList.remove('hide') // 시작 페이지 hide const startScreen = document.querySelector('.start-screen') startScreen.classList.add('hide')}2. 게임 페이지1) 원본 이미지 로드startButton.addEventListener('click', function () { ... ..

프로젝트 명세서프로젝트 명세서란?프로젝트 목표와 범위구현해야 하는 기능, 디자인마감 기한 등이 포함된 상세 계획청사진, 설계도라고 할 수 있음필요한 이유개발자와 클라이언트의 의사소통 병목을 줄임팀 내의 프로젝트에 대한 공통 목표 설정즉 방향성을 올바르게 잡을 수 있도록 함포함되어야 하는 내용프로젝트 목표, 달성 범위프로젝트 일정프로젝트 상세 기능 명세, 플로우 차트테스트 계획배포 전략프로젝트 명세서를 읽고 개발을 잘 해내기 위해서는 다음고 같은 흐름으로 개발하는 것이 좋다.명세 확인문제 정의정의한 문제를 통해 요구사항 분석분석한 요구사항을 기반으로 대략적인 코드(ex: pseudo-code) 흐름 작성실제 코드 작성에러가 발생하면 2~4번에서 문제가 있는지 확인 후 5번을 다시 확인퍼즐 게임 명세서를 읽..

피그마 프로토타입 실습디자인 가이드라인 IOS, Android 각각의 운영 체제는 제조사에서 제공하는 디자인 가이드라인이 있으므로 앱을 디자인할 시 읽어보는 것이 좋음. 양이 많으므로 필요시 요약본 읽기애플의 Human Interface GuidelinesGoogle Material Design 3  디자인 리소스 피그마 커뮤니티에서 IOS와 Android에 어울리는 디자인 리소스를 구해 쉽게 화면을 구성할 수 있다.IOS 17 디자인 리소스Material 3 디자인 리소스  언스플래시: 고화질 이미지 무료 제공 피그마에서 플러그인으로도 사용 가능 로컬 폰트: 브라우저에서 피그마를 사용하는 경우 아래 링크에서 font installer를 통해 다운받아야만 컴퓨터에 저장된 로컬 폰트를 사용 가능https:..

피그마 심화오토 레이아웃(Auto layout)객체들을 선택 후 Shift + A로 오토레이아웃을 설정해 하나의 프레임으로 묶을 수 있다.오토 레이아웃으로 묶인 객체들은 각 객체의 정렬 방식, 여백 등을 빠르고 동시에 제어할 수 있고, fixed, hug, fill 옵션을 통해 리사이징 할 수 있다. 또한, drag & drop 형식으로 레이아웃 배치가 가능해 심플하게 조작 가능하다는 장점이 있다. Fixed: 고정된 넓이나 높이Hug: 자신의 레이어를 감싸는 영역Fill: 부모 프레임의 크기에 맞춰 크기를 늘리거나 줄임. 최상위 부모는 Fill이 없으며, 자식 객체가 여럿일 때는 부모 영역을 균등하게 나눠서 크기를 가져감.컴포넌트(Component)재사용 가능하게 저장한 디자인저장된 컴포넌트는 사이드바..

피그마(Figma)피그마는 macOS 및 윈도우용 데스크톱 애플리케이션들에 의해 활성화되는 추가 오프라인 기능들을 갖춘 인터페이스 디자인을 위한 협업 웹 애플리케이션이다. 피그마의 기능 집합은 UI와 UX 디자인에 초점을 두며 실시간 협업, 다양한 벡터 그래픽스 편집기 및 프로토타이핑 도구들을 활용한다.포토샵 등에서 사용하던 기존의 비트맵 방식과 달리 피그마는 백터 기반이기 때문에 확대해도 깨지지 않는 특성을 가지고 있다. 피그마 단축키는 피그마 내에서 Ctrl + Shift + / 로 확인할 수 있다.