티스토리

개발 노트

검색하기

블로그 홈

개발 노트

gkawjdgml.tistory.com/m

🙂복습 개념 포스팅입니다🙂

구독자: 2

방명록 방문하기

반응형

주요 글 목록

[window] 파일명 문자열 바꾸기(파일명 일괄 변경) 해당 포스팅에서는 window power shell을 이용하여 어떠한 디렉토리 하위 파일들을 대상으로 하여, 특정 문자열을 일괄 변경하는 방법에 대해 다루어보았다. 목차 powerShell 실행power shell을 실행해준다. 경로이동파일 탐색기를 열어, 이름을 변경하고자 하는 대상 파일이 있는 경로로 이동 후 경로를 복사한다.이때, 경로는 C드라이브 내부에 위치해야만 한다. 그리고 powerShell에 붙여넣는다cd [복사한 경로] 경로에 위치한 파일 목록을 아래의 명령어로 불러올 수 있다.ls 파일 문자열 변경(일괄)명령어는 아래와 같다. Get-ChildItem *[기존문자열]* | Rename-Item -NewName { $_.Name -replace '[기존문자.. 공감수 0 댓글수 0 2025. 2. 28.
[sourceTree] 소스 트리 실행 안됨 평소 잘 사용하던 소스트리가 갑자기 실행되지 않았다 !로딩이 오래걸리나 했더니 작업관리자를 켜봐도 아예 켜지질 않는다. 이럴땐 캐시 파일을 지워주고 다시 실행해주니 잘 된다 !C:\Users\${user}\AppData\Local\Atlassian\SourceTree.exe_Url_tcqnec0eyl5q3rfld0bk2ec333rqk020\3.4.8.0\Composition.cache 1. Atlassian 하위에는 폴더가 두개 있는데 위 기재된 폴더명과 동일하진 않더라도 유사한 형식의 파일을 선택해주면 된다 2. SourceTree.exe_Url_어쩌구저쩌구 하위에 버전 파일이 여러개 있을 수 있는데, 이럴 경우 가장 최신 버전에 해당하는 파일을 선택해주면 된다. 3. 내부에 Composition... 공감수 0 댓글수 0 2025. 2. 20.
[지도API] Leaflet, 기준 좌표의 반경 polygon 생성 해당 게시물에서는 지도 API인 Leaflet을 활용하여, 기준 중심좌표로부터 일정한 반경으로 둘러싸는 사각형을 그리는 방법에 대해 정리해보았다. 목차 결과 예시간단하게 codePen을 활용하여 표출을 진행해보았다. See the Pen 특정좌표의 반경 polygon by HamJeong (@HamJeong) on CodePen.">See the Pen 특정좌표의 반경 polygon by HamJeong (@HamJeong) on CodePen. html코드와 css코드는 특별한 구간이 없기 때문에 javascript 코드를 첨부해보았다(가독성과 추가 설명을 위해 일부 첨삭함)var domainAddr = 'https://tiles.osm.kr'; //map layer 도메인con.. 공감수 0 댓글수 0 2025. 1. 10.
[JOIN] JOIN문 해당 게시글에서는 JOIN문을 이해할 수 있도록 간단히 정리해보았다. 주로 사용되는 분류만을 다루었기 때문에 생략된 JOIN의 종류가 있음을 미리 알린다. 목차 JOIN?두 개 이상의 테이블을 서로 연결하여 데이터를 검색할 때 사용하는 방법으로, 두 개의 테이블을 마치 하나의 테이블인 것처럼 보여준다. 1. INNER JOIN(내부 조인)INNER 조인은 일반적인 JOIN의 기본 형태로, 두 테이블 간의 교집합을 반환하며 매칭 조건(*ON 절 또는 *USING 절)에 부합하는 행만 결과로 포함한다.-- ['INNER' 생략 가능]-- ON절-- 컬럼 이름이 달라도 사용 가능-- OR, AND 등 복잡한 조건 사용 가능SELECT A.id, A.name, B.ageFROM AINNER JOIN BO.. 공감수 0 댓글수 0 2025. 1. 9.
[Node.js] error:03000086:digital envelope routines::initialization error 해결 윈도우 체제에서 해당 오류를 개선하기 위한 방법을 정리하였다. 요약Node.js 17 이상에서 OpenSSL 3.0 호환성 문제로 발생한다. 때문에 Node.js를 다운그레이드하거나 --openssl-legacy-provider를 사용하여 해결 가능하다. Node.js 다운그레이드윈도우용 nvm을 설치하여 Node.js의 버전을 변경하는 방법이다. 아래 링크에서 필요 파일을 다운받을 수 있다.https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler.. 공감수 0 댓글수 0 2025. 1. 3.
[tomcat] intellij 이미지 로드 설정 해당 게시물에서는 로컬pc(프로젝트 외부 경로>D드라이브 등)의 이미지를 tomcat에서 참조하여 로드할 수 있도록 설정하는 방법을 다룬다. 간단하므로 목차는 생략하였다. 본인의 경우, 로컬 테스트 환경에서 서버 이미지를 로드해야하는 상황에서 D드라이브의 이미지 경로를 웹 애플리케이션이 참조할 수 있도록 하는 방법들을 찾아보았다. tomcat의 설정파일인 server.xml에 설정 정보를 기재하여 ' localhost:port/특정디렉토리'를 프로젝트 외부 경로로 연결하는 방법이 있어 해당 안을 적용해보았다. 내가 표출하고자 했던 이미지의 위치는 D드라이브의 test폴더에 위치해 있었다. 때문에 의 src를 D:/test/image.png로 설정해보았는데, 당연히 표출되지 않았다. 예시는 아래와 같다.일.. 공감수 0 댓글수 0 2025. 1. 2.
[JAVA] 레이더 이미지 자동 저장 모듈 해당 게시글은 특정 시스템에 모듈 형태로 추가할 어플리케이션을 개발하다, 처리 내용과 결과를 정리해두면 좋을 것 같은 마음에 작성하였다. 우선 본문을 들어가기에 앞서, 이 모듈의 기능에 대해 정리한 readMe와 실행 결과를 아래 첨부하였다. 목차는 다음과 같다.1. 프로젝트 구조2. 이미지 처리 1) 이미지 다운로드 2) 오래된 이미지 삭제3. 로그 처리 1) 로그 핸들러 생성 2) 로그 핸들러 삭제4. 스케줄러 처리5. 추후 개선 예정 1. 프로젝트 구조프로젝트 구조는 알아보기 용이하도록 이미지에 메모한 형태로 정리하였다. 2. 이미지 처리이미지의 처리는 api 호출 결과 이미지를 특정 경로에 저장하는 다운로드 로직과, 오래된 이미지를 삭제 처리하는 로직으로 구분하였다.1) 이미지 다운로드do.. 공감수 2 댓글수 4 2024. 12. 20.
[차트API] highcharts wind barb(바람 깃) 그리기 해당 포스팅에서는 상단 이미지 예시와 같이, 풍속 값을 기반으로 하여 바람 깃 자료를 svg형태로 그려내고 풍향 값을 참고하여 해당 svg를 회전시켜 wind barb를 highcharts 내 표출하는 방법에 대해 다루었다. 목차는 다음과 같이 하였다.1. wind barb 정의 1) 바람 깃 svg 처리 메서드 2) svg 적용 메서드 3) 로드 예시2. highchart 표출3. 구현 예시 1. wind barb 정의바람 깃 생성을 위해 연관 작업을 처리하는 메서드를 3개로 나누어 작업하였다. 아래 목록화 된 목차 제목이 각 메서드 대한 내용이며, 연계처리하여 load메서드 실행->바람 깃 생성->바람 깃 svg 생성 순으로 호출되도록 하였다. 즉, 차트 객체 정의 혹은 차트 생성 시, .. 공감수 1 댓글수 2 2024. 11. 25.
[JS] 타임 슬라이더 구현(자동 스크롤) 해당 게시물은 위 예시 이미지 설명에서 언급한 바와 같이, 타임슬라이더를 생성하고 '이전', '다음' 버튼을 통해 슬라이더를 컨트롤 하는 기능을 생성함과 더불어 해당 기능 동작 시, active상태의 요소가 사용자에게 보여지는 부모요소 사이즈 내에 항상 표출될 수 있도록 자동 스크롤 기능을 덧붙이는 코드에 대한 예시에 대한 정리 글이다. 구현을 위한 코드 예시는 아래와 같다. See the Pen 자동 스크롤 타임슬라이더(이전/다음) by HamJeong (@HamJeong) on CodePen.">See the Pen 자동 스크롤 타임슬라이더(이전/다음) by HamJeong (@HamJeong) on CodePen. 위 예시 코드를 직접 동작해보면 알 수 있다 시피, '이전', '다음' 버.. 공감수 0 댓글수 0 2024. 11. 25.
[지도 API] leaflet 해당 게시글은 leaflet이라는 지도 라이브러리를 활용하여, 지도에 특정 도형 레이어를 생성하는 모듈에 대한 내용을 정리한 글이다. 목차는 다음과 같다.1. 지도 객체 생성2. 값 변환에 따른 polygon 컨트롤 표출 결과를 먼저 하단에 첨부하였다. See the Pen leaflet by HamJeong (@HamJeong) on CodePen.">See the Pen leaflet by HamJeong (@HamJeong) on CodePen. 1. 지도 객체 생성지도 생성을 위해 필요한 leaflet라이브러리(js, css)와 간편한 요소 조작을 위한 jquery라이브러리를 참조한 후, 값 변경에 필요한 select요소와 지도를 생성할 div 요소를 추가한 html코드 및 스타일 시트 .. 공감수 0 댓글수 0 2024. 11. 22.
[zoomer.js] 이미지 확대 축소 라이브러리 활용 해당 게시글은 JQuery라이브러리인 zoomer.js를 활용하여 이미지 요소의 확대 축소 기능을 구현하는 내용에 대해 정리하였다. 목차는 아래와 같다.1. 정적소스 참조2. 구현3. 한계점 1. 정적소스 참조라이브러리 사용을 위해 필요한 정적소스를 참조해야한다(CDN 방식) 본인의 경우, 인터넷망이 연결된 환경이 아니기 때문에 직접 파일을 다운로드하여 세개의 필수 파일을 프로젝트 내 추가하여 참조하였다. 버전 관리로 인한 이슈 방지를 위해서는 가급적 아래 공식 링크를 참조하여 파일 다운로드 및 CDN 방식으로 필요 파일을 로드하는 것을 추천한다.https://www.jqueryscript.net/zoom/Smooth-Image-Enlargement-Plugin-Zoomer.html Smooth I.. 공감수 0 댓글수 0 2024. 11. 21.
[intellij] ecclipse 프로젝트 build https://sweets1327.tistory.com/62 인텔리제이에서 이클립스 프로젝트 사용하기(tomcat 연결)개인적으로 프로젝트를 할 때는 스프링부트와 인텔리제이를 사용했는데, 회사에서는 이클립스와 서버를 직접 사용했다. 그래서 이클립스 프로젝트를 인텔리제이에서 사용하기 위해서는 추가sweets1327.tistory.com 개인적으로 프로젝트를 할 때는 스프링부트와 인텔리제이를 사용했는데, 회사에서는 이클립스와 서버를 직접 사용했다. 그래서 이클립스 프로젝트를 인텔리제이에서 사용하기 위해서는 추가적인 설정이 필요하다는 사실을 알게 되었다. 그래서 해당 문제에 직면했을 때 다시는 동일한 고통을 느끼지 않기 위해서 정리하려고 한다. 0. 인텔리제이 버전 : 2022.01 Ultimate1. Pro.. 공감수 0 댓글수 0 2024. 7. 29.
[ORA-28040] 일치하는 인증 프로토콜 없음 intellij에서 프로젝트 작업 중 ORA-28040오류가 발생하여, 해당 부분을 개선하게되면서 방법을 정리해보았다. 발생원인 클라이언트와 서버 간의 버전 차이: 오라클 클라이언트와 서버의 버전이 다를 때, 특히 클라이언트가 서버보다 낮은 버전일 때 발생할 수 있습니다.서버에서 허용하는 인증 프로토콜 설정: 서버가 허용하는 인증 프로토콜이 클라이언트에서 사용하는 프로토콜과 다를 때 발생할 수 있습니다. 해결방안ojdbc드라이버 변경: ojdbc14.jar일때 문제가 자주 발생한다고 한다. 이때 6이나 7버전으로 변경해주면 개선될 가능성이 있다고 한다.sqlnet.ora파일 수정: 해당 파일 수정을 통해 접속 통신 가능한 오라클 버전을 명시할 수 있다고 한다. 하단에 첨부한 링크는 maven 레포지토.. 공감수 0 댓글수 0 2024. 7. 9.
[JS] 부등식 검증 함수 javascript에서 "0>1"등의 형식과 같은 문자열로 된 부등식의 결과가 올바른지, 아닌지 판별하기 위해 eval()함수를 사용할 수 있다. 하지만 어딜 찾아봐도 해당 함수는 보안상의 위험이 있으니 사용을 지양하라고 한다. 해당 함수를 대체하기 위해 동일한 결과를 제공하는 함수를 하단에 공유한다.function evaluateInequality(inequalityString) { // 정규 표현식을 사용하여 부등식 패턴을 추출 const regex = /^([-+]?\d+(\.\d*)?)\s*([]=?)\s*([-+]?\d+(\.\d*)?)$/; const match = inequalityString.match(regex); if (!match) { throw ne.. 공감수 0 댓글수 0 2024. 7. 4.
[intelliJ] 외부 라이브러리 import 오류 해당 게시글에서는 외부 라이브러리 파일(jar)추가에 대해 import오류가 발생하는 부분을 해결하기 위한 방법 중 하나를 정리하였다. 간단한 작업이므로 목차 구분 없이 작성하였다. 본 게시물은 아래 포스팅을 참고하여 작성하였다.https://goldfish2679.tistory.com/57 [Intellij] 웹 프로젝트에 라이브러리 경로 적용(WEB-INF에 lib의 jar파일이 적용되지 않는 문제 해결)Intellij에서 web project를 생성하게 되면 기본적으로 다음과 같은 계층 구조를 가지고 있다. 만약 web 폴더내에 lib폴더가 없다면 생성해서 만들어주도록 한다. 문제는 이 lib폴더에는 jar파일들을 추goldfish2679.tistory.com 공감수 0 댓글수 0 2024. 6. 10.
[구축] vue, spring boot 병합 1. 서론이전 게시물에서는 front 단락을 서술한 vue.js프로젝트와 back 단락을 서술한 spring boot프로젝트를 구분하여 구축하고, 이 두 프로젝트를 연동하는 내용에 대해 정리하였다. 이번 게시물에서는 한개의 프로젝트에서 vue.js 기반의 front 코드와 spring boot 기반의 back코드를 다루며, 두 소스가 연결될 수 있도록 병합 처리하는 과정에 대해 다루어 볼 예정이다. 병합을 진행하려는 이유는 간단하다. 프로젝트가 두개로 구분되면 개발 및 배포 작업을 위해서 두개의 디렉토리에 접근해야하는 부분이 번거롭다고 느껴졌기 때문이다. 규모가 작은 소스들이기 때문에 별도로 구분하는게 더 비효율적인 것 같다는 단순한 생각에서 출발한 작업이다. chatGPT 피셜 해당 작업에 대한 장단점.. 공감수 0 댓글수 0 2024. 6. 4.
[npm] install 무한로딩 해결 vue 프로젝트 작업 진행 중에 'axios'설치 시, 무한 로딩에 빠지게 되었다. 이 문제점을 해결하며 그 방법에 대해 정리하였다. 1. 현상npm install axios 및 npm uninstall axios명령어에 대하여 터미널창에 아래와 같은 상태 메세지만 표출되며 더 이상의 진행사항이 없었다. [#########.........] / idealTree:vue: timing idealTree:#root Completed in 2265ms 위 메세지는 설치 및 삭제 상태에 대한 메세지 이며, 그 의미는 완료 상태가 아닌 진행 상태라는 것이다. 2. 시도해당 문제를 해결하기 위해 아래와 같은 시도를 하였다.개발 툴 재부팅 -> 실패PC 재부팅 -> 실패package-lock.json 삭제 후 .. 공감수 0 댓글수 0 2024. 5. 9.
[v-model] 자동 바인딩 : input입력 값 변수에 자동 저장하기 이 게시물에서는 v-model을 활용하여 사용자가 input에 입력한 내용을 변수에 자동으로 바인딩하는 방법에 대해 다룬다. 목차는 아래와 같이 하였다.1. v-model?2. 예시3. 번외 1. v-model?v-model은 데이터 바인딩을 쉽게 구현할 수 있도록 vue에서 제공하고 있는 디렉티브이다. 데이터 바인딩이 무엇이냐? binding은 묶다, 결박하다 등의 의미로 사용되는 영단어이다. data binding이라 하면 쉽게 말해, 화면 요소와 객체 데이터를 묶어서 동기화 시키는 기법이라고 설명할 수 있다. 어떠한 상태 변화에 따라 화면이 실시간으로 자동 업데이트 되어야한다거나, 사용자에게 실시간으로 반응하는 어플리케이션이 필요하다거나 등의 여러 상황에서 데이터 바인딩이 활용된다. 특정 데이터.. 공감수 0 댓글수 0 2024. 4. 25.
[Spring boot] web앱 리눅스 배포(gradle) gradle기반의 spring boot프로젝트를 Ubuntu구축 서버에 배포하는 작업을 진행하였는데, 그에 대한 내용을 포스팅 하였다. 사용한 개발 tool은 IntelliJ이며, 목차는 아래와 같이 구성하였다. 1. build파일 생성 2. 서버 배포 1. 정상 구동 테스트 2. 백그라운드 구동 작업에 앞서 언급할 이야기가 있다. spring boot는 1.4.2이상 버전일 경우 jar파일로 빌드 시, jsp파일은 생성되지 않는다. 배포에 성공하여 spring boot를 실행하여도 404에러만 확인된다는 것이다. 즉, 버전에 따라 jsp파일 참조가 필수인 웹 애플리케이션의 경우라면 파일 빌드를 war로 해야한다는 것이다. 이때, spring boot특성 상 jar파일의 경우 WAS구축이 불필요하며 wa.. 공감수 0 댓글수 2 2024. 1. 11.
[tooltip] JQuery-ui.js, 요소 tooltip 생성부터 커스텀까지 특정요소 mouseover 이벤트를 감지하여 tooltip을 표출하는 작업을 진행하기에 앞서, 'tooltip관련 라이브러리가 없을리가 없는데?'하는 내면의 질문에서 출발하였다. 역시 직접 생성해내는 것 보다, 만들어진 라이브러리를 활용하는게 가장 빠르고 편한 것 같다. 관련 라이브러리는 Bootstrab, JQuery-ui로 두 개의 검색 결과가 있었으나, 본인의 경우 JQuery-ui를 활용하여 tooltip을 생성하고, 그에 대한 내용을 포스팅할 예정이다. https://jqueryui.com/tooltip/ Tooltip | jQuery UI Tooltip Customizable, themeable tooltips, replacing native tooltips. Hover the links ab.. 공감수 1 댓글수 4 2023. 12. 7.
Lombok 수동설치 기존 프로젝트를 import받던 중, Lombok라이브러리 추가를 통해 사용 가능해진 @Data어노테이션이 정상 작동하지 않는 상황이 발생하였다. 이를 개선하기 위해 Lombok라이브러리 수동설치를 진행하였으며, 그 과정에 대해 정리한 게시글이다. 단계가 얼마 없으므로 목차는 생략하였다. 아래 진행될 과정은 가급적이면 개발 툴을 종료한 상태에서 진행하는 것을 권장한다. 1. Lombok.jar 설치 준비물로 해당 라이브러리 파일이 필요하다. 각자 필요한 버전이 상이할 것이며, 인터넷 검색을 통해 필요한 버전을 다운 받을 수 있을것이다. 해당 게시글에서는 1.18.3V에 해당하는 파일을 첨부하였다. 위 파일을 개발 툴 실행파일(*.exe)이 위치한 경로에 설치한다. 2. 수동설치 진행 cmd창을 관리자 권.. 공감수 0 댓글수 0 2023. 11. 30.
[IntelliJ] 자동 빌드 설정 자동빌드와 관련되어 다양한 검색결과가 나왔는데, 그 중 정리가 간단명료하게 잘 되어있는 블로그의 링크를 첨부하였다.https://sm-code.tistory.com/entry/IntelliJ%EC%97%90-%EC%9E%90%EB%8F%99-%EB%B9%8C%EB%93%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 Settings > Build, Execution, Deployment > Compiler > Build project automatically 체크 2. Ctrl + Shfit + A > Registry 검색 > compiler.automake.allow.when.app.running 체크 3. Run -> Edit Configurations -> Spring Boo.. 공감수 0 댓글수 0 2023. 6. 29.
[PM2] PM2에 대하여 vue 프로젝트를 생성하여 운영 서버에 배포하는 과정에 있어, PM2를 사용하면 서버의 관리가 용이하다는 내용을 접하게 되었다. PM2가 무엇이며, 어떤 동작을 하는지, 또 그로 인해 어떤 이점이 있는지를 정리할 목적으로 포스팅 한다. 목차는 아래와 같다. 1. PM2란? 2. PM2단점 및 주의사항 1. PM2란? Process manager의 약자로, Node.js기반의 애플리케이션 실행 및 관리를 쉽고 효율적일 수 있도록 지원하는 프로세스 관리자이다. 운영 환경에서 Node.js 애플리케이션의 안전성, 성능, 가용성 향상을 위해 설계되었다고 한다. 주요 내용을 기능과 내용으로 정리해보았다. 프로세스 관리 : PM2는 Node.js 애플리케이션의 관리 및 제어를 담당하기도 한다. 즉, 애플리케이션을 .. 공감수 0 댓글수 0 2023. 5. 26.
[CSS] 부모의 Opacity설정 무시하기 부모 요소에 opacity(불투명도) CSS속성이 적용되어있을때, 자식요소 또한 영향을 받게 된다. HTML 삽입 미리보기할 수 없는 소스 테스트를 해보면 알겠지만, 자식요소에 opacity를 별도로 주어도, 부모요소로 인해 적용된 불투명도를 무시할수는 없다. 이때, 부모요소의 opacity를 삭제하게되면 문제가 해결된다. 부모요소에 불투명도를 적용하는 방법이 꼭 opacity만 있는것은 아니니, rgba()색상값을 통해 불투명도를 적용하게 되면 문제가 해결된다는 의미이다. 코드의 예시와 그 결과는 아래와 같다. HTML 삽입 미리보기할 수 없는 소스 공감수 0 댓글수 0 2023. 5. 26.
Arachni로 웹 보안 취약점 분석하기 특정 사이트 혹은 프로젝트의 보안 취약점을 점검해볼 목적으로, 무료 플랫폼을 탐색하다 arachni를 사용해보기로 했다. 설치 및 사용 방법, 그 과정에서 발생한 오류 사항 해결 부분까지 정리해보았다. 본인의 경우 window운영체제를 이용하고 있기 때문에 해당 내용을 기반으로 하여 내용을 작성하였다. 목차는 아래와 같이 하였다. 01. 설치 및 실행 01) 설치 02) 실행 02. 취약점 분석 01) 정상진행 02) SCAN ERROR 해결 01. 설치 및 실행 01) 설치 아래 링크에 접속하여 본인의 운영체제와 일치하는 파일을 Downoad한다. https://www.arachni-scanner.com/download/ Download Arachni is licensed under the Arachn.. 공감수 0 댓글수 0 2023. 4. 28.
[CentOS/Nginx] vue 배포 vue 프로젝트를 회사 개발서버에 배포하는 작업을 진행하게 되면서, 내용을 정리하고 발생했던 이슈와 해결 방법에 대해 포스팅해보았다. 목차는 아래와 같이 하였다. 01. 라이브러리 설치 01) Node.js 02) npm 03) Nginx 02. 배포 01) 빌드 02) 업로드 03) Nginx.conf 03. 결과 확인 01. 라이브러리 설치 실질적인 배포 작업에 앞서 과정에 필요한 라이브러리들을 설치해주어야하며, 설치 항목은 총 3개이다. 아주 당연히 설치는 리눅스 서버에서 진행한다. 01) Node.js npm 프로젝트를 실행하기 위한 런타임이다. 설치를 위한 명령어는 운영체제와 패키지관리자에 따라 다르다. CentOS / yum패키지 관리자 >> yum install -y nodejs Ubuntu.. 공감수 0 댓글수 0 2023. 4. 5.
[axios] API 호출하기 전에 업로드 했던 포스팅에서 vue프로젝트와 spring boot로 생성한 api프로젝트를 연동하는 작업까지 마치었고, 이제 직접 api로 반환받은 데이터를 vue프로젝트에서 접근할 수 있도록 통신하는 작업에 대해 정리해보았다. 목차는 아래와 같다. 01. axios란? 02. 연동 예시 01. axios란? 일반적으로 node.js에서 api통신을 하기 위해 사용하는 라이브러리이다. javascript에서는 유사한 동작을 하기 위해 ajax를 활용하였다면, vue나 react등에서는 axios를 활용하여 api 통신 작업을 한다고 이해하면 된다. 02. 연동 예시 axios 설치 더보기 이 라이브러리를 사용하기 위해서는 우선적으로 설치 작업을 진행해야 한다. 설치를 위한 방법은 한가지 이상인데, 본인의.. 공감수 0 댓글수 0 2023. 3. 30.
Vue 기초 지식 vue로 간단한 UI를 만들어보면서, 본인을 기준으로 알아두면 좋을 기초 지식들을 정리해 보았다. 01. Vue 구조 02. v-bind 03. v-on 04. v-for 05. v-if / v-show 06. 이미지 삽입 01. Vue 구조 대뜸 생성해버린 프로젝트가 어떤 생김새로 이루어진건지 간단히 알아볼 필요가 있다. 기본 생성 파일 중 앞으로 주의깊게 다룰 파일은 main.js와 App.vue가 아닌가 싶다. ① main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app'); 해당 프로젝트가 실행되면 기본으로 app.vue파일을 호출하는 것으로 해석된다. ② App.vue 안에 기본으로 .. 공감수 0 댓글수 2 2023. 3. 28.
[Spring boot] Mybatis Tibero 연동 VO고 뭐고 나발이고 아무것도 없이 그저 생성 옵션을 gradle, war로 설정한 Spring boot프로젝트에 Tibero로 Mybatis연동 과정만을 정리한 게시글이다. 목차는 아래와 같다. 01. 구조 만들기 : 폴더 생성 02. 구조 채우기 01) build.gradle 편집 02) application.properties 편집 03) SqlSessionFactory 04) mapper 05) service 06) controller 03. 연동 확인 01. 구조 만들기 : 폴더 생성 작업을 진행하기에 앞서, 추가로 생성된 파일을 적재할 구조들을 생성해줄 필요가 있다. 본인의 경우 아래 사진과 같이 하였다. 02. 구조 채우기 작업은 흐름대로만 설명하자면, mybatis기본 설정을 파일에 정리하.. 공감수 0 댓글수 0 2023. 3. 27.
[router] 페이지 링크 이전게시글에서 vue와 spring boot를 연동해보았고, 해당 부분까지 작업이 완료 된 상태에서 화면 전환을 자유로이 하기 위해 routing작업을 진행해보았다. 01. Router란?02. 설치방법 01) CDN 02) NPM03. 적용방법 01) router객체 생성 02) router 적용 03) router-view 04) router-link 01. Router란?routing은 네트워크에서 경로를 선택하는 프로세스라고 정의하고, router는 네트워크간에 데이터 패킷을 전송하는 장치라고 정의한다. 우리가 궁금한 Vue에서의 router는 페이지 이동을 위한 라이브러리이며,페이지 이동을 위한 url 변경 시에는 미리 읽어들여놓았던 화면문서를 요청에.. 공감수 0 댓글수 0 2023. 3. 22.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.