분류 전체보기 (395) 썸네일형 리스트형 [모음집] 개발과 관련해서 읽어보기 좋은 아티클을 정리해 보았습니다. 들어가기 전 요새 일일일이나 운영중인 해외문서를 번역하여 올려주시는 일을 해주시는 분들이 많아서 구독하며 매일 확인하고 있는데요. 매번 참고하고 즐겨찾기 해두기만 하니 관리하기가 점점 어려워지더라구요. 그래서 개인적으로 알게 된 좋은 아티클이라던지, 공유받아서 알게된 좋은 내용들을 정리해두면 어떨까? 라는 생각이 들면서, 오늘 이렇게 모음집 형태로 정리해 보게 되었습니다. 현재 이 포스트는 내용이 추가될 때 마다 그 날짜를 기준으로 갱신되는 형태를 취하기 때문에, 현재는 내용이 부족하더라고 계속해서 추가해 나갈 것이라는 점 참고 부탁드립니다. NodeJS Event Loop 파헤치기 노드JS에서 중요한 개념인 이벤트 루프에 대한 깊은 내용을 살펴볼 수 있는 블로그입니다. 2021년도에 작성된 글로 직방에.. [버전관리] 먼지 쌓인 종속성을 클린하게! (with npm) 포스트 목적 이전에 만들었던 개인 프로젝트를 유지보수 하기 위해 살펴보던 중 package.json 에 설치된 많은 종속성이 오래된 것을 확인하였습니다. 이를 쉽게 업데이트하기 위해 어떠한 도구를 사용하였는지 정리해보고, 그 결과를 공유하고자 하는 취지로 작성되었습니다. 소개할 패키지 : npm-check-udates 해당 npm 사이트에서도 소개되었듯이 react": "^16.0.4""react": "^18.2.0 와 같이 설치된 종속성은 npm install 을 하더라도 package.lock.json 에 입력된 기준으로만 패키지를 설치하므로 종속성이 최신 버전으로는 업데이트 되지 않고 고정 됩니다. 하지만 npm-check-updates (링크 클릭 시 이동)를 사용하면, 기존 종속성과는 별개로 l.. [React] 테스팅의 친구, userEvent 이해하기 with 예제 코드 포스트 목적 userEvent 를 빠르게 이해하고, 테스트에 적용하기 위한 목적으로 userEvent 가 가지는 핵심 메서드에 대해 정리 하였습니다. 예시는 최대한 공식문서의 내용을 참고해서, 이러한 예시로 사용할 수 있겠구나 싶은 것으로 작성해 보았습니다. userEvent.click(element, [options]) 주어진 엘리먼트를 클릭합니다. 옵션 객체를 제공하여 Shift, Ctrl 및 Alt 키와 같은 수정자를 추가할 수 있습니다. import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; test('Clicking a button', () => { con.. [JS] 흔히 블로그에서 자동으로 생성되는 목차는 어떻게 만드는 걸까? 기존에 작성된 포스트가 갱신되어 최신 날짜를 기준으로 업데이트 되었습니다(2024/03/10 기준) 자동 생성 목차란? 임의로 이름을 붙였지만, 이름 그대로 h1,h2,h3 등의 제목 태그를 이용해서 헤드를 작성하면, 해당 헤드로 이동하는 리스트가 생성되고, 사용자는 이 목차를 이용해서 해당 콘텐츠로 즉시 이동할 수 있도록하는 기능이다. 만들게 된 배경 개발 공부를 하면서, 이러한 자동 생성 목차를 사용하는 블로그나 공식 사이트를 많이 봤지만, 블로그의 글을 작성하면서 굳이 적용할 필요성은 느끼지 못했다. 그러나, 내가 작성한 글을 다시금 참고하려고 하는 일상이 반복될 때, 어느 순간 마우스 휠을 이용해서 일일이 스크롤 이동하는 것이 너무 불편하게 느껴졌다. 따라서 편의성을 높이기 위해 해당 기능을 한 .. [도구 추천] NodeJS 혹은 JS 이벤트 루프.. 이론만 알면 뭐해 이해를 못하는데 콜 스택, 이벤트 루프 이론은 가득한데 이게 어떻게 돌아가는지 몰라 혹시 자바스크립트나 nodejs 이론을 공부할 때, 딱딱한 이미지나 글로만 보고 넘어 가시는 경우 많지 않나요? 그냥 면접용 CS 지식으로만 사용하고 그냥 버려두기에는 중요한 이론이고, 동작 방식인데, 이를 시각적으로 확인할 수 있다면 얼마나 좋을까요? 그래서 오늘 소개하는 도구는 이러한 고민들을 많이 해소해 줄 수 있을 거라 자신합니다. 바로 본론으로 바로 JavaScript Visualizer 9000 (←클릭시 해당 사이트로 이동) 라는 사이트인데, 여기에 바로 들어가시면 여러분이 작성한 코드가 어떠한 과정을 거쳐서 실행되는지 시각적으로 확인할 수 있습니다. 아래 시연 영상을 보면, 함수가 호출되는 순서에 따라 호출 스택(call .. [나만의 명언집] 기능 구현 정리본 ③ [이전 포스트] 기능 구현 모음집 2 [나만의 명언집 프로젝트] 기능 구현 정리본② 오늘의 명언 [이전글] 기능구현 정리본 ① [나만의 명언집 만들기 프로젝트] 기능 구현 정리본 ① 오늘의 명언 [기능구현] 좋아요 기능 좋아요 로직 - 사용자가 [좋아요] 아이콘 혹은 버튼을 클릭 duklook.tistory.com 오늘의 명언 포스트 목적 NextJS 14.1 버전을 사용하여 나만의 명언집을 만들어 보는 프로젝트 중에 구현한 기능 중 일부를 정리하는 포스트 입니다. 해당 정리본은 총 3개가 존재하며, 해당 포스트는 그중 세 번째 정리본입니다. 이제 포스트 작성 시 ~ 합니다. 체로 작성하려고 하지만, 현재 포스트는 이전까지 작성한 포스트와의 통일성을 맞추기 위해 ~한다, ~다 와 같은 형식으로 작성합니다.. [NextJS] NextJS(14.1) | Warning: Extra attributes from the server: style 해결 방법과 팁 에러 이미지 개발 하면서 오랫동안 거슬렸던 경고 에러(보다는 경고)가 있습니다. 개발 환경에서만 뜨고, 프로덕션에서는 뜨지 않아서 별 신경도 쓰지 않았지만, 루트 페이지에 접속할 때 마다 뜨는게 거슬려서 해결하기로 하였습니다. 해당 관련 이미지는 다음과 같습니다. 원인 및 해결 방법 해당 에러의 원인이 무엇인지 검색을 해서 찾아 봤을 때는 서버로 부터 전달 받은 속성과 클라이언트에서 렌더링되는 속성 간의 불일치가 발생하여 이에 대한 경고를 띄우고 있는 것이 원인으로 보입니다 이에 대한 자세한 예시는 NextJS 공식 사이트(https://nextjs.org/docs/messages/react-hydration-error) 에서 확인해 보세요(무려 공식 사이트에서 해당 에러에 대해 정리 해주었습니다.) 또.. [나만의 명언집 배포] NextJS(^14.1) - ② Amplify 배포 | 도메인 설정 해당 포스트는 이전 Amplify 배포 시리즈의 두 번째로 배포된 프로젝트의 도메인을 사용자가 지정하는 방법에 대해 정리합니다. [이전 포스트] Amplify 배포 배포 과정에 대한 부분은 이전 포스트를 참고해주시면 됩니다. [나만의 명언집 프로젝트] NextJS(^14.1) - ① AWS Amplify 배포 포스트 목적 해당 포스트는 NextJS14.1 버전의 나만의 명언집 프로젝트를 배포하기 위해 AWS Amplify 에 배포하는 과정을 정리한 포스트 입니다. 해당 배포 과정은 AWS 공식 사이트 와 외국 유튜버 Progra duklook.tistory.com 도메인 관리 에서 도메인 추가 클릭하기 우선 배포가 완료되고 나서, AWS Amplify 의 앱설정에 보이는 도메인 관리를 클릭하여 들어 갑니.. 이전 1 ··· 15 16 17 18 19 20 21 ··· 50 다음
