에이미의 성장기록

세션 스토리지! 들어보기만 했지 사용할일이 있을까 했는데 오늘 써보게 되었다. 쿠키 / 웹스토리지(로컬,세션 스토리지)와의 차이를 먼저 알고 넘어가면 좋을 것 같다. 쿠키는 매 http요청마다 api 호출이 되어 서버에 부담이 된다고 한다. 웹 스토리지는 쿠키의 단점을 보완해서 만든 기술로, 서버가 아닌 클라이언트에 정보를 저장한다. 서버를 건드리지 않음! 보통 자동 로그인은 로컬 스토리지에 저장하고, 비 로그인한 장바구니는 세션 스토리지에 저장한다고 한다.(오호) 로컬 스토리지랑 쿠키에만 뭘 담아봤는데 세션 스토리지에 담게되다니, 어려울줄 알았는데 사용법이 로컬 스토리지랑 똑같다. 다만 로컬 스토리지와 약간의 차이점이 있다. 탭별로 값을 다르게 두고 싶어서 크롬에 탭 아이디가 있는지 검색하다가 세션 스..

useLayoutEffect라는 훅이 있다. 처음 듣는 훅이었는데 꽤나 유용한 것 같아서 공부해보았다. useLayoutEffect DOM이 변경되고 나서 동기적으로 실행된다. 즉 브라우저가 화면을 그리기 전에 실행된다. 컴포넌트들이 렌더되고 paint가 된다. 스크롤 위치를 얻어오거나, DOM 엘리먼트 스타일을 조작할 때 사용하면 깜빡임이 없어서 그 때 쓰기 유용하다. 즉 최초 state값이 있는데, 이 값에 따라 렌더링 되어야하는 상황일때 useEffect는 최초 state값을 먼저 보여주고, re-render 되기 때문에 화면 깜빡임이 있다. 이때 useLayoutEffect를 쓰면 깜빡임이 없다. 좋은 예시가 있어서 가져왔다. 미세한 깜빡임의 차이가 있다. useLayoutEffect 을 사용할 ..

null 병합 연산자 (nullish coalescing operator) ?? 물음표 두개짜리 코드를 봤다. 널 병합 연산자라고 한다. a ?? b 는 a가 null도 아니고 undefined도 아니면 a , 그 외의 경우는 b 인 것 즉 ?? 없이 표현하면 아래와 같다. a !== null && a !== undefined ? a : b; 좋은 예시를 가져왔다. let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛 firstName이 null이기 때문에 lastNam..

아주 단순한 에러 알럿 페이지의 반응형을 구현했다. 예전에 반응형 구현했을 때, styled-component를 사용해서 구현했던 적이 있었는데, styled-component가 쓰기 편하긴 한데 아래로 죽죽 코드를 길게 만들어서 컴포넌트가 너무 길어졌던 기억이 있다. 그래서 이번에는 css파일을 별도로 만들었다. 다행히 태블릿과 웹에서 레이아웃에서 큰 차이는 없는 페이지여서 오래 걸리지는 않았는데, 여튼 미디어 쿼리를 오랜만에 써봤다. 다만 break-point를 몇 px로 잡느냐가 헷갈렸는데 통상 태블릿은 768px, 모바일은 300~400px 사이대를 브레이크 포인트로 잡아서 진행했었다. 이번에도 그렇게 해야하나? 하고 디자인을 봤는데 굳이 그렇게 나눌 필요 없을 것 같았다. 이미지 사이즈가 568..

오늘은 리액트 모달창 위에 리액트 모달창을 올리는 걸 하려고 했다. 안되길래 찾아보니까 multiple modal은 안된다는 글들이 많고, 무슨 라이브러리를 또 설치해야한다고 해서 바닐라 자바스크립트로 팝업창을 구현하다가 안될리가 없는 것 같아서 z-index를 주어봤다ㅠ 그래도 안되길래 안되나 했는데 overlay (모달창 배경)에 z-index를 주니까 모달1 위로 모달2가 올라왔다. 오.. 모달 2개가 되는구나. 찾아보니까 모달에 z-index 줄 때, content 뿐만 아니라 overlay에도 z-index를 줘야 위로 올라온다고 했다. 결론, react-modal 라이브러리 모달 2개 됨 (3개도 될까,,?) pull request가 무엇인지, 어떻게 쓰는지에 대해 알게되었다. pull req..

저번주는 체력 제로였다.ㅠ 백신에 생리통 같이오고 장염증상까지 와서 주말에 앉아있질 못했었다. ㅠㅠ 어어어어아ㅡ아악 이번주도 고통의 연장선이지만 열심히 버티고 있다..ㅠㅠㅠ 흐 할수있다~~~~ 나레기야 죽지말자 this 현업 코드에서 this와 직접적으로 마주칠 일이 생기게 되었다... 두근... 코어 자바스크립트야 내게 힘을 주련 파라미터를 넘겨서 넘겨서 할 필요 없이 리스터에 있는 콜백함수에서 this를 찍으면 콜백함수를 호출한 놈이 this가 된다는 것을.... 다만 역시 콜백함수로는 애로우 펑션을 쓸 수 없었다. arrow function은 this는 상위 환경의 this를 계승하기 때문에 bind 도 안먹는다 걍 정적으로 가지고 태어난 놈이라 일반 함수를 써주었다. 그리하여 리스너의 호출하는 놈..

이번주는 TIL을 쓴 적이 별로 없었다. 왜냐하면 이번주도 또 멘탈이 바사삭 되었기 때문이다. 맨날 멘탈이 바사삭 나는 것 같아 보이지만 이번주는 특히 누가 밟은 쿠크다스 같았다ㅋㅋㅋ 부정적인 기운들을 계속 TIL에 담는 것같아 속상해서 블로그에 들어오기 싫었다ㅠㅠ 근데 이상하게 어제 이후로 독기가 더 오르는 느낌이다,, 역시 나는 나를 채찍질 해 가면서 힘을 얻나보다ㅠ 항해에서 모집하는 로켓단 1기도 신청했다. C#으로 게임을 개발한다고 하는데 재밌을 것 같다 여튼 오늘은 어떤 특정 기능을 구현하는 과정에 대한 것을 써보고자 한다. 수첩을 캡처해서 올리고 싶은데 회사 코드의 내용이라 올리기는 애매해서 그냥 대충 글로 정리해보고자 한다. 1) 코드를 읽는다. (물론 남이 짠 코드라 1도 모르는 상태임) ..