개발일지

리액트의 Suspense를 활용해 선언적으로 UI를 작성해보자 React에서 데이터를 fetch하고 로딩중인지 에러가 발생했는지를 판별하고 그에 맞는 UI를 보여주는 작업은 자주 반복되는 일이다. 이번에 회사에서 React 18로 업그레이드 하면서 일부분에 이것을 선언적으로 작성할 수 있게 도와주는 Suspense를 도입했다. 이 글에서는 Suspense가 무엇인지 알아보고 실제로 적용하는 예시를 보여주려고 한다. Suspense란? React에서 제시한 동시성 컨셉과 관련된 것이다. Suspense는 비동기적으로 데이터를 불러오거나 컴포넌트를 dynamic import할 때 발생할 수 있는 지연 시간을 더 효과적으로 관리할 수 있도록 도와준다. Suspense를 활용하면 비동기 로직을 컴포넌트의 상위 ..

SPA란? 참고 개요 WEB API로 제공되는 HashChangeEvent, History를 활용해 브라우저 이동을 감지하거나 조작할 수 있다. HashChangeEvent 페이지 내 특정 위치로 스크롤할 때 사용되는 API이다. URL에 붙은 해시값(#)의 변경을 감지할 수 있다. 예시) function locationHashChanged() { if (location.hash === "#somecoolfeature") { somecoolfeature(); } } window.addEventListener("hashchange", locationHashChanged); History 브라우저의 세션 히스토리를 조작할 수 있게 해주는 API이다. 글로벌 객체인 history로 접근 가능하다. back, ..

목적 개발 내용을 바로 확인할 수 있는 환경 소스 관리가 쉬운 환경 일관된 코드 스타일을 유지할 수 있는 환경 (extra) 타입스크립트를 사용할 수 있는 환경 폴더를 생성하고 프로젝트를 만들어주자. npm init -y 1. eslint, prettier 설정 eslint와 prettier 세팅을 먼저 해보자 eslint는 일관된 코드 스타일을 가져가기 위해 사용한다. prettier는 eslint와 다르게 indent, tabSize 등을 통일시켜 코드를 보기 좋게 만드는데 도움이 된다. eslint 먼저 eslint 관련 의존성을 설치해보자 npm i -D eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plug..

(2022.05.17) 회사에 들어와서 사용하기 어려웠던 React hook 3개에 대해 내가 이해한 언어로 정리해보려 한다. 3개월 가까이 React-Native를 다루며 hook에 대해 어느정도 안다고 생각했는데 막상 글을 쓰기 위해 자료를 더 찾고 정리를 해보니 아직 잘 모른다는 것을 알게 되었다. 제가 이해한 내용을 정리하고 3개월 정도 뒤에 다시 보면서 빈 구멍을 메울 용도로 작성되었습니다. 오개념이 있을 수 있습니다. 잘못된 내용이 있다면 이야기해주시면 감사하겠습니다. useLayoutEffect와 useEffect 리액트 공식문서에서는 useLayoutEffect를 이렇게 설명한다. useEffect와 기본적으로 하는 역할은 같지만 모든 DOM mutation (변형) 이후 paint하기 전..

(2021.11.22) 유난히 이번 달에 여러 이벤트들이 생겼다. 스스로 생각을 정리하기 위해 글을 쓴다. 🧹 클린코드 자바스크립트 리뷰어, 리뷰이 활동 1️⃣ 참여계기 지금 듣고 있는 국비교육에서는 풀스택을 배우고 있다. html,css,js를 한 주에 걸쳐 간단하게 배우고 react, redux 위주로 프론트엔드 기술을 배우고 프로젝트에서도 해당 기술들을 사용했다. 리액트로 개발을 하면서 내가 자바스크립트 활용 능력이 부족하다고 느끼던 와중 넥스트스텝 메인에 클린코드 자바스크립트 코스가 오픈 예정이라 해 알림신청을 해뒀다. 이 시기에 자바스크립트 관련해서 스터디던 강의던 다 해보려고 했었다. 그러다가 어쩌다보니 해당 코스에 참가하게 되었다! 정말 좋은 기회라는 생각이 들어 일정이 바빴지만 참가를 결정..

기술면접 대비로 운영체제의 메모리 파트를 돌아보며 자주 물어보는 질문에 대한 답을 정리했습니다. Q. 프로세스에 할당되는 메모리의 각 영역을 설명해보세요 코드 - 실행 파일을 구성하는 명령어들이 적재되는 메모리 영역 / 프로그램 소스 코드를 저장한다. 읽기 전용 영역이므로 프로세스가 함부로 변경할 수 없다. 데이터 - 프로그램에 필요한 전역변수, 정적변수를 저장한다. 스택 - 함수 호출에 필요한 스택 프레임과 지역변수를 저장한다. 스택은 각 프로세스가 메모리에 로드될 때 크기가 고정되어 런타임에 스택의 크기를 바꿀 수 없다. (컴파일 타임에 크기가 결정되는 것이다.) 힙 - 프로그래머가 관리하는 공간으로 메모리를 동적으로 할당하고 해제할 수 있다. c언어의 malloc()이나 calloc()에 의해 생성..

(2021.10.27) 엘리스 AI트랙 2기 데이터 분석 프로젝트를 마친 후, 느낀점들을 정리했다. 지워져서 다시 씀 🚀 첫 팀 프로젝트 학부 때는 혼자 혹은 최대 3명까지 함께 과제, 프로젝트를 수행해왔다. 이번엔 총 5명으로 프론트엔드, 백엔드, 데이터분석 파트로 역할을 나눴는데 이렇게 많은 인원과 프로젝트를 한 건 처음이라 설레기도 했고 걱정이 되기도 했다. 기존 알고리즘 스터디를 같이해왔던 두 분, 새로 알고리즘 스터디에 들어오신 분, 그리고 프로젝트를 시작하면서 모집한 한 분. 이렇게 팀원이 구성되었다. 알고리즘 스터디장을 맡고 있었던 내가 팀장을 이어서 맡게 되었다. 주제는 OTT와 배달 두 개가 있었는데 평소에 OTT를 4개나 쓰고 있었어서.. 이들의 차이점이 있다는 것을 알고 있었고 흥미로..

취업준비를 결심하고 열심히 달려왔다! 3월 말인가 삼성전자 서류 제출하고 4월쯤부터 코딩테스트 준비를 시작했었다.사실 가벼운 마음으로 내 서류는 어느 회사까지 붙을 수 있을까? 나는 코딩테스트를 통과할 수 있는 실력인가? 이런 걸 확인해보고 싶은 게 제일 컸어서 직무, 산업 안 가리고 내가 넣어보고 싶은 데를 다 넣었다. 🎵 스펙 학력 : 아주대학교 전자공학과 3.7/4.5 어학 : OPic IM1 기타 : 1년 반 학부 연구생 .. (그 외 학회 관련 활동들) 📑 서류 합격 : 삼성전자 CE/IM (SW개발), 크래프톤 (클라이언트 프로그래밍), 현대오토에버 (차량 응용 SW 개발) 탈락 : 현대자동차 (자율주행 시스템 개발), 신한은행 (신기술 활용 서비스 개발), SK브로드밴드 (Data Scien..