어느덧 2021년이 지나 2022년을 앞두고 있습니다. 2020년 6월에 입사하여 솔수션 회사에 재직하면서 지금 까지 6개의 프로젝트를 진행하였고 6번째 프로젝트의 마무리를 하고 있습니다. 올해는 3월까지는 번아웃이 와버려서... 1,2,3월은 통째로 쉬었습니다... 그리고는 다시 이겨내서 꾸준히 매일매일 어제보다는 더 나은 개발자가 되자!라는 처음 가졌을 때의 신념을 유지하며 계속해서 공부를 하고 있습니다. 입사 전과 후를 비교했을 때에 비해 실력은 확연하게 다르다는 것을 느낄 수 있었습니다. Vue.js와 스프링, MySQL, Elasticsearch 등등 많은 기술들을 실무에 접하면서 다양한 경험들을 할 수 있었습니다. 하지만 요즘은 개발자보다는 도메인 전문가가 되는 게 아닌가 하는 생각이 듭니다...
CRUD의 마지막인 D(Delete) 삭제를 구현해 보도록 하겠습니다. 글 상세보기에서 수정 옆에 삭제 버튼을 넣어서 해당 게시글을 삭제하도록 구현을 해보겠습니다. 삭제 버튼과 해당 버튼 클릭 시 메서드를 구현 BoardDetail에 구현해줍니다. 75번째 라인을 보면 reload 메소드를 사용해 목록을 리로드 하는 메소드도 사용해 주도록 합니다. 글 번호 : {{ boardDetail.bno }} 제목 : {{ boardDetail.title }} 등록일 : {{ boardDetail.regDate }} 내용 : {{ boardDetail.content }} 작성자 : {{ boardDetail.writer }} 수정 삭제 Controller와 Service 코드도 작성해 주도록 합니다. package..
안녕하세요 이번에는 글 수정을 구현해보도록 하겠습니다. 글 수정은 글 상세보기에서 버튼을 누르면 수정하는 폼을 보여주도록 하는 방식으로 구현해보겠습니다. 기존에 구현되어 있는 글 상세보기입니다. 우선 기존의 글 상세보기를 컴포넌트화 하는 작업을 해주도록 하겠습니다. 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 import axios from 'axios'; import moment from 'moment'; import BoardDetail from './BoardDetail';..
PORT란 영어 뜻으로는 항구라는 뜻입니다. 한대의 클라이언트 PC에서 여러 개의 IP를 연결하려면 어떡해야 할까요? IP 만으로만 구분하기에는 IP는 해당 PC의 고유의 값입니다. 그렇다면 같은 IP에서 목적에 따라 분류하기 위해서는 어떤 방법으로 구분해야 할까요? TCP/IP에서는 출발지의 PORT와 목적지의 PORT가 있습니다. 그래서 TCP/IP의 패킷 정보는 아래와 같이 구성되어 있다고 생각하면 됩니다. 출발지의 IP정보와 해당 IP의 PORT번호 목적지의 IP정보와 해당 IP의 PORT번호 기타 다른 전송 데이터들로 구성되어 있습니다. 따라서 PORT를 정의를 해보면 같은 IP 내에서 프로세스를 구분하는 수단입니다. 비유를 들자면 IP를 아파트 한개의 동이면 PORT는 호수와 같다라고 생각하면..
이번 포스팅에서는 글 목록에서 글 상세보기를 즉 CRUD에서 R에 해당하는 Read를 구현해보도록 하겠습니다. 현재 상태는 이렇게 되어 있는데 테이블을 클릭하면 팝업을 띄워 글에 대해 상세한 내용을 보여주는식으로 간단하게 구현을 해보도록 하겠습니다. 일단 Element-ui에서 테이블을 행(row)을 클릭할때 emit으로 row-click을 보내고 해당 파라미터에는 row,column,event에 대한 정보를 파라미터에 담아서 보내줍니다. 일단 저 row-click을 코드를 통해서 확인해 보겠습니다. rowCilick으로 정의된 데이터의 정보를 한번 확인해보기위해 row데이터를 콘솔로 확인해보겠습니다. row의 데이터와 column의 데이터, 해당 event에 대한 값을 확인해 볼 수 있습니다. 테이블에..
항상 인지는 하고 있는데 해결 방법을 매일 고민하게 만드는 자바스크립트의 객체에서 키값 자체를 없애버리는 방법에 대해서 포스팅 하고자 합니다. 예시를 들어서 tableData라는 객체의 키값에는 name, city, age이 있고 각 키에 맞는 데이터가 있다고 가정하겠습니다. 해당 객체에서 delete 를 사용하여 해당 객체의 키값을 입력해주면 해당 객체에서 해당 키값이 삭제가 됩니다. delete 원하는객체.삭제를 원하는 키값 delete연산자는 오브젝트로 부터 해당 프로퍼티를 삭제합니다. 삭제를 하면 true를 반환, 아니면 false를 반환합니다. - 만약에 존재하지 않는 속성을 삭제하려고 하면 delete는 어떠한 작업도 없이 ture를 리턴합니다. - non-configurable 속성은 del..
저번 포스팅에서 글 등록에 관한 구현을 진행해봤습니다. 한글로 제목에는 제목테스트, 내용에는 내용테스트로 등록을 진행해보겠습니다. 해당 에러를 보니까 타이틀에 들어가는 값이 '\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 Converter Convert Unix Timestamps (and many other date formats) to regular dates. www.epochconverter.com 유닉스 타임스탬프를 시간으로 변환해주는 사이트는 이 사이트를 주로 이용합니다. 예로 타임 스탬프의 값이 1637711686이면 1 2 3 4 5 6 7 8 9 10 11 // String 값인 타임스탬프 String unixTimeStamp = "1637711686"; long timestamp = Long.parseLong(u..
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..
디버깅시에 변수의 값을 보고 싶었으나 간헐적으로 계속 이렇게 되버려서 안에 변수값을 확인 못할때까 있었는데 해결 방법을 찾았다..! 해당 체크를 해제해주면 됩니다. 깔끔하게 이제 변수안에 데이터를 볼 수 있다. -끝-