패캠챌린지 (51) 썸네일형 리스트형 패스트캠퍼스 챌린지 최종 후기 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 후기. 22년을 시작하며 시작했던 50일 환급 챌린지가 드디어 끝났다. 사실 챌린지가 종료되었다고 개발 공부를 끝내는 것은 아니지만 우선 챌린지를 완주하였으니 환급 챌린지의 후기 정도가 되겠다. 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 강의는 더 다양한 개발 언어를 공부해보고자 강의를 찾아보다 알게된 강의였는데 찾게된 딱 그 날까지 50일 환급 챌린지 신청을 받고 있었어서 후다닥 신청하고 결제했던 강의였다. 사실 이렇게 유료로 된 강의를 결제해본 것은 처음이라 나에게 열심히 공부하자는 목표를 만드는 기회가 되기도 했었고, 해이해질 때에도 마음을 다 잡아 더 열심히 공부하는 기회이기도 했다. 사실 나는 엄청난 작심삼일의 인간이여서 챌린지를 시작할 때에도 걱정을 조금 하기는 했었다. .. 패스트캠퍼스 챌린지 50일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 50일 차. 50일 챌린지의 마지막 날!!! 보다 폭 넓은 언어를 공부해보자 마음먹었던게 어제 같은데 벌써 챌린지의 마지막날이 되었다. 마지막 글은 무엇에 관한 글을 쓸까 강의목록을 쭉 보다가 타입스크립트에 대해 정리해보기로하였다. 리액트와 동시에 더 공부해보고싶은 분야였기때문에 이전에 쓴 리액트에 이어 타입스크립트에 관해 정리해보았다. Structural Type System VS Nominal Type System 타입 시스템은 타입스크립트의 타입 체계를 이해하는데에 도움이 된다. 타입스크립트는 Structural Type System을 따르고 있다. Structural Type System은 구조가 같으면 같은 타입이라고 정의하는 방법이다. interface IPerson { name: st.. 패스트캠퍼스 챌린지 49일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 49일 차. ReactDOMServer API https://ko.reactjs.org/docs/react-dom-server.html ReactDOMServer – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 공식문서에서는 리액트 돔 서버라고 하는 API를 제공한다. 리액트 돔 서버에서 제공하는 renderToString(), renderToStaticMarkup()와 같은 것들을 이용하게되면 서버에서 리액트 컴포넌트들을 렌더링하고 그것을 문자열로 바꿔서 내려줄 수 있게 된다. 이론상으론 간단하지만 실무에서는 여러가지 케이스와 만나면서 개발자들을 힘들게 하는 요소 중 하나이다. React Server Sid.. 패스트캠퍼스 챌린지 48일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 48일 차. 48일 차...? 48일 차.....??? 남은 챌린지 기간 단 2일..? 49일 차, 50일 차가 지나가면 끝이라고라? 벌써 50일이 거의 다 지나간다니 정말 믿기지가 않아~! 공부하고 하루 일과처럼 작성하던 포스팅이였었는데 끝나면 어색할 것 같다. 리액트 SPA 프로젝트 배포하기 npm run build production 모드로 빌드되어 "build" 폴더에 파일을 생성한다. 이때 만들어진 파일들을 웹서버를 통해 사용자가 접근할 수 있도록 처리한다. build/static 폴더 안에 JS, CSS 파일들이 생성된다. 이때 파일 이름에 hash 값이 붙는다. (ex)main.eb74f3d0.chunk.css) SPA Deploy의 특징 모든 요청을 서버에 하고 받아오는 형태가 아니.. 패스트캠퍼스 챌린지 47일차 - 한 번에 끝내는 프론트엔드 개발 초격차패키지 online 챌린지 47일 차. 리액트에 관한 보다 더 자세한 기능들의 강의를 들었다. Reconciliation 1. 리액트에서 렌더 전후의 일치 여부를 판단하는 규칙이다. 2. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. ( 그래서 새로 렌더가 되어야한다.) 3. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지않아야 할지 표시해 줄 수 있다. 그러므로 더 효율적으로 코드를 활용할 수 있다. React.createPortal 리액트에서 제공하는 API이다. https://ko.reactjs.org/docs/portals.html Portals – React A JavaScript library for building user interfaces ko.react.. 패스트캠퍼스 챌린지 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을 검색 시 위의 링크로 이동할 수 있는데, 이 스노우팩.. 이전 1 2 3 4 ··· 7 다음
