전체보기 (92) 썸네일형 리스트형 [TypeScript] 타입스크립트에서 사용 가능한 모든 타입 기본 타입 (Primitive Types) boolean: 논리적인 값 true와 false를 가질 수 있습니다. number: 모든 숫자, 정수나 실수, NaN, Infinity 등을 나타낼 수 있습니다. string: 문자열을 나타냅니다. void: 반환값이 없는 함수의 반환 타입을 나타냅니다. null: 값이 없음을 나타냅니다. undefined: 값이 할당되지 않음을 나타냅니다. 객체 타입 (Object Types) array: 배열을 나타냅니다. number[], string[] 등으로 표기할 수 있습니다. tuple: 고정된 요소 수 만큼의 타입을 미리 선언하고, 그에 맞는 값을 배열 형태로 표현합니다. enum: 열거형으로, 숫자값 집합에 이름을 지정한 것입니다. any: 모든 타입을 허용합.. [Babel] CSS 설정법 Babel은 JavaScript를 사용하는 개발자들이 최신 JavaScript 구문을 사용하면서 구식 브라우저에서도 코드를 작동시킬 수 있게 해주는 도구입니다. CSS와는 직접적인 관련이 없지만, CSS 전처리기인 Sass, Less, Stylus와 같은 도구들과 함께 사용될 때 유용합니다. CSS 전처리기를 사용할 때, 브라우저는 이를 이해하지 못합니다. 따라서 CSS 전처리기를 사용하는 개발자들은 CSS 파일을 생성하기 위해 전처리기를 사용하고, 이 파일을 브라우저에서 사용합니다. 이때 Babel을 사용하면 전처리기에서 생성된 CSS 파일을 브라우저에서 사용 가능한 CSS 파일로 변환할 수 있습니다. Babel을 사용하여 CSS 파일을 변환하려면 다음 단계를 따르세요: Babel 설치하기: 먼저 Ba.. [Webpack] CSS 설정법 Webpack은 JavaScript 모듈 번들러로서, JavaScript, CSS, 이미지 등 모든 종류의 파일을 하나의 파일로 번들링할 수 있습니다. Webpack을 사용하여 CSS 파일을 번들링하려면 다음 단계를 따르세요: Webpack 설치하기: 먼저 Webpack을 설치해야 합니다. npm install --save-dev webpack webpack-cli 명령어를 실행하여 Webpack을 설치합니다. CSS 로더 설치하기: Webpack은 CSS 파일을 이해하지 못합니다. 따라서 CSS 파일을 로드하고 해석하기 위해 CSS 로더를 설치해야 합니다. npm install --save-dev style-loader css-loader 명령어를 실행하여 style-loader와 css-loader를.. [Vue3] Computed와 Methods 차이 methods나 computed나 그게 그거 아니야? 라는 생각이 들어 좀 더 공부를 하게 되었다. computed - template내부에 선언된 computed중에서 해당 함수와 연결된 값이 바뀔 때만 해당 함수만을 실행한다. methods -그런거 모르겠고 template내부에 선언된 methods중에서 update라이프사이클이 동작한(=아무 변수나 바뀐)다면 함수를 모두 실행한다. 고로, 딱 변화된 부분만을 감지해서 연산을 해주는 것이 computed이다. ChatGPT에게 둘의 차이를 예시를 들어 설명해달라고 부탁했다. Vue 3에서 methods와 computed 모두 컴포넌트 안에서 함수를 정의할 수 있는 방법입니다. 하지만 두 가지 기능은 차이가 있습니다. methods는 일반적인 함수이며.. [Vue3] Computed에 대해 ChatGPT에게 물어보기 Vue3의 Computed에 대해 ChatGPT에게 물어봤습니다. vue3의 computed는 어떤 용도야? 예시를 들어 쉽게 설명해줘 Vue 3의 computed는 Vue 인스턴스의 상태를 기반으로 계산된 값을 반환하는 함수입니다. computed는 Vue의 반응성 시스템을 활용하여, 의존하는 상태가 변경될 때마다 다시 계산되며, 계산된 값을 캐시하여 중복 계산을 피합니다. 예를 들어, 다음과 같은 Vue 컴포넌트가 있다고 가정해봅시다. 원의 반지름: {{ radius }} 원의 넓이: {{ area }} 이 컴포넌트는 radius라는 상태를 가지고 있고, 이를 기반으로 area라는 계산된 값을 가집니다. area는 computed 속성에 정의된 함수를 통해 계산됩니다. 이 때, computed 내부에.. ChatGPT에게 물어본 Composition API와 React Hooks의 차이 Vue.js 3의 Composition API와 React의 Hooks는 매우 유사한 목적과 기능을 가지고 있습니다. 둘 다 상태와 라이프사이클 로직을 컴포넌트 로직에서 분리하고, 함수형 프로그래밍을 촉진하여 코드의 재사용성과 가독성을 높이기 위해 만들어졌습니다. 그러나 두 API 간에는 몇 가지 차이점이 있습니다. Vue.js 3의 Composition API는 Options API와 함께 사용될 수 있으며, 기존의 Options API를 보완하기 위해 만들어졌습니다. 이에 비해 React의 Hooks는 기존의 라이프사이클 메서드를 대체하기 위해 만들어졌습니다. 또한 Vue.js 3의 Composition API는 반응형 시스템과 밀접하게 연결되어 있습니다. Vue.js는 리액트와 달리 양방향 데이터 .. [map/filter] 자주 사용하는 배열 메소드 배열 메소드를 잘 알아두면 실무에 큰 도움이 된다고 한다. 간단히 정리해두고자 한다. map 함수와 filter는 형태가 비슷하다. 결론, 용도에 따라 적절한 함수를 사용하면 된다. map은 조건에 맞는 요소의 value값만을 배열에 넣어 반환한다. filter는 조건과 요소가 부합할 때(true) 해당 요소의 key:value 값을 배열에 넣어 반환한다. [axios/json] REST Api를 통해 받아온 정보 파싱하기 통신을 위해 fake rest api를 이용하기로 했다. 내장 라이브러리인 fetch부터 공부하는 것이 순서에 맞으나 이전에 axios를 학습했던 경험이 있어 오늘은 axios로 테스트해본다. //rest api에서 받아온 값을 담기위한 변수 let dataSringify: any = []; let stringifyToParse: any = []; let directData: any = []; const runAxios2 = () => { axios.get('https://jsonplaceholder.typicode.com/todos/') .then((response) => { dataSringify.push(JSON.stringify(response.data)); console.log(dataSring.. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
