분류 전체보기
-
[React] React-Router-DOM 현재 선택된 메뉴 표시하기 (NavLink)프론트엔드 2022. 1. 9. 17:57
React-Router-DOM의 컴포넌트를 내비게이션 메뉴에서 사용하는 경우, 현재 페이지를 표시해주기 위해 따로 스타일을 주는 경우가 많다. 예) Menu1 Menu2 Menu3 이럴 때 대신 를 사용하면 activeClassName 속성을 사용해 현재 선택된 메뉴에만 클래스 이름을 추가해 스타일링을 쉽게 할 수 있다. css .active { color: red; font-weight: bold; } jsx Menu1 Menu2 Menu3 html Menu1 Menu2 Menu3 Reference : https://github.com/remix-run/react-router/blob/1cf5f7e938ea4d5cff23ce88f9f952f0a343b7a0/docs/getting-started/tuto..
-
[CSS] 화면 클릭 시 생기는 파란 배경색 없애기프론트엔드 2022. 1. 9. 17:46
DOM 요소를 클릭했을 때 드래그한 것처럼 파란 배경색이 생기는 경우가 있다. 클릭했을 때 실제로 드래그가 되면서 생기는 경우도 있고, tab-highlighting 때문에 생기는 경우도 있다. 드래그일 경우 user-select: none; tab-highlighting일 경우 -webkit-tap-highlight-color: transparent; 위와 같이 설정해주면 해결된다. https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color -webkit-tap-highlight-color - CSS: Cascading Style Sheets | MDN -webkit-tap-highlight-color is a non-sta..
-
[Github Pages/깃헙페이지] gh-pages 브랜치가 아닌 다른 브랜치(main)로 배포하기프론트엔드 2022. 1. 3. 21:01
gh-pages 브랜치를 사용하지 않고 main 브랜치를 배포용 브랜치로 사용하고 + developement 브랜치를 따로 둬서 작업용으로 사용하고 싶었다. 1. 일단 developement 브랜치에서 npm install gh-pages --save-dev 으로 gh-pages를 dev dependency로 설치하는 건 동일하다. 2. 다음으로 package.json의 scripts 항목에 predeploy, deploy 명령어를 추가하는 것도 동일한데, "predeploy": "npm run build", "deploy": "gh-pages -b main -d build", deploy 명령어를 "gh-pages -d build" 로 설정하는 대신 "gh-pages -b main -d build" 로..
-
[Github Pages/깃헙페이지] gh-pages 배포 시 favicon이 안 뜰 때 해결 방법프론트엔드 2022. 1. 3. 20:48
gh-pages에 서비스를 배포했는데 favicon이 뜨지 않는 이슈가 있었다. 우선 CRA로 만든 프로젝트라 프로젝트 루트 디렉토리에 index.html이 있고, index.html의 태그 안에 2. 3. 4. 참고 : https://stackoverflow.com/questions/35037482/favicon-with-github-pages Favicon with GitHub Pages I'm hosting a few sites with GitHub Pages (User and Project Pages), but they are not displaying their favicons (in the browser).
-
[React] 이메일 전송 폼 만들기 - EmailJS프론트엔드 2022. 1. 2. 00:02
https://emailjs.com 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! www.emailjs.com 유저가 서비스 관련 피드백을 보낼 수 있도록 랜딩 페이지에 이메일 전송 폼을 넣고 , 유저가 해당 폼을 작성하고 확인 버튼을 눌렀을 때 emailjs를 사용해 메일이 실제 개발자 이메일 주..
-
[CSS] 줄바꿈 기준 word-break 속성 (normal, keep-all, break-all)프론트엔드 2022. 1. 1. 23:32
word-break 속성을 통해 단어 단위로 줄바꿈을 할지, 글자 단위로 줄바꿈을 할지 설정할 수 있다. 단어 단위로 줄바꿈을 한다는 것은, 이렇게 컨텐츠 크기가 길어질 때 단어를 쪼개지 않고 줄바꿈을 하는 것을 말한다. 글자 단위로 줄바꿈을 하는 것은, 이렇게 컨텐츠 크기가 길 어질 때 단어를 쪼개고 글자 단위로 줄바꿈을 하는 것이다. 옵션은 normal, keep-all, break-all 세 가지가 있다. normal (기본값) : 영어는 단어 단위로 줄바꿈, 한글은 글자 단위로 줄바꿈 keep-all : 영어, 한글 모두 단어 단위로 줄바꿈 break-all : 영어, 한글 모두 글자 단위로 줄바꿈 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/word..
-
VSCode React styled-components 스니펫프론트엔드 2021. 12. 29. 14:26
스니펫은 "코드 조각"이라는 뜻으로, 자주 사용되는 코드 형식을 미리 만들어두고 간편하게 불러와 사용할 수 있다. 지금 진행 중인 리액트 프로젝트에서는 각 컴포넌트 별로 .jsx 파일을 생성하고 동일한 이름으로 .styles.jsx 파일을 생성한 다음 .styles.jsx에 스타일드 컴포넌트를 import해 스타일을 정의하는 식으로 구조를 작성하고 있다. /Testimonial Testimonial.jsx Testimonial.styles.jsx 내가 사용하는 기본적인 .styles.jsx 파일 형식은 다음과 같다. Testimonial.styles.jsx import styled from "styled-components"; const TestimonialStyled = styled.div``; exp..
-
[React] create-react-app (CRA) 에러 해결 : no longer support global installation of Create React App.프론트엔드 2021. 12. 27. 02:21
프로젝트 폴더에서 npx create-react-app . 명령을 실행해서 리액트 어플리케이션을 초기화하려고 했는데 다음과 같은 에러가 발생했다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app 1. 일단 에러메세지에 나온 대로 npm u..