본문 바로가기

분류 전체보기222

[Vue.js] Emit, v-model로 컴포넌트간 데이터 보내기 (자식 컴포넌트 => 부모 컴포넌트) Vue.js에서 컴포넌트간 데이터 통신은 Props와 Emit으로 가능하다. React.js : 부모=> 자식 컴포넌트 방향으로 Props만 내릴 수 있는 단반향 데이터 흐름 Vue.js : 부모 => 자식 방향은 Props로 데이터 내리기, 자식 => 부모 방향은 Event Emit으로 데이터 올리기가 가능한 양방향 데이터 흐름 부모 컴포넌트의 데이터를 자식 컴포넌트에서 변경하여 부모 컴포넌트로 다시 올리려면? react에선 부모 컴포넌트에 있는 state를 자식 컴포넌트에서 setState만 props로 받으면 쉽게 변경이 가능했습니다. Vue.js에선 어떻게 할까요? Vue.js에선 emit을 사용해 데이터를 보낼수 있습니다. watch: { selectedValue: function (newVal.. 2022. 9. 28.
[Vue.js] 로컬스토리지 새로고침 문제 ;; (해결) To Do App을 만들다. vue2로 컴포넌트간 데이터 주고 받는게 이해가 안되서 혼자 To Do App을 만들어 보고 있습니다. 프롭스로 데이터 내리고, 이벤트로 올리는 걸 하면서 익숙해지는 중이었습니다. ⁉️ 근데 문제가 생겼네요. 말이 안되는 문제라 지금 아직 해결을 못했어요. created() { for (let i = 0; i < localStorage.length; i++) { let todoKey = localStorage.key(i); console.log(todoKey) let item = JSON.parse(localStorage.getItem(todoKey)); console.log(item); this.todoList.push(item); } }, 문제가 발생한 코드는 위 코드입니.. 2022. 9. 28.
CSR과 SSR CSR (Client Side Rendering) SSR(Server Side Rendering) CSR이란? CSR이란 Client Side Rendering의 약자이다. 직역 하면 클라이언트 측에서 렌더링을 한다는 의미가 된다. CSR이라는 용어가 낯설지만, 생각보다 간단한 개념이다. CSR은 특별한 것이 아니라 나처럼 웹 개발, 프론트엔드 개발을 시작한지 얼마 안된 사람이라면 웹의 기본적인 동작으로 알고 있는 방식이다. 그 방식은 바로 서버에서는 데이터를 보내 주는 역할을 하고, 클라이언트에서는 해당 데이터를 통해 화면을 보여주고, 유저 인터렉션을 통해 데이터를 요청하는 방식이다. CSR 동작 방식을 순서대로 표현하면 다음과 같다. 클라이언트에서 서버로 Javascript 요청 서버에서 클라이언트로.. 2022. 9. 28.
[Javascript] (프로그래머스) 짝지어 제거하기 (level 2) [Javascript] (프로그래머스) 짝지어 제거하기 (level 2) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(s) { const stack = [&#39;&#39;]; for (let i = 0; i < s.length; i++) { let curIndex = stack.push(s[i]) - 1; if (stack[curIndex - 1] === stack[curIndex]) { stack.pop(); stack.pop(); } } return stack.length === 1 ? 1 : 0; } 투포인터로 돌리려고 코드를 짜고 있었습니다. 근데 갑자기 이게 도대체 뭐하는 짓이지… 라는 현타가 오면서 더 좋은 방법.. 2022. 9. 28.
[Javascript] (프로그래머스) 최솟값 구하기 (level 2) [Javascript] (프로그래머스) 최솟값 구하기 (level 2) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(A,B){ A.sort((x,y) => y - x); B.sort((x,y) => x - y); let minMultiple = 0; A.forEach((a, i) => minMultiple += A[i] * B[i]); return minMultiple } 어떻게 해야 최솟값이 나올지 모르겠어서 설마 모든 경우의 수 다 돌리는건가? 생각을 했습니다. 역시나 수학적 해결방법이 있었습니다. ㅎㅎ 부족한 모습이 아쉽지만 하나씩 알아가는거겠죠? ㅎㅎ 최솟값과 최댓값을 곱하는 식으로 해서 곱해지는 숫자의 평균이 가장 .. 2022. 9. 27.
[Vue.js] style 태그에 있는 scoped의 의미 CSS를 정의하는 style태그에 scoped의 의미 SPA는 말 그대로 Single Page, HTML Page가 단 한개만 존재하기 때문에 Component별로 다른 파일에서 Style을 지정해주어도 각 태그, class 등에 적용되는 style이 겹칠 수 있다. 이를 해결하기 위해서 사용되는 방법은 여러가지가 있다. React에선 SCSS의 Nesting을 사용하거나, styled components를 사용해서 className을 독립적으로 지정되도록 하는것이 일반적이다. Vue.js에선 2022. 9. 18.
[Vue.js] Vue CLI를 활용해서 로그인 form 만들기 Vue CLI를 활용해 사용자 입력 폼 (로그인 폼) 만들기 기초 강의의 마지막으로 로그인 폼 만들기를 해보았다. 이제 vue 개발을 시작할 준비가 되었다~! // @App.vue id: pw: login hi 2022. 9. 18.
[Vue.js] 배운 내용들 Vue Cli로 마이그레이션 해보기 Vue Cli를 통해 컴포넌트 만들어보기 아래와 같이 Vue CLI를 통해 AppHeader 컴포넌트를 만들고, Props 내리기, Event 올리기를 해보았다. data()로 달라진 점 주석에 설명이 되어 있으며, 해당 부분 이외엔 특별히 다른점이 없다. 이제 이정도면 Vue를 통해 개발을 시작할 준비가 되었다. 중급 강의를 들으러 가기 전 마지막 사용자 입력 폼 하나를 만들어 볼 예정이다. //@ App.vue {{ str }} // @ components/AppHeader.vue {{ propsdata }} send 2022. 9. 18.
[Vue.js] vue cli와 이전 방식 비교 Vue Cli와 이전 방식의 비교 아래 코드에 주석을 통해 설명했지만, 정리해보면 new Vue({ }) 라는 인스턴스 방식에서 export default { } 방식으로 변경 const component { template : &#39;&#39; } 방식에서 template태그 안으로 html 부분 이동 컴포넌트 태그 영역은 kebab-case, PascalCase 모두 같다. => 아래 인스턴스 옵션 속성, 컴포넌트 옵션 속성 부분에 components: { HelloWorld } 이런 부분에 선언되어있는 것이고, 이 HelloWorld 는 &#39;hello-world&#39; = HelloWorld와 같다. 2022. 9. 18.
[Vue.js] Computed 속성을 활용한 CSS Class 바인딩 Computed 속성을 활용한 CSS Class 바인딩 주석 처리 한 것처럼 class 네임에 인라인으로 warning을 true일 때만 넣어줄 수가 있다. computed 속성을 활용하면 인라인이 아니라 하나의 함수명으로 제어할 수 있다. Hello 2022. 9. 18.

티스토리툴바