에이미의 성장기록

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

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

*인상깊었던 부분이나 책을 읽으면서 들었던 제 생각, 혹은 기억하고 싶었던 부분에 대해 적습니다. 독후감이나 책의 평가가 아닙니다. 🌼 읽은 부분: 5장~끝 6장 웹(Web) 최초에 웹은 HTML 문서를 통해 정보를 전달 받았다. 그리고 디자인을 입힐 수 있는 코드인 CSS가 추가되었다. 점차 동적인 기능을 사용하기 위해 프로그래밍 언어인 JavaScript를 사용하기 시작했다. HTML이 틀이라면, CSS 꾸며주는 것, 페이지를 이동하고 열리게 하는 동적인 기능들은 자바스크립트가 담당한다. 개발자 도구를 열어 HTML을 수정하면 화면은 바뀌지만 새로고침하면 다시 돌아오는 이유? 파일의 완성본은 서버에 있고, 우리는 서버로부터 복사본을 받아온 것이다. 새로고침하면 원본을 다시 다운로드한다. 이것이 웹과 ..

지난주에 백신을 맞았다. 장염 증상이 있어서 병원을 한번 더 다녀왔고, 입사 한달 차 만에 건강에 대한 걱정이 본격적으로 들기 시작했다. 금요일 퇴근하고 일요일까지 하루종일 집에 누워있었다. 쉬니까 체력이나 멘탈이 리프레쉬 되는 것 같기도 하고... 아 근데 한달차에 벌써 이렇게 아프면 안되는데 싶었다. 역시나 체력이 구리구나 ㅂㄷㅂㄷ!!!! 남자들의 체력을 따라가기가 벅차다. 솔직히 짜증난다. 여자라서 체력이 떨어지고 그래서 일을 덜하게 되고 못하면 뒤쳐지는데... 뒤쳐지기 싫은데 안되는 체력 끌어 올리려고 밤마다 물통 들고 뛰어야하나 싶다 휴우 ✨배운점 - 에러 코드를 만들면서 에러가 발생하는 시점은 언제이고, 이 에러가 발생하기 위해 동작해야하는 코드들을 쭉 따라가면서 공부했다. 역시나 서버와 클라..

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

공부 내용을 블로그에서 노션으로 적기 시작했다. 입사 동료랑 배운 내용을 회사 코드를 바탕으로 서로 알려주고(?) 공유하기로 했기 때문이다. 리액트르 공부할까 뭘 할까 하다가 회사코드 보면서 어려운거 서로 공부하거나 물어보면서 알아가자고 방향을 잡음 그래서 블로그에 글쓰는 것들이 부쩍 줄었지만 그래도 기록의 느낌으로 쓰고싶어서 퀄은 떨어졌지만(?) 그래도 쓰고 있다. 오늘은 일을 뺏??겼다?ㅠㅠ 여튼... 내가 제대로 못해서 내가 하던 일을 결국 사수님이 뒤 엎으셨다... 그것 때문에 우울했는데, 티가 나나보다 ㅠㅠ 슬프다. 나도 잘하고 싶은데 아직 안되나보다. 급 기본적인 부모 컴포넌트에서 자식 컴포로 props 넘기는것도 헷갈리기 시작했다... 리액트 지식이 너무 부족한 것 같다. 공부를 더 해야겠다..

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

*인상깊었던 부분이나 책을 읽으면서 들었던 제 생각, 혹은 기억하고 싶었던 부분에 대해 적습니다. 독후감이나 책의 평가가 아닙니다. 🌼 읽은 부분: 1장~4장 2장 프로그래밍 언어 & 운영체제 CPU: 컴퓨터의 머리역할. 연산장치 보조기억장치(HDD,SSD): 컴퓨터의 창고역할, 컴퓨터를 껐다 켜도 데이터가 남아있음, CPU보다 속도가 매우 느림 메모리: CPU의 개인 작업 공간, CPU가 작업을 수행할 수 있다. 운영체제: CPU/보조기억장치/메모리 등을 대신 관리 해주는 소프트웨어로, 윈도우/맥OS/ios/안드로이드가 있음 자바의 경우 운영체제 위에 JVM이라는 소프트웨어를 만들고, JVM에서 프로그램이 돌아갈 수 있게 함. 운영체제별로 여러 프로그램을 만들필요가 없다. 단점은 프로그램 위에 프로그램..