본문 바로가기

프론트엔드26

VUEX의 속성과 개념 1. state Vue.js의 data속성과 유사한 기능을 가지고 있다. Vuex Store안에서 필요한 데이터를 만들 때 State라는 속성을 선언하고 그 아래에 데이터를 선언해주면 된다. 호출 방법은 script부분에서 호출할 때나 template부분에서 호출할 때 크게 다르지 않다. 왼쪽은 모듈로 따로 빼낸 경우와 그렇지 않은 경우 두 가지이다 모듈이라는 것은 store의 저장소 이름을 정해준다고 생각하면 된다. 모듈로 따로 분리시켰을 때는 호출할 때 모듈이름을 꼭 같이 붙여줘야 한다. 오른쪽은 Vuex Store 안에서 저장된 State를 직접 호출할 수도 있다 this키워드를 붙여도 되고 안해도 된다. 2. Getters Vue.js의 computed 속성과 굉장히 유사한 기능을 가지고 있다. .. 2024. 3. 27.
자바스크립트 for-of 문법 let initialCurrentWeatherData = res.data.response.body.items; let T1H = initialCurrentWeatherData.item.find(temp => temp.category === 'T1H').obsrValue // 기온 데이터 let RN1 = initialCurrentWeatherData.item.find(temp => temp.category === 'RN1').obsrValue // let REH = initialCurrentWeatherData.item.find(temp => temp.category === 'REH').obsrValue // let PTY = initialCurrentWeatherData.item.find(temp =>.. 2024. 3. 27.
Vue.js 기초(3) 핵심문법 - Data 인라인 핸들러 : 이벤트가 트리거될 때, 실행되는 인라인 javaScript 기능 인라인 핸들러는 말 그래도 어떤 기능을 동작하는 코드가 HTML Element 내에 직접 할당되는 것을 의미한다. 메서드 핸들러 : 컴포넌트 script 부분에 정의된 메서드(함수)를 이벤트 핸들러에 할당해주는 방식 computed : 함수처럼 코드를 작성하지만. return 시키는 데이터를 사용하기 때문에 데이터 취급을 하는 공통적으로 사용ㅇ되는 로직 혹은 복잡한 로직을 미리 처리하여 반복된 로직처리를 방지하는 계산된 형태의 데이터를 만드는 속성. 너무 많은 연산을 스크립트나 템플릿 HTML 안에서 처리하면 코드가 비대해지고 유지보수가 어렵기 때문에 사용한다. Watch : 어떤 데이터를 감시하고 있.. 2024. 3. 14.
[프로그래머스] 이상한 문자 만들기 [구현] [level 1] 이상한 문자 만들기 - 12930 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. 제한 사항 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. 입출력 예 sreturn "try hello world" "TrY HeLlO WoRlD" 입출력 예 설명 "try hello world"는 세 단어 "try", "hello", "world"로 구성되어 있습니다. 각 단어의 짝수번째 문자를 대.. 2024. 3. 12.