Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - 당연하지만 vue도 상위 컴포넌트 (컨테이터) 가 props를 알아야 옵저버가 연결된다. - transform - animation Feeling (느낀 점) 예전에 우연히 유튜브에서 구글에 입사제의 받은 포트폴리오를 보고 충격을 받은 적이 있다. 또 가끔 웹사이트를 돌아다니다보면 굉장히 이쁜 인터랙션이 구현 되어있는걸 봤는데 되게 이쁘기도 하고 만들어보고 싶었다. 그치만.. css를 굳이 저렇게 까지 깊게 만져야 되나 싶어서 굳이 공부해보지는 않았다. 사실 만들으라고 하면 만들 자신도 없고 3d 페이지 같이 예쁘게 인터랙션이 구현되어 있는 웹사이트를 보면 언젠가 하겠지 하려면 금방 하겠지 하고 지난게 벌..
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - LocalStorage 사용법 - 디렉티브 v-for, v-bind, v-model, v-onkeyup 등 디렉티브 - created 메서드 Feeling (느낀 점) - 솔직히 todoList는 문법을 알고 있으니 참고하지 않고 가볍게 작성할 줄 알았는데 익숙하지 못한 문법과 React적 사고 때문에 생각보다 훨씬 오래 걸렸다. 특히 toggle기능을 구현하는데 의외로 오래걸렸다. vue는 리액트와 달리 set함수를 사용하지 않아 불변성을 "억지로" 유지할 필요도 없기 때문에 메서드에서 인자로 객체를 받는다면 주소값을 받기 때문에 프로퍼티에 값을 바로 넣어줄 수 있었다. 리액트에서는 상상도 못할 방법이라..
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - HTML파일로 Vue를 사용해 개발하기 - Vue 라우트 - CLI 를 통한 Vue개발 - watch, computed 속성의 차이 - v-on, v-bind, v-if, v-show 디렉티브 Feeling (느낀 점) - 해봤자 리액트만 알고 그 마저도 쥐똥만큼만 아는 주제에 Vue의 단점들만 보이기 시작했다. 핑계거리를 찾고 있는것 같았다. 뭔가 새로운것을 공부할때에는 설레고 재밋어야 하는데 공부하다가 이걸 왜 굳이 이렇게 해? 리액트가 더 편하고 좋은데? 라는 생각을 하고 있는 자신을 발견하고 현타가 왔다.. 1년이 다르게 트렌드가 확확 바뀌고 새로운 기술이 나오는 프론트엔드 개발자가 새로운것을 배우..
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - vue의 기초 문법 및 사용법 - MVVM 패턴 Feeling (느낀 점) - 디자인 패턴은 별로 생각해보지 않았다. redux를 사용할때 flux패턴을 사용하는구나~ 정도로만 알고 있었고 아마 vue를 사용하게 될때에도 그렇게 사용할것이다. 어차피 프레임워크라서 그렇게 사용하지 않으면 사용하지 못하기 때문이다. 그래도 앞으로 리액트처럼 어떤 패턴이 정해져있지 않은 프로젝트 할때에는 디자인 패턴을 미리 알고있는것이 좋을 것 같다. 나름 리액트에 맞는 컴포넌트를 만들기 위해 노력하고 고찰하면서 개발하려고 노력하지만 디자인 패턴에 대한 생각은 별로 해본적은 없다. 아마 리액트 디자인 패턴에 대해 찾아 보았으면..
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - vue의 기초 문법 및 사용법 Feeling (느낀 점) - 프론트엔드 개발자가 되고나서 개발은 무조건 리액트로만 했어서 그런지 남들이 쉽다고 하는 vue.js의 문법을 볼 때는 오히려 어렵게 느껴졌다. 이미 vue에서 html태그처럼 외워서 해야하는것들도 많았고 익숙하지도 않았기 때문에 영어단어 외우는것처럼 하나하나 형식..? 속성을 주는게 꽤나 귀찮았다. 만약 vue부터 공부했다면 조금 더 쉽게 공부는 할 수 있었을것같긴 하지만 vue는 많은 부분에서 javascript문법을 사용하기 보다는 내장되어 있는 속성들을 이용해서 개발하기 때문에 편할수는 있겠지만 자바스크립트를 잘 모르는 상태에서 리액트를 선..
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) Feeling (느낀 점) Affirmation(자기 선언)
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - 리액트 네이밍 규칙.. 부끄럽지만 handle로 시작하는 함수는 단순히 돔을 조작하고 props로 넘기는 함수가 아닐때는 무조건 handle이라는 네임으로 시작하는줄 알고 있었다.. handle로 시작하는건 html태그의 event를 제어하는 함수일때만 붙이는거다..! Feeling (느낀 점) Affirmation(자기 선언) - vue 공부하기.. 사수가 퇴사하면서 vue로 만들어진 기존 프로젝트를 맡게되었다.
투두리스트란? 말 그대로 투두리스트이다. 다만 우리가 개발 공부를 할 때 TodoList를 투두리스트는 개발의 기본인 CRUD를 전부 구현해야 하기 때문에 공부용 예제 및 연습으로 많이 사용한다. 우선 styled-components를 이용해서 UI부터 구현해보자. TodoList.js import React, { useState } from "react"; import styled from "styled-components"; const TodoListContainer = styled.div` display: flex; flex-direction: column; width: 30rem; margin: 10rem auto; height: 50rem; border: 1px solid black; h2 { ..
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) - 리액트 네이밍 규칙.. 부끄럽지만 handle로 시작하는 함수는 단순히 돔을 조작하고 props로 넘기는 함수가 아닐때는 무조건 handle이라는 네임으로 시작하는줄 알고 있었다.. handle로 시작하는건 html태그의 event를 제어하는 함수일때만 붙이는거다..! Feeling (느낀 점) Affirmation(자기 선언)
Todos (할 것) HTML 삽입 미리보기할 수 없는 소스 Finding (새로 알게 된 것) Feeling (느낀 점) Affirmation(자기 선언) - 오전에 TIL 작성한다 해놓고 까먹었다.. - 이제.. 포스팅용 프로젝트도 완성했으니까.. 제발 포스팅하기.. 자괴감든다..
