계란 블로그

Vue 의 다양한 사용 방식 Standalone script Embedded Web Components Single Page Application fullstack / SSR JAMStack / SSG Beyond the web Vue 2.xx => Vue 3.xx 변한 부분 Composition API: Vue2에서 쓰던 방식과 호환된다. 기존에 쓰던 Options API를 대체한다. 혹은 두 개를 같이 쓸 수도 있지만 강사님은 둘 중 하나 선택하는 것을 권장하신다. SFC(Single File Component) 위 두 가지가 등장했다. 다양해지고 체계가 생겼다. Global API: 애플리케이션을 만들 때 new Vue() 를 이용했던 부분이 createapp() 이라는 정적 메소드를 이용해서 만들..

DOM(윈도우) 프로그래밍과 MVW 방식의 차이 Ex) 다음과 같이 클릭하면 덧셈이 되도록 하는 경우 그런데 이 코드를 아래와 같이 표현 가능하다. 노드를 조작하는 코드를 제거한다. document 객체 아래와 같이 모델만 남는다. x, y, z 라는 모델을 뷰에 바인딩한다? 연결된 변수가 모델이다. vue 프레임워크를 쓰면 DOM을 안 써도된다. MVC 패턴의 이해 mvc는 1970년대에 시작됐다. Model 기반의 코드 Smalltalk(객체 지향 언어의 일종)를 이용해서 윈도우를 만들었다. 누군가 데이터를 수정하면? 데이터가 변했다는 걸 인지하고 다른 화면도 바뀌도록 한다. 전체적인 UI 관리가 더욱 쉬워졌다. 출력할 변수(모델)을 이미 마련한 코두와 그렇지 않은 코드 비교하기 왼쪽: 제어와 출력이..

사전 지식 HTML / CSS JavaScript(ES56) DOM 프로그래밍 JSX/TSX Typescript NodeJS - 모듈, npm이해하기 SPA(Single Page Application) 페이지 요청은 한 번만 하고 그 다음부터는 데이터만 요청하는 방식으로 바뀌었다. Vue.js는 Angular.js의 장점만 가지고 나왔다. 여러 기능도 추가했다. 예전에는 JavaScript와 Ajax 없이 HTML 기능만을 이용해서 이뤄졌다. 클라이언트가 요청할 때마다 서버가 새로운 페이지를 보낸다. 서버와 클라이언트 모두 비효율적이다. 최근에는 JavaScript와 Ajax까지 사용한다. 서버는 클라이언트에 맨 처음 요청에만 페이지를 보내고 그 다음부터는 필요한 데이터만 보내준다. 사용성이 좋아진다. ..

1. 자바스크립트란? 브라우저 위에서 동작하는 인터프리터 방식의 언어이다. 현재는 Node.js 라는 런타임 환경이 생겼기 때문에 서버에서도 자바스크립트를 사용 가능하다. Python, Java는 어떤 파일들을 다운 받아야 환경을 구축할 수 있는 것과는 다르게 JavaScript는 다운 받을 필요가 없다. JavaScript는 브라우저 위에서 바로 동작할 수 있기 때문에 브라우저 위에서 바로 테스트 가능하다. html은 문서이다. 웹 브라우저( ex) 크롬)을 통해 html, css, JavaScript 페이지를 열어볼 수 있다. xlsx 파일을 엑셀, 한컴, 구글 스프레드 시트로 열 수 있다. JavaScript는 html과 관련있다. html에 기능을 넣어준다. html은 웹 브라우저에서 동작한다. ..

1. 변형 알아보기 1) transform과 변형 함수 - translate(): 웹 요소를 이동시키는 변형 함수 - 2차원 변형: 웹 요소를 평면에서 변형한다. - x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 갈수록 값이 커진다. - 3차원 변형 함수: 2차원 변형함수에 z축을 추가한다. 2) 웹 요소를 변형시키는 translate() 함수 - translate()는 x축이나 y축 또는 양쪽 방향으로 이동할 거릴를 지정하면 해당 요소가 지정한 크기만큼 이동한다. Ex) 웹 요소 이동하기 - 도형위로 마우스 포인터를 올려 놓으면 x축 또는 y축으로 이동하고 또는 x축과 y축으로 동시에 이동하는 예제이다. #movex:hover { transform: translateX(50px); /* x축으로(..

