backup my memories

프론트엔드 개발 공부 블로그

개발 공부 방법 및 마음가짐 리팩토링

최근에 운좋게 기술면접 기회를 얻어서 진행했고, 진행하면서 을 깨달았다. 내 지식이나 논리의 빈틈을 너무나 많이 발견해서 마음이 아팠고, 지금까지 제대로 된 공부를 하지 않은 것 같아서 매우 괴로웠지만, 그럼에도 불구하고 이런 기회를 얻어서 나의 부족한 점을 이렇게 빨리 깨닫게 된 것은 큰 행운이라고 생각한다. 그리고 정말 많이 부끄럽기도 했다. 내가 …

Http 요청 시, 프론트엔드에서 Timeout 구현하기

이번에 채용 과제를 진행하면서 학습 및 구현하게 된 사항이다. 이전에는 미처 깨닫지 못하고 있었는데, timeout은 꼭 구현해야 유저의 경험의 퀄리티가 올라가므로 알아두자! Timeout이 뭔데? 타임아웃을 정의하자면 아래와 같다. 프로그램이 일정 시간 내에 성공적으로 수행하지 않아서, 진행이 자동으로 중단되는 것이다. 즉 , 서버측으로 http 요청을…

2021 상반기 회고

벌써 상반기가 갔다. 앞으로 남은 하반기를 더 잘 채워보자는 의미에다가 상반기 회고를 해보고자 한다. 이것저것 많이 한 것 같은데 막상 그렇지도 않은 것 같다. 반성.. 1. 리액트 / 타입스크립트 학습 연초에는 토이프로젝트 두개를 진행했다. 메모장 어플리케이션 빌보드 음악 서치 어플리케이션 두 개를 만들면서 리액트와 타입스크립트를 학습했다. 이전에는 주…

리액트의 useCallback, 언제 써야할까

리액트 Hooks 로 개발을 하다보면, 컴포넌트가 리렌더링 될 때 컴포넌트 내부에 있는 모든 일반함수가 리렌더링 되는 것을 알 수 있다. 이것은 매우 비효율적인 작업이기 때문에 리액트에서는 useCallback 이라는 api 를 제공해준다. 그래서 나는 이제껏 컴포넌트 내부에서 정의되는 대부분의 함수에 useCallback을 사용해왔다. 왜냐하면, 불필요…

블랙 커피 프론트엔드 레벨 1 스터디 2주차 정리

이번에는 중간에 정보처리기사 시험이 껴있어서 2~3주차 정리를 못해서 😭 이제와서라도 한다. 최종 회고는 버퍼 기간이 모두 끝나면 작성하도록 하겠다. 결론적으로 매우 2~3주차 미션도 매우 재미있었고 많은 생각을 요했으며 꽤나 발전했다고 느꼈던 2주였다. 😃 2주차 미션 요구사항 1주차에 만든 자바스크립트에 서버와의 비동기 통신을 추가한다. 투두리스트에…

블랙 커피 프론트엔드 레벨 1 스터디 1주차 정리

여러가지로 바쁜 와중에 next step에서 진행하는 블랙 커피 자바스크립트 스터디에 참여하게 되었다! 원래는 cypress 테스트 코드 작성이 주로를 이루는 레벨2를 하고싶었지만, 바닐라 자바스크립트를 컴포넌트화해서 짜본 경험이 많지 않아서 너무 미숙한 탓에 과정을 못따라갈 것 같아서 레벨 1을 참여하게 되었고, 정말 잘 한 선택이라고 생각한다 😂 그…

Next.js 에서 사용자가 페이지를 벗어나려고 할 때 Alert 띄우기

오늘은 Next.js 의 를 이용해 사용자가 페이지를 벗어나려고 하는지 감지할 수 있는 방법에 대해 기록하고자 합니다. 먼저 요구사항은 아래와 같습니다. 요구사항 뒤로가기 / 앞으로 가기 / 탭 닫기와 같은 브라우저 탭을 벗어나려고 할 때 Alert을 띄워주고, 취소를 클릭하면 페이지에 머무른다. 앱 내부에서 라우팅을 변경하려고 할때 Alert를 띄워주고…

리다이렉션 없이 url 변경하기 해결

이번에는 프로젝트하면서 제가 어떻게 리다이렉션 없이 url을 변경했고, 그에따라 모달을 띄워주었는지 소개해보고자 합니다. 해당 문제를 해결 할 때 인스타그램의 웹을 많이 참고했습니다. 문제 파악하기 일단, 제가 원하는 /search 페이지의 구조는 아래와 같습니다. 사용자가 작성한 리뷰를 최초에 10개 가져온다. 인피니트 스크롤링을 통해 사용자가 스크…

리액트 이미지 레이지 로딩 구현기

현재 프로젝트에서 여러 포스트를 인피니트 스크롤링으로 불러와줍니다. 이 때 사용자가 아직 접근하지 않은 영역까지 이미지를 로딩해주는 것을 발견했고 이를 개선하기 위해 이미지 레이지 로딩을 구현하게 되었습니다. 레이지로딩을 어떻게 구현했는지 자세히 알아보겠습니다. 이미지 레이지 로딩 이미지 레이지 로딩은 하나의 페이지에 속한 이미지를 페이지가 로딩 될 때…

<리액트 에러 해결>unmount된 컴포넌트에 state update를 시도 할 경우

개발을 하다가 아래와 같은 에러가 나왔다. 에러의 원인 / 해결책이 모두 에러메시지에 적혀있었다. 1.에러 원인 이미 unmount 된 컴포넌트에서 state를 변경하려고 했기 때문에 발생한 에러다. 언마운트 된 컴포넌트에서는 리액트가 상태를 변경할 수 없으므로 메모리 누수가 발생할 것 이라고 한다. 2.해결책 useEffect cleanUp 함…