목록전체 글 (547)
똑같은 삽질은 2번 하지 말자
콘솔창을 킨뒤 본인이 다운한 이클립스 폴더를 찾아서 디렉토리 이동을 해준다. 그리고 eclipse -clean -clearPersistedState 명령어를 쳐주고 기다린다~
가끔 문제를 풀 경우, Map을 정렬하는 경우가 많다! Key에 관한 정렬은 TreeMap을 사용한다면 별도의 구현없이 정렬이 가능하다. 단, String, Integer 와 같은 기본형에만 해당된다. 만약 객체를 특정 인스턴스 변수 기준으로 정렬하고 싶다면, Comparable 을 이용한 정렬이 필요하다. 해당 객체를 생성하는 클래스에서 Comparable 인터페이스를 implements 하거나, 혹은 아래와 같은 방식으로 익명객체, 람다식을 활용할 수 있다. 하지만, 이번 예제에서는 Map의 Value에 대한 정렬을 해볼려고 한다. 정렬하는 방법을 익명객체와 람다식을 활용해서 구현했다. public class ValueSortExample { public static void main(String[]..
Vue에서는 테스트가 어떻게 이루어 질까? 테스트 환경설정 처음에 Vue Cli 도구로 프로젝트를 생성할 때, javasscript testing을 jest로 설정해두었다. jest.config.js module.exports = { preset: '@vue/cli-plugin-unit-jest', testMatch: [ '/src/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)', ], }; 소스폴더 안에있는 테스팅 코드(*.spec.js)를 찾는 jest환경설정 파일 pakage.json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test": "..
Filter 기본 필터 적용방법 컴포넌트 속성에 filters: { formatDate(value) { return new Date(value); }, }, 필터스 속성 추가한뒤(Date는 자바스크립트에서 기본 제공해주는 객체이다.) {{ postItem.createdAt | formatDate }} 이렇게 사용해 주면 된다. 커스텀한 필터를 전역으로 설정해주고 싶을땐? custom filter 함수 utils/filter.js export function formatDate(value) { const date = new Date(value); const year = date.getFullYear(); let month = date.getMonth() + 1; month = month > 9 ? mont..
insert 된 그 PK를 다른테이블에서 써야할 때 /* query */ SELECT LAST_INSERT_ID() id 값을 리턴 받는 곳은 DAO 클래스에서 insert문을 호출하는 구문에서 값을 리턴 받으면 된다. int id = commonDB.insert(NAMESPACE + "insertData", dataClss); ex) INSERT INTO RYOKAN_PAYMENT(MBER_ID,P_PRICE) VALUES(#{mber_id},#{p_price}) SELECT LAST_INSERT_ID()
1.로그인 /회원가입 2.게시글 조회 /게시글 작성 이 두가지로 API 모듈화를 해보려고 한다. 각각의 접근 URL도 다르고 게시글 같은 경우는 로그인 회원가입과 달리 headers에 authorized가 필요하므로 우선 api/index.js import axios from 'axios'; import { setInterceptors } from './common/interceptors'; export function createInstance() { // 정말 기본 URL만 셋팅 return axios.create({ baseURL: process.env.VUE_APP_API_URL, }); } // 인 export function createInstanceWithAuth(url) { // Token..
새로고침을 누르면 Vuex의 state는 비워지게 되고 Token의 정보도 없어지게되서 게시판을 계속 볼 수 없는 노인증상태가 되므로 그 정보를 cookie에 저장해야한다. utils/cookie.js function saveAuthToCookie(value) { // 토큰 값을 쿠키에 셋팅 document.cookie = `til_auth=${value}`; } function saveUserToCookie(value) { // username 값을 쿠키에 싯팅 document.cookie = `til_user=${value}`; } function getAuthFromCookie() { // 저장된 토큰값 가져오기 return document.cookie.replace( /(?:(?:^|.*;\s*)..
갑자기이지만, 올려두면 언제든지 볼 수 있기에 뷰의 라이브싸이클 그리고 Vuex의 구조 사진 Actions 에는 비동기 로직 Mutations 에는 동기로직을 통해 State에 저장하는 computed 같은 친구
javascript 에서 불리언(boolean) 값은 예약어 true 나 false 중 하나의 값으로 사용된다. 불리언 값은 주로 제어구조를 처리하는 로직에 쓰인다. 위 예제는 flag 값이 true이면 '메롱~' 을 false이면 '틀렸어' 를 출력한다. 첫번째 라인에서 flag값을 true로 선언 했으므로 결과는 '메롱~' 이 나왔다. javascript에는 아래 6개 데이터에 대해서 false 값으로 판단한다. undefined null 0 -0 NaN "" // 빈 문자열 예시 1) 예시 2) false 와 false 로 변환되는 undefined, null, 0, -0, NaN, "" (빈 문자열) 은 거짓으로 판정되는(falsy) 값이라 부르고, 이 이외의 값들은 참으로 판정되는(truthy)..
/posts 신청시 Token이 필요하게 API가 설정되어있다. 서버에 로그인 했을때, 토큰값이 반환되는게 보일 것이다. 저 토큰 방식은 JSON Web 토큰 형식 https://jwt.io/ JWT.IO JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. jwt.io 그러면 어떻게 저 토큰값을 서버에 넘기면서 문제없이 API를 이용할 수 있을까? HTTP 헤더에 실어서 보내는 방법이 있다. import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_A..