FE18

• 

  [Vue] Axios vs Fetch API : 어떤 것을 선택해야 할까? Axios vs Fetch API : 어떤 것을 선택해야 할까?Axios와 Fetch API는 네트워크 요청을 보내고 응답을 처리하는 데 사용됩니다.각각의 장단점과 사용 사례를 고려하여 어떤 것을 선택해야 하는지 살펴보겠습니다.   ▼ Axios 장점 :1. 간단하고 직관적인 API를 제공하여 요청을 보내고 응답을 처리하기 쉽습니다.2. 다양한 기능을 제공하며, 요청 및 응답의 인터셉터, 자동 JSON 파싱 등이 있습니다.3. 브라우저 및 Node.js 환경에서 모두 사용할 수 있습니다. 단점:1. 추가적인 번들 크기를 가질 수 있으며, 특히 브라우저에서는 성능 이슈로 이어질 수 있습니다.2. 별도의 라이브러리이므로 프로젝트에 추가적인 의존성을 추가해야 합니다. [예제 코드]import axios fro.. FE/Vue 2024. 5. 3.

• 

  [Vue] <template v-for> key should be placed on the <template> tag. 페이징 처리를 구현하다가 다음과 같은 에러가 발생했다.컴파일이 실패할 정도의 에러는 아니었지만, :key 부분에 빨간 줄로 에러가 떴다..!!  [에러 발생]   VueCompilerError:  key should be placed on the  tag.     해결과정찾아보니 태그를 사용하여 여러 개의 버튼을 렌더링 하는 경우에는 'v-for' 디렉티브를 사용하여 반복되는 템플릿을 정의하고, 해당 템플릿에는 키를 지정할 수 없다고 한다. 올바른 방법은 각 버튼 요소에 직접 키를 지정하는 것이다. 예를 들어, :key="index" 부분은 각 요소의 인덱스를 key로 사용하는 것이다.이렇게 하면 Vue.js가 각 요소를 효율적으로 관리할 수 있다. ▼예시 코드 ▼ {{ item }} ▷키(Key).. FE/Vue 2024. 4. 29.

