본문 바로가기

분류 전체보기

 (179)
[#. react-image-gallery] npm 패키지를 사용해서 상품 상세 페이지에 이미지 슬라이드 image slide 만들기 Node + React로 쇼핑몰을 개발하고 있다 react-image-gallery 패키지를 설치해서 상품 상세 페이지에서 이미지 슬라이드를 사용해 보자 www.npmjs.com/package/react-image-gallery react-image-gallery React carousel image gallery component with thumbnail and mobile support www.npmjs.com ① react-image-gallery 설치 npm install react-image-gallery --save ② css 설정 src/index.css 최상단에 css 파일을 import 해준다 @import "~react-image-gallery/styles/css/image-galle..
[#. React] npx create-react-app CRA 실패, 에러 해결 npx creact-react-app react-project React 프로젝트 생성 시 문제가 발생했다 에러 문구는 아래와 같다 We no longer support global installation of Create React App 혹은 A template was not provided. This is likely because you're using an outdated version of create-react-app. Please note that global installs of create-react-app are no longer supported. CRA로 react project를 생성하려고 하는데 global로 설치한 CRA를 더 이상 지원하지 않는다고 한다 sudo npm un..
[#. React] React + Redux + hook을 사용해서 Counter 만들기 기본적으로 Redux 사용을 익히기 위해 서버 없이 react로만 counter를 만들어보자 일단 react를 시작하기 전에 node가 설치되어 있어야 한다 nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치했으면 react project를 생성해보자 npx creact-react-app react-project npm install react-router-dom --save npm install react-redux --save npm install redux --save npm install antd --save npm install styled-compon..
[#. CodePen] HTML, CSS, JS 코드와 화면을 동시에 볼 수 있는 코드펜 티스토리에 가져와서 사용하기 앞으로는 HTML, CSS, JS 관련 코드를 작성할 때 각각의 코드와 완성된 화면을 동시에 볼 수 있는 코드펜 CodePen을 사용하려고 한다 codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io ① 가입 후 Pen 생성 가입한 후 왼쪽에 Pen 클릭 ② 코드 작성 이렇게 펜이 생성되면 여기에 각각의 코드를 작성한다 ③ 작성 후 링크 가져오기 펜 하단에 Embed 클릭 => HTML 코드 가져오기 ④ 티스토..
[#. CSS] 이미지 위에 텍스트, 글자 올리기 text on image 이미지 위에 텍스트를 올리고 싶은데 position: absolute는 쓰기 싫다 간단하게 이미지 위에 텍스트를 올려보자 ① HTML Title Content ② CSS .background-wrap { background-image: url('https://image.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg'); background-size: 272px 196px; width: 272px; height: 196px; display: flex; justify-content: center; align-items: center; } .content { display: flex; ..
[#. Netlify] Netlify로 정적인 static frontend 코드 웹에 배포하기 Expo로 apk을 추출하려고 간단한 웹페이지를 하나 만들었다 근데 Node에 올리기보다는 쉽고 간단하게 웹에 배포하고 싶다 이때 사용할 수 있는 게 Netlify다 static한 frontend 코드 작성 -> Netlify로 웹에 배포 -> Webview로 apk 생성 www.netlify.com/ Netlify: All-in-one platform for automating modern web projects Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free. www.netlify.com ① 사이..
[#. Markdown] Git README.md, Markdown 작성법 git README.md 작성 시 사용하는 마크다운 문법에 대해 정리해 보자 마크다운 마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다 마크업 언어 마크업 언어(markup)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다 태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다 장점 간결하고, 읽기 쉽다 단점 표준이 없다 제목 텍스트 앞에 #을 붙인다 최소 1개 최대 6개까지 사용 가능하고 ~과 동일하다 # H1 ## H2 ### H3 H1, H2은 아래와 같..
[#. react-ratio] React에서 video, image 비디오, 이미지 항상 같은 비율로 width, height 사이즈 유지하기 youtube clone 코딩을 하면서 모바일 기기로 직접 찍어서 업로드한 동영상이 detail 페이지에 떴을 때 video에 width = 100% 을 줬더니 height은 통제가 안 된다 모바일 기기 세로로 촬영해서 그렇다 video width = 100%로 유지하고 height은 비율을 유지하면서 반응형으로 바뀌었으면 좋겠다 www.npmjs.com/package/react-ratio react-ratio Small component that allows you to create responsive elements that will keep their ratio on different screen sizes. www.npmjs.com 쉽게 사용 가능한 package가 있다 ① 설치 npm insta..

티스토리툴바