728x90 분류 전체보기748 [CSS] transform: translte(x, y) + transition을 사용한 우측 고정 미니 배너 구현하기 앞서 테스트 구현한 다락에서 추가로 구현해보고 싶은 UI가 있어서 window.outerHeight / window.innerHeight / window.scrollY를 활용하여 구현하였다. 예제 사이트 화면 아래 화면에서 우측에 있는 "신규 지점 오픈특가 알림" 팝업창이 스크롤을 내려도 스무스하게 이동하면서 고정되는 UI가 마음에 들어서 구현해 보았다. 나에게 딱 맞는 보관공간 찾아보기 '미니창고 다락' 1인가구 원룸부터 4인가구이상의 아파트까지, 레고나 피규어 수집가에게 딱 맞는 크기부터 캠핑, 골프 등의 취미생활에도 딱 맞는 맞춤형 사이즈를 제안해드려요. 이용 시작시 다락이 대신 짐을 www.dalock.kr 구현 코드 및 실행 화면 스크롤 내렸을 때 화면 우측에 팝업창을 고정하려면 transfor.. 2023. 6. 8. [CSS] animation : running로 컨텐츠 반복 애니메이션 구현하기 현생에 치여 살다가 흥미로운 css 개념을 알게 되어서 기능 테스트 해보고 복습할 겸 블로그를 작성해 본다. 예제를 찾다가 다락 공홈 하단에 다락 이용 후기가 생각하던 기능이어서 바로 구현해 보았는 데 animation / animation-play-state / @keyframe을 다뤄볼 수 있어서 좋았다. 예제 사이트 화면 서두에서도 언급했듯이 다락 메인 화면에 다락 이용 후기 UI 코드를 참고하여 애니메이션 기능을 테스트해 보았다. 나에게 딱 맞는 보관공간 찾아보기 '미니창고 다락' 1인가구 원룸부터 4인가구이상의 아파트까지, 레고나 피규어 수집가에게 딱 맞는 크기부터 캠핑, 골프 등의 취미생활에도 딱 맞는 맞춤형 사이즈를 제안해드려요. 이용 시작시 다락이 대신 짐을 www.dalock.kr 구현 .. 2023. 6. 8. [일기] 20230421 루피 귀여워 루피가 짱이야 어제 배송와서 회사 오자마자 붙였는 데 너무 귀여운 거 같아서 사진 투척 2023. 4. 21. [Error] AWS S3 CORS error 발생 Access to XMLHttpRequest at '해당 이미지' from origin '해당 사이트' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. local에서는 AWS S3에 이미지가 잘 업로드 되다가 실서버에서 위와 같은 오류가 발생한다면 아래와 같이 해결할 수 있습니다. AWS S3 접속 > 해당 버킷으로 이동 > 하단 스크롤 > CORS(Cross-origin 리소스 공유) > 편집 > "AllowedPOrigins" value에.. 2023. 4. 11. [Next.js] 동적 meta tag 설정하기 Next.js에서 Dynamic Routes를 사용하다 보니 meta tag 설정하는 부분에서 삽질을 너무 많이 했다. 다음에는 이런 일이 없도록 정리해 보았다. 삽질을 하면서 알게 된 것 meta 태그에는 static 한 값만 넣을 수 있다. getServerSideProps는 은근히 까다롭다. fetch는 절대 url을 사용해야 한다. 예제를 찾을 때는 다른 분들이 작성하신 블로그를 꼼꼼하게 읽자 아래 블로그에서 해답을 얻을 수 있었다. (정말.. 이 분이 아니었다면 머리가 다 뜯겼을지도 모른다.) Next.js 다이나믹 메타 태그 넣기 저번 글에 이어서 SEO 작업을 계속 하고 있다. 이번주엔 다이나믹 메타 태그 작업을 했다. (메타태그 종류나, 검색최적화를 위한 추천 등의 내용은 없습니다) htt.. 2023. 4. 10. [일기] 20230330 오늘 React Query 공부하고, Next.js 프로젝트에 적용했는 데 확실히 useEffect로 api 조작하는 것보다 데이터 fetching 라이브러리 쓰니까 신경 쓸 부분이 줄어서 좋은 것 같다. 내일 연차니까 주말까지 실컷 놀고 다음 주부터 다시 열심히 공부해야 지 오늘 팀원분이 보내주신 짤 투척 2023. 3. 30. axios 여러 개 요청하기 (multiple request) 프로젝트 리뉴얼 과정에서 한 컴포넌트에 5개의 get api를 요청해야 해서 단순하게 생각했을 때는 useEffect에 api를 넣으면 된다고 생각했었지만 실제로 테스트해보았을 때 몇 가지 문제가 발생했었다. 불러온 값이 없다는 error 발생 순차적으로 불러오려니 시간이 오래 걸려 로딩이 느림 유지보수가 용이하지 않음 한꺼번에 api를 요청하는 방법은 없을까 찾아보니 axios.all을 사용하는 방법이 있다는 걸 알게 되었다. 기존에 axios와 크게 다르지는 않아서 좋았다. import axios from "axios" import { useEffect } from "react" const Test = () => { const getAHandler = () => { return axios.get("/.. 2023. 3. 30. MVC 패턴 내 머릿속에 MVC 패턴은 백엔드에서 사용하는 아키텍처로써 Model, View, Controller가 있다고 알고 있었는 데, 막연히 Spring과 같은 백엔드에서만 사용하는 것이다라고 생각하며 3년이라는 시간이 지나자 이제는 MVC 패턴이 프런트에서도 사용되고 있다는 것을 알게 되어 새로운 마음으로 MVC 패턴에 대해 알아보았다. 프론트엔드의 MVC 아키텍처와 디자인 패턴 > 내가 건축가가 되어서 직접 집을 짓는다고 생각해보자. 눈에 보이는 집의 구조는 같은 집일지라도 단독주택으로 집을 짓는 것과, 빌라로 집을 짓는 것과, 고층 건물로 velog.io 위 글에서 MVC 패턴에 대한 설명과 프론트에서는 MVVM, MV*과 같은 MVC에서 파생된 개념들도 잘 정리되어 있기 때문에 한번 읽어보면 개념 잡는.. 2023. 3. 27. SWR vs React-Query 앞서 작성한 애자일 방법론의 서론과 마찬가지로 커리어리에 올라온 Q&A를 통해 SWR과 React-Query의 차이점을 알아보게 되었고 좋은 글을 발견하여 따로 정리할 것 없이 해당 글을 첨부하였다. React Query vs SWR React Query와 SWR의 차이점 tech.madup.com 추후 패캠에서 SWR과 React-Query 강의 시청 후 추가하거나 사용법을 정리해 볼 예정이다. 2023. 3. 24. 이전 1 ··· 11 12 13 14 15 16 17 ··· 84 다음 728x90