• 

  [Vue] Vue.js Excel 다운로드 (xlsx 라이브러리 사용 버전) [ vue.js 테이블 list 엑셀 다운로드 ] 라이브러리 사용 버전 npm install --save xlsx 라이브러리 설치. (다른 라이브러리도 있다고 하는데 필자는 위 명령어로 라이브러리를 설치하였습니다.) 라이브러리를 설치하고 서버를 재기동하였는데 아래 오류가 발생했다. [ console 오류] export 'default' (imported as 'Xlsx') was not found in 'xlsx' (possible exports: CFB, SSF, parse_xlscfb, parse_zip, read, readFile, readFileSync, set_cptable, set_fs, stream, utils, version, write, writeFile, writeFileAsync, w.. FE/Vue 2024. 4. 17.

• 

  [Vue] Vue CLI를 사용할 때 PowerShell 실행 정책 오류 해결하기 [ UnauthorizedAccess 오류 해결 방법 ] Vue CLI를 사용하여 Vue 프로젝트를 생성할 때, 때로는 PowerShell에서 실행 정책으로 인한 오류가 발생할 수 있습니다. 이 오류는 PowerShell이 스크립트 실행을 허용하지 않아 Vue CLI를 실행할 수 없는 것입니다. 이 문제를 해결하기 위해 다음 단계를 수행했습니다. 1. PowerShell 관리자 권한으로 실행 시작 메뉴에서 PowerShell을 찾고 마우스 오른쪽 버튼을 클릭하여 "관리자 권한으로 실행"을 선택합니다. 이렇게 하면 PowerShell을 관리자 권한으로 실행할 수 있습니다. 2. 실행 정책 변경 PowerShell 창이 열린 상태에서 다음 명령을 실행하여 실행 정책을 변경합니다. Set-ExecutionPo.. FE/Vue 2024. 4. 2.

• 

  [JSON] JSON.stringify와 JSON.parse의 차이점 JSON.stringify 와 JSON.parse의 차이점 및 사용시점 알기 AJAX 통신을 하다 보면 누구나 한 번쯤은 JSON.stringify와 JSON.parse를 접해봤을 거고 누군가는 왜 사용하는지 헷갈리는 경우가 있을 것이다. JSON.stringify와 JSON.parse의 차이점을 비교해보며 각각 어떤시점에 사용해야 하는지 확실하게 알아두자 ! ! ! 먼저 JSON을 간략하게 정의하면, JavaScript Object Notation의 약자로, Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷. 웹 애플리케이션에서 데이터를 전송할 때 일반적으로 사용한다. (브라우저와 서버 사이에서 오고 가는 데이터의 형식) 여기에 간단히 JSON.stringify와.. FE/JavaScript 2022. 2. 25.

• 

  [jQuery] select박스 선택한 option text값 출력 select 박스 선택한 option text값만 출력하기. select 박스에서 선택한 value를 출력하여 사용하는 경우는 자주 있다. 하지만 value 값이 아닌 선택한 text 값만 뽑아서 사용하고 싶은 경우가 생겨서 알게 되었다. 간단하지만 헷갈릴만한 내용이 있어 정리해둔다 ! 평소 javascript에서 value를 출력할 때 아래와 같이 사용하기에 text도 같은 맥락인 줄 알았다.. //testId의 value출력하기 $("#testId").val(); //testId를 select박스의 id라고 가정했을때 //testId의 선택한 option의 value가 출력된다. 하지만 아래와 같이 text를 출력하면 testId의 option의 모든 text값을 나열한다. $("#testId").t.. FE/jQuery 2021. 8. 20.

• 

  [javaScript] 클로저(Closure)란,,? 자바스크립트 클로저(Closure) 개념 이해하기. '클로저(Closure)'는 자바스크립트뿐만 아니라 다른 언어에서도 사용되는 특성이다. 특히 함수를 일급 객체로 취급하는 언어(함수형 언어 functional language)에서 주요하게 사용되는 특성이라고 하니 잘 알아두자 !! 자바스크립트 또한 함수를 일급 객체로 취급한다. 함수를 일급 객체로 취급하는 것은 함수를 다른 함수의 인자로 넘길 수도 있고, return으로 함수를 통째로 반환받을 수도 있음을 의미한다. 이점을 유의하여 클로저를 이해해보자 ! 클로저(Closure) : 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 자바스크립트 클로저의 간단한 전형적인 구조를 보고 이해해보자 !! function outerFunc() { var .. FE/JavaScript 2021. 2. 24.

• 

  [jQuery] 체크박스(checkbox) 다루기. 체크유무/전체체크/값 확인 jquery로 체크박스 다루기 jQuery로 체크박스를 다루는 여러 가지 방법들을 정리해본당 체크박스의 체크 유무 확인, 체크박스 체크 처리, 체크박스 값 가져오기 방법을 살펴보자 ! 체크박스의 체크 유무 확인하는 방법 ▷ id로 확인하기 $('input:checkbox[id="chkboxId"]').is(":checked") == true; ▷ name으로 확인하기 $('input:checkbox[name="chkboxName"]').is("checked") == true; $('imput[name="chkboxName"]').is("checked") == true; ▷ prop() 메소드 사용 $('#chkboxId').prop("checked"); 체크박스 체크 처리하기 (전체 체크) ▷ 개별 처리.. FE/jQuery 2021. 2. 10.

• 

  [javaScript] chart.js 사이즈 변경 / 크기 설정 chart.js 사이즈 변경하기 / 크기 설정하기 chart.js 샘플 코드를 받아서 실행하면 사이즈가 고정적으로 되어있다. 난 그것도 모르고 계속 css 코드를 수정작업했지만 크기는 변경되지 않았다ㅏ... chart.js 크기 변경하는 방법은 너무 간단했다.. 아래는 chart.js의 샘플예제를 살펴볼수 있는 주소이다. 다양한 chart가 있으니 들어가서 살펴보면 나중에 필요한 chart를 바로 사용할 수 있을 것이다. https://www.chartjs.org/ 먼저, chart.js의 샘플예제 코드 !!! 나는 도넛차트를 사용할 예정이여서 type:'doughnut'을 선택해줬다. 크기를 변경해주는 방법은 정적 크기 변동과 반응형을 위한 동적 크기 변동 두가지가 있다. 정적이던 동적이던 크기를 변경.. FE/JavaScript 2020. 11. 27.

• 

  [javascript] Dom객체 id 존재여부 확인하기 javascript를 이용해서 페이지 내 특정 DOM 객체가 존재하는지 확인하는 방법 (id사용) 자바스크립트와 jQuery 각각의 사용 방법을 정리해본다. test라는 id를 갖고 있는 객체가 있는지 찾아보자 ! jQuery는 객체가 존재하지 않으면 length를 0으로 리턴한다. 이 점을 알고 원하는 조건에 맞게 알맞게 수정해서 사용하면 편리하겠다 :> ~~ FE/JavaScript 2020. 9. 17.

• 

  [javascript] 콜백(callback) 함수 사용이유 ,,? callback() 함수란 무엇이고 왜 사용하는가,,? 간단히 말하자면, 자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출이 되도록 사용하는 함수이다. javascript의 비동기 처리란 ? : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성. 이 특성이 어떤 문제점을 야기하냐면 , , , ajax통신할 때를 예로 들어 보자 ! ^_^ 통신을 하고 받아온 data를 가지고 실행이 되어야 하는 test 함수가 있다고 가정해보자. getData(); test(); function getData() { //ajax 통신 } function test(){ alert("test"); } 이렇게 하면 어떻게 실행이 될까? . . .. FE/JavaScript 2020. 9. 16.

• 

  [HTML] input type="text"에 숫자값만 받는 방법 oninput 이벤트로 input type="text"에 숫자값만 받기. input 값을 숫자만 받고 싶을 때 type="number"으로 타입설정을 쉽게 할 수 있지만, type="number"에서는 minlength와 maxlength가 적용되지 않는 단점이 있다. 근데 oninput 이벤트로 type="text" 이면서 input값을 숫자만 받는 방법이 있어서 정리해둔다 ! FE/HTML,CSS 2020. 9. 10.