PUT vs PATCH 차이점

https://papababo.tistory.com/entry/HTTP-METHOD-PUT-vs-PATCH-%EC%B0%A8%EC%9D%B4%EC%A0%90 [HTTP METHOD] PUT vs PATCH 차이점 HTTP 메소드 중 PUT 과 PATCH가 있다. 뭔 차이여... 결론 PUT : 자원의 전체 교체, 자원교체 시 모든 필드 필요 (만약 전체가 아닌 일부만 전달할 경우, 전달한 필드외 모두 null or 초기값 처리되니 주 papababo.tistory.com

fixed , sticky 정리 (추가로 React에서 스크롤이벤트)

fixed 위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 출처: https://ordinary-code.tistory.com/106 [김평범's OrdinaryCode:티스토리] 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. 또한 내가 삽질한 예시를 보면 더 이해가 빠를 듯하다. fixed 는 항상 페이지에서 고정된 위치에 존재하기 때문에 다음과 같이 footer 안에 들어가는 참사가 발생할 수 있다. 내가 원하는 대로 구현을 하려면 sticky나 fixed + js 조합을 사용해야했다. sticky 위 속성을 적용하게 ..

react-datepicker 라이브러리 커스텀 , 인터파크 달력 따라만들기

https://yong-nyong.tistory.com/11 [React] react-datepicker 라이브러리 사용 하기(캘린더, 달력 라이브러리) 📖 들어가며 이번에 팀 프로젝트로 팀 프로젝트를 구하는 웹앱을 클론 코딩하게 되면서 프로젝트 진행 기간을 선택할 수 있게 하는 Input이 필요했습니다. 그래서 캘린더가 표시되고 캘린더에서 yong-nyong.tistory.com 우선 위 자료를 보면서 만들어 보고 있다. 첫번째 난관 봉착 공식문서 보고 하고 있는데 subDays , addDays 가 정의되어있지 않다. 근데 공식문서에 안나와있다. 좀 다른데서 갖다쓰면 알려달라고 ㅋㅋ date-fns 라이브러리에서 가지고 와서 쓰는 것이였다. 두번째 단계 내가 커스텀 하고 싶은 class 명을 찾아가면..

styled-components props

직면한 문제상황은 다음과 같았습니다. aside 라는 Wrapper 가 컴포넌트를 감싸고 있었기 때문에 다음과 같이 padding 20px 이 모두 적용 되어있습니다. 그런데 다음처럼 문제가 생겼습니다. ㅋㅋ 딱봐도 문제가 많아보이네요. 우선 디자인 나온대로 구현을 하려면 저 눈에 가시같은 padding을 없애주어야하는 상황이였습니다. asideWrap은 styled-components 로 구현이 되어 있었죠. 그러면 어떻게 해결을 해야할까? 고민을 했습니다. 현재 저는 chatState 라는 state 를 사용하여 컴포넌트를 렌더링하고 있습니다. 즉, chatState가 'chat' 이 될때 위의 화면이 렌더링이 되는 것이죠. 그렇다면, 이것을 이용해서 styled-component에 state를 pr..

box shadow 를 알려주는 사이트!

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com

안드로이드 에뮬레이터 세팅방법

안드로이드 에뮬레이터 세팅방법 안드로이드 스튜디오 설치 https://danu.dev/macos/Mac-OS-settings-4/ M1 맥 개발환경 설정 - (4) 안드로이드 스튜디오 설치 서론 M1 Pro가 탑재된 2021 맥북프로 16’를 구매해서, 환경설정을 다시 할 필요성이 있었다. 이전 M1 맥북에어 환경설정을 할 땐 이리저리 충돌난걸 ‘야매’로 고쳐서 겨우겨우 돌아가게 한 것들 danu.dev 위 글을 통해서 안드로이드 스튜디오를 설치한 후 저는 안드로이드로 작업은 안하고 에뮬레이터만 사용할 것이기 때문에 No Activity를 선택했습니다. 위 과정을 마치고 나면 에뮬레이터를 실행 할 수 있다! 다음과 같이 말이다. 이때 localhost에 접근하고 싶다면 127.0.0.1 이 아닌 10.0..

[반응형] 모바일 환경에서 스크롤 방지, 모바일에서 url 창을 제외한 브라우저 크기의 vw , vh 만들기

문제점은 다음과 같았습니다. 채팅방 목록 페이지는 꽉 찬 화면에 스크롤없이 구현되어야했는데요. 다음 영상을 보면 뭐가 문제점인지 알 수 있습니다. 드래그가 생겨 UX 가 굉장히 안좋다는 것을 알 수 있었습니다.. 우선 문제점을 해결하기 위해서 다음과 같은 방법을 사용했습니다. 블로그에서 다음과 같은 방법을 검색해서 사용하였는데요. 링크는 아래 참고자료 목록 자료1 으로 추가해놓았습니다. const setScreenSize = () => { let vh = window.innerHeight * 0.01; console.log(vh); document.documentElement.style.setProperty('--vh', `${vh}px`); }; 자바스크립트에서 window.innerWidth, win..

local 개발 환경과 내 폰을 연결하는 방법

최근에 모바일 반응형 작업을 시작하게 되었다. 당연히 모바일에서 어떻게 화면이 나오는지가 중요했다. 처음에 나는 어떻게 해야할지를 몰라서 같이 개발하시는 분이 CI/CD 를 구성해놓으셨기때문에 그 CI/CD로 배포된 url를 통해 화면을 확인했다. 배포가 되는 시간이 5분정도 매우 오래걸리기 때문에 너무 불편함을 느꼈다. (css 하나 변경해도 5분을 기다려야했다.) 다른 방법이 없나 찾아보다가 커뮤니티에 도움을 요청드렸다. 2가지 방법을 알아내었다. 1. 같은 와이파이 환경에서 ip를 통하여 내 스마트폰으로 화면을 볼 수 있었다. 2. 에뮬레이터를 통한 방법 우선 에뮬레이터는 지금 설치를 하는중이라 안드로이드 스튜디오와 xcode 환경모두 구성하려면 시간이 걸릴 것 같아 비교적 빠르게 할 수 있는 1번..

반응형 작업하다 간단한 메모.

조금 그림이 이상한데 현재 상황의 문제점은 다음과 같다. 아래에 채팅방 목록에 100vh를 주게되면, 100vh는 브라우저의 높이이기 때문에 화면에 딱 맞게 그리지 못하고 아래의 분홍색 섹션처럼 의미없이 길어지는 영역이 발생했다. 이러한 문제점을 해결하기 위해서, 해당 분홍색 섹션의 높이를 calc를 사용해서 빼주어 문제를 해결할 수 있었다. 간단하지만 또 까먹기 때문에 메모한다. 코드는 다음과 같다. height: calc(100vh - 200px);

[Material-UI] sx props style

아 mui 로 된 프로젝트를 보는데 갑자기 다음과 같은 코드를 봤다. 무슨의미인지 정말 몰랐었다. 뭐를 모르는지 모르는 느낌? zIndex: (theme) => theme.zIndex.drawer + 1, https://mui.com/system/the-sx-prop/ The sx prop - MUI System The sx prop is a shortcut for defining custom style that has access to the theme. mui.com 공식문서를 뒤적거리니까 다음과 같은 정보를 얻을 수 있었다. 그래도 모르겠더라.. 삽질해서 조금이나마 이해했다. https://codesandbox.io/s/bold-cori-dt5jg5?file=/src/App.js bold-cori-..