실무에서 바로 쓸 수 있는 TypeScript 타입 8선

실무에서 바로 쓸 수 있는 TypeScript 타입 8선이번 글에서는 실무에서 바로 적용할 수 있는 TypeScript의 주요 타입들을 소개합니다. 가능한 한 실용적인 예시를 사용해 설명을 진행할 건데요, React를 전제로 하고 있으니 참고해 주세요. TypeScript 초보자분들에게도 도움이 될 수 있는 내용들이니 끝까지 함께 보시죠.1. 템플릿 리터럴 타입템플릿 리터럴 타입은 타입 안전성을 유지하면서도 문자열 조작을 할 수 있는 강력한 기능입니다. 예시리터럴 타입을 사용해 문자열을 정의하면, 전달된 값이 number 타입임을 타입 시스템이 보장해줍니다.const requestExternalApi = async ({ data,}: { data: { offset: `${number}` l..

• format_list_bulleted Javascript
• · 2024. 11. 9.
• textsms

자바스크립트 얕은 복사 vs 깊은 복사, 완벽 정리!

자바스크립트 얕은 복사 vs 깊은 복사, 완벽 정리!자바스크립트에서 객체를 복사할 때, "얕은 복사(Shallow Copy)"와 "깊은 복사(Deep Copy)"라는 용어를 자주 접하게 됩니다. 이 두 가지 복사 방식의 차이점을 제대로 이해하지 못하면, 예상치 못한 버그를 만날 수도 있는데요. 이 글에서는 얕은 복사와 깊은 복사의 차이점을 쉬운 예시를 통해 명확하게 설명하고, 각 방식의 장단점과 사용 시 주의할 점까지 꼼꼼하게 알려드리겠습니다. 얕은 복사(Shallow Copy), 겉핥기식 복사?얕은 복사는 원본 객체의 최상위 속성 값만 복사합니다. 즉, 객체 내부에 중첩된 객체나 배열은 참조(Reference)만 복사됩니다. 얕은 복사 예시:const original = { name: "Alice",..

• format_list_bulleted Javascript
• · 2024. 10. 30.
• textsms

Next.js 15, 달라진 점 싹 다 훑어보기!

Next.js 15, 달라진 점 싹 다 훑어보기!Next.js 15가 드디어 출시되었습니다! 이번 버전은 개발자들의 생산성과 웹사이트 성능 향상에 초점을 맞춘 다양한 기능들을 선보이는데요. 지금부터 Next.js 15의 주요 변경 사항들을 하나씩 살펴보면서, 업그레이드를 통해 얻을 수 있는 혜택들을 알아볼까요?1. @next/codemod CLI, 자동 업그레이드로 편리하게!Next.js 15에서는 @next/codemod CLI를 사용하여 기존 코드베이스를 자동으로 변경할 수 있습니다. 터미널에서 다음 명령어를 실행하면, 현재 프로젝트의 Next.js 버전이 최신 버전(또는 프리릴리즈 버전)으로 업그레이드되고, 필요한 코드 변경 사항들이 자동으로 적용됩니다.npx @next/codemod@canary ..

• format_list_bulleted Javascript
• · 2024. 10. 30.
• textsms

Next.js "use cache" 한방에 이해하기!

Next.js "use cache" 한방에 이해하기!얼마 전, Next.js Conf 2024가 성황리에 개최되었습니다! 컨퍼런스에서 가장 뜨거운 관심을 받았던 주인공은 바로 "use cache" 기능이 아닐까 싶은데요. 오늘은 이 "use cache" 기능이 도대체 뭔지, 어떻게 활용하는지, 그리고 왜 주목해야 하는지, 속 시원하게 알려드리겠습니다! 혹시 Next.js의 캐시 기능 때문에 머리 아팠던 경험이 있으신가요? 그렇다면 이 글을 끝까지 읽어보세요. "use cache"가 여러분의 고민을 해결해 줄 겁니다! (참고) "use cache"는 2024년 10월 30일 기준으로 아직 실험적인 기능입니다. Next.js App Router의 기존 캐시 기능, 뭐가 문제였을까?App Router에서는 기..

• format_list_bulleted Javascript
• · 2024. 10. 30.
• textsms

Next.js 15의 혁신적인 캐시 기능

Next.js 15의 혁신적인 캐시 기능Next.js 15가 핫한 이슈로 떠오르고 있는 요즘, 가장 주목받는 기능 중 하나가 바로 대폭 개선된 캐시(Cache) 기능입니다. 새롭게 도입된 use cache 기능 덕분에 기존 Next.js의 복잡했던 캐시 전략이 훨씬 간편하고 효율적으로 변신했는데요. 이번 업데이트로 개발자들은 더욱 쉽고 유연하게 캐시 전략을 활용할 수 있게 되었고, 개발 경험도 크게 향상될 것으로 기대됩니다. 자, 그럼 지금부터 use cache 기능을 중심으로 Next.js 15의 캐시 기능에 대해 자세히 알아볼까요? Next.js 14, 캐시 기능의 불편한 진실1. fetch() 함수의 함정Next.js 14에서는 fetch() 함수를 사용하면 기본적으로 데이터가 캐시되었습니다. 하지..

• format_list_bulleted Javascript
• · 2024. 10. 30.
• textsms

잘 모르는 JavaScript와 파생 언어의 세계

잘 모르는 JavaScript와 파생 언어의 세계JavaScript의 역사JavaScript는 1995년 Brendan Eich에 의해 개발되었습니다. 처음에는 Netscape Navigator라는 웹 브라우저에 포함되어, 인터랙티브한 웹 페이지를 만들기 위한 스크립트 언어로 설계되었습니다. 초기 이름은 "Mocha"였으나, 이후 "LiveScript"로 변경되었고, 최종적으로 "JavaScript"라는 이름이 되었습니다. 이 이름은 당시 인기 있었던 프로그래밍 언어 "Java"의 이름을 빌려 마케팅 효과를 노린 것입니다. 그러나 기술적으로 Java와는 다른 언어입니다. ECMAScript와의 관계JavaScript는 엄밀히 말하면 ECMAScript라는 표준 규격에 기반합니다. ECMAScript는 J..

• format_list_bulleted Javascript
• · 2024. 10. 18.
• textsms