본문 바로가기

분류 전체보기

(109)
패스트캠퍼스 챌린지 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를 사용하는 이유 웹 페이지의 스타일을 별도의 파일로 나눌 수 있어 전체 스타일을 쉽게 제어할 수 있다. 스타일을 일관성있게 유지할 수 있으며 그에 따른 유지 보수가 쉬워진다. ..
패스트캠퍼스 챌린지 36일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 36일 차. 2월의 마지막 날이 되었다!! 오늘 지나면 3월~~ 챌린지도 어느 덧 1월, 2월을 지나 3월 차에도 하게되었다. 3월의 새로운 소식은 새로 프로젝트에 참여하기로했다. 사실 아직 확정은 아니고 내일 면접을 보게되었다. 아직 면접 단계이긴 하지만 기존의 팀 프로젝트를 뛰어넘는 새로운 프로젝트라서 기대가 된다~~! 성공적으로 프로젝트를 진행하기위해서라도 공부를 더 열심히 해야하는 이유가 하나 더 생긴 것 같다. 사용하는 언어의 폭을 높이기 위해서 이전에 스킵했었던 파트인 Vue에 대한 강의를 들어보았다. 오늘은 Vue에 대해 간단히 정리해보겠다. Vue.js 모던한 프론트엔드의 꽃이라고 하면 Vue.js와 같은 프레임워크들이다. 프론트엔드 개발 과정에 있어 중요하게 공부해야하는 부분 중 ..
패스트캠퍼스 챌린지 35일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 35일 차. 최근 들어서 느끼는건데 나는 완전 슈퍼 P형 인간이여서 계획따윈 없이 사는 것 같았는데 그 게으름 속에서도 나름 계획을 세우고 계획대로 살아가며 나름의 규칙을 갖고 있는 것 같다. 언제부턴가 계획대로 되지않으면 굉장히 짜증나고 또 스트레스도 많이 받는다. 주변 환경이 바뀌는 것도 크게 좋아하지않는 편인데 자의가 아닌 타의로 계획이 무너지거나 생각대로 못하는 것에 대해서 많은 스트레스를 받는다. 그러한 과정 하나하나가 굉장히 스트레스이며 틀어지기 시작하는 그 즉시 눈살이 찌푸러질 정도로 극도로 혐오한다. 너무 싫어. 늘 순간순간의 감정에 잡아먹히지않으려고 노력하는 편이지만 또 여기선 슈퍼 F형 인간이라서 감정의 노예가 된다. 결론은 오늘 갑작스럽게 방이 바뀌어서 짜증나고 화난단 소리이다..