전체 글 (8) 썸네일형 리스트형 알고리즘, FE 실무에 적용하기 📖 개요 코딩 테스트를 위해 공부한 알고리즘 지식들은 개발 실무에서 사용할 일이 없을까? 개발 영역, 개발자의 역량, 개발 환경마다 다를 것이다. 이에 본인 얘기를 하자면 웹 플랫폼 서비스의 FE 개발자이며 주로 사용자에게 보여지는 화면을 개발한다. 보통 화면 개발이라 함은 사용자 인터페이스, 인터렉션 개발 서버 API 요청/응답 처리 일 것이다. 방대한 데이터를 직접 조회하는 경우는 없고, 어느정도 가공되어 응답된 데이터를 서버에서 받아서 사용하다보니 데이터를 효율적으로 탐색하고 처리하려는 고민보다는 사용자 인터페이스와 사용자 경험 최적화에 대한 고민을 주로 했었다. 최근에는 평소보다 데이터의 효과적인 탐색 및 처리에 대한 알고리즘적인 접근을 요구하는 상황이 발생했고 이를 정리하여 기록해두고자 한다. .. 주짓수 플로우 차트 만드는 사이트 소개 주짓수 플로우 차트를 만들 수 있는 사이트 입니다. https://www.jiujitsu-chart.com/ 도장에서 수련한 기술들, 본인만의 스파링 게임플랜을 플로우 차트로 기록합니다. 모든 기능들은 무료로 제공됩니다. 기능 구성 플로우 차트는 3가지 종류의 노드로 구성이 가능합니다. 이미지 중요한 포지션, 기술에 대한 시각적인 이해를 돕기 위한 내장 이미지들입니다. 해당 이미지들을 활용해서 본인의 차트를 더 풍성하게 작성해보세요. 텍스트 주짓수의 기술들은 수 많은 디테일과 경험에 의존합니다. 본인이 배우거나 깨달은 디테일들을 글자로 기록해보세요. 비디오 텍스트와 이미지 만으로는 충분하지 않을 수 있습니다. 함께 기록해두고 싶은 유튜브 영상을 플로우 차트에 포함시키세요. 비디오 노드를 생성한 다음.. OpenSource Contribute 후기 시간이 너무 많이 흘러버렸지만... 이제라도 남겨보는 오픈소스 컨트리뷰팅 후기 시작글 막연하게 오픈소스 개발에 대한 욕심이 있었다. 라이브러리 혹은 패키지 없이 개발하는 IT 개발 실무자는 없을 것이다. 어느순간 어쩌면 너무 본인이 라이브러리에만 의존하고 있지 않나라는 생각이 들었다. 아마 이런 죄책감(?)에서 비롯된 욕심이었나보다. 이런 생각에서 비롯되어 실제로 오픈소스 기여에 대한 경험을 정리하여 기록해두고자 한다. 본문 🔎 오픈소스 프로젝트 찾기 본인이 기여할 오픈소스를 찾는게 가장 첫번째였다. 돌아보자면, 이 단계에서 가장 긴 시간이 소요됐다. 나에게 있어 기여할 오픈소스 프로젝트를 찾는다는 건 다음과 같은 기준에 부합하는 프로젝트를 찾는 것이었다. 흥미로워 보이거나 본인이 평소에 사용했던 프로젝.. 내 블로그가 검색되지 않는다 티스토리 블로그 글쓰기를 한지 어연 4개월째. 티스토리 블로그에서 작성한 글들이 구글에서 검색이 되지 않는 것을 발견했다. 전에 시험 삼아 시작해봤던 velog 블로그에는 똑같은 글이 있는데 여기는 잘 검색이 되지만, 티스토리에서 작성한 글은 검색이 되지 않는다. 그래서 이 글에서는 왜 티스토리에서 내가 작성한 글은 노출되지 않고, 어떤 문제가 있는지, 어떻게 해결하면 좋을지에 대해 본인이 찾아본 정보들을 정리해보고자 한다. 목표 티스토리에서 작성한 글이 구글에서 검색이 되지 않는다. 원인을 알아보자. 구글에서 내 블로그 글이 잘 검색되도록 개선하자. SEO 기본 가이드 SEO (Search Engine Optimization): 검색 엔진 최적화 구글에서 잘 정리한 SEO 문서가 있다. 😇 검색엔진 최.. [Next.js] Data Fetching APIs 비교 분석 (getStaticProps, getStaticPaths, getServersideProps, getInitialProps) 개요 생각해보면 현재 재직중인 회사에서 관리자 페이지를 제외한 프론트 서비스들은 모두 Next.js 를 사용하고 있는데 Next.js 프레임워크를 시간들여 공부해본 적이 따로 없는 것 같다. 🥲 핑계를 대보자면 React.js 만 사용할 줄 알아도 Next.js 으로도 그냥저냥 개발이 가능하기 때문이었다. 게을렀던 본인을 속죄하는 마음으로 Next.js 를 사용하며 의문이 들었던 부분들 위주로 하나씩 공부해나가보고자 한다. data fetching 메서드들을 정리하는 것으로 첫 글을 시작해본다. Pre-Rendering Next.js 는 페이지 요청시 자체적으로 pre-render 한 html 파일을 응답하고, 브라우저에서 hydration 위해 필요한 코드를 재호출하는 방식을 사용하고 있다. 이로써 빠.. 웹 요청 중단 시키기 (ft. AbortController) 최근 QA 테스트 진행 중, QA 팀원분의 다음과 같은 요청이 있었다. api를 사용하는 컴포넌트의 네트워크 실패/지연 케이스를 재현해보고 싶은데 방법이 없을까요? 로컬 환경에서는 이를 쉽게 재현할 수 있겠지만, 개발 내용을 공유하기 위해선 개발 서버로 배포가 필요했고 특정 api만을 원할때마다 실패 혹은 지연을 일으킬 수 있는 방법이 떠오르지 않아 당시엔 '그건 좀 힘들 것 같아요 ㅜㅜ' 라고 답변을 드렸다. 이후, 같은 질문을 받는다면 좀 더 괜찮은 답변을 드리고 싶었고 몇가지 방법을 찾아냈다. Chrome 개발자 도구 > 네트워크 탭 > fetch/XHR 탭 > 원하는 api 요청 block Chorme 개발자 도구 > 설정 > 제한 > 커스텀 네트워크 속도/지연 프로필 설정 (네트워크 탭에서 제공.. 함께 자라기 (ft. 1년차 회고) 어느덧 지금 다니고 있는 회사에서 일한지 1년이 지나갔고 나는 '2년차' 개발자가 되었다. 지난 1년을 키워드 하나로 표현해보자면 이것일 것이다. 임포스터 증후군 자기 자신을 자기 자신을 실력있는 사람들 사이에 운으로 들어온 사기꾼이라고 생각하며, 자신의 '사기 행각'이 드러나 큰 해를 입을 것이라고 불안해하는 현상이라고 한다. 그도 그럴 것이 처음으로 합류한 회사가 경력직 위주로 채용하는 회사였고, 실제 지금까지도 팀내에서 가장 연차가 낮다. (가장 어리진 않지만..) 하지만 정말 운좋게도 좋은 팀원들을 많났고, 특히 정말 적극적으로 도움을 많이 주시는 사수격 팀원분을 만나 빠르게 적응할 수 있었다. 하지만 그것과 별개로 '나는 팀내에서 내 역할을 잘하고 있는가?', '더 나은 개발자가 되려면 어떻게 .. 롤링 업데이트 health check fail issue 개요 회사에서 본인이 개발 중인 프로덕트는 총 8대의 ec2 인스턴스를 관리하는 elastic beanstalk 리소스로 운영되고 있다. 무중단 배포를 위하여 4대씩 총 2개의 배치로 나누어 롤링 배포를 한다. 프레임워크는 next.js 를 사용하고 있다. 이때 정적파일들을 cdn을 통하여 제공하기 위해 assets_path를 새롭게 정의한 커밋을 포함한 배포가 실패하는 이슈가 발생하였다. 재현 과정 및 현상 배포 시작 1번째 배치 배포 시작 배포 완료 1번째 배치 health check fail 4-1. 원인은 4xx 응답률 40%~50% 4-2. cdn 적용전 즉, 기존에 was에서 제공하고 있던 경로로 정적파일을 브라우저에서 계속 요청 중인 현상 발생. 배포 실패 운영환경에서 간헐적으로 빈 화면이 .. 이전 1 다음
