티스토리 뷰
리액트 다큐멘테이션
About the Documentation | Create React App (create-react-app.dev)
About the Documentation | Create React App
Welcome to the Create React App documentation!
create-react-app.dev
프로젝트 구조 잡기
3-2. 프로젝트 구조 잡기 · GitBook (vlpt.us)
3-2. 프로젝트 구조 잡기 · GitBook
이번 섹션에서는 프로젝트를 생성하고 기본적인 설정을 해보도록 하겠습니다. create-react-app 을 통하여 프로젝트를 생성하고, 앞으로 우리가 필요한 모듈들을 설치해주세요. 뭔가, 의존 모듈이
redux-advanced.vlpt.us
절대경로 사용하기
리액트 절대 경로 사용하기
리액트에서 절대 경로를 사용하여 임포트 지옥에서 빠져나오기
www.imkh.dev
라우터 사용하기
react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG
react-router :: 1장. 리액트 라우터 사용해보기 | VELOPERT.LOG
이 튜토리얼은 3개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. SPA 란? Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지
velopert.com
다국어 처리하기
[react] 다국어 처리(react-i18next) 적용하기 (tistory.com)
[react] 다국어 처리(react-i18next) 적용하기
사용 패키지. bootstrap 은 디자인을 깔끔하게 보이게 하기위해 추가 npm install i18next --save npm install react-i18next --save npm install react-bootstrap --save 프로젝트는 다음과 같이 구성했다. i18n..
lemontia.tistory.com
페이지 이동시에도 언어 유지 및 브라우저 설정 언어에 따른 초기 언어 설정
[React.js로 만드는 Tech Blog] #5 언어 설정을 위한 react-i18next 라이브러리 사용하기/국제화 라이브러리(i18n) (tistory.com)
[React.js로 만드는 Tech Blog] #5 언어 설정을 위한 react-i18next 라이브러리 사용하기/국제화 라이브러
2021/02/21 - [👩💻/React.js] - [React.js로 만드는 Tech Blog] #4 Window.scrollY/window.pageYOffset 2021/02/16 - [👩💻/React.js] - [React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github..
uiyoji-journal.tistory.com
i18next instance - react-i18next documentation
i18next instance
react.i18next.com
부트스트렙 다큐멘테이션
React-Bootstrap · React-Bootstrap Documentation
React-Bootstrap
The most popular front-end framework, rebuilt for React.
react-bootstrap.github.io
네비
React - navbar item 클릭 후 Link to로 링크 이동시, navbar toggle 되게하기 (tistory.com)
React - navbar item 클릭 후 Link to로 링크 이동시, navbar toggle 되게하기
React - navbar item 클릭 후 Link to로 링크 이동시, 메뉴 토글되게하기 | 참고 링크 : https://stackoverflow.com/questions/32452695/react-bootstrap-how-to-collapse-menu-when-item-is-selected | 시작하..
ideveloper2.tistory.com
그냥 참고
React - 쇼핑몰 만들기(2)
✔ import / export ✔ data Html binding ◾ src 폴더에 App.js와 나란히 data.js를 만듬◾ data.js에서 중요한 변수를 export 하고싶을땐 export default라는 문법을 사용◾ 우측에는 밖에서 사용하고싶은
velog.io
Swiper
Swiper React Components (swiperjs.com)
Swiper React Components
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
React Swiper
보기 쉽게 정리하려 포스팅합니다. 1. Swiper 설치 npm i swiper 2. Swiper 옵션 1) 자주 쓰는 옵션 slidesOffsetBefore // 슬라이드 시작 부분 여백 slidesOffsetAfter // 슬라이드 끝 부분 여백 slidesPerView /..
record22.tistory.com
미디어쿼리
반응형웹에 대한 미디어쿼리의 사용 ~ 나만모르는 이야기 (junistory.blogspot.com)
반응형웹에 대한 미디어쿼리의 사용
Web개발, 웹디자인, 웹기획, IT정보, 여행정보, 맛집정보등에 대해 공유하는 블로그 입니다.
junistory.blogspot.com
이미지 가운데만 잘라서 쓰기
html - div 내에서 이미지 중앙에 맞추기 및 자르기 [중복] - IT 툴 넷 (pythonq.com)
html - div 내에서 이미지 중앙에 맞추기 및 자르기 [중복] - IT 툴 넷
pythonq.com
useEffect
[JS]useEffect를 통한 React Hooks의 Lifecycle 관리 | by PEPPERMINT100 | Medium
[JS]useEffect를 통한 React Hooks의 Lifecycle 관리
Hooks에 대한 기초 지식은 구글링하면 아주 잘 정리된 글들이 아주 많습니다. 기본적인 useState나 useEffect, 함수형 프로그래밍 등은 제가 직접 쓰고 또 공부를 위해 제 글을 다시 제가 읽는 것 보다
krpeppermint100.medium.com
filter로 색상 변경
CSS filter generator to convert from black to target hex color (codepen.io)
CSS filter generator to convert from black to target hex color
...
codepen.io
카운팅 (JS)
counter pure js - JSFiddle - Code Playground
counter pure js - JSFiddle - Code Playground
jsfiddle.net
폰트 어썸 아이콘
React에서 Font Awesome 사용하기 | Engineering Blog by Dale Seo
React에서 Font Awesome 사용하기
Engineering Blog by Dale Seo
www.daleseo.com
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
설퐁의 블로그 :: font-awesome 설치 및 사용법 + 티스토리 적용 (serpongs.net)
설퐁의 블로그
다운로드 및 설치 별도의 파일 업로드 없이 설치 이 코드를 head안에 넣어주면 설치가 끝입니다. 하지만 속도나 수정을 위해서 직접 자기 사이트에 파일들을 업로드 후 사용할 수도 있습니다. 자
blog.serpongs.net
폰트 어썸 아이콘 종류
React Icons (react-icons.github.io)
React Icons
react-icons.github.io
부트스트랩 네비게이션바
React-Bootstrap · React-Bootstrap Documentation
React-Bootstrap
The most popular front-end framework, rebuilt for React.
react-bootstrap.github.io
404에러 페이지
[React] 404 페이지 만들기 (tistory.com)
[React] 404 페이지 만들기
위와 같은 구조로 라우팅을 구성했다면, 가령 /test 같은 주소는 존재하지 않으므로 텅 빈 화면만이 표시된다. 이를 시각화해주는 것이 UX관점에서 좋기 때문에 추가해야 한다. 먼저 로 라우트 컴
satisfactoryplace.tistory.com
Calling Code
HTML <select> international calling codes for each country (github.com)
HTML
international calling codes for each country - html_for_international_calling coes.htm
gist.github.com
International Telephone Input With Flags and Dial Codes happycgi
International Telephone Input With Flags and Dial Codes happycgi
FLASH 기타 플래쉬, 프로그램연동, 템플릿, 텍스트효과, 키보드,마우스, 컴포넌트, 이미지효과, 메뉴관련, 멀티미디어, 날짜,시계, 플래쉬게임 UTILITY HTML 제작, 편집기, 텔넷,SSH, 이미지편집기, 설치
happycgi.com
GitHub - mukeshsoni/react-telephone-input: React component for entering and validating international telephone numbers
React component for entering and validating international telephone numbers - GitHub - mukeshsoni/react-telephone-input: React component for entering and validating international telephone numbers
github.com
Form Validation
React-Bootstrap · React-Bootstrap Documentation
React-Bootstrap
The most popular front-end framework, rebuilt for React.
react-bootstrap.github.io
EmailJS
Send email from Javascript - no server code required | EmailJS
Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!
dashboard.emailjs.com
Javascript로 사이트에서 메일을 발송해보자! _Contact Form 만들자_ EmailJS를 사용해보자 (tistory.com)
Javascript로 사이트에서 메일을 발송해보자! _Contact Form 만들자_ EmailJS를 사용해보자
사이트에 Form을 만들고 이것을 통해 '사이트 주인에게 메일 발송'하는 기능을 작업해보도록하겠습니다. EmailJS - http://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Sen..
okayoon.tistory.com
[JS] [emailJS] 자바스크립트로 이메일 보내기 (tistory.com)
[JS] [emailJS] 자바스크립트로 이메일 보내기
github page로 이력서 사이트를 만드는 중에 contact로 내 이메일 주소는 공개하지 않으면서 이력서 사이트 접속자로부터 메일을 받을 수 있는 기능을 추가하고 싶었다. 그렇지만 github page는 정적 페
sweeteuna.tistory.com
EmailJS 및 React-Hook-Form을 사용하여 무료로 React 웹 사이트에 이메일 양식을 추가하는 방법 (ichi.pro)
EmailJS 및 React-Hook-Form을 사용하여 무료로 React 웹 사이트에 이메일 양식을 추가하는 방법
좋은 포트폴리오 웹 사이트에는 방문자가 이메일을 보낼 수있는 연락처 페이지가 있어야합니다. 결국 방문자가 귀하에게 연락 할 방법이 없을 때 귀하의 웹 사이트를 만드는 데 많은 노력을 기
ichi.pro
svg파일을 컴포넌트로 사용하기
[React] React에서 SVG 활용하기 (velog.io)
[React] React에서 SVG 활용하기
React 프로젝트에서 PNG? JPG? 아니요, SVG!
velog.io
조건문 사용하기
조건부 렌더링 – React
A JavaScript library for building user interfaces
ko.reactjs.org
리액트에서 자주쓰는 if문 작성패턴 5개 - 코딩애플 온라인 강좌 (codingapple.com)
리액트에서 자주쓰는 if문 작성패턴 5개 - 코딩애플 온라인 강좌
(리액트 강좌 전체 메뉴) 딱히 설명할 부분이 없어서 글로 진행합니다. JSX 안에서 혹은 그냥 일반 코드작성시 if문을 쓸 때가 매우 매우많습니다. 지금까지는 삼항연산자만 주구장창 사용했는데
online.codingapple.com
스크롤 컨트롤하기
React Hook 에서 Scroll 컨트롤 하기! top버튼 구현 (tistory.com)
React Hook 에서 Scroll 컨트롤 하기! top버튼 구현
How can I make a Top Button, click to scroll to the top ?! 서비스용 홈페이지를 개발하다 보면 항상 구현해야 하는 부분은 스크롤 입니다. 처음에는 무조건 ref 를 사용해서 컨트럴 해야 한다고 생각했었는데,
wazacs.tistory.com
필터 버튼 구현하기
React-Hooks를 사용하여 필터 버튼 구현하기 -1- (velog.io)
React-Hooks를 사용하여 필터 버튼 구현하기 -1-
React-Hooks를 활용하여 버튼 클릭시 데이터를 필터링 해주는 웹 페이지를 구현하려고합니다. 작은 미니 프로젝트로 그래픽카드 정보를 담는 페이지입니다. React App 생성하기 npx create-react-app filter-a
velog.io
'Frontend' 카테고리의 다른 글
| [Front] CSS를 이용한 애니메이션 효과!! (0) | 2021.08.18 |
|---|---|
| [Front] 구글 웹 폰트 적용하기!! (2) | 2021.08.18 |
| [CSS] text-decoration, 텍스트 꾸미기 (0) | 2020.10.23 |
| [CSS] text-indent, 들여쓰기 (0) | 2020.10.23 |
| [CSS] vertical-align, 수직 정렬 / text-align, 수평 정렬 (0) | 2020.10.23 |