본문 바로가기
반응형

분류 전체보기

 (399)
[도구 추천] 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 의 앱설정에 보이는 도메인 관리를 클릭하여 들어 갑니..
[나만의 명언집 배포] NextJS(^14.1) - ① AWS Amplify 배포 포스트 목적 해당 포스트는 NextJS14.1 버전의 나만의 명언집 프로젝트를 배포하기 위해 AWS Amplify 에 배포하는 과정을 정리한 포스트 입니다. 해당 배포 과정은 AWS 공식 사이트 와 외국 유튜버 Program With Erik(https://www.youtube.com/watch?v=3v3Mhql630g) 의 영상을 참고하여 이루어졌습니다. 해당 포스트는 시리즈 형식으로 최소 3개 내지 5개 정도의 포스트로 이어질 것 같습니다. 현재 포스트는 AWS Amplify 배포하기 부분으로, 다음 포스트는 구매한 도메인을 지정하는 방법에 대해 다룹니다. Amplify 시작하기 [aws 검색창]에 amplify 라고 검색 후 AWS Amplify 를 클릭 합니다. 그 후 [시작하기]를 클릭 합니다...
[나만의 명언집 프로젝트] 테스트 코드 적용 정리본(일부) 오늘의 명언 포스트의 목적과 참고 사항프로젝트를 진행하면서 진행한 단위 테스트 코드를 정리하여, 추후 참고하기 위한 용도로서 정리한다. 테스트를 공부하면서 정리해 나가는 것이기 때문에, 테스트의 완성도는 보장할 수 없으며, 최대한 참고문서를 정리하며 정리할 것이기 때문에, 혹시나 이 포스트를 읽는 분이 있다면 참고문서(링크) 위주로 확인하면 도움이 될 것이라 생각된다.  참고로 개발이 어느 정도 완료된 이후 테스트 코드를 추가 .참고로, 모든 테스트의 흐름은...다음 패턴을 따른다. Arrange: 테스트 환경을 설정하고 테스트할 데이터 준비. 테스트할 객체를 생성하고 초기화하며, 테스트 환경을 적절하게 설정.Act: 테스트 대상에 작용하는 작업을 수행.  테스트하려는 기능을 호출하거나 실행하고, 테스트..
[나만의 명언집 프로젝트] 기능 구현 정리본② 오늘의 명언 [이전글] 기능구현 정리본 ① [나만의 명언집 만들기 프로젝트] 기능 구현 정리본 ① 오늘의 명언 [기능구현] 좋아요 기능 좋아요 로직 - 사용자가 [좋아요] 아이콘 혹은 버튼을 클릭하면 사용자의 accessToken 과 해당 포스트 식별자(id) 를 서버 api 로 POST 요청한다. - 서버에서는 accessT duklook.tistory.com 포스트의 목적 및 참고사항 각 포스트의 순서는 '기능 개요 → 구현 과정 → 마무리(혹은 회고)' 형식으로 진행됩니다. 더보기 - 해당 포스트는 나만의 명언집 프로젝트를 만들면서 구현한 기능을 어떤 과정을 거쳐서 만들어졌는지를 기록하는 문서로서 역할을 합니다. - 해당 포스트 이전에는 기능구현 정리본① 에서 작성되었지만, 크기가 커짐에 따라 기능..
[나만의 명언집 만들기 프로젝트] 기능 구현 모음집 ① 오늘의 명언 포스트 목적 - 해당 포스트는 프로젝트 진행 시 구현한 기능 중 일부를 정리한 모음집 입니다. - 포스트 순서는 기능 구현 개요 → 구현 과정 → 마무리(혹은 회고) 순으로 진행됩니다. - 해당 포스트의 언어체는 '~였다.' 형식으로 작성됩니다. [기능구현] 좋아요 기능 (기능 추가 이유 및 목적) 프로젝트를 진행하면서 좋아요 기능을 추가할 예정은 없었지만, 향후 사이트가 확장하여 보다 많은 명언 데이터를 가지게 되고, 어느 정도 활성화 되는 경우 어떤 데이터를 가지고 사용자에게 도움이 되는 정보를 제공할 수 있을지 고민하였다. (결론) 이에 조회수와 좋아요를 기반으로 추천 명언을 보여주는 것이 제일 우선이 되어야 하는 기본이라 판단하여 해당 기능을 추가하기로 하였고, 이에 대한 기능구현 과..
반응형

티스토리툴바