본문 바로가기

내가 해냄/패스트캠퍼스

 (71)
패스트캠퍼스 챌린지 42일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 42일 차. 프론트엔드에서 프론트엔드 개발자가 사용할 수 있는 프레임워크는 Vue.js, React, Angular 가 있다. 이 세 가지가 전부가 아니라 다양한 종류의 프레임워크들도 있는데 그 중 하나가 SVELTE이다. 프레임워크가 다양한만큼 나에게나 프로젝트에 잘 맞는 프레임워크를 선택하는 것이 일반적이지만 최근에는 특정 프레임워크 한가지만을 알고 있는 개발자가 아닌 다양한 경험이 있는 개발자들을 선호하는 추세이다. 그간 공부했던 프레임워크만큼 깊게 배우진 않을 예정이지만 Part16의 SVELTE 강의를 통해 SVELTE를 어떻게 사용하는지 입문하는 정도로 강의가 진행되며 공부해볼 예정이다. SVELTE 스벨트(Svelte)는 2016년 출시한 오픈소스 프론트엔드 프레임워크이다. 스벨트를 ..
패스트캠퍼스 챌린지 41일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 41일 차. 이벤트 핸들링 v-on디렉티브는 @기호로, DOM 이벤트를 듣고 트리거 될 때와 JavaScript를 실행할 때 사용한다. v-on:click="methodName" 나 줄여서 @click="methodName"으로 사용한다. HTML Add 1 The button above has been clicked {{ counter }} times. JavaScript Vue.createApp({ data() { return { counter: 1 } } }).mount('#basic-event') 위 코드를 살펴보면 div요소가 하나 있고 그 안에 버튼이 하나 p태그가 하나 있는데 버튼에 이벤트 핸들링으로 클릭을 연결해서 해당하는 버튼을 클릭하게되면 "counter"라는 데이터에 숫자 데이..
패스트캠퍼스 챌린지 40일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 40일 차. 챌린지 앞자리가 드디어 4가 되었다. 그말인 즉슨 진짜 얼마 안남았다는 이야기. Vue.js 템플릿 문법 보간법(Interpolation) 데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation)이다. 메시지: {{ msg }} 위와 같이 Mustache 태그( {{ msg }} , 중괄호를 두 번 )는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체된다. 또한 msg 속성이 변경될 때 마다 갱신된다. v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있다. 다만, 이런 경우 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 한다. 결코 변하지 않을 것입니다: ..
패스트캠퍼스 챌린지 39일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 39일 차. 뭐라고라?? 챌린지가... 11일이 남았다고라?? Vue.js 어플리케이션 인스턴스 생성하기 모든 Vue 어플리케이션은 "createApp" 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다. const app = Vue.createApp( { /* option */ } ) 인스턴스가 생성되면 "mount 메소드"에 컨테이너를 전달하여 mount 할 수 있다. const app = Vue.createApp({}) app.component('SearchInput', SearchInputComponent) app.directive('focus', FocusDirective) app.use(LocalePlugin) 어플리 케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일..
패스트캠퍼스 챌린지 38일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 38일 차. 3월이라는게 아직도 믿겨지지않아~~ 어제는 빨간날이라서 주말 지난 월요일같은 느낌이 든다. Vue CLI (Command Line Interface) Vue.js는 단일 페이지 애플리케이션를 빠르게 구축할 수 있는 공식 CLI (opens new window)를 제공한다. CLI는 Command Line Interface (명령 줄 인터페이스)로 터미널을 통하여 쉽게 프로젝트를 시작할 수 있다. yarn global add @vue/cli # 또는 npm install -g @vue/cli //설치 후 프로젝트에서 아래와 같이 입력 vue upgrade --next 설치를 할 떄엔 veu/cli를 -g 명령어를 이용해 컴퓨터에 전역 설치를 해주어야한다. 그래야만 Vue에 Cli명령어를..
패스트캠퍼스 챌린지 37일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 37일 차. 새로운 프로젝트를 진행하게되었다. 공부를 더 열심히 할 이유가 생겼다. 서비스를 같이 만드는 경험이 많은 것은 아니지만 이렇게 처음부터 같이 진행해보는 것도 흔치 않은 경험이라 기대가 된다. 프로젝트를 진행하면서 성장의 경험을 더 쌓아보고싶다. 패스트캠퍼스에서 제공되는 강의들을 여러번 돌려보면서 리액트 공부 더 열심히 해야지!!!! 오늘 정리해볼 파트는 역시 Vue.js이다. CDN으로 설치하기 Vue.js는 CDN을 통하여 사용할 수 있는데, 원격의 주소에 해당하는 특정 파일을 가지고 스크립트 팩으로 연결할 수 있게 하는 것을 CDN이라고 한다. Vue.js는 위의 스크립트를 추가하여 CDN방식을 사용해볼 수 있다. 프로젝트를 다양하고 풍성하게 만들기 위해서는 CDN보다는 npm을 ..
패스트캠퍼스) K-Digital Credit 프로그래밍 첫걸음 시작하기 3주 차 수강후기2 | 프로그래밍 기초 인강 내용이 길어지는 것 같아서 글을 새로적어서 1, 2로 나누어 적어보았다! CSS width, height (높이, 너비) 단위 설명 px 절대 크기: 모니터상의 한 점 % 상대 크기: 바로 윗 부모의 크기에 비례 vw 상대 크기: 뷰포트 너비의 1/100 vh vma상대 크기: 뷰포트 높이의 1/100 vmax 상대 크기: 뷰포트 너비, 높이 중 긴 쪽의 1/100 vmin 상대 크기: 뷰포트 너비, 높이 중 짧은 쪽의 1/100 CSS 여백 margin : 바깥쪽 여백 padding : 안쪽 여백 margin: [margin-top] [margin-right] [margin-bottom] [margin-left]; margin: [margin-top] [margin-left = margin-right]..
패스트캠퍼스) K-Digital Credit 프로그래밍 첫걸음 시작하기 3주 차 수강후기 | 프로그래밍 기초 인강 이번 주에도 으쌰으쌰 2주 차 스터디를 진행했었다. 3주 차에서 강의 주제는 CSS. 처음 코딩 공부할 때엔 선택자를 작성하는 부분에서 많이 헷갈렸었다. 지금은 그래도 헷갈려하진않는다.. 정말 엄청난 발전.. 여튼 3주차는 CSS에 관한 강의였고 강의에서 배운 내용 중 개인적으로 중요하다고 생각했던 부분과 새로 알게된 부분, 정리하고 싶은 부분들만을 정리해보았다. CSS Cascade Style Sheet의 줄임말로 웹 페이지를 꾸미는 역할을 한다. HTML로 페이지를 제작한다면 CSS는 그 페이지를 꾸며주는 역할을 한다. CSS를 사용하는 이유 웹 페이지의 스타일을 별도의 파일로 나눌 수 있어 전체 스타일을 쉽게 제어할 수 있다. 스타일을 일관성있게 유지할 수 있으며 그에 따른 유지 보수가 쉬워진다. ..

티스토리툴바