내가 해냄/패스트캠퍼스 (71) 썸네일형 리스트형 패스트캠퍼스 챌린지 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을 검색 시 위의 링크로 이동할 수 있는데, 이 스노우팩.. 패스트캠퍼스) K-Digital Credit 프로그래밍 첫걸음 시작하기 4주 차 수강후기 | 프로그래밍 기초 인강 이번 주에는 3주 차 스터디를 진행하였다. 스터디가 한 주 늦게 시작해서 한 주 밀리지만 강의는 4주 차를 맞춰서 잘 들었다. 이번 강의는 자바스크립트에 관한 부분이였고 내가 처음 배웠던 언어이니만큼 애정도가 있는 언어이다. JavaScript 복잡한 무언가를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어이다. 주로 웹페이지의 동적 기능들을 담당한다. HTML, CSS, JavaScript HTML CSS JavaScript 갖다놓고 꾸미고 시킨다 JavsScript를 사용하는 방법 1. script 태그 안에 작성하기 : html 문서 내 head 태그 내, 필요시 body태그 내 특정 위치에 사용 2. .js 파일을 따로 두기 : js파일을 따로 만들어 js파일 연결 코드를 작성 3... 패스트캠퍼스 챌린지 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 탭들은 스벨트의 문법으로 작성된 코드들이 브라우저에서 동작할 수 있는 형태들로 변환되어서 나오는 코드들이다. 변환 내용들을 바로바로 확인하면.. 이전 1 2 3 4 5 6 ··· 9 다음
