React 기초

• React.createElement : html 태그 만들기
• ReactDOM : 리액트에서 어떤식으로 컴포넌트를 만들지 웹 화면에 실제로 구현하는 역할(렌더링 역할)
• state : 컴포넌트의 강점 중 하나로 상태는 바뀔 여지가 있는 부분을 설정
• JSX : Javascript + XML - single tag는 /로 꼭 닫아주기
• JS 기본 이벤트 핸들러 : onclick, onchange, onsubmit, onload, oninput, onfocus, onblur
• () : 그룹 연산자, 우선 순위 지정할 경우 사용
• render 밖에서 매서드를 지정할 경우 화살표 함수 사용
• setState를 실행할 경우 render 함수가 다시 실행된다는 점을 기억해서 최적화 생각하기

🎨2021. 11. 10

삼주정도의 프로젝트 기간이 끝나고 처음부터 리엑트 공부를 시작했다! 프로젝트에 밀려 이론 공부를 제대로 하지 못했던 것이 너무 아쉬웠는데 최종 프로젝트에는 리엑트를 잘 사용할 수 있도록 공부를 탄탄히 해놓는 것이 목표다! 전에 강의에서는 함수형으로만 배웠는데 class 형으로 실습을 해보면서 바닐라JS와 비슷하다는 생각을 했다. 그래서 리엑트를 배운 이후에 바닐라 JS도 한번 더 공부해야겠다는 생각을 했다. 내일도 react 기초 강의 듣기 ~ ! ~ !

day42

Custom Hook

• 사용자 정의 훅 : 기존 훅을 조합해서 생성
• 자주 사용되는 사용자 로직을 사용자 정의 훅으로 정의하고 사용
• 중복 코드를 제거하며 편하게 사용할 수 있음

  Storybook

• ui 컴포넌트를 모아 문서화하고 보여주는 오픈소스 툴
• 컴포넌트를 storybook에 등록시켜 놓으면 어떤 컴포넌트가 있는지 쉽게 확인 가능
• plugin을 통해 다양한 기능 제공

  Form

• form : 다양한 요소가 존재하며 사용자 입력과 관련된 요소들을 둘 수 있음
• storybook을 기반으로 개발하게 되면 편하게 개발할 수 있음
• formik : 라이브러리를 통해 form 관리 가능

day43

컴포넌트 연습하기 - Text, Header,Image, Spacer, Spinner, Toggle

🎨2021. 10. 19

며칠간 프로젝트가 시작되면서 정신 없이 기획을 하느라 강의를 못들었는데 오늘 오랜만에 강의를 다시 들었다. storybook 기능은 처음 알게된 기능이었는데 ui를 변경해가면서 적용된 모습을 바로 확인할 수 있고 컴포넌트를 쉽게 관리할 수 있다는 점이 정말 편리하다는 생각이 들었다 ㅎㅎ 43일차는 실습 위주로 진행됐는데 프로젝트를 할 때 사용해야 하는 기능들이었기 때문에 굉장히 유익했다! 강의가 많이 밀렸는데 프로젝트를 해야해서 걱정이 앞선당.. 공부한 것들을 잘 기록해 놓고 막히는 부분에서 다시 활용해야겠다! 내일은 오프라인 프로젝트 회의 있는 날! 강의를 들을 수 있을지 모르겠다ㅠㅠ 44일차까지는 듣는 것이 목표다~

day41

컴포넌트 - 실습

• 함수, class를 사용하여 컴포넌트 생성
• props : 함수 파라미터로 데이터를 주고 받을 수 있음
• defaultProps : 값을 넘기지 않았을 경우를 대비해 defaultProps를 통해 default 값을 지정해 놓을 수 있음
• propTypes : 넘겨진 값의 타입을 지정할 수 있으며 타입이 다른 경우 에러 발생 - prop이 안정적으로 작동하게 하기 위해 지정 권장

  event Binding

• 이벤트가 발생했을 때 실행될 함수를 정이한 후 만들어진 함수를 이벤트 바인딩 해주기
• onClick, onMouseDown, onInput, onKeyDown, onMouse ...

  useState & useRef 차이

• useState : 상태의 기본값을 파라미터로 넣어서 호출해주며 첫번째 인자는 state, 두번째 인자는 setter함수
• useRef : 돔에 직접 접근할 때 또는 지역변수로 사용
• 차이점 : useState는 값이 변경될 때 다시 렌더링하지만 useRef는 값이 변경되더라도 다시 렌더링하지 않음
• React.forwardRef : 부모 컴포넌트에서 자식 컴포넌트로 ref를 전달하여 부모가 자식 ref 참조하도록 함

day42

컴포넌트 스타일링

• stylesheet 이용하기
• inline 스타일 적용하기
• css인 JS 적용하기 : emotion 사용
• emotion을 이용한 styled 컴포넌트 : 즉시 스타일이 적용된 컴포넌트를 만들어 줄 수 있음

  React Hook

• 함수 컴포넌트에서 Hook을 통해 함수 내부에 있는 상태 관리 가능
• useMemo : 렌더링이 필요하지 않은 부분을 리렌더링 하지 않도록 최적화를 위해서 사용하는 훅
• React.memo : 자식 컴포넌트가 변경되지 않았을 경우에는 다시 렌더링되지 않도록 막아 자식 컴포넌트들의 최적화
• useCallback : 함수가 재정의되어 렌더링되는 것을 막기 위해 사용

🎨2021. 10. 13

리액트를 배워보니 상태관리를 위해 다양한 함수와 훅이 있다는 생각이 들었다. Vanilla JS를 하면서 상태 관리를 하는 것이 굉장히 어려웠는데 리액트 Hook을 사용하면 보다 쉽게할 수 있을 것 같다. 그러나 기능이 많은 만큼 사용하는 상황이 헷갈리고 배워야 할 것들이 늘어나면서 더 많은 시간을 들여서 공부해야겠다. vue와 다른 부분이 있어서 문법적으로도 헷갈리지만 실습을 계속 해보면서 어서 익숙해져야겠다~! 내일도 리액트 강의 듣기!

day41

React

• View만 관리하는 라이브러리로 다른 부분은 책임지지 않음
• react는 컴포넌트의 조합으로 View를 구성하기 때문에 컴포넌트는 react의 가장 중요한 요소
• 가상돔을 사용하여 필요한 부분만 한번에 렌더링하기 때문에 최적화 없이 빠른 성능을 낼 수 있음

JSX

• class -> className : class가 이미 JS내에서 예약어기 때문에 class 이름을 지정할 때 className 사용
• 반드시 최상위 요소는 하나여야 함
• 최상위 요소가 여러개야 할 경우 다른 요소로 감싸거나 fregment로 감싸기

  조건문 & 반복문

• 조건문

  const str = "Hello React"
  const showLink = false
  

