전체 글38 Next.js 14 app directory 사용시 새로 알게된 내용 정리 새로운 팀에 합류해서 신규 프로젝트 작업을 하고 있는데 마침 app directory로 환경설정을 하고 있는 단계라 nextjs를 문서로만 공부하다가 실무에 적용해 볼 수 있었다. 문서로만 공부하다가 직접 써보니 너무 재밌었다.시행착오도 겪었지만 문서를 찾아보면서 하나씩 해결해 나갔고 지금은 어느 정도 기초 설정이 안정되었다! 그래서 좀 기록해놓고 싶은 내용을 정리해보려고 한다~!server action- 서버에서만 실행시킬 함수를 server action이라고 한다.공식문서에서는 노출되면 안 되는 데이터를 사용해야 할 때 server action을 사용하면 된다고 설명한다. 지금 진행 중인 프로젝트에서 네트워크 요청 시 유저의 토큰정보를 헤더에 넣어서 요청을 전송하려고 하는데, 요청자체를 브라우저에 노.. 2024. 11. 12. [회고] 1년간의 프로젝트를 통해 배운것 지금은 이직을 했지만, 전 직장에서 1년 3개월 정도 장기 프로젝트를 진행했었다.외주 프로젝트였고, 클라이언트 회사의 차세대 물류 프로젝트의 일부 파트를 맡게 되었다. 처음엔 새로운 프로젝트를 만드는 거라 너무 재미있는 마음으로 시작을 했었다.Next.js로 처음 프로젝트를 해보는 것도 좋았고, 잠깐 짬을 내서 만든 디자인시스템을 드디어 프로젝트에 적용해 볼 기회라 즐겁게 했었다 하지만 끝없는 야근과 주말출근,.,. 그리고 끊임없는 수정요청을 경험하면서 정신적으로 정말 지쳤고 너무너무 우울했었다.그때 당시엔 힘들다는 생각밖에 없었는데, 지금 다시 돌이켜보면 그 1년 동안 스스로 많이 성장하고 경험치를 쌓았다고 생각이 들어서 이 경험에 대해서 꼭!꼭! 글로 남기고 싶었다.배운 것물류 도메인우선 물류는 경험.. 2024. 10. 13. [tidy first?] 독후감 Tidy First? | Kent Beck - 교보문고Tidy First? | In this practical guide, author Kent Beck, creator of Extreme Programming and pioneer of software patterns, suggests when and where you might apply tidyings to improve your code while keeping the overall structure of the system in mind.product.kyobobook.co.kr tidy first를 읽어봤다.책이 얇고 저자가 하고자하는 말이 명확해서 가볍게 읽을수있었음 책에서는 경제적인 용어를 사용해서 여러 논리를 적었는데, 하고자하는말은 명확.. 2024. 8. 25. Deep Link란 무엇일까? react native를 사용해서 프로젝트를 만들때 deep link라는것을 본적이있다.link와 비슷한 동작을 하는데, 왜 deep link라고 하는거지..?라는 궁금증이 들어서 한번 공부해서 정리해보자딥링크에 대한 정의를 먼저 보자특정 페이지에 직접적으로 도달할 수 있는 링크링크란 모든 형식의 자료를 연결하고 가리킬 수 있는 참조고리이다.(모바일)딥링크란?앱에서 링크에 해당하는 컨텐츠로 이동시킬수 있는것. 즉, 앱과 앱간의 이동을 의미채팅으로 링크를 받아서 특정 앱의 화면으로 이동시키기광고에서 버튼을 눌러서 광고 컨텐츠에 맞는 화면으로 이동시키기푸시를 눌렀을때 푸시내용에 맞는 화면으로 이동시키기스킴 딥링크(URI Scheme)초기에 사용된 딥링크 구현 방식이다.URI Scheme는 아래와 같은 패턴으.. 2024. 8. 18. [Javascript Promise] 책 정리 JavaScript Promise최근 몇 년, 웹에서는 다양한 변화가 일어나고 있다. HTML5나 ECMAScript6 등 새로운 표준 기술이 잇달아 고안되는 등 웹의 세계는 빠르게 변화하고 있다. 브라우저는 그 변화에 대응하기 위해 릴리즈www.hanbit.co.kr여러분 이책은 ⭐️무료⭐️입니다 최근에 면접을 보다가 callback, promise, async/await에 대한 질문을 받았는데 뭔가 명확하게 답변을 하지 못했다...!실무에서는 사용을 하면서도 개념에 대해 설명을 하려고하니, 생각보다 막히는 부분이 많았음..ㅜㅠㅜㅠ 그래서 promise에 대한 개념을 다시 정리해보고자 이 책을 읽어봤음책이 얇아서 금방읽는다! 1. Promise란 무엇인가1.1 Promise란비동기 처리 로직을 추상화한.. 2024. 8. 17. 저의 훼이보릿 라이브러리 zod에 대해 정리해보겠어요(+ 실제 사용 예시) 2023 하반기에 zod를 정말 유용하게 사용했다zod는 데이터의 스키마를 작성하기쉽게 도와주는 라이브러리이다 zod말고 yup이나 formik등의 라이브러리도 있는데, 왜 하필 zod냐?zod만이 가지는 장점이 있기때문에 아래의 사용예시를 보고 매력을 느낀다면 한번 써보시는것을 추천한다zod GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com zod 사용방법zod를 사용해서 원시타입/객체/배열 등 다양한 타입의 스키마 작성이 가능하다.그리고 pa.. 2024. 8. 4. [ERROR] react + useGLTF사용시 gltf파일 load가 안될때(+CRA 환경변수 사용) 에러상황gltf 파일이 들어있는 폴더를 public폴더 하위에 두고 useGLTF 훅을 사용해 gltf파일을 로드하는 코드를 실행시키면 아래와 같은 에러가 발생한다...const gltf = useGLTF('/cute_little_duck/scene.gltf');에러 메시지를 읽어보면 gltf에 html코드가 들어가있다는 느낌의 메시지같은데, 실제로 내 코드의 public폴더에 들어있는 gltf파일을 보면 html이 아닌 JSON 데이터이라는것을 확인할 수 있음...{ "accessors": [ { "bufferView": 2, "componentType": 5126, "count": 9187, "max": [ 0.2389347106218338, .. 2024. 8. 4. [쏙쏙 들어오는 함수형 코딩] chapter 8-9. 계층형설계 깨끗한 코드를 만들기위해 함수를 추출하는 방법을 배운다.계층을 나눠서 소프트웨어 설계소프트웨어 설계란? 코드를 만들고, 테스트하고, 유지보수하기 쉬운 프로그래밍 방법을 선택하기 위해 미적 감각을 사용하는것계층형 설계소프트웨어를 계층으로 구성하는 기술각 계층에 있는 함수는 바로 아래계층에 있는 함수를 이용해 정의한다.계층비지니스 규칙도메인 함수카피온라이트언어에서 지원하는 메서드/기능step 1. 직접 구현호출 그래프를 만들어 함수 호출을 시각화하기서로 다른 추상화단계에있는 기능을 사용하면 직접구현패턴이 아니다.함수가 모두 비슷한 계층에 있다면 직접 구현했다고 할수있음같은 계층에있는 함수는 같은 목적을 가져야한다.비지니스규칙기본동작카피온라이트js언어기능각 계층의 추상화수준이 다르기때문에, 어떤 계층에있는 함.. 2024. 8. 2. [Sentry] slack alerts 연동하기 + sentry slack message 커스터마이징 Sentry를 사용하면 error alerts를 slack으로 받아서 확인할 수 있다!sentry + slack 연동사실 해당 내용은 공식문서를 그대로 따라하면 된다https://docs.sentry.io/organization/integrations/notification-incidents/slack/ SlackLearn more about Sentry's Slack integration and how you can triage, resolve, and archive Sentry issues directly from Slack.docs.sentry.io 연동할때 신경써야하는부분을 말해보자면sentry alerts를 받을 채널에 sentry app 설치채널의 상세모달에 들어가서 앱을 추가해야함!! sen.. 2024. 7. 28. 이전 1 2 3 4 5 다음
