전체 글 (69) 썸네일형 리스트형 FrontEnd / Vue CLI 를 통해 만들어진 프로젝트 구조 파악하기 - tutorial FrontEnd / Vue 로 TodoList를 만들려면? Vue CLI를 통해 만들어진 프로젝트를 가지고 TodoList를 만든다면 어디를 어떻게 수정해야 할까요? 이번 포스팅에서는 Vue CLI를 통해 만들어진 프로젝트 구조를 파악하고 동작 메커니즘에 대해서 공부해 보겠습니다. 환경 셋팅 - Vue Project 만들기 먼저 vue cLI를 이용하여 다음과 같이 vue project를 만들어 줍니다. 참고자료 : vue cli를 이용하여 project 만들기 babel : javascript 컴파일러라고 보시면 됩니다. PWA : Progressive web applications 만들 때 체크해줍니다. todolist만 만들 것이기 때문에 체크하지 않습니다. router : 페이지 이동과 관련있습니.. 001프로젝트 / 설치가능한 웹 어플리케이션, PWA 001 Project? 001 Project란 어려운 과제가 있을 때 그의 기초 단계인 0.0.1v을 만들어 보는 개념입니다. 해당 포스팅은 PWA이라는 기술을 경험해보는 정도의 수준입니다. 모든 코드는 github에서 확인하실 수 있습니다. 설치 가능한 웹, PWA PWA? PWA(Progressive Web Apps)는 2016년 구글 I/O에서 소개된 Web App을 만드는 접근방식 중 하나입니다. 구글에서는 PWA를 아래와 같이 소개합니다. PWA는 최고의 웹과 최고의 앱을 결합한 경험이다. 브라우저를 통해 처음 방문한 사용자에게 유용하며, 설치가 필요하지 않다. 사용자가 PWA와 관계를 점진적으로 형성할수록 성능이 더욱 강력해질 것이다. 느린 네트워크에서도 빠르게 로드되고, 관련된 푸시 알림을 .. 알고리즘 / [java] 기능개발 / 프로그래머스 알고리즘 / 기능 개발 / 프로그래머스 문제 : https://programmers.co.kr/learn/courses/30/lessons/42586 import java.util.ArrayList; import java.util.List; class Solution { public int[] solution(int[] progresses, int[] speeds) { // 배포 진행도 int progressCount = 0; // 몇개의 기능이 배포되는지 담을 배열 List answer = new ArrayList(); while (progresses.length - 1 >= progressCount) { // 하루 작업 진행 work(progresses, speeds); // 배포할 기능이 있는지 확.. 스프링부트 / Fetch API를 이용하여 checkbox 다중값 백엔드로 전달하기 checkbox 다중값 벡엔드로 전달하기 이번 포스팅에서는 프론트에서 checkbox에 체크해준 여러개의 값들을 비동기 통신으로 백엔드에 전달하는 방법에 대해서 알아보려고 합니다. 사용된 통신방법은 Fetch API이며 javascript를 사용하고 있습니다. Html Code 다음과 같이 밴드 포지션을 체크하는 항목들이 있습니다. 포지션 보컬 피아노1 피아노2 일렉 베이스 드럼 JavaScript Code 데이터를 전송하는 버튼을 눌렀을 때 동작하는 자바스크립트 함수가 있을 것입니다. 첫 단계로 그 함수 안에 체크박스 중 체크한 것들을 가져오는 변수를 만듭니다. var $positions = document.querySelectorAll(".position-checkbox:checked"); 보컬과 일.. 스프링부트 / Spring Rest Docs 를 통한 문서 자동화 Tutorial Spring Rest Docs📜 를 통한 문서 자동화 Spring Rest Docs? Spring Rest Docs는 rest API 를 문서화하는데 도움을 주는 도구입니다. 전체적인 흐름은 다음과 같습니다. 1. 테스트 코드를 실행하면 snippets라는 문서에 사용될 조각들이 생성된다. 2. 조각들을 사용자가 의도하는 대로 템플릿에 넣는다. 3. 템플릿을 기준으로 html파일을 생성한다. 이번 포스팅에서는 간단한 예제를 통해 Spring Rest Docs를 이용한 문서 자동화를 익혀보려고 합니다. 준비하기 Spring Rest Docs를 이용하기 위해 몇가지 준비사항이 있습니다. gradle 의존성주입 plugins { ... id "org.asciidoctor.convert" version "1.5.. 스프링부트 / JWT 방식으로 로그인 구현하기 Token 방식으로 로그인 구현하기 🔸 Session/Cookie 방식 vs Token 방식? 사용자 인증 방식에는 크게 Session 방식과 토큰 방식이 있습니다. Session / Cookie 방식 Session 방식은 사용자가 로그인 요청을 보내면 사용자를 확인 후 Session ID를 발급하고 그 발급한 ID를 이용하여 다른 요청과 응답을 처리하는 방식입니다. 하지만 이 경우, 프로그램이 커져서 관리하는 Session 이 늘어날 경우 별도로 세션 저장소를 관리해주어야 하는 번거로움이 있습니다. Token 방식 그에 반해 Token 방식은 저장소의 필요 없이 로그인 시 토큰을 발급하고, 데이터 요청 시에 발급받은 토큰을 헤더를 통해 전달하여 응답을 받는 방식으로 진행됩니다. 이번 포스팅에서는 스프링.. 로컬에서 손쉽게 static resources 변경 및 확인하기 로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하기 로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있다. 이를 위해서는 우선 npm이 설치되어 있어야 한다. 구글에 npm install 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치 후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있다. 설치 npm install -g live-server실행 커멘드 프로젝트 폴더로 이동 후 live-server Failed to load ApplicationContext - 프로덕션 코드와 테스트 코드 sql문 다르게 실행하기 환경 웹 어플리케이션 프로젝트로 지하철 노선도를 만드는 프로젝트를 진행해보았다. 테스트 데이터를 매번 수작업으로 입력하는 것이 번거로워 resources 의 schema.sql 이라는 파일에 insert 쿼리로 데이터를 직업 입력해주었다. 이렇게 하니 어플리케이션을 실행하면 따로 데이터를 입력하지 않아도 insert 쿼리를 자동으로 실행되어 데이터가 들어가 있는 것을 확인할 수 있었다. 문제 하지만 문제는 테스트할 때였다. 만약 테스트에서 어떠한 데이터를 생성하는 과정이 있는데 그 과정에서 insert 쿼리의 내용과 충돌되는 부분이 있다면(혹은 다른 여러가지 이유로 문제가 발생할 수도) 에러가 발생하는 것이었다. Failed to load ApplicationContext 이를 해결하기 위해 테스트에서는.. 이전 1 2 3 4 5 6 7 8 9 다음