{showLink && ( //showLink가 true일 경우 출력 Learn {str} )}

+ 삼항연산자
```javascript
const showLogo = "show"

{showLogo === "show" ? 
  <img src="./logo.svg" alt="logo">
  :    <h1>React</h1>
}

• 반복문

  const libraries = ['React', 'Vue', 'Angular']
  

{ libraries.map(library => (
• {library}
)) }

🎨2021. 10. 12

오늘 드디어 리액트 첫 강의를 들었다! 뷰보다 리액트가 어렵다는 얘기를 많이 들었는데 처음 봤을 때 JS파일에 있는 html 구조인 JSX를 보고 뷰랑 비슷하다는 생각이 들었다. 컴포넌트를 짤 때 보통 도메인에 따라서 분류했는데 그 외의 방식들이 있다는 사실을 알게 되었다. 앞으로 컴포넌트를 짤 때 잘 적용해보면 좋을 것 같다. 아직 기초에 기초만 배워서 정확하게 파악하지 못했는데 얼른 강의를 듣고 공부해봐야겠다. 내일은 정말 리엑트 강의에 모든 시간을 사용해야겠다!

day39

Hash모드(domain/#/~)

• 기본적인 도메인주소로만 요청이 들어가기 때문에 다른페이지들에선 요청이 보내지지 않음
• #기호를 통해서 하나의 페이지에서 내용을 구분하는 방식으로 사용
• 기타 특별한 처리 없이도 바로 페이지를 구분해서 서비스를 만들 수 있음
• 하나의 도메인을 사용해서 요청만 처리하기 때문에 검색 최적화의 단점이 있음
• 해시모드에선 새로고침시 서버에 전송되는 요청이 아니기 때문에 404 Error 방지 가능

HTML5모드, History 모드(domain/~)

• 검색엔진 최적화의 장점
• 기본적인 주소를 바로 사용하기 때문에 주소에 맞게 매번 서버로 요청이 들어갈 수 있음
• SPA를 사용하면 index.html 만으로 내용이 동작할 수 있도록 정리해주면 됨
• 새로고침시 404 Error가 발생하여 이에 대한 처리를 해줘야 함

  Babel

• 최신의 자바스크립트 문법을 더 구형의 버전에서도 동작할 수 있도록 문법을 변환시켜주는 트렌스 파일러
• 최신의 문법을 통해 개발한 후 더 다양한 환경의 사용자에게 이를 제공하기 위해서 사용

PostCss

• post(이후)Css는 후처리를 담당하며 css를 모두 실행한 이후 postCss로 결과를 만들어낼 수 있음
• Autoprefixer : 공급업체 접두사를 의미하며 webkit, ms 등을 자동으로 붙여줌
• 브라우저와 호환되지 않는 기능들을 호환되도록 할 수 없음

🎨2021. 10. 07

오늘 드디어 vue의 이론적인 강의들을 마쳤다. 사실 과제 제출기간이 얼마 남지 않아서 중간에 빼먹은 강의가 있는데 그래도 과제에 필요한 강의는 모두 들었다! 당장에 과제를 시작해도 늦기 때문에 사실 제대로 실습 내용을 복습할 기회가 없는 점이 아쉽다. router파트에서 hash모드 같은 것은 Vanilla JS의 hashbang과 비슷하여 어렵지 않게 학습할 수 있었다. 가장 흥미로웠던 내용은 postCss인데 사실 css공부를 했었기 때문에 어느정도 webkit 같은 것이 무엇을 의미하는지 알고 있었지만 변환 패키지가 있다는 사실은 알지 못했다. 이렇게 또 하나 막연하게 갖고있던 궁금증을 풀 수 있게됐다. 패키지를 사용하면 어렵지 않게 다양한 브라우저에 적용할 수 있을 것 같다! 브라우저에 호환되지 않는 기능을 호환되도록 하기 위한 기능이 아니라는 것을 잘 기억해둬야겠다! 내일부터는 실습강의를 들으면서 과제를 시작해볼 것이다. 배포까지가 과제인데 제 시간안에 잘 해낼 수 있었으면 좋겠다 ㅎㅎ

day38

Vuex Store

• store는 전혀 관련 없는 컴포넌트들 사이에서도 데이터를 활용할 수 있기 때문에 유용
• 상태관리 패턴 : state(중앙집중화로 관리하는 데이터), view(화면에 보여지는 내용), action(반응성 데이터들을 동작)
• createStore를 통해서 store 인스턴스를 생성해준 이후 use를 통해서 연결
• store기본 구성 : state(데이터), getters(계산된 데이터), mutations(데이터 상태를 변경하기 위해 사용), actions(데이터 변경 외의 로직들)
• state : vuex에서는 관리하고 사용할 데이터를 상태(state)라고 부르며 중앙에 집중되어있는 저장소 역할로 데이터 수정에 용이
• state는 직접 접근하여 데이터를 사용할 수 없음
• this.$store를 통해서 접근 가능

store의 모듈화

• store를 모듈화해서 내보낸 후 꺼내서 사용할 수 있음
• export를 통해서 내보낸 후 mapState, mapGetters, mapMutations, mapActions를 전개연산자를 통해서 접근할 수 있음

day39

Vue router

• route를 구성하여 plugin으로 연결하면 this.$route/ $router를 통해 접근 가능
• this.$route : 현재 페이지에 대한 정보를 가지고 있음
• this.$router : 페이지에 대한 조작을 할 수 있는 여러가지 매소드들이 들어있음
• : 자리에 해당하는 페이지들이 출력되며 페이지가 바뀔 때 다시 그려주는 영역
• HOME : HOME이라는 버튼을 통해 이동 가능
• path:'/:notFount(.*)' : 404 Error를 관리하는 방식으로 주소가 없는 경우 어떤 페이지를 출력할 지 결정할 수 있음
• this.$router.push('url') : 원하는 주소로 변경

🎨2021. 10. 06

store와 router 강의를 들었다. store의 개념을 어제보다 더 깊게 배웠는데 노션프로젝트 때 customEvent를 사용해서 데이터를 전달하던 방식보다 훨씬 간편하다는 생각이 들어 vue가 매력적으로 느껴졌다. Vanilla Js를 사용해서 router하는 과정은 굉장히 어려웠다. 노션 프로젝트를 할 때 특히 코드가 굉장히 지저분해져서 아쉬웠는데 Vue는 를 통해서 출력할 영역을 지정하기 때문에 복잡도가 줄어들고 코드 관리가 깔끔해져서 좋았다. 라이브러리를 쓰는 이유를 알 것 같다. 훨씬 간편하게 코드를 짤 수 있을것 같다! 내일도 Vue 강의 듣기 ~~!

day38

Teleport

provide-inject

Vuex(store)

🎨2021. 10. 05

데이터를 전달하는 방식이 점점 확장되고 있다는 생각이 들었다. props에서 provide-inject, store까지 다양한 방식의 데이터 전달이 있다는 것을 알게 됐다. 데이터를 전달하는 방식을 잘 공부하고 차이점을 파악해서 내가 필요할 때 적합한 기능을 사용하도록 해야겠다! 내일도 vue강의 듣기 !! !! ! !

day38

$translate

Plugin 만들기

mixin

vue 비동기

🎨2021. 10. 04

오늘 들은 강의는 어느정도 이름을 들었을 때 어떤 방식으로 사용될 것인지 예상이 가는 내용들이라 쉽게 따라 갈 수 있었다. 가장 재밌게 공부했던 부분은 mixin이었는데 얼마전 공부했던 sass에도 있던 기능이 vue에서도 존재한다는 것을 알게됐다. sass를 공부하면서도 중복을 줄여 코드를 깔끔하게 할 수 있는 좋은 방법이라고 생각했는데 vue에 적용해서 사용하면 좋을 것 같다. 내일도 강의를 들어야 한다 ~ 강의가 새끼를 치나 끝이 보이지 않는다 살려줘잉😱

day36

Webpack

Eslint

컴포넌트

Props

Non-Prop

컴포넌트 커스텀 이벤트

Slot

동적 컴포넌트

Refs

🎨2021. 10. 03

오늘 webpack강의를 들었다! webpack의 기본 사용법이 parcel에 비해서 까다로워서 공부하는 것이 쉽지 않았다ㅠㅠ 그래도 필요한 기능을 파악하고 하나씩 설치해나가면 굉장히 편리하게 원하는 기능 옵션을 설정하여 사용할 수 있겠다는 생각이 들었다! 지난주 css과제에서 eslint의 작업환경을 구축해본 경험이 있었는데 친구의 도움을 받아서 했었다. 막상 혼자하려니 뭐가 뭔지 몰라서 거의 복붙하는 느낌으로 진행했는데 이번 강의를 통해서 eslint에 지정하는 옵션들이 무엇을 의미하는지 공부할 수 있었다. 지난번에 js를 사용할 때 계속해서 빨간줄이 떴던 이유를 알게 됐다. 잘 몰라서 그냥 서칭을 통해 알게된 주석으로 eslint를 끄는 방식을 사용했는데 멘토님께서 특정한 경우를 제외하면 끄지말라고 조언해주셨다. 강의를 듣고보니 간단하게 javascript나 node.js에 대해서 eslint에게 알려주는 스크립트를 추가해주면 됐었다. 개발 환경 구축은 완전히 처음하는 부분이었어서 다른 파트보다 더 오랜 시간을 들여서 강의를 들었어야 했지만 컴포넌트는 바닐라JS에서 공부했던 부분이었기 때문에 이해가 더 쉬웠다! 그래서 오늘 36일차 강의까지 다 들을 수 있었다 ~ 과제 기간이 많이 남아있지 않은데 강의가 많이 남아서 걱정이다ㅠㅠ 최대한 빨리 늦어도 화요일까지는 강의를 다 듣고 과제를 시작할 계획이다..!

day35

npm

nvm

npx

day36

Components

SFC(Single File Components)

Parcel

Webpack

🎨2021. 10. 02

오늘 강의를 통해서 굉장히 많은 것들을 배웠다. vue.js 뿐만 아니라 개발하는 환경을 구축하고 프로젝트를 시작하기 위해 필요한 지식들을 배웠다. 궁금하던 내용들이지만 문서로 읽어도 잘 이해되지 않던 부분들을 강사님께서 잘 설명해주셔서 강의를 듣는 내내 집중할 수 있었다. npm, npx같은 용어들은 실습과 과제를 하는 사용해왔지만 정확한 의의는 알지 못했는데 오늘 정확하게 공부할 수 있었다. nvm은 처음 알게됐는데 nvm use로 node.js의 버전정보를 지정하는 과정에서 에러가 계속 발생했다. 에러내용을 검색하면서 서칭해봤는데 찾아본 해결책으로 해결되지 않아 많은 시간을 날렸다ㅠㅠ 그러던중 슬렉에서 같은 문제를 겪고를 공유하신 분을 찾았고 얻은 해결책이 VScode를 관리자권한으로 실행하는 것이었다. 간단한 해결책이라 시간을 오래 사용한 만큼 허탈했는데 같은 공부를 하고 있는 분들이 이야기를 나누는 커뮤니티를 먼저 들여다봐야겠다는 깨달음도 얻었다 ㅎㅎ 강의가 많이 밀려서 강의의 늪에 빠져있다. 과제를 해야하는데 강의가 한번 밀리니 불고 불어서 못본척했다..🤣 잠시 과제를 미뤄두고 CSS과제 수정을 했는데 멘토님 코드리뷰 전에 CSS과제조차 완성하지 못해서 속이 많이 상했다.. 지나간 과제는 잠시 미뤄두고 과제 제출까지 남은 시간동안은 vue 공부에 집중해야겠다.

day36

v-model

컴포넌트

props & emit

$event

🎨2021. 10. 01

폼 입력을 바인딩하는 방법을 배웠다. html을 사용하면서 form태그를 많이 사용해보지 못했는데 form을 통해 다양한 기능을 제공받을 수 있다는 점을 알게됐다. 내가 알고있던 것은 input 정도였는데 ㅎㅎ.. 생각보다 더 많은 기능이 있다는 것도 알게됐다. 데이터를 전달하고 받아오는 방식이 익숙하지 않아서 실습해본 것들을 다시 코딩해보며 공부해야겠다! 강의를 많이 듣지 못해서 내일이 걱정된다. 많이 밀려서 사실 보는것이 두려워졌다.양은 많지만 그만큼 꼼꼼히 설명해주셔서 vue에 대한, 개발에대한 지식이 적은 나에게 정말 도움이 되는 주간인 것 같다! 얼른 강의를 다 듣고 과제를 시작할 수 있었으면 좋겠다ㅎㅎ

day34

list rendering

• 상태유지 : 데이터를 변경했을 때 변경된 데이터를 전부 다 DOM에 반영하여 변경하는 것이 아닌 최적화 과정을 거침
• 단방향 데이터 바인딩 : 한쪽 방향에서만 데이터가 연결되며 데이터를 가져와서 출력하는 것만 가능
• 양방향 데이터 바인딩 : v-model을 사용하여 양쪽 방향에서 데이터 연결

  v-for

• v-for : 해당하는 요소를 반복하여 배열 데이터를 출력할 수 있음
• 현재 항목에 대한 index 값을 두번째 인수로 받을 수 있음
• v-for를 통해 객체 데이터를 반복하면 value값이 출력됨
• 객체 출력시 두번째인자로 key, 세번째 인자로 value를 받을 수 있음
• 객체데이터는 반복시 key, value의 순서를 보장할 수 없기 때문에 index를 사용하는 것을 지향하는 것이 좋음
• v-for을 사용할 때 고유한 key값을 넣어 줘야 함

배열 변경 감지

• 변이 메소드 : Vue가 감시중인 배열이 변이메소드를 사용하면 반응성 체크를 통해 화면을 갱신 - input요소에 데이터 전달
• 비변이 메소드 : 변이메소드는 메소드가 붙은 배열을 직접 업데이트 시켜주는 반면 비변이 메소드는 새 배열을 반환
• 배열 교체 : vue.js는 새로운 배열이 할당되더라도 기본적인 구조를 파악해서 변경된 부분만 렌더링하기 때문에 효율적

components & customEvnet

• components : 옵션을 통해 컴포넌트로 만들게되면 기능을 독립시켜 재사용성이 가능하며 중요한 기능을 캡슐화시켜서 사용 가능
• 컴포넌트 내에서 커스텀한 이벤트를 만들어 그것이 컴포넌트에서 실행될 때 어떤 메소드를 연결할 것인지 지정할 수 있으며 이벤트와 함께 데이터도 전송할 수 있음
• $emit : 지정하는 메소드의 이름과 실제로 컴포넌트에서 사용하는 이벤트의 이름과 일치시켜서 동작시킴 <!--html
  Add a todo Add
  javascript function generateId(){ return `${Date.now()}${Math.random()}` } const TodoItem = { te } const App = { components:{ TodoItem }, data() { return{ newTodoText:'', todos: [], } } }
• ->

  이벤트 헨들링

• 인라인 메소드 핸들러 : 메소드 이름을 직접 바인딩하지않고 인라인 JS구문에서 메소드를 사용할 수 있음
• 인라인 메소드 핸들러 사용시 이벤트 객체가 필요한 경우 순서에 상관없이 $event를 통해 받아올 수 있음
• 복합 이벤트 핸들러 : 하나의 이벤트에 여러개의 메소드를 적을 경우 실행기호인 ()를 붙여주며 ,나 ;를 통해서 구분해줘야 함

event/ key 수식어

• 이벤트 수식어 : vue.js에서 이벤트 수식어로 v-on 이벤트를 더 쉽게 사용할 수 있음
• stop, prevent, capture, self, once, passive
• passive: 이벤트를 통해서 화면의 렌더링과 동작의 처리를 분리시켜주며 모바일 환경에서 중요하게 사용하는 옵션
• 키 수식어 : vue.js가 키보드 이벤트에 제공하는 수식어
• exact : 연결되어진 해당 수식어만 인지하여 메소드 실행하기 때문에 정확한 조합을 설정할 수 있음
• 마우스 버튼 수식어 : left, right, middle

html로 된 listener를 사용하는 이유

• v-on, @를 사용하여 이벤트 요소에 연결시 얻을 수 있는 이점
• HTML 템플릿을 간단히하여 JS코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉬워짐
• 이는 제어관리가 쉬워지기 때문에 SFC(Single File Components)에서 큰 장점으로 작용
• JS에서 수동연결 하지 않고 요소에 직접 작성하기 때문에 VueModel은 순수 로직과 DOM을 필요로하지 않음
• ViewModel이 파기될 경우 모든 eventListener가 자동으로 제거
• 기능을 추가할 경우 그에 따른 최적화는 vue에서 담당하여 실행

🌊하루를 마치며

오늘 강의는 지난번에 배웠던 v-for심화된 내용과 Vue에서 event를 더 활용도 높게 쓰는 것을 배웠다. javascript에서 event를 사용하면서 많이 접했지만 passive라는 이벤트는 처음 알게됐다. 화면과 동작을 분리시켜주니 사용자는 연산이 많이 드는 부분도 인지하지 않도록 할 수 있다는 점이 좋게 느껴졌다. 사실 컴포넌트와 custom 이벤트 부분이 잘 이해가지 않아 한번 더 공부하고 예제를 작성할 생각이다. 조금은 익숙해졌다고 생각했는데 아직 데이터의 사용이 어렵게 느껴진다. 더 정확히 공부해야겠다. 내일부터 css는 털어내고 vue강의에 몰두할 계획이다! 늦은만큼 더 열심히 강의를 들어야 겠댱

day33

Computed

• 데이터를 조작할 때 표현식이나 methods를 사용할 경우 중복실행될 때 이미 결과값을 알고 있음에도 불구하고 여러번 계산해야하기 때문에 효율성이 떨어짐
• computed: 캐싱기능이 있어 첫번째 출력시 계산된 데이터를 캐싱했다 이후 출력시 캐싱된 데이터를 가져와 출력하기 때문에 같은 것을 반복적으로 출력할 때 유용
• 장점 : 의존하는 데이터에만 집중할 수 있으며 그 외의 데이터가 변경될 경우 다시 연산되는 부작용이 없기 때문에 관리가 용이
• computed를 통해 값을 할당할 수 없음
• computed 안에서 특정한 데이터를 get, set으로 구분해서 값을 할당하거나 가져오는 것이 가능

  const App = {
    data() {
        return {
            firstName : 'Joaquin',
              lastName : 'Phoenix'
        }
    },
      computed: {
        fullName:{
            get() {
              return `${this.firstName} ${this.lastName}`
            }
              set(newValue) {    //'Joaquin Phoenix'
                const names = newValue.split(' ')    
              //['Joaquin', 'Phoenix']
                this.firstName = names[0]
                this.lastName = names[names.length - 1]
            //middleName이 있는 경우에도 
            //lastName을 가져옴
            }
        }
    }
  }
  

const vueModel = Vue.createApp(App).mount('#app')

#### <span style="background-color : #ECEBFF">watch</span>
+ watch : 감시하는 데이터가 변경됐을 때 실행할 로직을 추가
+ 이미 선언되어진 반응형 데이터만 사용 가능
+ 감시 함수의 인수로 새로운 값과 이전 값을 받을 수 있음
+ watch콜백은 배열, 객체같은 참조형 데이터는 직접 교체될 때만 발생하기 때문에 참조형데이터에 대한 활용도가 떨어짐
+ deep : deep 옵션을 추가하여 참조형 데이터를 더 깊게 감시할 수 있도록 함
+ handler : 데이터 값이 변경됐을 경우 호출될 함수를 지정
+ immediate : 옵션 추가시 데이터가 변경되는 것을 감지하는 것과 별개로 데이터가 준비된 직후 바로 실행할 수 있도록 함 
```javascript
const App = {
    data() {
        return {
            users: [
              {id : 1, name : 'A'}
              {id : 2, name : 'A'}
              {id : 3, name : 'A'}
            ]
        }    
    },
    watch: {
        users:{
            handler() {
                console.log(this.user)
            },
            deep: true,    
              //deep이 true인 경우 변경사항에 대해
              //watch 콜백 실행
               immediate: true
        }
    }
}

day34

class

• vue.js에서 class라는 속성에 하나의 데이터 뿐 아니라 여러개의 데이터를 연결할 수 있도록 패턴을 제공
• 객체 리터럴로 작성하여 쉼표로 구분하는 key:value형태의 값을 작성하면 class를 추가할 수 있음
• class이름과 data이름이 같은 경우 생략하여 사용 가능
• BEM방식으로 하이픈과 같은 기호들이 class 이름으로 들어가는 경우엔 ''로 묶어서 작성해야함
• ''내부에서 하나의 속성에 띄어쓰기를 통해서 여러개의 class 이름을 넣을 수 있음
• class 내부에는 객체 데이터, 배열 데이터도 연결이 가능하며 배열로 넣은 문자데이터가하나의 class 값으로 정의됨

  <!-- className : dataName -->
  <div :class="{ active: active, small : small }"></div>
  <div :class="{ active, small }"></div>
  <div :class="{ 'title--active' : active}"></div>

  class와 객체 데이터의 연결

• class 속성에 하나의 객체 데이터를 직접 연결할 수 있음
• 객체데이터 내부에서 반응형 데이터를 활용해야 할 경우 그 객체 데이터를 computed를 통해 계산된 데이터로 만들어서 this키워드로 각각의 반응형 데이터를 사용
• this를 통해 접근한 반응형 데이터들이 수정될 때마다 객체의 계산된 데이터도 갱신되어 적용될 수 있는 구조가 됨

  <button @click="toggle">Click me!</button>
  <div :class="classObj"> {{ msg }} </div>

  const App = {
    data(){
        return {
            msg: 'Hello Vue',
              active: false,
              small: true
        }
    },
      computed:{
        classObj() {
            return {
                active: this.active,
                  'title--small color--tomato': this.small
                  //className : data
            }
        }
    },
      methods: {
        toggle() {
            this.active = !this.active
        }
    }
  }
  

const vueModel = Vue.createApp(App).mount('#app')

#### <span style="background-color : #ECEBFF">style</span>
+ 스타일 인라인 방식 : html에 스타일 속성을 사용해서 css를 추가하는 방식
+ 스타일 인라인 방식은 CSS명시도가 1000점이기 때문에 사용을 권장하지 않지만 데이터를 바인딩해서 스타일을 제어하는 경우에는 권장됨
+ 하나의 요소에 지정한 이벤틀에 여러개의 매소드를 연결하는 경우 이름 뒤에 소괄호를 추가하여 실행시켜야 함
```html
<div @click = "toTomato(); increaseWidth();">
  Hello Vue!
</div>

+vue.js에서 css 속성의 key값을 ''로 묶어서 데시를 사용하는 방식 외에도 카멜케이스도 지원하기 때문에 vue.js에서 자동으로 이를 변경해 줌

<div :style = "{ color, backgroundColor }"></div>

• 여러개의 객체 데이터를 연결하는 방법 : 배열 리터럴 사용하여 여러개의 스타일 객체들을 한번에 적용이 가능하며 중복된 속성이 있는 경우 나중에 적용한 값이 덮어씀

  <div :style="[titleStyleObj, styleObj]"></div>

  조건부 렌더링

• boolean data는 true, false 말고도 truthy, falsy 데이터를 통해 출력 여부를 판단할 수 있음
• v-if를 통해 요소를 출력할지 하지 않을지를 지정할 수 있음
• v-if와 v-else를 형제요소로 연결하여 사용 가능하며 두가지 사이엔 v-else-if를 제외하고 다른 요소들이 있지 않도록 주의해야함
• 조건에 걸려서 출력되는 요소가 여러개인 경우 새로운 요소로 래핑
• 래핑한 요소가 출력되지 않기를 원하는 경우 template태그를 사용하여 감싸면 template요소는 렌더링 되지 않음
• v-show : 요소가 보여질지 보여지지 않을지 boolean값으로 나타냄
• v-show는 구조적으로 우선 생성하기 때문에 false인 경우에도 잠시동안 데이터가 출력되어 보여질 위험이 있음
• v-cloak을 추가하여 컴포넌트가 준비될 때까지 컴파일 되지 않은 이중괄호 구문을 숨기는데 사용할 수 있음
• v-cloak이 추가된 요소가 사용되는 vue 프로젝트에서 이중괄호구문이 출력돼야하는 데이터의 준비가 끝나게 되면 vue.js 내부 동작을 통해 해당하는 디렉티브 제거

  [v-cloak]{
    display: none;    
  }
  // css를 통해 화면에 {{ msg }} 라고 출력되는 것을 방지

  <button @click="toggle">Click Me!</button>
  <div v-show="isShow" v-cloak>{{ msg }}</div>

  const App ={
    data() {
        return {
            msg: 'Hello Vue!',
              isShow : false
        }
    },
      methods:{
        toggle() {
            this.isShow = !this.isShow
        }
    }
  }
  

const vueModel = Vue.createApp(App).mount('#app')

+ v-if와 v-show의 차이
    + v-if : v-if는 true일 경우 요소를 구조화하여 출력하며 false인 경우엔 구조적으로 생성을 하지 않고 v-if라는 주석이 추가됨
    + v-show : true, false와 상관 없이 구조적으로 우선 출력한 이후 display: none 속성을 적용, 제거하는 방식으로 화면에 출력하는 여부만 변경
    + v-if는 초기 렌더링이 낮지만 전환비용이 높고 v-show는 전환비용은 적지만 초기렌더링 비용이 높음
+ v-if, v-for을 동시에 사용하는 경우 v-if가 우선순위를 가지며 둘을 동시에 사용하지 않는 것을 권장
+ 사용해야할 경우에 권장되는 코드
```html
<ul>
  <!--template를 활용하여 두가지를 
            동시에 사용하지 않도록 조정-->
  <template v-for="user in users">
    <li v-if="user.isActive">{{ user.name }}</li>
  </template>
</ul>

🌊하루를 마치며

오늘도 vue강의를 들었다. 강의 내용이 많아서 집중해서 들어야하기 때문에 시간이 오래걸렸다. 그래서 목표한 부분까지 공부하지 못해서 아쉽다. vue를 배우면서 바닐라js와 비교하게 됐는데 원하는 기능을 보다 쉽게 구현할 수 있다는 점이다. 그리고 html과 바로 연결해서 사용하는 것이 새롭고 재밌다! 바닐라js로 구현한 프로젝트들을 vue를 배워서 다시 구현해보고 싶다. 내일은 vue강의와 완성못한 css프로젝트를 수정할 계획이다!

day34

vue 시작하기

• vue.js는 html구조를 데이터 옵션을 통해서 연결할 수 있음
• 반응형 데이터, 반응성 : 데이터가 변경될 때 반응해서 연결되어있는 화면도 같이 바뀜

  어플리케이션&인스턴스 생성

• createApp : vue어플리케이션을 생성할 때 사용하는 매소드
• mount : 어플리케이션과 html요소를 연결하기 위해 사용하는 매소드
• vue.js application : vueApplication. instance Object
• 전역 API : 전체 영역에서 쓸 수 있는 기능으로 cdn 빌드를 설치하는 경우엔 Vue 객체를 통해, npm설치시 vue를 import하여 사용 가능
• vueModel : app.mount를 실행할 때 반환되는 instance

  라이프 사이클

• vue.js에서 인스턴스나 컴포넌트를 생성하는 단계를 의미
• 라이프 사이클 훅 : 라이프사이클 과정에서 단계 사이에 훅처럼 걸어서 실행
• 라이프사이클 매소드 : 입력한 순서와 상관 없이 정해진 시기에 맞춰 동작함
• beforeCreate : vue.js가 생성되기 바로 직전, 제한적이어서 활용도가 떨어짐
• created : vue.js가 생성된 직후, 데이터를 처리하는 여러가지 작업들을 다룰 수 있으나 html 구조와 연결되어있지 않아 이를 다룰 수 없다는 단점
• beforeMount : html구조와 vue.js의 내용이 연결되기 직전의 상태
• mounted : html구조와 vue.js의 내용이 연결된 직후의 상태, html구조를 직접적으로 접근해서 다뤄야 할 경우에 사용
• beforeUpdate : 업데이트가 되기 직전이라는 의미, 데이터 값이 변경된 이후 화면에 출력되기 이전의 상태
• updated : 업데이트가 직후라는 의미, 데이터와 화면의 변경이 업데이트 된 이후의 상태
• beforeUnmount : 연결이 끊기기 전을 의미
• unmounted : 연결이 끊어졌음을 의미
• 컴포넌트에서 연결을 끊었을 때 처리해야하는 데이터들이 있으면 beforeUnmount, unmounted로 데이터를 정의해줘야 함
• app.unmount() : 연결을 해제할 때 사용하며 데이터는 남아 있어서 활용할 숭 ㅣㅆ지만 화면에는 출력되지 않음
• 가장 많이 사용하는 매소드는 mounted, created

  템플릿 문법

• vue.js에서 html구조를 연결할 때 사용하도록 제공하는 구문으로 별다른 변환 작업 없이 html에서 vue.js를 사용할 수 있음
• 보간법(Interpolation) : 이중 중괄호 구문(Mustache) - 변경될 때 마다 화면이 갱신됨
• v-once : 데이터가 변경돼도 갱신되지 않는 일회성 보간법
• v-html : html구조로 출력해야할 경우 사용하며 XSS보안 취약점이 있기 때문에 주의해서 사용
• v-bind : html 속성 부분에도 데이터를 사용할 수 있도록 함, 단일 표현식을 사용할 수 있도록 함
• v-on : dom에서 사용할 수 있는 이벤트를 사용하도록 함
• 동적 전달인자 : js표현식을 대괄호로 묶어 디렉티브 전달인자로 사용

  <div v-bind:[attributName]="url"></div>
  <!--attributeName을 vue.js에서 속성을 정해서 넣을 수 있음-->

• 약어 : 가장 자주 사용되는 v-bind와 v-on의 약어가 있음

  <!--v-bind-->
  <a v-bind:href="url"></a>
  <a :href="url"></a>
  <a :[key]="url"></a>
  <!--v-click-->
  <a v-on:click="doSomething"></a>
  <a @click="doSomething"></a>
  <a @[event]="doSomething"></a>

  데이터 속성

• vue.js에서 데이터는 함수여야 하며 컴포넌트는 재사용성이 중요한 핵심 요소이기 때문에 데이터를 함수로 만들어서 반환할 수 있는 구조를 만들어야 함
• 데이터에 접근하는 두가지 방법

  vm.$data.count    //count라는 이름을 가진 data에 접근하는 방식
  vm.count

• 반응형 데이터를 정의할 때는 미리 data 옵션에다 선언해놓지 않으면 나중에 추가되는 data는 반응성을 가지지 않음

  프록시(Proxy)

• proxy 활용시 값이 언제 할당되고 조회되는지 감시해서 중간에 특정한 로직을 실행할 수 있음

  const app ={
    data:{
        count : 0
    }
  }
  

const proxyA = new Proxy(app.data, { get(target, key){ //값을 조회할 때 실행 return target[key] //값을 가져옴 }, set(target,key,value){ //값을 지정할 때 실행 target[key] = value //데이터 갱신 } })

+ get : 값을 조회할 때 실행하는 메서드
    + target : new 연산자를 사용해서 proxy라는 생성자를 실행할 때 첫번째 인수로 넣었던 app이라는 변수에 있는 객체 데이터
    + key : 조회하려고 하는 데이터
+ set : 값을 지정하는 메서드
    + target : new 연산자를 사용해서 proxy라는 생성자를 실행할 때 첫번째 인수로 넣었던 app이라는 변수에 있는 객체 데이터
    + key : 조회하려고 하는 데이터
+ proxy 객체는 기본적인 동작의 새로운 행동을 정의할 때 사용 - new Proxy(target, handler)
#### <span style="background-color : #ECEBFF">메소드</span>
+ 컴포넌트 instance에 메서드를 추가하려면 methods 옵션을 사용
+ methods를 이용해 data에 정의해놓은 데이터에 접근할 수 있음
+ 매소드를 정의할 경우 화살표함수를 사용해야함 - 일반함수와 this에 대한 정의가 다름
+ 정의된 매소드는 탬플릿 내부에서 사용할 수 있음
+ 디바운스와 쓰로틀링은 Vue에서 자체적으로 지원하지 않지만 Lodash같은 라이브러리를 통해서 사용할 수 있음

# 🌊하루를 마치며
 vue를 처음 공부해보면서 생소하다는 느낌을 받았다. html 테그 속성에 직접 데이터의 변수명을 입력해 사용할 수 있다니..! 바닐라 자바스크립트를 공부하고 난 후에 배워서 더 쉽게 공부할 수 있을 것이라고 생각했는데 데이터의 흐름이 이해가지 않아 많이 돌려봐야 했다ㅠㅠ 아직은 기초부분이라 잘 따라가고 있지만 더 깊은 내용이 나왔을 때 하나 하나 이해하는 것 마다 오래걸릴지 걱정이 된다. 계속 보고 따라서 쳐보면 앞으로 익숙해지는 날이 오지 않을까 한다.
 내일은 vue강의를 코어타임 동안 최대한 듣고 코어타임 이후에는 css과제를 완성해보려고 한다. 시간이 부족하겠지만 코드리뷰전에는 최대한 완성하는 것이 목표다. 강의가 많이 밀려서 지치지만 열심히 해볼 것이다. 화이띠이이잉~

day32

SCSS 재활용

• content(data) : 소괄호로 데이터를 전달하여 using을 통해서 받아 styleblock에서 사용 가능

  @use "sass:map";
  

@mixin media($name)( $breakpoints{ small-device: 576px, medium-device: 992px, large-device: 1400px; ); @media all and(max-width:map.get($breakpoints, $name)){ @content(map.get($breakpoints, $name)); } }

.box{ width: 400px; heigh: 400px; @include media(medium-device) using($size){ width: $size; //992px height: $size; //992px } }

+ SCSS와 SASS의 차이 : 대부분 중괄호와 세미콜론의 차이이지만 SASS는 @mixin을 =으로 @include을 +으로 사용
#### <span style="background-color : #ECEBFF">SCSS - 확장</span>
+ @extend : 작성해놓은 선택자의 이름을 @extend를 통해 명시하면 선택자가 가지고있는 스타일이 확장되어 해당 부분에 적용함

//SCSS .btn{ display : inline-block; font-weight : bold; padding: 10px 20px; }

.btn-primary{ @extend .btn; background-color: tomato; }

//CSS .btn, .btn-primary{ display : inline-block; font-weight : bold; padding: 10px 20px; }

.btn-primary{ background-color: tomato; }

+ @mixin과 @extend
    + @mixin : 별도의 스타일을 따로 정해두고 그것을 가져와서 사용
    + @extend : 이미 특정한 선택자로 만들어진 부분을 가져와서 사용
+ @extend 사용시 주의할 점 : 의도하지 않은 선택자가 만들어지는 선택자 폭발이 발생할 수 있음
+ @extend는 최대한 중첩을 피해서 사용해야하며 대체할 수 있을시 @mixin을 통해 재사용하는 것을 권장
+ % - placeholder 선택자 : @extend를 사용해서 확장할 수 있으며 컴파일되지 않음
+ % 사용시 주의할 점 : @media 규칙 내부에서 @extend를 사용할 경우 내부의 선택자에만 사용할 수 있음, 복잡한 구조에 사용할 시 제한사항이 있음

@media all and(max-width: 1400px){ %box{ color: red; } .box{ @extend %box; } }

+ Gzip 압축 방식 : 반복되는 코드가 많아지면서 CSS의 용량을 최적화 하기 위한 방법
#### <span style="background-color : #ECEBFF">SCSS - 함수</span>
+ function : JS함수, @mixin와 유사하며 매개변수에 기본값을 지정하거나 가변인수 개념도 사용 가능
+ 함수명은 내장 모듈과의 중복을 피하기 위해 두개 이상의 단어로 생성하는 것을 권장
+ 프로젝트 내에서 사용할 수 있는 함수들은 _utils.scss 파일로 구분해서 만들며 !default를 사용하여 확장성 고려
#### <span style="background-color : #ECEBFF">SCSS - 조건</span>
+ @if : 조건이 일치하는지 확인하여 true일 경우 실행
+ @if, @else if, @else를 사용하여 판단

@mixin theme-colors($white-color : true){ @if $white-color{ background-color: black;
}@else{ background-color: white; } }

.banner{ @include theme-colors($white-color: true); body .dark & { @include theme-colors($white-color : flase); } }

#### <span style="background-color : #ECEBFF">SCSS - 반복</span>
+ @each-in을 통한 List 반복

@use "sass:list";

$colors : royalblue, gold, tomato;

@each $color in $colors{ .item-#{$color}{ width : 100px; height: 100px; background-color: $color; } }

+ @each-in을 통한 Map 반복

$blocks : { A : royalblue, B : gold, C : tomato };

@each $key, $value in $blocks{ .block-#{$key}{ width : 100px; height: 100px; background-color: $value; } }

+ @for through 사용

.list{ @for $i from 1 through 3{ .item:nth-child(#{$i}){ width: 100px * ( $i - 1 ); } } }

+ @for to 사용

.list{ @for $i from 1 to 3{ .item:nth-child(#{$i}){ width: 100px * ( $i - 1 ); } } }

+ @for through/to의 차이점
    + @for through : through 뒷쪽 숫자와 같거나 작을 경우
    + @for to : to 뒷쪽 숫자와 작을 경우
+ @while : 조건이 true일 때 까지 반복

.list{ .item{ $i : 1; $n : 8; @while $n > 0 { &:nth-child(#{$i}){ width : 100px * $n; height : 100px * $i; } $i : $i + 1; $n : $n - 2; } } }

#### <span style="background-color : #ECEBFF">SCSS-가져오기</span>
+ sass 설치 : npm install -g sass
+ @import : 파일을 불러와서 사용하는 개념
+ 컴파일러 방식 : 폴더에 들어가서 sass 폴더명:css
+ scss나 sass파일은 확장자 없이도 사용 가능
+ 컴파일 했을 시 비어있는 파일이 생기지 않도록 하기위해서 컴파일이 필요 없는 파일 이름에 _붙이기
+ _붙인 파일을 @import할 경우 _생략 가능
+ @import url('./utils.scss') : 웹 브라우저에서 scss 확장자를 가진 파일은 동작하지 않기 때문에 문제 발생
+ css파일이나 url을 @import할 경우에는 컴파일된 결과로 출력
#### <span style="background-color : #ECEBFF">SCSS - 모듈</span>
+ 모듈화 : @import 대신 @use를 사용
+ 네임스페이스 : 변수의 이름이 같아서 발생할 수 있는 충돌 방지
+ 불러오는 파일의 이름으로 네임스페이스를 사용하고 싶지 않다면 경로 뒷쪽에 as 키워드를 사용해서 새로운 이름 부여 가능
+ @forward : 다른 파일의 모듈을 가져와서 사용할 수 있도록 하는 규칙
+ @forward "./mixins" as mix-* : 해당하는 변수와 mixin규칙의 이름이 붙을 수 있도록 *을 붙여서 사용 - main.$mix-primary;
#### <span style="background-color : #ECEBFF">SCSS - 내장모듈</span>
+ SCSS에선 내장된 여러가지 기능들을 활용할 수 있음
+ 내장함수 list :  https://sass-lang.com/documentation
+ @use "sass:사용할 함수"를 통해 내장모듈을 가져올 수 있음
+ 전역함수(global function) : 불러오지 않아도 언제든지 사용할 수 있는 함수
+ 전역함수의 예시 : 삼항연산자, hsl(a), rgb(a)
#### <span style="background-color : #ECEBFF">SASS 전역함수</span>
+ darken/lighten(color, amount) :  색상의 밝기를 조정
+ staturate/destaturate(color, amount) : 색상 채도를 변경
+ grascale(color) : 선택한 색상을 흑백처리
+ invert(color) : 선택한 색상을 반전시킴
#### <span style="background-color : #ECEBFF">sass:color</span>
+ color.adjust(color, red, green, blue) : 선택한 색상의 RGB값 조정
+ color.adjust(color, lighteness, alpah) : 선택한 색상의 명도와 투명도 조정
+ color.adjust(color, staturation) : 선택한 색상의 채도 변경
+ color.grayscale(color) : 선택한 색상을 흑백처리
+ color.invert(color) : 선택한 색상을 반전시킴
#### <span style="background-color : #ECEBFF">sass:list</span>
+ list.append(list, data) : list data를 list에 넣어서 반환
+ list.index(list, data) : list 안에 특정한 테이터의 index를 반환
+ list.join(list, list) : list 합쳐서 새로운 데이터 반환
+ list.length(list) : list길이를 반환
+ list.nth(list, index) :  list에서 해당 index의 값 반환
#### <span style="background-color : #ECEBFF">sass:map</span>
+ map.get(map, key) : map에서 key에 맞는 value값을 가져옴
+ map.has-key(map, key) : map에서 key가 들어있는지 없는지를 boolean값으로 반환
+ map.keys(map) : map에서 모든 key값을 담은 list를 반환
+ map.values(map) : map에서 모든 value값을 담은 list를 반환
+ map.merge(map, map) : 두개의 map을 병합하여 새로운 map반환하며 중복되는 key가 존재할 경우 더 뒤에 작성된 key의 vlaue를 덮어씌움
+ map.remove(map, key) : 특정한 key를 제거하여 새로운 map을 반환
#### <span style="background-color : #ECEBFF">sass:math</span>
+ math.ceil(number) : 올림
+ math.floor(number) : 내림
+ math.round(number) : 반올림
+ math.max(list) : list에서 최대값 반환
+ math.min(list) : list에서 최소값 반환
+ math.abs(number) : 절대값 반환
+ math.is-unitless(number) : 해당하는 값에 단위가 붙어있는지를 확인하여 boolean 값으로 반환
+ math.compatible(number, number) : 주어진 인수들이 연산이 될 수 있는지 판단하여 boolean 값으로 반환하며 단위가 동일해야 함
#### <span style="background-color : #ECEBFF">sass:meta</span>
+ meta.call(callbackFunction, parameter) : 함수를 데이터처럼 인수로 사용하기 위해서 사용

@use "sass:meta"

@function a($callback){ // callback에 b를 넣었을 경우 b함수의 $size에 // 100px이 들어가 res에 400px이 들어가 $res:meta.call($callback, 100px);
@return $res; }

@function b($size){ @return $size + 300px; }

.box{ width: a(b); }

```

• meta.type-of(data) : 들어온 data의 타입을 반환

  sass:string

• string.quote(string) : ""가 붙지 않은 string에 ""를 붙여서 반환
• string.unquote(string) : ""가 붙은 string에 ""를 붙여서 제거한 후 반환
• string.index(string, string) : 첫번째 문자열에서 두번째 문자열이 시작하는 index를 반환
• string.inset(string, string, index) : 문자열을 넣은 index에 삽입하며 음수일 경우 뒤에서부터 숫자를 세서 넣기
• string.length(string) : 문자열의 길이 반환
• string.slice(string, index, index) : index부터 index, index인수가 하나인 경우는 index부터 끝까지 자른 문자열을 반환
• string.to-upeer-case(string) : 대문자로 변경
• string.to-lower-case(string) : 소문자로 변경
• string.unique-id() : 실행될 때마다 고유한 문자열을 반환하며 선택자거나 중복되면 안되는 값을 필요로 할 경우 사용

  SCSS - 디버그 메시지 규칙

• @debug : 터미널에 출력 - JS의 console.log와 동일
• @warn : 경고메세지 출력 - JS의 console.warn와 동일
• @error : 에러메시지 출력하며 파일이 정상적으로 컴파일되지 않았다는 것을 의미 - JS의 throw와 유사

  SCSS 지식

• grid 시스템 : 시스템에 따라서 9, 12, 15의 그리드로 column을 나눌 수 있으며 대부분 12column의 시스템을 사용
• SASS에서는 소수점 자리를 최대 10개까지 출력
• At 규칙 : @를 붙여서 사용하는 키워드
• SASS의 list index는 1부터 시작
• SASS에서도 JavaScript와 같이 함수를 데이터처럼 사용할 수 있음

🌊하루를 마치며

드디어 CSS를 완강했다!!!!! 강의 내용이 매우 알차서 한강 듣는데에 굉장히 많은 시간이 걸려서 쉽지 않은 주였다. SCSS는 배울수록 JS랑 비슷한 부분이 많아서 생소한 개념 없이 잘 습득할 수 있었던 것 같다. 다만 scss를 처음 컴파일 해보기 때문에 설치했을 때에 에러가 발생해서 당황했다. 에러를 서칭해보니 window에서 발생하는 문제였고 해결책을 찾아서 잘 해결했다. 한번 경험해 봤으니 다음번엔 당황하지 않고 에러를 해결할 수 있을 것이다! 들은 강의를 완전히 외우지는 못했지만 과제를 하며 직접 코딩해보고 찾아보면서 복습하다보면 익숙해질 것이라고 생각한다. 내일은 과제를 시작할 계획이당! ! !

day33

SCSS 재활용

• 스타일을 정의해서 필요한 곳에 재활용 할 수 있음
• @mixin : 이름을 지정 후 브라켓 내부에 재활용할 내용을 입력
• @include : 정해놓은 스타일을 가져와서 사용할 수 있음
• 변수와 기본값의 사용

  @minxin large-text($size : 30px){
    @if( $size < 30px ){
        font-size : 30px;
    } @else{
        font-size : $size;
    }
    font-weight : bold;
    font-family : sans-serif;
  }
  

.box-a{ width : 100px; height : 200px; @include large-text; //30px }

.box-b{ width : 100px; height : 200px; @include large-text(10px); //10px }

+ 삼항 연산자 : if(condition, true, false)
+ mixin 내부에서 include를 사용하여 minxin을 중첩으로 사용 가능
+ 가변인수 : 인수의 갯수가 명확하게 하지 않고 전달하는 것을 특정한 매개변수를 한번에 받기 위해서 사용
+ SCSS의 list 펼치기

@mixin spread($top : 10px, $right : 10px, $bottom : 10px, $left : 10px){ margin-top : $top; margin-right : $right; margin-bottom : $bottom; margin-left : $left; }

.box{ //list data $list : 10px 20px 30px 40px; @include spread($list...); }

+ keyword : 인수를 순서대로 넣지 않고도 어떤 매개변수 이름에 해당 값을 넣기 위해 인수를 기입할 때 변수명과 값을 함께 넣음
+ @content : 선언된 mixin에 @content가 포함되어 있다면 styleblock을 전달할 수 있음

//SCSS @mixin icon($url){ &::after{ // &를 통해 상위선택자를 가져옴 content : url($url); @content; } }

.box{ @include icon('/images/icon.png'){ //styleblock position : absolute; top : 0; left : 50px; } }

//CSS .box::after { content: url("/images/icon.png"); position: absolute; top: 0; left: 50px; }

```

🌊하루를 마치며

SCSS에서 스타일을 재활용 하는 방법을 공부했다. 다른 부분은 이해가 잘 됐는데 @content부분의 개념으 부족했다. 내가 이해한 것을 얘기해 보자면 mixim 내부에 들어있는 @content에 또 다른 컨텐츠가 들어갈 수 있다는 것을 의미하고 @include를 통해서 스타일을 재활용할 경우에 styleblock에 들어있는 style들을 전달하여 @content위치에 넣는다. 이렇게 생각하고 이해했다! 또 강의에 나왔던 내용이긴 하지만 SASS에서 원래는 후손선택자를 가져오지만 '&'를 통해서 상위 선택자를 가져올 수 있다는 사실을 @content 예시를 통해서 다시 한번 공부할 수 있었다. 스터디 준비하느라 강의를 다 듣지 못해서 내일은 강의를 끝내고 과제를 시작할 계획이다! 추석 안쪽으로 과제를 다 끝내고 마음 편히 방학을 보낼 수 있었으면 좋겠다😊

📍우선 URL 구조를 알아보자!

[이미지 출처]

url 구조에서 우리가 봐야할 부분은 protocol, host, port이다. 이 세가지의 부분을 합쳐서 출처(Origin)이라고 한다. 이 중 하나라도 다를 시에는 다른 출처로 판단되어지며 다른 출처로 판단된 리소스를 사용하는 것을 제안하는 방식을 SOP라고 한다.

🔎SOP(Same Origin Policy)

SOP는 다른 출처의 리소스를 사용하는 것을 제안하는 보안 방식이다. 하지만 웹을 사용할 때 다른 출처의 리소스를 비교적 자유롭게 사용할 수 있다. 다른 출처의 리소스를 자유롭게 사용할 수 있도록 하는것에 SOP의 예외조항인 CORS가 있다.

📜CORS(Cross-Origin Resource Sharing)

브라우저에서 다른 출처의 리소스를 공유하는 방법이다. CORS는 3가지의 동작 방식을 가진다.

Preflight Request

• options 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 먼저 확인 후에 요청이 가능할 경우 실제 요청(Actual Request)을 보내는 방식

• 한번 요청을 보낼 경우 두번의 요청이 보내짐

• Preflight Request

  • origin :요청 출처
  • Access-Control-Reqeust-Method : 실제 요청을 보낼 매서드
  • Access-control-request-headers :실제 요청의 추가 헤더

• Preflight Response :

  • Access-Control-Allow-Origin : 서버측 허가 출처
  • Access-Control-Allow-Methods : 서버측 허기 메서드
  • Access-Control-Allow-Headers : 서버측 허가 헤더
  • Access-Control-Max-Age : preflight 응답 캐시시간
    • Response Cache - preflight 응답을 브라우저에 캐싱해두고 요청을 보낼 때 캐싱된 내용을 먼저 확인한 후에 내용이 있다면 사전요청을 보내지 않고 실제 요청을 바로 보냄 [이미지 출처]

      Simple Request

• preflight 요청 없이 바로 실제 요청을 날림

• Simple Request의 조건

  • GET, POST, HEAD 메서드 중 한가지여야 함
  • Content-Type :
    • Application/x-www-form-unlencoded
      • Multipart/form-data
      • Text/Plain
      • 헤더는 Accept, Accept-Language, Content-Language, Content-Type만 허용

[이미지 출처]

Credentialed Request

• HTTP Coockie나 HTTP Authentication 등을 Client에서 Request에 담아 서버로 보내고 싶을 때 사용하는 요청
• 기본적으로 브라우저는 Non credential로 설정되어 있기 때문에 재설정 필요
• 서버에서 Response Header에 Access-Control-Allow-Credentials :true를 포함해야 함
• 서버에서 응답 시에 Access-Control-Allow-Origin 헤더의 값으로 정확한 출처를 명시

🔑Preflight가 필요한 이유는 뭘까?

서버가 CORS를 모르고 있는 상태인 경우 발생할 에러를 방지하기 위해서이다. 서버가 CORS를 모르는 상태에서 실제 요청이 들어왔을 경우 에러가 발생하면 이미 서버에서 요청 처리를 해버렸기 때문에 큰 문제가 발생할 수 있다. 이를 방지하기 위해 미리 요청을 보내 CORS에러가 발생하는지를 확인하는 것이다.

[이미지 출처] 이를 통해 CORS 에러가 먼저 터진다면 서버에선 아무 문제를 일으키지 않고 이 에러를 해결할 수 있다.

🎉CORS 해결 방법

• Access-Control-Allow-Origin 설정 : Access-Control-Allow-Origin을 '*'를 설정하여 모든 외부 출처에서 접속할 수 있도록 설정, 편리해보이지만 보안문제가 있기 때문에 필요한 외부 출처를 일일이 적용하는 것이 좋음

참고자료

https://www.youtube.com/watch?v=-2TgkKYmJt4

day31

Transform 3D

• transform-origin : transform이라는 속성을 통해서 변환될 때의 기준점 설정
• transform-duration : 전환효과를 지속하는 시간 설정
• rotateX/ rotateY : x축, y축을 기준으로 회전
• transform-style : preserve-3d - 3차원 효과가 추가되어있는 요소의 자식요소에도 3D효과를 추가하기 위해 사용
• backface-visibility : hidden - 뒷면이 보이는 순간 요소가 사라짐

  perspective

• 요소를 원하는 거리에서 볼 수 있도록 설정
• 요소를 더 입체적으로 보일 수 있도록 함
• 숫자가 클수록 요소를 멀리서 봄
• 3차원 변환함수에서만 적용 가능
• 함수로 사용시 변환이 일어나는 요소에 부여하며 속성으로 사용 시 요소의 부모에 사용
• perspective-origin : perspective를 속성으로 사용 시 원근의 기준을 설정

  columns

• 다단(multi-columns) : 텍스트를 정리하기 위한 개념
• column-count : 단의 갯수 지정, 기본값 1
• column-width : 유지할 수 있는 단의 너비를 지정하며 너비로 모든 내용을 표현할 수 있으면 자동으로 단의 개수가 조정 됨
• column-rule : 단과 단 사이에 넣는 border 속성(width/style/color)
• column-gap : 단과 단 사이의 거리 지정

  filter

• filter 함수 : blur, grayscale, invert, drop-shadow, brightness, contrast, opacity, saturate, sepia, hue-rotate
• backdrop-filter : 자기 자신에 필터효과를 적용하는 것이 아닌 해당 요소 뒷단에 필터처리 적용 - firefox 호환 X

  CSS 변수

• var(변수)로 선언
• 변수를 선언할 때 특정한 선택자 내에서 선언해야 함
• 종속된 변수의 값은 후손 요소로 상속됨
• :root : html 태그 선택자와 동일한 가상클레스 선택자
• 전역변수로 지정한 변수를 자신의 유효범위 내로 재할당 할 수 있음
• 변수의 초기값 설정 : var(변수이름, 변수에 할당할 값)
• 만약 초기값 설정시 이미 값이 지정된 변수인 경우에는 값이 재할당되지 않음

  CSS-@support

• 특정한 css 기능을 브라우저가 지원하는지에 따라 스타일 선언 방법 제공
• 브라우저에서 cs규칙이 동작하는지 하지 않는지에 따라 적용할 기술을 다르게 설정할 수 있음
• @supports( 기능1 ) and/or ( 기능2 ) and/or ( 기능3 ){}
• selector() : css 선택자의 지원 여부를 판단하는 용도로 사용 - @supports(selector(.container))

  CSS-@media

• media 사용 방법 : @media 타입 and ( 기능 ){}
• screen/ print/ tv ...
• all : 모든 미디어 타입을 아울러서 사용하며 기본값이기 때문에 all일 경우 all과 and는 생략 가능
• not : 뒤에 나열한 기능을 부정하는 부정연산자
• 하나의 미디어 규칙에 쉼표를 이용해 여러개의 미디어 타입 지정 가능
• orientation : portrait(가로너비가 더 긴 화면)/ landscape(세로너비가 긴 화면) - display-mode를 fullscreen으로 만들어 줌
• link 테그에 media속성을 통해서 작성해주는 방식으로 사용할 시 파일단위로 미디어 쿼리 관리에 유용함

  SCSS/ SASS

• css 전처리 도구로 브라우저에서 직접 동작할 수 없기 때문에 css로 변환 작업을 해야함
• SCSS 문법에서는 기존 CSS를 가져와서 활용하는 것도 가능
• SASS/SCSS차이 : SASS - 중괄호와 사용하지 않으며 들여쓰기를 활용하여 범위를 지정/ SCSS : 중괄호와 세미콜론 사용
• SCSS는 /**/과 //가 모두 사용 가능하며 SASS는 주석 사용시에도 들여쓰기에 주의하기
• 중첩(Nesting) : 자식 요소들을 부모 브라켓 안에 중첩하여 정의 가능

  .container{
    display : flex;
    .item{
        flex-grow : 1;
    }
  }

  SCSS 변수

• 변수 선언 방법 : $변수명 : 할당할 값;
• 변수가 선언된 블록의 영역을 기본적으로 가지며 전체 영역에 선언할 시 전역변수로 사용 가능
• !flog : 변수의 유효범위 변겅
• !default : 특정한 유효범위 안에서 변수를 지정할 경우 그 변수와 동일한 이름의 변수가 있다면 기본값으로 사용
• 변수는 언제나 재할당이 가능하기 때문에 전역변수를 박스 내에서 재할당하여 사용 가능
• #{변수명} : javascript의 템플릿 리터럴과 비슷한 형태로 문자 보관

🌊하루를 마치며

강의가 많이 밀렸다 ㅠㅠ 과제 제출을 위해서 미루기도 했고 어제는 추석맞이 게임대전을 하느라 조금 풀어졌던 것도 있다ㅎㅎ 재밌었음 돼써.. 그래서 오늘은 화요일부터 밀린 강의를 들었다! 강의 갯수도 많고 필요한 개념들로 꽉꽉 채워진 강의여서 듣는 시간이 굉장히 오래걸렸다. 오늘 처음 SASS/SCSS를 배웠다. 페이지 제작하면서 레퍼런스를 찾을 때 많이 봤었는데 직접적으로 공부한 것은 처음이었다. 어려울 것이라고 생각했는데 javascript와 비슷한 점도 있어서 생각보다 쉽게 받아드릴 수 있었다. 내일 강의에는 함수와 같이 javascript에서 보던 부분들을 본격적으로 배우게 되는데 이 부분을 얼른 배워서 CSS로 작성하기 불편한 코드들도 쉽게 작성해나갈 수 있도록 하고 싶다! 내일은 수요일 과제를 듣고 vue파트는 CSS과제가 끝난 이후에 들을 예정이다ㅎㅎ 호닥 듣고 과제를 시작하는 것이 목표당.

day31

CSS 함수

• repeat
• minmax
• grid-row/columns
• fit-content

CSS 단위

• fraction(fr)
• min/max-content
• word-break
• auto-fill

🌊하루를 마치며

다시 CSS 강의 주간으로 돌아왔다 ㅎㅎ CSS를 제대로 공부한 적 없기 때문에 배우는 모든 것들이 새로웠다! 함수를 사용하면 더 편하게 스타일을 입힐 수 있다는 점이 좋았다. 또 grid를 사용하면서 fr, px만을 사용했는데 grid에 사용할 수 있는 다양한 단위가 있다는 사실을 처음 알게 됐다. 단순히 크기를 표시하는 단위보다 유동적으로 블록의 크기를 지정할 수 있어서 자주 사용할 것 같다! 과제 제출일이어서 과제를 우선적으로 하느라 강의를 많이 듣지 못했다ㅠㅠ 강의 안밀리려고 노력했는데 CSS가 은근히 공부하는데 시간이 오래 걸리는 것 같다. 그래두 코드에 따라 시각적인 변화가 크기 때문에 공부하는데 재밌다ㅎㅎ 내일 이벤트가 있어서 공부를 많이 하지 못할 것 같은데 최대한 시간을 내서 31, 32일차까지 강의를 다 들어야겠다! ! !

day29

trim()

switch/case

사진 검색기 실습

🌊하루를 마치며

사진 검색기 실습을 했다! 검색했을 때 검색어를 추천해주는 API를 사용해서 추천 검색어를 보여주는 기능을 구현했다. 사용하던 것들을 하나하나 만들어가는 즐거움이 있다. 그리고 검색어 추천 API에서 1주차에 배웠던 트리를 사용한 검색어 추천기능을 떠올렸다. 배운 것들이 아는 것들로 바뀌는 기분이 들어 뿌듯했다 ㅎㅎ switch/case를 알고는 있었는데 제대로 정리한 적 없어서 이번 기회에 확실하게 알게 됐다! 다음주 월요일은 바닐라 JS 마지막 날이다! 재밌게 배운 만큼 마무리 잘 할 수 있는 하루가 됐으면 좋겠다. 마지막까지 화이팅!😊