1. SCSS 기본 구조와 중첩 문법SCSS에서는 CSS처럼 단순히 선택자와 속성을 나열하는 대신, HTML의 계층 구조를 반영하여 중첩(nesting)을 사용할 수 있습니다. 예시 :.parent { color: blue; .child { font-size: 16px; margin: 10px; } &.active { background-color: yellow; }} 컴파일된 CSS 결과 :.parent { color: blue;}.parent .child { font-size: 16px; margin: 10px;}.parent.active { background-color: yellow;} 2. SCSS 작성 시 주요 문법과 사용법(1) 중첩HTML 구조를 반영하여..
분류 전체보기
이런 사각형과 뾰족한 삼각형이 합쳐져 말풍선 형태를 나타내는 툴팁을 만들 예정입니다. 보통 사각형이 되는 div에 before나 after와 같은 가상선택자를 이용하여 삼각형을 구현해 주는데,우리의 디자인은 border와 그림자가 있는 관계로 사각형과 삼각형이 분리되어 보이는 이슈가 있었습니다. 사각형과 삼각형이 자연스럽게 어울려 말풍선 모양의 툴팁을 구현하는 방법은 아래와 같습니다. HTML setPointTooltip(true)}> ※ 포인트의 최소 사용 단위는 1,000점 입니다. ※ 가족 포인트는 예약자(본인)의 포인트를 모두 사용하셔야 다른 가족의 포인트 합산 사용이 가능합니다. ※ 가족 포인트는 등록된 가족이 예약자(본인)의 포인트 합..
백단은 닷넷 -> 스프링부트로 컨버팅하는 작업의 1단계가 거의 마무리 되어가는 시점이라 프론트에 연동하는 작업을 시작했다. 프론트 도메인은"http://localhost:3000", "https://localhost:4433"두 개를 사용한다. 백엔드 도메인은http://localhost:8091/이다. 하나의 api만 변경해서 적용을 해봤는데어마어마한 cors 에러가 났다.. CORS의 동작 방식CORS는 브라우저에 관련된 정책이기 때문에, 클라이언트에서 외부 API 서버로 바로 요청을 보내면 CORS 문제가 발생한다.즉, 서버에서 서버로 리소스를 요청할 때는 CORS 정책을 위반하지 않고 정상적으로 응답을 받을 수 있다.그러므로 이 문제를 해결하는 방식은 다음과 같겠다.내 api 서버로의 접근에서 ..
여담에서 전체적으로 alert();을 활용하다가 간혹가다가 종종 모바일에서 알럿이 안떠서 오류처럼 화면이 멈춰버리는 이슈가 발생되어 alert을 인라인 에러메세지, 토스트메세지, 다이얼로그 등으로 변경하는 작업을 거쳤다.이번에는 다이얼로그를 공통 컴포넌트로 만들어 활용하는 방법에 대해 기록해두려 한다. 1. 다이얼로그 컴포넌트 만들기// Dialog.jsimport Button from "@material-ui/core/Button";import Dialog from "@material-ui/core/Dialog";import DialogActions from "@material-ui/core/DialogActions";import DialogTitle from "@material-ui/core/Dial..
1. action 파일// actions/toast.jsimport { SHOW_TOAST, HIDE_TOAST } from "./types";export const showToast = (message, state) => (dispatch) => { dispatch({ type: SHOW_TOAST, payload: { message: message, state: state }, });};export const hideToast = () => ({ type: HIDE_TOAST,}); 2. types 파일export const SHOW_TOAST = "SHOW_TOAST";export const HIDE_TOAST = "HIDE_TOAST"; 3. reducer 파일import { SH..
element { width: 100%;}element.faded { width: 100%; height: 700px; overflow: hidden; position: relative;}element.faded:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; top: 0; background: linear-gradient(to top, white, white 10%, transparent); background-repeat: no-repeat; transition: all 500ms ease;}
회사 전체 대고객사이트에 SNS 로그인 기능을 추가하기로 결정이 되었습니다. 지금 제가 맡고 있는 사이트에서는 멤버십 회원가입과 네이버 간편 회원가입(로그인) 기능만 부착되어 있는 상태입니다. 이번에 APPLE, google, 카카오 로그인 기능을 추가적으로 부착하는 프로젝트를 진행하게 되었습니다. 1. 애플 디벨로퍼 사이트에 로그인 https://developer.apple.com/ Apple Developer There’s never been a better time to develop for Apple platforms. developer.apple.com 위의 링크로 접속해 애플 디벨로퍼 계정을 만들고 로그인합니다. 2. Identifiers 생성하기 좌측의 Identifiers 메뉴를 클릭 후 ..
애플 로그인 기능을 구현하다가 애플에서는 최근에 redirect url에 https 프로토콜이어야만 허용해주는 것을 알게되고, 로컬에서 테스트할 수 있는 방법을 알아보다가 localhost를 https로 생성해주는 서비스를 알게되어 소개합니다. Ngrok은 로컬 서버를 안전하게 인터넷에 띄울 수 있게 도와주는 서비스입니다. 1. Ngrok 설치 https://ngrok.com/ ngrok | Unified Application Delivery Platform for Developers ngrok is a secure unified ingress platform that combines your global server load balancing, reverse proxy, firewall, API gat..
