에이미의 성장기록

으..! 아니 회고를 쓰는 날이 왜이렇게 빨리 돌아오는지 모르겠다. 오늘도 연속 2주 토요일 출근을 했다!~ 일하는 것은 아니지만 (일도 하긴 함) 밀렸던 공부를 좀 하고 싶은데, 그러기엔 하루가 너무 짧다 ㅠㅠ 그리고 체력도 모자름. 그래도 이번엔 연휴가 있어서 체력관리 하면서 공부할 수 있을 것 같다. 얼마나 기다려왔던 추석인디 딱히 명절 같은 느낌이 없다. 여튼 명절 끝나면 10월이 되고, 그럼 근무한지 2달째가 될 것이다. 실력에 비해 시간이 너무 빨리가는 것 같아 시간이 흐르는게 무섭다. 여튼 리액트 관련 책을 한 권 독파하기로 했다. 그래서 리다기를 목표로 잡았다. 1000페이지라 한달 안에 읽으려면 하루에 33페이지는 읽어야 함. 오키 고고 그리고 리액트 네이티브 공부를 시작하려고 한다. 그..

세션 스토리지! 들어보기만 했지 사용할일이 있을까 했는데 오늘 써보게 되었다. 쿠키 / 웹스토리지(로컬,세션 스토리지)와의 차이를 먼저 알고 넘어가면 좋을 것 같다. 쿠키는 매 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..

회사 입사 후 첫 WIL을 쓴다. 첫 주는 경주 다녀오느라 정신이 없었고, 그래서 피로가 누적된 채 2주차를 보냈고, 그래서 어제는 거의 시체처럼 뻗어있었는데 가뜩이나 밀렸던 pt를 받았는데 온 몸에 알이 배겼다...... 그 몸을 이끌고 오늘은 엄마집에 다녀왔다ㅠㅠ 엄마 집에서도 쇼파에 드러누워서 자다가 겨우 카페에 나와서 노트북을 켰다. 집에 가서는 또 빨래 개고, 설거지 하고 또 공부하고 해야겠지만 그래도 한가해서 시간이 너무 안가는 것 보다는 나은 것 같다고 생각중이다! 화이뜅뜅 ✨배운점 - 내가 이번주에 맡았던 일은 어렵지는 않은 일이었을 것이다. 하지만 나는 왜 못했는가? 가장 놓치고 있었던 부분은 데이터를 받는 부분과 뿌려주는 부분을 명확히 구분하는 일이었다. 프론트엔드 개발자라면 잘 받아서..

나는... 나는 말미잘이다.. 대답을 못한 나는 해삼이다...나는 생각을 멈춘 돌멩이다.... 😰😰😰😱😭 ㅇ늘은.. 떡볶이를 먹어야겠다... 꺼흐그흑 따흐흐흑 그리고 앞으로 공부좀 더 열심히 해야겠다... 비가 온다... 내 눈물 가려줘 비야... 1) 웹팩, 바벨? ◼ 웹팩 - 모듈(module) 번들러(bundler). - 의존성을 분석해 모듈을 번들(여러 개를 하나로 묶어주는, 웹팩 실행 후에 나오는 결과 파일)시켜주는 역할. 빌드(build)라는 과정을 통해 하나의 파일로 만들어 준다. - 웹팩을 이용하면 여러가지 리소스를 사용자에게 전달하기 좋은 형태로 만들 수 있다. ◼ 바벨 - 입력과 출력이 모두 자바스크립트 코드인 컴파일러 - 구형 브라우저들이 ES6 를 제대로 호환하지 못해, 오래된 브라..

- 기간: 4/12~4/22 (14일) - 팀원 구성: 스프링 3명 + 리액트 2명 - 프로젝트명:Coffzag 커프재그 -> 커피 + 지그재그(의류쇼핑몰)의 합성어 - 목적: 커피를 좋아하는 사람들을 위해 커피캡슐에 대한 리뷰들을 모아서 보여주고, 구매로 바로 연계하고자 함 - 설명: 일리, 스타벅스, 네스프레소 공식몰을 크롤링 후 진행하였습니다. 각 브랜드 캡슐커피를 한번에 모아서 구매하고, 캡슐마다 리뷰를 달 수 있습니다. 각 캡슐의 최근 리뷰를 메인 화면 캡슐 카드에 보여지게 했습니다. - 개발언어/라이브러리: JavaScript / React - 협업툴: git, slack, notion, figma - 구현 기능: 로그인(JWT)/회원가입 Product Main(페이지네이션, GET) 리뷰(C..