내가 해냄 (99) 썸네일형 리스트형 패스트캠퍼스 챌린지 46일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 46일 차. 강의의 커리큘럼을 모두 한 번씩 훑어본 것 같아서 더 공부하고 싶었던 부분의 강의를 더 들어보기로했다. 바로 리액트! 리액트를 사용해서 진행하는 프로젝트들이 많아질 것 같아서 리액트에 대해 더 공부하는게 낫다는 생각을 했다. High-Order Components https://ko.reactjs.org/docs/higher-order-components.html 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org High-Order Components는 리액트 공식문서(위의 링크)에서도 나와있을만큼 자주 다뤄지는 요소이다. 하지만 최근에는 그 중요도가 조금 낮아졌다. 이유는 High-Orde.. 패스트캠퍼스 챌린지 45일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 45일 차. Simple Todo App 만들기 프로젝트 스노우 팩의 스벨트를 사용하여 간단한 투두 앱을 구현하는 프로젝트를 진행하였다. 사실 투두 앱은 기존에 만들어봤던 경험이 있는데 스벨트를 사용하여 만들어보는 것은 처음이라서 조금 색다른 느낌이였다. input창을 사용하여 투두리스트를 작성하여 버튼을 클릭할 시 아래 화면에 리스트들로 투두가 작성되는 형태이다. 투두리스트들은 여러개를 입력할 수도 있고 각각의 리스트는 edit 버튼과 delete 버튼을 갖고 있어서 eidt버튼을 누른다면 리스트를 수정, delete 버튼을 누른다면 리스트를 삭제 할 수 있다. 또한 투두리스트는 로컬 스토리지 내의 API를 사용하여 우리가 작성한 투두 리스트들을 스토리지에 저장이 될 수 있게 만들게된다. 로컬 .. 패스트캠퍼스 챌린지 44일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 44일 차. Snowpack 이 전 포스팅에서 스벨트는 홈페이지의 REFL을 사용하여 공부했는데 이번에는 홈페이지의 REFL이 아닌 우리의 로컬 환경에서 동작시켜보려고한다. 이에 우리는 이전에 Vue.js를 사용할 때 파슬이나 웹 팩 번들러를 사용하여 코드를 구성하고 개발을 시작했었던 것을 기억할 수 있다. 스벨트에서는 Snowpack이라는 개발도구를 활용해서 프로젝트를 구성할 수 있다. https://www.snowpack.dev/ Snowpack Snowpack is a lightning-fast frontend build tool, designed for the modern web. www.snowpack.dev 구글에서 snowpack을 검색 시 위의 링크로 이동할 수 있는데, 이 스노우팩.. 패스트캠퍼스) K-Digital Credit 프로그래밍 첫걸음 시작하기 4주 차 수강후기 | 프로그래밍 기초 인강 이번 주에는 3주 차 스터디를 진행하였다. 스터디가 한 주 늦게 시작해서 한 주 밀리지만 강의는 4주 차를 맞춰서 잘 들었다. 이번 강의는 자바스크립트에 관한 부분이였고 내가 처음 배웠던 언어이니만큼 애정도가 있는 언어이다. JavaScript 복잡한 무언가를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어이다. 주로 웹페이지의 동적 기능들을 담당한다. HTML, CSS, JavaScript HTML CSS JavaScript 갖다놓고 꾸미고 시킨다 JavsScript를 사용하는 방법 1. script 태그 안에 작성하기 : html 문서 내 head 태그 내, 필요시 body태그 내 특정 위치에 사용 2. .js 파일을 따로 두기 : js파일을 따로 만들어 js파일 연결 코드를 작성 3... 코드프레소) Code.PRESS-UP 체험단 [데이터 사이언스 트랙] 수강 후기3 2월 첫 주에 코드프레소 체험단으로 활동했었던 첫 후기와 두번째 후기를 블로그에 포스팅했었다. 이번 포스팅은 이전 후기에 이어서 다른 강의를 수강해본 후기를 작성해보려한다. 세 번째 후기가 되겠다! 이번에도 코드프레소에서 새로파이썬 강의이고 데이터 분석강의를 수강해보았다. 강의에 대해 작성하기 이전에 나는 코드프레소라는 사이트를 이번에 체험단 활동을 하게되면서 알게된 케이스이다. 첫 후기를 작성할 때에는 링크를 복사할 때에 메타데이터가 이렇게 자세하게 나오지는 않았었는데 체험단 활동을 하면서도 사이트가 이것저것 업데이트 된 것 같아서 괜히 내가 다 뿌듯한 기분이 든다. 코드프레소라는 사이트 자체도 점점 성장하고 나도 코드프레소에서 강의를 들으며 같이 성장하는 느낌이랄까 ㅎ..ㅎ 나는 아직 부족한 점이 많.. 패스트캠퍼스 챌린지 43일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 43일 차. REFL REFL은 SVELTE 홈페이지에서 사용할 수 있는 사이트이다. 스벨트 홈페이지 상단 헤더 부분을 확인하면 REFL이라고 적힌 메뉴를 볼 수 있다. https://svelte.dev/repl/hello-world?version=3.46.4 Hello world • REPL • Svelte svelte.dev 클릭하면 위의 링크로 연결이 된다. REFL은 우리가 실제로 코딩을 해볼수 있는 컴퓨팅 환경이다. 실제로 왼쪽 화면에 코드를 작성하게 되면 오른쪽에서 바로 결과를 확인해 볼 수 있는 사이트이다. 결과 탭 옆의 JS/CSS OUTPUT 탭들은 스벨트의 문법으로 작성된 코드들이 브라우저에서 동작할 수 있는 형태들로 변환되어서 나오는 코드들이다. 변환 내용들을 바로바로 확인하면.. 패스트캠퍼스 챌린지 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"라는 데이터에 숫자 데이.. 이전 1 2 3 4 5 6 7 ··· 13 다음