1. 연결 선택자 1) 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 - 하위 요소(descendant selector): 특정 요소를 기준으로 그 안에 포함된 요소를 말한다. - 자식 요소: 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소라고 한다. - 손자 요소: 자식 요소의 한 단계 아래에 있는 요소를 말한다. - 기본형: 상위요소 하위요소 Ex) 하위 선택자를 사용하여 글자색 지정하기 - 자식 선택자(child selector)라고도 한다. 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. - selection 요소의 모든 하위 p요소를 파란색 글자로 지정한다. 예약 방법 & 사용 요금 아직 온라인 예약 신청이 준비되어 있지 않습니다. 전..

1. 배경색과 배경 범위 지정하기 1) 배경색을 지정하는 back-ground 속성 - 배경색은 16진수나 rgb값 또는 색상 이름을 사용해서 지정한다. - 세밀하게 조절하려면 16진숫값을 사용한다. - 투명도도 조절하려면 rgba표기법을 사용한다. 2) 배경색의 적용 범위를 조절하는 background-clip 속성 - 박스모델 관점에서 배경의 적용 범위를 조절할 수도 있다. - 속성값 (1) border-box: (기본값) 박스 모델의 가장 외곽인 테두리까지 적용한다. (2) padding-box: 박스모델에서 테두리를 뺀 패딩 범위까지 적용한다. (3) content-box: 박스모델의 내용(컨텐츠) 부분에만 적용한다. Ex) 레드향 껍질에 붉은 빛이 돌아 레드향이라 불린다. 레드향은 한라봉과 귤을..

1. CSS와 박스 모델 - 박스모델을 블록레벨 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. Def) 블록 레벨(block-level) 요소: 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. - "한 줄을 차지한다"는 것은 해당 효소의 너비가 100%라는 뜻이다. - 블록 라벨 요소의 왼쪽/ 오른쪽에 다른 요소가 올 수 없다. - , , 가 대표적이다. Def) 인라인 레벨(inline-level)요소는 한 줄을 차지하지 않는다. - 콘텐츠 만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. - , , 를 이용한다. Def) 박스 모델(box-model)요소: 박스 형태인 요소를 박스 모델 요소라고 한다. 1) 박스 모델의 기본 구성 - 콘텐츠 영역..

1. 글꼴 관련 스타일 1) 글꼴을 지정하는 font-family 속성 - 웹 문서에서 사용할 끌꼴은 font-family 속성으로 지정한다. - 기본형: font-family : | [, ] - 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치되어 있지 않으면 의도한 글꼴이 아닌 글꼴로 표시된다. - 따라서, 없을 경우를 대비한 두 번째, 두 번째 글꼴까지 생각해야한다. 2) 글자크기를 지정하는 font-size 속성 - 글자 크기 단위는 px(픽셀), pt(포인트) 등으로 지정가능, 백분율도 가능하다. - 키워드를 사용하여 글자 크기 지정하기 - 단위를 사용하여 글자 크기 지정하기 -> 예전에는 절대 크기 단위 px(픽셀), pt(포인트)를 사용, 최근에는 상대크기 단위인 em, rem 주로 사용 - ..

1. 웹 문서에 디자인 삽입하기 Def) 스타일(style): HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법 등 결정짓는 것. - HTML로는 문서의 내용을 나열하고 CSS로는 웹 문서의 디자인을 구성한다. - HTML태그만을 이용하는 것보다 CSS 스타일을 적용해서 꾸미면 보기 좋게 만들 수 있다. - 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. Def) 반응형 웹 디자인: 사용자가 PC로 접속하든 모바일로 접속하든 웹 브라우저의 크기에 따라 - 화면의 레이아웃을 바꿔주는 것을 말한다. - 2개의 웹 문서를 따로 만들지 않고 하나의 웹 문서에서 작동하도록 만드는 것이다. 2. 스타일과 스타일 시트 - 기본형: 선택자 {속성1: 속성값1; 속성2 : 속성값2..