개발공부_Blog154 React를 사용해서 만든 서비스를 어플로 다운 받을 수 있다고? ( PWA로 프로젝트 하기 ) React + Vite + PWA로 프로젝트 생성하기vite-pwa-plugin 설치Vite PWA Vite Plugin PWAZero-config PWA Framework-agnostic Plugin for Vite and Integrationsvite-pwa-org.netlify.app React와 Vite그리고 PWA를 사용해 프로젝트를 시작하기 위해서vite-pwa 템플릿을 사용해서 react개발환경을 세팅해준다.npm으로 vite-pwa 플러그인을 설치하면 아래와 같은 질문과 함께 설정을 도와준다. PWA로 프로젝트를 생성하기 위해서는 다양한 설정파일들이 필요하다.나는 기본 세팅으로 프로젝트를 생성했다.npm create @vite-pwa/pwa@latest Select a strategy : .. 2024. 12. 11. PWA설치 및 기본 설정 PWA의 설치 PWA는 처음 웹에서 설치를 하게 된다.PWA가 기기에 설치되면 다른 앱처럼 운영체제에서 직접 실행할 수 있는 플랫폼 앱으로 사용자에게 표시된다. 이는 모바일 기기에 앱 아이콘이 표시되며, 브라우저 웹 사이트에서 동작하는 것이 아니라독립형 앱으로 실행할 수 있다는 뜻이다. 웹 사이트의 ‘북마크(즐겨찾기)’와 ‘홈 화면에 추가’와 ‘앱 설치’는 각각 다르다.‘홈 화면에 추가’기능은 북마크와 유사하지만, 페이지의 파비콘이 OS의 홈 화면의 아이콘으로 추가된다.하지만 PWA를 설치하게 되면 홈 화면에 URL을 추가하는 것 이상의 기능을 얻을 수 있다. PWA를 설치하려면 manifest.json파일과 service_worker.js를 통해 설정을 해 주어야 한다.그래야 PWA는 브라우저( Chr.. 2024. 12. 10. Web-app과 PWA Web개발을 한다, App개발을 한다.요즘은 pc보다는 mobile기기의 사용이 대부분이기 때문에 pc중심의 개발보다는 mobile에 맞춰 web app이라는 형태의 개발 방식을 채택한다. 그래서 우리가 개발을 할 때에는 web에서 동작하는 web app개발 혹은 application방식으로 동작하는 native app개발로 나눠 개발하게 된다. 프로그램이 동작하는 환경은 크게 두 가지로 나눌 수 있다.WebApplicationWeb은 브라우저를 통해 접근할 수 있으며, 인터넷 연결만 있으면 어디서든 접근 가능하다. 웹은 HTML, CSS, JavaScript를 기반으로 구성되어 프로그램을 실행한다. 웹을 기반으로 하는 프로그램은 모든 웹 브라우저에서 동작하므로 플랫폼에 상관없이 동일한 경험을 할 수 .. 2024. 12. 10. 프로젝트를 할거야. React와 Vite로. 프로젝트를 할거야.가장 많이들 사용하는 것이 React다. 많이 사용하는 데는 그 이유가 있다. React는 컴포넌트를 기반으로 UI( User Interface ) 를 효율적으로 관리하는 JavaScript 라이브러리다.React를 너무 간단한게 한 문장으로 표현했지만, 그 안에 내포된 의미는 꽤 많다.컴포넌트를 기반으로 UI를 만든다효율적으로 관리한다. 컴포넌트 기반으로 UI를 만든다.하나의 페이지를 구성할 때, 한 페이지에 들어가는 내용을 처음부터 끝까지 구현한다고 생각해보면…. 정말 너무 보기가 힘들것 같지 않은가@_@….. React는 한 페이지에 들어가는 내용을 블럭을 쌓듯이 컴포넌트로 조립해 만들 수 있다. 이러한 컴포넌트의 장점으로는 독립성과 재사용성을 들 수 있다. 각각의 컴포넌트는 함수.. 2024. 12. 10. JavaScript의 Map과 Set객체는 HashTable구조를 활용한다 Data Structure에는 hash table이 있다.hash table은 연관 배열 구조(associative array)로, 키 하나와 값 하나가 연관되어 있으며 키를 통해 연관되는 값을 얻을 수 있는 자료구조이다.hash table은, 해시 함수가 주어진 키 값을 받아 유니크한 해시값으로 변환해 이를 key로 저장, 해당 키에 값을 매칭하는 방식으로 만들어진다. 위와 같은 방식으로 만들어진 hash table은 데이터를 저장, 검색하는 데 효율적으로 사용된다. 유니크한 키값을 활용한 덕분에 데이터 검색, 저장, 삭제시 O(1) 이라는 최적의 시간 복잡도가 나오게 된다. ( 해시 충돌로 인한 시간복잡도는 여기서는 논외로 하겠씀니다@_@ !!!!!!!!! ) JavaScript에서도 Hash Tab.. 2024. 11. 29. 프로그래머스-포켓몬 문제 간단 설명 당신은 최대한 다양한 종류의 폰켓몬을 가지길 원하기 때문에, 최대한 많은 종류의 폰켓몬을 포함해서 N/2마리를 선택하려 합니다. N마리 폰켓몬의 종류 번호가 담긴 배열 nums가 매개변수로 주어질 때, N/2마리의 폰켓몬을 선택하는 방법 중, 가장 많은 종류의 폰켓몬을 선택하는 방법을 찾아, 그때의 폰켓몬 종류 번호의 개수를 return 하도록 solution 함수를 완성해주세요.https://school.programmers.co.kr/learn/courses/30/lessons/1845 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 제한사항nums는 폰켓몬의 종류 번호가 담긴 1차원.. 2024. 11. 29. 완주하지 못한 선수 간단 문제 설명마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요 https://school.programmers.co.kr/learn/courses/30/lessons/42576 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 해결 IDEA반복문을 돌려서 map객체에 참여자를 key값으로 저장시킨 뒤에, 완주자와 참여자를 비교해서 map에서 완주자를 제외시킨다 남겨진 참여자를 반환한다.map객체 생성 = new Map()set() →.. 2024. 11. 29. JadenCase 문자열 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12951 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 아이디어 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요.공백 문자열을 기준으로 각 단어를 쪼깨 배열로 만든다. split() 사용반복문을 돌면서 각 요소의 첫번째 단어는 대문자로, 나머지는 소문자로 .. 2024. 11. 28. 프로그래머스 - 다리를 지나는 트럭 https://school.programmers.co.kr/learn/courses/30/lessons/42583 트럭 여러 대가 강을 가로지르는 일차선 다리를 정해진 순으로 건너려 합니다. 다리에는 트럭이 최대 bridge_length대 올라갈 수 있으며, 다리는 weight 이하까지의 무게를 견딜 수 있습니다. 다리에 완전히 오르지 않은 트럭의 무게는 무시합니다.예를 들어, 트럭 2대가 올라갈 수 있고 무게를 10kg까지 견디는 다리가 있습니다. 무게가 [7, 4, 5, 6]kg인 트럭이 순서대로 최단 시간 안에 다리를 건너려면 다음과 같이 건너야 합니다. 최초의 아이디어일단 큐를 사용해야 한다는 점다리 위의 상태를 변수로 표현하는 것다리 위로 올라간 트럭의 무게를 변수로 표현하는 것위와 같은 데이터.. 2024. 11. 20. 이전 1 2 3 4 ··· 18 다음
