저번 포스팅에서 글 등록에 관한 구현을 진행해봤습니다. 한글로 제목에는 제목테스트, 내용에는 내용테스트로 등록을 진행해보겠습니다. 해당 에러를 보니까 타이틀에 들어가는 값이 '\xEC\xA0\x9C\xEB\xAA\xA9...'이런식으로 되어있는것으로 UTF-8 인코딩 부분이 문제가 있는것 같습니다. 해당 테이블에 chartset을 utf-8로 바꾸어 줍니다. ALTER TABLE board CONVERT TO CHARSET utf8; 다시 한글로 된 내용을 정상적으로 에러없이 등록이 되는 것을 확인 할 수 있습니다. 등록후에도 아무런 변화가 없어서 등록이 잘 된건지 화면에서는 확인 할 방법이 없습니다. 정상적으로 되면 등록이 완료된다면 창을 닫고 목록도 다시 로딩하도록 하곘습니다. 현재는 등록을 서버에 ..

Vue에서 text파일 .txt로 저장하고 text로된 .txt파일을 불러와서 Vue의 data영역의 데이터에 바인딩을 하기 위해 만든 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 불러오기 저장 export default { name: 'TextFile', data() { return { /** * textarea에 보여줄 텍스트 * @type {String} */ textData: '', }; }, methods: { /*..

요즈음 인텔리제이를 주로 쓰다가 이클립스로 돌아와서 커밋하고 푸시하는데 제대로 깃허브 아이디와 주소를 입력하는데도 계속 로그인이 안되고 실패 했다... 분명히 아이디 비밀번호 정확하게 입력을 했는데도 말이다..찾아본 결과 Github에서 token이 만료가 된 것 같다. 깃허브에서 토큰을 생성해서 정상적으로 사용할 수 있게 해보자 Note에는 토큰 이름Expiration에는 토큰 만료 기한을 설정할 수 있는데 No expiration(유효기간없음) [또 만료되면 다시 만들기 귀찮아서...]을 선택하고 토큰의 허용 영역들은 그냥 다 선택해줬다. (어짜피 내가 쓸 토큰이니까...) Gernerate token을 누르면 토큰이 생성된다.그러면 빨간색 영역에 토큰을 생성해주는데 이건 최초 생성시에만 볼 수 있고..

유닉스 타임스탬프를 문자열 YYYY-MM-dd HH:mm로 변환하는 상황이 자주 있는데 할 때 마다 까먹어서 기록하고자 한다.https://www.epochconverter.com/ Epoch ConverterConvert Unix Timestamps (and many other date formats) to regular dates.www.epochconverter.com유닉스 타임스탬프를 시간으로 변환해주는 사이트는 이 사이트를 주로 이용합니다. 예로 타임 스탬프의 값이 1637711686이면 1234567891011// String 값인 타임스탬프String unixTimeStamp = "1637711686"; long timestamp = Long.parseLong(unixTimeStamp);Si..

vue에서 배열 데이터에 특정 인덱스에 값을 넣었는데도 리렌더링이 안되서 값의 변경을 감지 못해서 데이터가 그대로 남아있는 경우일 때 해당 현상에 대해서 원인과 해결방법을 살펴보겠습니다. 1 2 3 4 5 6 7 data() { return { steps: [ {name: 'step1', number:1}, {name: 'step2', number:2}, {name: 'step3', number:3} ], } } Colored by Color Scripter cs 이렇게 steps 객체 배열이 있다고 가정하고 해당 스텝의 특정 인덱스에 원하는 객체 배열을 넣으려고 했습니다. 다른 컴포넌트에서 stepData를 받아왔다고 가정해서 editStep의 인자에는 스텝데이터로 {name: 'step2', numb..

디버깅시에 변수의 값을 보고 싶었으나 간헐적으로 계속이렇게 되버려서 안에 변수값을 확인 못할때까 있었는데 해결 방법을 찾았다..!해당 체크를 해제해주면 됩니다. 깔끔하게 이제 변수안에 데이터를 볼 수 있다.-끝-

흔히 서버의 원격 저장소의 PaaS로 가장 많이 사용하는건 AWS의 S3입니다.여기서 PaaS란 (Platform as a Service) 클라우딩 컴퓨팅 서비스 중 하나입니다.SaaS(Service as a Service)의 개념을 개발 플랫폼에도 확장한 방식으로, 개발을 위한 플랫폼을 구축할 필요 없이, 필요한 개발 요소를 웹에서 쉽게 빌려쓸 수 있게 하는 모델입니다.네이버 지도 api나 카카오맵 api와 같은것들도 같은 것들도 PaaS의 일종입니다. 깃허브에서 레포지토리를 이용하여 이런 Paas형태로 저장소를 api호출로 파일을 불러 올 수 있습니다. 자 백문이 불여일견이라고 보자보자 어디보자 일단 깃허브에서 repository를 생성해준다.해당 repository에 깃허브로 업로드하거나 삭제할 수..

이번 포스팅에서는 글 등록을 구현해 보도록 하겠습니다. 우선 Vue 부분에 컴포넌트를 조금 정리하고 가도록 하겠습니다. 제일 처음 생성되는 App.vue에서 상단에는 Vue 이미지 파일과 HelloWordl 컴포넌트를 통해서 첫화면을 보여주고 있습니다. 해당 부분을 조금 바꿔 볼까 합니다. HelloWorld컴포넌트를 BoardList.vue로 변경해주고 상단에 이미지 부분은 글 등록하는 컴포넌트를 넣어보도록 하겠습니다. 우선 HelloWorld.vue 파일을 BoardList.vue로 이름을 변경합니다. 기존에 HelloWorld.vue => BoardList.vue 로 변경했으면 name에도 마찬가지로 BoardList로 변경을 해주도록 하겠습니다. 이번에는 App.vue로 가서 import 부분을 ..

이번에는 저번에 화면에 보여진 데이터(JSON)들을 테이블 형태로 표현하도록 하겠습니다. 프론트 라이브러리로는 Element-ui를 사용하도록 할겁니다. https://element.eleme.io/#/en-US Element - The world's most popular Vue UI framework element.eleme.io 뭐 element-ui말고도 bootstrap-vue등 여러 라이브러리들이 많지만 제가 실무에서 사용하는 라이브러리이기도 하고 쉽게 사용할 수 있는 라이브러리라고 생각되어서 해당 라이브러리를 사용하겠습니다. 우선 frontend폴더에서 yarn add element-ui를 통해서 패키지파일을 설치하도록 하겠습니다. 정상적으로 설치되었는지 package.json을 확인해보겠습..

안녕하세요. 너무 오랜만에 포스팅을 이어 나가서 죄송합니다... 그동안 회사 프로젝트와 개인 토이프로젝트랑 개발 공부까지 하다가 보니 시간이 정신없이 흘러 글을 쓸 생각조차 못했습니다... 천명만 넘어도 좋겠다라는 블로그의 방문자수는 어느덧 4000이 넘는 수의 방문자를 기록하였습니다 블로그명도 몽상개발자에서 개발은 재밌어야 한다로 바꾸었습니다...! 토이프로젝트나 잡담에 대한 내용들은 앞으로 NullPointerException 카테고리(Null 채우겠다라고 바뀔수도 있습니다...)에 게시물을 통해서 작성하도록 하고 이만 본론에 들어가겠습니다. 저번 포스팅에서 만든 프로젝트를 이어 가보도록 하겠습니다. 우선 포스팅한지 너무 오랜기간이 지나서 github에 올라가있는 마지막 프로젝트를 기준으로 다운을 받..

이번에도 토이프로젝트 진행과정중에서 발생했던 겪었던 문제 중 하나에 대해서 다뤄보려고 합니다. 화면을 마우스로 당겨서 넘기게 해주는 라이브러리입니다. 블라인드에서 해당 부분처럼 당겨서 밀어내는 방식을 사용하길래 찾던 중 알게된 것이 swiper입니다. https://swiperjs.com/ 처음에 공식문서에 나와있는 그대로 코드를 프로젝트에 적용해봤지만 적용이 안되는 현상이 있길래 또 당황... 결과적으로는 또 vue의 버전과 맞지않는 문제가 발생해서 vue2에서는 현재(2021.08.19 기준) swiper의 버전이 swiper6버전이 맞지 않아서 swiper 5버전대를 받아서 사용하였습니다. https://swiperjs.com/vue Swiper Vue.js Components Swiper is t..

안녕하세요 뭔가 오랜만에 글을 작성하는 것 같은데 최근에 토이프로젝트를 진행하고 코딩테스트에 대한 공부를 하느라 블로그에는 신경을 쓰지 못하고 있었는데요. 최근에 방문자수가 늘고 있는게 보이더라구요... 근데 항상 느끼던게 티스토리의 방문 통계 차트 그래프는 항상 느리더라구요... 그래서 차트 데이터도 한번 볼 겸 오늘은 소소하게 차트데이터를 통해서 최근 방문자수의 총 합을 한번 알아보도록 하겠습니다! 티스토리의 관리 페이지를 처음 띄웠을때의 화면입니다 이 차트의 데이터는 구성을 한번 보도록 하겠습니다. 일단 /manage로 진입했을때에 호출하는것들은 count.json, trend.json, toEntry.json등 이렇게 있습니다. 한번 찬찬히 response데이터를 먼저 보겠습니다 lastUpdat..