분류 전체보기 (118) 썸네일형 리스트형 SOP(Same-Origin Policy), CORS(Cross-Origin Resource Sharing) 1. SOP (Same-Origin Policy) : 동일 출처 정책을 뜻하며, MDN에선 다음과 같이 정의한다. 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식 정리하자면 "같은 출처의 리소스만 공유가 가능하다" 라는 정책이다. - 출처 (Origin) : Protocol, Host, Port의 조합으로 되어있다. ex) https://help-solomon.tistory.com:443/ https = Protocol , help-solomon.tistory.com = Host, 443 = Port 이 중 하나라도 다르면 동일한 출처로 보지 않는다. SOP가 있어서 다른 사이트와의 리소스 공유를 제한하기 때문에 사용자 정보(ex. Log.. TIL - 23 - Keyword 배포 / Netlify / keyframes / Promise.all / 429 Error Github Page로 배포했다가 404 error 두둘겨 맞고 Netlify로 전환했다. proxy, 배포는 진짜 할 때마다 어렵다.. build에 CI= 을 꼭 붙이자 keyframes으로 Animation을 구현하였다. styled-components에서 props를 이용하여 keyframes에 변수로 넣어주는 게 신박했다. const donutMotionAnimation = (color, degree) => keyframes` from{ background: conic-gradient(${color} 0deg, #ebebeb 0deg); } to{ background: conic-gradi.. TIL - 22 - Keyword Data / Event / Json / Canvas / Graph / Donut Chart 기업 과제 중 제공되는 Json file을 import 해서 사용했다. 그냥 import만 하면 끝이라 간단했지만 이걸 사용해도 되는지 의문이다. Data parsing을 효율적으로 하는 로직 짜는 것이 생각보다 힘들다. enter key와 mouse click을 동시해 할 수 있는 input을 구현하였다. if (e.type === "click" || (e.type === "keyup" && e.key === "Enter")) 이렇게 해도 되려나.. input에 onBlur event 때문에 modal에 있는 list onClick event가 발생하지 않았는데, onClick 대신에 onMou.. TIL - 21 - Keyword react-router-dom / query string / animation / CSS react-router-dom에 있는 hooks를 사용하였다. 특정 url로 이동해주는 useNavigate와 query string을 parsing하여 get해주는 useSearchParams를 사용하여 필요한 data를 쉽게 얻었다. import { useNavigate } from "react-router-dom"; // useNavigate 변수 선언 const moveSearchUser = useNavigate(); // 이동할 url 등록 moveSearchUser(`/user?nick=${searchUserNickname.current.value}&matchType=indi`); imp.. TIL - 20 - Keyword hover / Redux Toolkit / localStorage / axios / CORS / http-proxy-middleware mouse hover event를 이용하여 강조 및 애니메이션 효과를 주고 있는데, 자꾸 반응했다가 안 했다가 반복해서 이유를 찾아보니, 뒤에 배경으로 둔 div가 hover 되면서 꼬인 것이었다. 뒤에 div position을 relative로 설정해주고 z-index를 조절하여 해결하였다. 어느 정도 UI 작업이 되어 N사의 data를 받아오는 작업을 하였다. 유저 nickname을 검색하여 data를 받아오고, 거기에 해당하는 accessId로 match data를 받아와야 한다. 우선 유저 nickname을 검색하면 해당 nickname으로 받은.. TIL - 19 - Keyword styled-components / CSS styled-components로 가상 요소 after를 사용하였다. 생각보다 사용법이 간단해서 금방 적응하였다. CSS 애니메이션에서 생각보다 진짜 시간을 많이 썼다. 시작점부터 가로로 늘어나는 선을 표현하는데 처음엔 width를 0으로 주었다가 transition을 설정하여 늘리는 방법으로 구현하였다. const NavContent = styled.div` display: flex; align-items: center; width: 80px; height: 55px; color: white; opacity: 0.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ox.. TIL - 18 - Keyword Canvas / Algorithm Canvas에 대한 나의 경험을 Posting 및 발표를 하였다. 코딩 테스트 준비할 때가 온 것 같다. - 오늘 하루 느낀 점 오늘 발표를 기점으로 진짜 팀 과제 일정이 끝났다. 알고리즘 개념들을 오랜만에 쭉 훑어보는데, 최근 과제만 하다 보니 머리가 굳었다. 주말에 최대한 끌어올려놔야겠다. Canvas (React version) - Canvas : 테두리(border)도 컨텐츠(content)도 없는 단순한 흰 도화지 같은 사각형의 공간으로 다양한 그래픽 요소를 만들 수 있다. 간단한 도형을 그리는 것은 물론 데이터 시각화, 애니메이션, 웹 게임 등을 만들 수 있다. - 기본 Step 1. tag 생성 const canvasRef = useRef(null); useEffect(() => { canvasRef.current.width = window.innerWidth; canvasRef.current.height = window.innerHeight; }, []); canvas의 크기는 반드시 태그 속성으로 해주거나 useRef를 통한 DOM 접근으로 설정해준다. CSS 사용시 화면 왜곡 및 깨짐이 발생할 수 있다. 위 사진의 .. 이전 1 2 3 4 5 6 7 8 ··· 15 다음
