[Vanilla JS] section 이름 labeling using IntersectionObserver 최근 포트폴리오 웹 사이트를 제작하고 있습니다..ㅎㅅㅎ 사실 지금까지는 항상 프론트엔드 프레임워크를 사용해서만 개발해왔습니다. 하지만 정작 웹 개발의 기본인 "HTML, CSS, JS"와 같이 기본적인 부분들을 놓치고 있는건 아닌가 하는 생각이 들었고 그렇게 웹 포트폴리오 사이트를 개발하게 됐습니다. 오늘 포스팅할 내용은 IntersectionObserver를 이용해서 특정 section에 들어갔을 때 해당 Section에 어울리는 이름으로 Label을 동적으로 지정해주는 그런 기능을 만드는 내용입니다! 그럼 가장 먼저 IntersectionObserver가 뭔지부터 얘기를 해봐야겠죠?! 🦄 IntersectionObserver란? https://developer.mozilla.org/ko/docs/We.. 2022. 3. 30. 💡 Antd + Sider + React-Router-Dom 1. Antd layout의 Sider을 복붙한다! 2. 필요 없는 내용들을 삭제하고 원하는 내용으로 수정한다. 3. react router을 적용한다. 원래는 Switch를 사용해서 Route를 적용했었고, props로 component를 넘겼었는데 아래 링크를 보면 내용이 수정된 것을 알 수 있다... Switch는 Routes로 바뀌고 (동일하게 작동한다고 한다. ) component는 element로 바뀌었다...ㅎㅅㅎ https://reactrouter.com/docs/en/v6/upgrading/v5 React Router | Upgrading from v5 Declarative routing for React apps at any scale reactrouter.com 계속 예전 방식을 쓰다.. 2021. 11. 24. [React] TypeScript + React에서 useHistory, useLocation을 사용해 state 넘기기! 시작! 이번 포스팅에서는 typescript로 react application을 개발하며 useHistory와 useLocation을 이용해 State를 넘기는 과정을 작성해볼것이다! 🤖 useHistory를 사용한 route push와 state넘기기 우선 routing이 가능하게 하기 위해서는 useHistory를 import시킨다! pathname은 이동하고자 하는 경로 주소를 입력해주면 되고, state에서는 전달하고자하는 state를 Object로 감싸고 이 두개를 또 Object로 감싸서 넘기면 된다! 너무 쉽지 않은강... 🙀 import { useHistory } from "react-router-dom"; export interface IState { a: string; b: string.. 2021. 8. 11. [안드로이드(Android)-JAVA] Material Design Icons 적용 방법과 색상 변경 material.io/resources/icons/?style=baseline Material Icons Get Material Icons material.io Material Design Icon 적용 방법 Reference site에 들어간다. 원하는 아이콘을 클릭한 후 svg파일을 다운로드 받는다. (아이콘 스타일 -filled, outlined... 중 선택 ) 안드로이드 스튜디오 ‘@/drawable’→ new→ vector asset 클릭! 2번에서 저장해둔 아이콘을 가져온다. next→ finish를 클릭하면 완성! Icon 색상 변경 방법 ‘@/drawable’ 중 색상을 변경하고 싶은 아이콘을 선택한다. color=“#원하는 색상 16진수 코드 or @/colors/지정컬러” 오른쪽 분할.. 2020. 12. 2. [안드로이드(Android)-JAVA] 내부저장소에 비트맵 저장하여 캐시 구현하는 방법 개발을 하던 중 이미지를 캐싱해야되는 경우가 생겼다..비트맵으로 변환하여 Glide를 통해 이미지를 띠어주었는데, 내가 하려는 방식과 glide의 캐싱방식은 맞지 못해서 다른 방식을 써보기로 하였다. 내부저장소에 직접 파일을 저장하고 캐싱하는 방식을 사용했다. 나는 RecyclerView를 통해 이미지를 많이 보이는 작업을 진행하였고, 해당 recyclerView의 이미지를 가져오는 Fragment에서 해당 코드를 구현하였다. Cache의 기본 동작 방식 1. 만약 Cache에 Key에 해당하는 Value가 있다면, 해당 Value를 받아와 사용한다. 2. Cache에 Key에 해당하는 Value가 없다면, Value를 저장하고 있는 곳(서버)에서 받아와 사용하고, 다음 번의 사용을 위해 Cache에 저.. 2020. 11. 30. [안드로이드(Android)-JAVA]LiveData 사용하여 실시간으로 데이터 변경하기 hu... 저의 첫 글쓰기네요... 잠 못드는 새벽 떨리는 마음을 가라앉히며 안드로이드 개발 중 겪었던 문제들과 해결한 방식들을 토대로 몇 개의 글들을 작성해보려 합니다! 오늘은 몇 아이들(=문제들..‼️😱)중 실시간으로 데이터를 보이는 문제를 겪었고, LiveData를 사용해 문제를 해결했던 방식에 대해서 설명드리도록 하겠습니다. 지금부터 저의 작은 이야기, 시작해보겠습니다.(두둥...짝👻) [시나리오 출연 Fragment 및 Activity] A_fragment B_Activity listView를 포함하고 있다. listView의 각 Item에는 좋아요 개수 및 댓글 개수가 있다. postAdapter를 통해 데이터를 recyclerView와 연결한다. listView의 각 Item의 상세 정보를 .. 2020. 11. 24. 이전 1 다음 반응형
