에이미의 성장기록

아니 블로그 카테고리를 좀 잘못 만든 것 같다. TIL 매일매일 쓰는것도 아닌데 좀 민망하다. 쓸 곳이 없어서 기록용으로 남긴다. 서버와 프론트 모두 nginx로 배포하고 certbot으로 인증서를 받아 https까지 변경해놨다. 기존에는 프론트만 했었어서, 프론트 하는 방식 + 백엔드 하는 방식으로 작업을 했더니 인스턴스 2개에, 도메인을 2개나 따버렸다. 뭐 크게 상관은 없다고 하셨지만, 도메인 1개를 와일드카드 형식으로 썼으면 됬을텐데 아쉽다(어차피 무료여서 괜춚) 인스턴스도 1개만 따서 포트를 나누면 된다고 하셨었는데, 포트라는 개념이 좀 생소해서 네트워크 교육을 받고나서야 좀 이해가 되었다. 프론트도 굳이 인스턴스에 올리지 말고 s3로 할 걸 했는데 어차피 s3배포는 많이 해봤고, 인스턴스로 서..

회사에서 노트북을 바꾸면서 개발 환경을 다시 세팅해야 할 일이 생겼다. 역시나 git clone할때 헷갈려서 동료분이 도와주셨는데, 집에와서 스스로 다시 해보고 싶어서 추석선물로 받은 맥북에 처음부터 해봤다. 한번 해본거라 금방할 수 있었다. (사실 한번 실수해서 폴더 지우고 다시 함) 토요일인데 사무실로 안가고 푹 자다가 파주에 "포레스팅 아웃팅스"라는 식물원같은 카페에 왔다... 힐링... 이런데서 코딩하니까 기분이 좋다... ❤️ 보안때문에 brew를 설치하지 못해서 xCode를 받아서 설치했다. 13버전이 오류가 많은 것 같아서 12.5 버전으로 받았다. https://developer.apple.com/download/all/ 로그인 - Apple idmsa.apple.com 나는 애플에서 직접..

입사 동료분과 스터디를 했다. 이벤트 루프를 주제로 공부하다가, 비동기 처리 과정을 좀 더 자세히 공부하면 좋겠다고 생각했다. 뿐만 아니라 useRef로 만들어진 객체가 힙에 저장되어 같은 주소값을 참조하여 렌더링에 영향을 받지 않는다고 했다. 힙이 무엇인지 알려면 먼저 메모리 구조를 공부해야 할 것 같다. 끝나고 웹팩하고 바벨 정복하러 가야한다. 바쁘다 바빠 개린이 😎 메모리의 구조 프로그램이 실행되려면 메모리에 먼저 로드 되어야 함. 프로그램에서 사용되는 변수를 저장할 메모리가 필요하다. 운영체제는 프로그램을 위해 메모리 공간을 할당해주고, 운영체제가 제공하는 메모리는 총 4가지 영역이다. 1. 코드(code) : 실행할 프로그램의 코드가 저장되는 영역, CPU는 코드 영역에 저장된 명령어를 하나씩 ..

추석연휴가 끝났다. 역시나 오늘도 크런치모드로 열일하는 회사다ㅎㅎ 신입 나부랭이라 언제나 하는일은 작고 귀엽지만, 폭풍 구글링으로 버텨내고 있다. 디바운싱과 쓰로틀링 요것은 항해때 무한 스크롤을 하려고 lodash 라이브러리를 쓰면서 겉핥기로 했었던 것인데, 현업코드에서 디바운싱을 만나게 되었다. 꼭 라이브러리를 쓰지 않아도, 무한 스크롤을 구현하거나 검색창을 구현하지 않아도 성능을 위해 쓴다. 🌼 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 - 검색어 개발에서 많이 쓰임 - 만약 검색어 개발하는데 쓰로틀링을 쓴다면? 이상한(미완성된) 검색어에도 무조건 일정 시간마다 호출되기 때문에 서버에 부하를 줄 수 있으니 디바운싱을 쓴다. - 꼭 검색어 개발에만 쓰이는것..

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

리액트에서 getElementsByClassName 로 html 태그들을 가져오려고 했다. 리액트에서 DOM에 직접 접근하기 위해 자바스크립트 코드를 쓰지말고 리액트에서 제공하는 useRef를 쓰는게 좋다는 코드 리뷰를 받았다. 이유는 여러가지가 있지만, 1. id를 사용하는 리스크, 컴포넌트는 여러개의 인스턴스를 가질 수 있기 때문 = id가 중복될 수 있다. - JSX 안에서 DOM에 id를 달면 해당 돔을 렌더링할때 그대로 전달된다고 한다. 컴포넌트를 여러번 사용하면 돔에서 유일해야하는 id가 여러개 생기는 이슈가 생길 수 있다고 한다. 2. ref를 사용하면 내가 정한 스코프에서만 접근할 수 있다. ref는 전역적으로 사용되지 않고 해당 컴포넌트 내부에서만 사용하기 때문에 1번의 문제가 해소된다...

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

리액트 렌더링에 대해서 너무 잘 모르고 있다는 생각이 들었다. 덕지덕지 코드를 한 두줄의 코드로 정리할 수 있음을 알고 진짜 놀라는 중... 내가 논리력이 부족한가.. 고등학교때 명제를 잘 못했나? 생각이 들어서 동료 개발자분한테 리액트 어떻게 공부했냐고 했더니 삽질이 답이라고 하셨고, 빨리 느는 방법은 없다고 했다. 인강 듣고 이런 것 보다는 회사에서 일하다가 모르는 부분을 계속 찾아보고, 그 부분에 대해서 공부하는게 효율적이라고 했다. 끙... 기존의 것을 수정하기보다는 구조가 이상하면 구조를 바꿀 줄 알고, state값이 필요하면 추가해서 처리하는 능력이 필요하다. 더 많은 삽질이 필요한 순간. 커밋했던 것을 되돌리고 싶었다. 되돌려서 staging area로 내려서 쓸데없는건 버리고 필요한 것만 ..

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..