전체 글
-
Vue / 7강, 8강 / Component의 기본, Data BindingDEV/Vue 2022. 7. 15. 00:25
https://ccamanglab.tistory.com/25 Vue / 1~6강 / 프론트엔드 프레임워크와 ES6 프론트엔드 개발자를 위한 Vue.js 시작하기 강의를 들으며 정리한 내용 1강 프론트엔드 웹 어플리케이션 서버 사이드 도움 받지 않고도 서비스를 제공 서버사이드와 적절히 연동하면서 구현 클라 ccamanglab.tistory.com 지난 글에 이어서 쓰는 글 오늘부터 본격적인 Vue에 대해 공부한다. 7. Component기본 [Component의 특징] Vue의 핵심 구성 요소 UI를 위한 화면(DOM)과 로직(Javascript)의 결합 컴포넌트가 기술요소의 메인요소임 한마디로 정의하면 재사용 가능한 동적 UI 구성을 목적으로 함 Component Tree 구조 의미 단위로 Compone..
-
Vue / 1~6강 / 프론트엔드 프레임워크와 ES6DEV/Vue 2022. 7. 14. 13:55
프론트엔드 개발자를 위한 Vue.js 시작하기 강의를 들으며 정리한 내용 1강 프론트엔드 웹 어플리케이션 서버 사이드 도움 받지 않고도 서비스를 제공 서버사이드와 적절히 연동하면서 구현 클라이언트 사이드 - 브라우저 컴퓨터 - 서버 렌더링 서버 사이드에서 전달한 결과를 단순 화면에 출력 클라이언트 사이드도 기능이 확장됨과거의 렌더 역할만 했던 클라이언트 사이드가 많은 기능을 갖기 시작함 -> Ajax, flex, silverlight 같은 기술들이 발생함 HTML의 기술요소1. 웹소켓 -> 연결 지향형 소켓 통신2.웹 스토리지 -> 데이터 영속적 저장3.인덱스 데이터 데이스 -> 데이터 영속적 저장4.캔버스 -> 그래픽 요소5.오디오, 비디오 -> 멀티미디어 데이터 처리6.반응형 웹 디자인 -> 다양한 ..
-
CSS / poiemaweb 220705-220711DEV/CSS 2022. 7. 11. 21:44
PoiemaWeb을 보며 공부한 내용 2.1 CSS CSS - Cascading Style Sheets html xml 같은 doument를 어떻게 표현할 것인가에 대한 style 셀렉터(seletor) 스타일을 적용하고자 하는 html요소를 선택 할 수 있도록 도와주는 요소 h1 {color:red;} - 셀렉터 {선언블록(프로퍼티 : 값)}; 이런것들을 Rule Set 이라고 하는데, 이런 집합을 스타일 시트라고 하는 것임 프로퍼티 - 표준 스펙이며 이미 있는 것들을 활용하는 것임 값 - 위와 같음 수치만 변경 HTML과 CSS를 연동하기 위해선, HTML에서 css파일을 link로 로드해줘야함 HTML에 embeded해서 사용해도 되지만 따로 파일이 분리되는것이 바람직함, 같은 이유로 인라인도 마찬..
-
HTML / poiemaweb 220704DEV/HTML 2022. 7. 4. 21:25
PoiemaWeb을 보며 공부한 내용 1.2 HTML5 기본 문법 HTML - HyperText Markup Language 웹페이지를 기술하기 위한 마크업 언어임 웹페이지의 내용과 구조를 담당 HTML5는 차세대 웹표준으로 다양한 기능들 추가됨 멀티미디어, 그래픽, 통신, 디바이스 접근, 오프라인 저장소, 시맨틱 태그, CSS3 HTML5는 반드시 로 시작해서 문서형식을 HTML5로 지정해야함 실제 html은 태그 사이에 기술되며 사이에는 title, 외부 참조 파일, 메타데이터 등이 위치하고 출력요소는 에 위치함 요소는 시작태그와 종료태그 그리고 태그 사이에 위치한 콘텐츠로 이루어지며, 이 집합들로 html이 만들어짐 태그는 대소문자 구분하진 않지만, 일반적으로 소문자를 사용함 각 요소들은 중첩될 수..
-
NodeJS Express를 활용한 로그인 기능 구현 - boiler-plate 강의 기반으로 한 정리 [1/3]DEV/NODEJS 2022. 4. 14. 01:07
자바스크립트를 조금 할 줄 아는데, 맨날 리액트만 공부하다보니 답답해서 nodejs를 공부해보기로 함. 제일 기본적이지만 어려우면 어렵다고 말해지는 로그인 그리고 auth, 그를 위한 db 연결 기능까지 어떻게 진행했는지 이야기 해봄. 약 4~5시간 정도 강의 수강 - 강의링크 1. nodejs가 설치된 상태에서 진행한다. 2. 우선 작업을 시작할 폴더를 만든 후, npm init을 통해 대강의 설명을 적어준다. 3. 이제 express를 설치한다. express도 하나의 모듈이기 때문에 터미널에 npm i express -s를 입력해서 설치한다. 4. 설치 후 제일 먼저 해보는 것은 항상 Hello World를 띄어보는 것. const express = require('expres..
-
-
[Udemy] 글로벌 베스트 타입 스크립트 강의 후기 | Typescript :기초부터 실전형 프로젝트까지 with React + NodeJSDEV 2022. 2. 13. 16:21
*해당 콘텐츠는 유데미로부터 강의 쿠폰을 제공받아 작성되었습니다* 안녕하세요. CcamangLab의 Ccamang입니다 :) 오늘은 유데미 얼리에듀터 4기를 통해 수강한 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 의 후기를 작성해보려고 해요! 여러분께서 아마 어느정도 웹 프로그래밍을 공부하다보면 기본적으로 HTML, CSS, JAVASCRIPT의 개념을 알게되고 그 중에서도 자바스크립트가 제일 중요하고 어렵다는걸 깨닳게 될거랍니다. 그렇게 자바스크립트를 공부하면서 자바스크립트를 활용한 react, nodejs, nextjs등 다양한 언어 혹은 라이브러리, 프레임 워크를 사용하면서 자신의 스킬을 벨류업 해나가는 과정을 겪을거라 생각해요 저는 그 중에서도 최근 취업..
-
[Udemy] Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의후기 1편DEV/JavaScript 2022. 1. 27. 18:16
운 좋게 유데미 얼리 에듀터에 걸려서 이번에 React + NodeJs 강의를 무료로 들을 수 있게 되었다! 이전부터 듣고 싶어서 장바구니에 강의 담아놓고, 얼리에듀터 안걸리면 그냥 할인할때 사서 들어야지 하던건데 걸려서 짱좋음 히히 강의 후기 시작 1.Typescript란? 타입스크립트(이하 TS)는 자바스크립트 슈퍼셋이다 (슈퍼셋이 뭔지 찾아봤는데, 뭐 일상적으로 쓰는 단어가 아닌지 검색에는 따로 나오는게 없더라 ㅠㅠ) 타입스크립은 자바스크립트에 기반한 프로그래밍 언어인데, 말 그대로 완연히 새로운 언어가 아니라 JS에 다양한 advantage를 더한 언어라고 생각하면 된다 그렇게 장점을 더했지만 아주 치명적인 단점은 TS 자체로는 브라우저에서 JS처럼 실행 안되는 것이다. 2.그러면 TS를 어케 쓰..