프론트엔드
-
[React] API 주소 환경변수로 분리하기 (개발서버/실서버) (feat.CRA, github-actions)프론트엔드 2022. 1. 9. 18:20
지금 진행 중인 프로젝트 중에서 개발서버와 실서버가 분리되어 있는 프로젝트가 있다. main 브랜치에 올라가는 코드는 실서버로, development 브랜치에 올라가는 코드는 개발서버로 배포되도록 배포 자동화 작업이 되어 있다. 그에 따라서 프론트엔드 코드의 API 요청 주소도 개발 버전(개발서버로 요청)과 실서비스 버전(실서버로 요청)이 달라지도록 해야하는데, 그냥 하드코딩이 되어 있다보니까 브랜치를 바꿀 때마다 일일히 수정하는 게 번거로워서 환경변수로 추가해놓고 사용하기로 했다. API 주소 환경변수로 분리하기 (개발서버/실서버) (feat.CRA, github-actions) CRA로 생성된 프로젝트이기 때문에 CRA 기반으로 설명되어 있고, 깃허브 액션을 사용하고 있어서 마지막에 깃허브 액션 설정..
-
[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..