본문 바로가기

전체 아티클133

JSDoc를 통한 자바스크립트 타입 힌트 제공하기 목차· JSDoc이란?· 변수타입· 함수 타입· 타입 정의· CallBack· DOM시작하기 전에 잠깐의 팁을 가지고 왔는데요, VS Code IDE를 사용하고 있다면, 상단에 @ts-check를 주석으로 추가하면 TypeScript처럼 타입 및 에러 체크를 할 수 있어요 👀JSDoc이란?JSDoc은 자바스크립트 API 문서 생성기입니다. 자바스크립트 소스코드에 JSDoc 형식의 주석을 추가하면 API를 설명하는 HTML 문서를 생성할 수 있어요. JSDoc 주석은 일반적인 주석과 다르게 /** */ 로 기술할 수 있어요. 사용 예제를 한번 살펴볼까요? 보통은 JSDoc을 사용할 때 함수 위에 많이 사용을 하고 있지만, 타입스크립트를 아직 도입하지 않은 기업의 경우 타입에 대한 사전적인 정보 제공을 위.. 2024. 6. 11.
타입스크립트 딥다이브 해당 내용은 타입스크립트 딥다이브를 보고, 내용을 요약하고 정리합니다.아는 내용이 섞일 수 있지만 복습차 테크블로그에 정리를 진행하고 있습니다.2024.05.31 자로 업데이트 되었으며, 학습한 내용이 계속 업데이트 될 예정입니다. 원시 데이터에서 동등 연산자와 일치 연산자 차이자바스크립트에서 동등 연산자(==), 일치 연산자(===)가 존재합니다.이때 동등 연산자는 탄력적으로 string을 number로 변환합니다.console.log(5 == '5') // trueconsole.log(5 === '5') // falseconsole.log('' == '0') // falseconsole.log(0 == '') // trueconsole.log('' === '0') // falseconsole.log(.. 2024. 5. 31.
Next 13에 Vanila Extract 적용하기 보호되어 있는 글 입니다. 2024. 5. 31.
다국어를 지원할 때 언어에 따라 다른 CSS를 적용하고 싶을 때 목차· 다국어 설정하기· 다국어 스타일 시트 적용하기사내에서 콘텐츠 허브 서비스를 맡아, 개발을 진행하고 있어요 아무래도 국내 시장에서는 큰 점유율을 보유하고 있어 글로벌 시장 진출을 활발하고 있는데, 서비스 별로 가장 중요한 기능 중 하나가 바로 다국어 기능이에요. 입사를 하고 거의 3~4개월만의 연구소 공식 블로그 서비스를 런칭해야하기 때문에 새로 배우는 점이 참 많아요. 그 중 하나가 다국어에 따라 CSS를 변경하고 싶을 때예요.다국어 설정하기다국어 설정을 위해 주 언어가 일본어라면 아래와 같이 설정을 해줄 수 있어요.그 외의 언어들은 다음과 같이 설정할 수 있답니다./* *//* */위와 같이 HTML lang Attribute를 사용하는 이유는 아래와 같아요.웹 접근성 준수검색엔진 최적화 (.. 2024. 5. 31.
3분만에 브라우저 익스텐션 만들어보기 목차· 프로젝트 준비하기· 익스텐션 만들어보기· 익스텐션 스토어 배포저는 지금 리워크라는 업무에 필요한 멋진 서비스를 만들고 있어요, 처음으로 저한테 필요한 서비스를요 👋🏻 필요한 서비스를 만들면서 PWA 이외에 브라우저 익스텐션으로도 제공이 되었으면 좋겠다는 생각을 했어요. 그래서 관련 자료를 찾아보다가 브라우저 익스텐션 개발이 그리 어렵지는 않았고, PWA와 비슷한 과정을 거쳐 개발을 할 수 있더라구요. 다만 브라우저 익스텐션으로 제공되기 때문에 도화지의 크기가 작다는 단점을 가지고 있다는게 조금 흠이지만요.프로젝트 준비하기우선 익스텐션으로 만들기 위해 프로젝트를 준비해야해요. CRA로 빠른 프로젝트를 만들어도 되고, Vite를 이용하여 빠르게 프로젝트를 준비해도 좋아요. 필자는 기존 리워크 소스.. 2024. 5. 27.
캐치테이블에서 사용하는 Vanilla Extract이 뭘까? 목차· Runtime 시점에서의 CSS in JS· Vanilla Extract· Vanilla Extract 시작하기· Vanilla Extract, 어떻게 생각해요?Runtime 시점에서의 CSS in JSReact와 같은 SPA가 대두되면서 CSS in JS가 많은 인기를 얻고 있습니다. 이를테면 React의 경우 styled-component 또는 emotion을 예를 들 수 있는데, CSS in JS는 아래와 같은 장점을 가지고 있습니다. CSS in JS의 대두되는 장점은 아래와 같습니다.1. CSS에서 JS 문법을 사용할 수 있어 생산성을 증가시킬 수 있다.2. 컴포넌트 파일에 관련 코드들과 동일 선상에서 같이 위치시킬 수 있다.  2-1. 기존에는 CSS 파일과 JS 파일을 분리해야했기 때.. 2024. 5. 17.
404 for Depromeet 보호되어 있는 글 입니다. 2024. 5. 16.
개발자는 내가 만드는 제품에 대한 애정을 가져야한다 왜 이런 버그들을 늦게 발견되었는지 알아? 우리가 제품을 많이 써보지 않았기 때문이야 작년 첫 회사에서 필드로 출시하기 위해 준비 중인 제품에 들어갈 웹 에디터를 개발하면서 버그가 발생했다. 출시 일이 얼마 남지 않았기 때문에, 생각보다 긴급 이슈로 분류가 되었고 위와 같은 말을 들었다. 생각해보니 맞는 말이다, 첫 회사는 규모는 크지만 업무 단위는 스타트업처럼 작은 규모로 조직화되어 움직이고 있었고, 전체 제품을 세분화하여 쪼개놓은 팀은 아니었기 때문에 제품 자체를 전반적으로 이해하고 계속해서 트래킹을 했어야했다. 작년까지는 정말 어린 생각을 하고 있었던 것 같다. 주니어 개발자라면 한번 쯔음 거쳐가는 생각을 했다. 개발자라면, 제품에 오류가 없게 개발만 잘하면 되는거 아닌가? 주어진 일을 잘해내는 것.. 2024. 5. 12.
Vercel 배포 환경에서 404 Not Found가 발생하는 경우에 어떻게 해야할까? 목차· 404 Not Found 해결 방법프로젝트를 진행하면서 항상 마주했던 문제인데 당연시하면서 넘어가다가, 계속 구글링하던 나에게 필요한 포스팅을 오늘 진행합니다.프로젝트를 진행하면서 리액트를 Vercel 배포 환경으로 테스트를 진행하다보면, 새로고침 시에 로컬 환경에서 발생하지 않는 404 에러가 발생하곤 합니다. 로컬 환경에서는 문제가 없기 때문에 분명 배포 환경에서의 문제인데, 이 부분은 Vercel.json 파일을 수정함으로서 해결을 할 수 있습니다.  React, Vue, Svelte를 Netlify 또는 Vercel에 배포하기 위해서는 추가 스탭이 필요하다고 합니다.관련 문제를 해결하기 위해서는 Vercel.json파일을 생성하고, 아래의 코드를 입력해주세요404 Not Found 해결 방.. 2024. 5. 12.

티스토리툴바