티스토리

코딩의 세계
검색하기

블로그 홈

코딩의 세계

codingworld2002.tistory.com/m

Coding my imagination

구독자
1
방명록 방문하기
공지 상상을 현실로. (by.코딩) 모두보기

주요 글 목록

  • 코드 스플리팅에 대해.. 코드 스플리팅에 대한 좋은 글이 있어서 나의 티스토리에 기록으로 남기면서 동시에 공유할 겸 이 글을 작성해 본다.코드 스플리팅이 무엇인가? 우리가 자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 된다. 그럼, 프로젝트의 규모가 커질수록 자바스크립트 파일 용량도 커지게 된다. 용량이 커지면, 인터넷이 느린 환경에서는 페이지 로딩속도도 느려질 것.코드 스플리팅을 하게 되면, 지금 당장 필요한 코드가 아니라면 따로 분리시켜서, 나중에 필요할 때 불러와서 사용할 수 있다. 이를 통하여, 페이지의 로딩 속도를 개선할 수 있다.하는 방법> 관련 링크https://velog.io/@velopert/react-code-splitting 리액트 프로젝트 코드 스플리팅 정복하.. 공감수 1 댓글수 1 2025. 5. 6.
  • 깃허브 레포지토리의 Public / Private 전환 레포지토리의 전체 공개랑 프라이빗을 전환할 수 있다. (보통 시작은 퍼블릿으로 열어두긴 한다.)이 부분에 대한 좋은 글이 있어서 공유해 본다.https://vipdeveloper.tistory.com/147 GitHub 리포지토리 접근 권한 변경하기: Public에서 Private으로GitHub에서 리포지토리의 접근 권한을 변경하는 것은 협업과 프로젝트 관리에 중요한 요소입니다. 특히 Public과 Private 설정을 적절히 활용하면 코드의 공개 범위와 보안을 효과적으로 관리할 수vipdeveloper.tistory.com이 글을 참고하면 변환하는 방법을 알 수 있다.(프라이빗은 보통 무언가 정보를 보호할 때에 사용한다. 공감수 0 댓글수 0 2025. 5. 4.
  • 4기 카카오 프론트 전체 스터디 - 리액트 2주차 (조건부 렌더링, 리스트, 스타일링, 폼 다루기) 이번에는 리액트를 스타일링하는 것 그리고 양식 및 사용자 입력에 대한 폼 다루는 방법을 이야기해 보겠다.목표이를 통해 이룰 목표는 다음과 같다.조건부 렌더링리스트 렌더링 / keyStyled-components / Tailwind CSS폼 다루기하나식 해결해 보자.조건부 렌더링우리는 조건부에 따라서 렌더링을 부분적으로 일으킬 수 있다. 코드를 살펴보자.예시 1 (if문 작성)let content;if (isLoggedIn) { content = ;} else { content = ;}return ( {content} );심플하게 보면, if문을 이용해서 조건부로 렌더링을 할 수 있다.이보다 더 코드를 축약하고 싶다면 삼항연산자를 사용하면 된다.예시 2 (삼항연산자) {isLoggedIn .. 공감수 2 댓글수 2 2025. 5. 1.
  • 타입스크립트에서 타입은 집합이다. 타입스크립트에서 타입은 여러 개의 값을 포함하는 집합이다.집합은 동일한 속성을 갖는 여러 개의 요소들을 하나의 그룹으로 묶은 단위를 뜻한다.예를 들어..위 값을 모아둔 집합을 타입스크립트에서는 number타입이라고 부르는 것이다.이에 반해 리터널 타입은 "아주 작은 집합"이라고 볼 수 있다.즉, 숫자형 리터널 타입은 "숫자 타입" 안으로 들어간다.위 숫자 타입이 슈퍼타입(부모타입)으로 부를 수 있고, 밑의 리터널 타입이 서브타입(자식타입)으로 부를 수 있다.타입 호환성 공감수 0 댓글수 1 2025. 4. 28.
  • 4기 카카오 프론트 전체 스터디 - 리액트 1주차 (JSX, Props, 컴포넌트 구조) 1주차: JSX, Props, 컴포넌트 구조목표JSX 문법과 HTML과의 차이 이해Props를 통한 데이터 흐름 익히기컴포넌트 분리 및 재사용 기본토론 주제JSX와 HTML의 차이는 무엇인가?JSX 문법과 HTML과의 차이 이해function AboutPage() { return ( About Hello there.How do you do? );}위 문법이 jsx 문법이다. jsx는 javascript + xml을 합친 말이다.AboutHello there.How do you do?위 문법은 HTML이다.리액트는 무조건 "상위 태그"의 부모태그로 감싸있어야 한다. HTML은 뭐 그딴 거 없다.또한, jsx는 자바스크립트 기능도 지원하기 때문에 HTML보다 더 상위의 문.. 공감수 1 댓글수 1 2025. 4. 26.
  • 타입스크립트의 void와 never 타입 let a: void;a = undefined;이번에는 타입스크립트의 void와 never 타입을 다룰 것이다. 이번까지의 글로 기초적인 타입은 끝난다. (야호!)void 타입void이란 "공허" 즉, 아무것도 없다는 뜻이다. void는 아무것도 없음을 뜻한다. 예시 코드 >function func2(): void { console.log("hello");}물론 다음과 같이 변수의 타입으로도 void 타입을 지정할 수 있다. 그러나 void 타입의 변수에는 undefiend 이외의 다른 타입의 값은 담을 수 없다.let a: void;a = undefined;이때 tsconfig.json에 엄격한 null 검사 옵션을 해제하면 특별하게 void에도 null을 담을 수 있다.// "strictNullCh.. 공감수 0 댓글수 0 2025. 4. 25.
  • Next.js에서 'use client'를 사용하는 경우 최신 버전인 Next.js 15 기준으로 이야기하겠다.시작하기 전에..기본적으로 Next.js 는 "서버 사이드 렌더링" 으로 렌더링이 된다.리액트에서는 클라이언트 사이드 렌더링을 하는데, 이 부분에서 가장 큰 차이가 난다.SSR / CSR 이 개념은 다음 글을 참고하자.https://codingworld2002.tistory.com/216 SSR 과 CSR (서버 사이드 렌더링/클라이언트 사이드 렌더링)Next.js나 리액트를 배울 때, 서버 사이드 렌더링이랑 클라이언트 사이드 렌더링 이야기가 나온다. 간단하게 말하면 렌더링에서 차이가 나는 것인데,서버 사이드 렌더링은 "서버"에서 미리 렌더링codingworld2002.tistory.com근데, 이때 "여러 가지" 경우로 인해 클라이언트 사이드 렌더링.. 공감수 0 댓글수 0 2025. 4. 24.
  • 마이크로 서비스 아키텍처이란? 마이크로서비스란?마이크로서비스란 독립적인 서비스들의 모음이 경량화 API를 통해 통신하는 애플리케이션 아키텍처의 한 유형을 말한다.가장 최근 온라인 구매 사이트에 방문했던 때를 떠올려 보자. 제품을 검색하기 위해 사이트에 있는 검색창을 사용했을 것입니다. 이러한 검색이 하나의 서비스가 된다. 또는 관련 제품 추천을 봤거나 장바구니에 상품을 추가함 > 이러한 것들 역시 서비스. 이러한 마이크로서비스들이 합쳐질 때 완벽하게 작동하는 하나의 애플리케이션이 성립된다.더욱 효율적인 애플리케이션 개발 방식마이크로서비스 아키텍처는 하나의 애플리케이션 내에 있는 각 핵심 기능이 독립적으로 존재할 수 있도록 소프트웨어를 구축하는 클라우드 네이티브 접근 방식이다.애플리케이션의 요소들이 이러한 방식으로 분리되면 개발 팀과 .. 공감수 0 댓글수 0 2025. 4. 23.
  • Next.js에서 shadcn 사용하기 공식 문서 링크는 다음과 같다. 디테일한 건 공식 문서를 참고하자.https://ui.shadcn.com/docs/installation/next Next.jsInstall and configure shadcn/ui for Next.js.ui.shadcn.comshadcn이란리액트 ui 컴포넌트 라이브러리인 React MUI를 알 것이다. next.js에도 비슷한 게 있다. 그게 shadcn이다https://ui.shadcn.com/ Build your component library - shadcn/uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite f.. 공감수 0 댓글수 0 2025. 4. 22.
  • 타입스크립트의 Any타입 / Unknown타입 이번에는 "any타입"과 "unknown타입"에 대한 이야기를 해보겠다.any 타입단어에 힌트가 있다. 말 그대로 "모든 타입"을 자유롭게 사용할 수 있게 만드는 만능 타입이다.코드를 살펴보자.let anyVar: any = 10;anyVar = "hello";anyVar = true;anyVar = {};anyVar.toUpperCase();anyVar.toFixed();anyVar.a;만일 타입을 any로 선언하지 않고 number로 선언했다면 오류가 떴을 것이다. any로 선언하기에 문제가 생기지 않는다.any는 최대한 쓰지 말자.위 코드를 ts-node로 실행하면 런타임 오류가 발생한다.any 타입은 타입 검사를 받지 않는 타입이다. 문법과 규칙에서 자유롭지만 그만큼 위험하다.애초에 이런 식으로 .. 공감수 0 댓글수 0 2025. 4. 19.
  • Next.js를 이용한 포트원 결제 구현(테스트) Next.js와 포트원을 이용한 결제 시스템을 구축하고자 한다. 이 부분에서 진행되는 흐름을 글로 작성하고자 한다. 이 글이 다른 사람들에게도 도움이 되면 좋을 것 같다. 참고로 테스트 용도이다. 실제 결제 시스템은 이것보다는 조금 더 복잡하긴 하다...시작하기 전에..시간이 흐름에 따라 나의 글은 "옛날 말"이 될 가능성이 있다. 버전의 차이. 혹은 Next.js의 업데이트 등등이 있을 것 같다. 이 점을 참고해 주길 바란다. 또한. 이 글은 조금씩 추가 및 수정 가능성이 포함되어 있다.시작.코드 샘플이 있어서 쉽다. 코드 샘플은 밑 링크를 참고하라.https://github.com/portone-io/portone-sample/tree/main/nextjs portone-sample/nextjs at.. 공감수 3 댓글수 5 2025. 4. 18.
  • 타입스크립트의 enum 타입 타입스크립트에서 enum타입은 "열거형 타입"이라고 불리는 타입이다.이 타입은 자바스크립트에서는 지원하지 않고, 타입스크립트에서만 지원한다.일단 코드 예시부터 보자.enum Role { ADMIN, USER, GUEST,}열거형은 위와 같이 여러 개의 값을 나열하는 용도로 사용한다.사용하고 싶다면 enum를 선언해 주면 된다.// enum 타입// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입enum Role { ADMIN = 0, USER = 1, GUEST = 2,}const user1 = { name: "이정환", role: Role.ADMIN, //관리자};const user2 = { name: "홍길동", role: Role.USER, // 회원};const us.. 공감수 1 댓글수 4 2025. 4. 17.
  • TIL이 무엇인가? TIL이란?TIL은 Today I Learn 의 약어이다.한국말로 직역하면 오늘 내가 배운 것! 이라는 뜻.일일커밋 이라고 부르기도 한다. 오늘 공부 한 내용을 매일매일 기록하는 방법이라고 쉽게 이해하면 될 것 같다. (일종의 일기장이라고 보면 된다.)왜 함?목적은 두 가지.1. 매일 공부하는 것을 기록하기 위함.2. 성실하게 공부하고 그것을 커밋해서 잔디를 채우기 위함.사실. 2번 전략이 핵심이다. 다만 이 전략이 너무 유명해져서 면접관들도 알고 있다.그러나 나쁘게 보는 전략은 아니다. 절대로 마이너스되는 요소가 아니라는 것!토스의 프론트 리더분도 한다!https://github.com/milooy/TIL GitHub - milooy/TIL: Today I LearnedToday I Learned. C.. 공감수 2 댓글수 4 2025. 4. 16.
  • 타입스크립트의 타입 별칭과 인덱스 시그니처 이번에는 타입 별칭과 인덱스 시그니처에 대한 이야기를 해볼 것이다. 천천히 따라오자!타입 별칭타입 별칭이란, 여러 변수의 타입을 하나의 "타입"으로 모아서 선언한 이후 마치 변수처럼 쓸 수 있게 만드는 것이다. 예시코드를 살펴보자.// 타입 별칭type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};let user: User = { id: 1, name: '이정환', nickname: 'winterlood', birth: '1997.01.07', bio: '안녕하세요', location: '부천시',};User라는 타입을 따로 선언해 주고 이걸 user.. 공감수 0 댓글수 1 2025. 4. 15.
  • 인디해킹이란? 인디해킹이라는 개념 혹은 (직업?) 같은 것이 있다.인디해킹이란?심플하게 말하면 1인 개발자을 말한다. 혼자서 1인 프로덕트를 완성시키는 것이다. 프로덕트 안에는 결제를 넣어서 수익화를 한다.이 인디해킹이라는 개념은 외국에서 유명하다. 아직까지는 국내에 유명한 개념은 아니지만, 결국 널리 퍼질 것이라고 생각한다.levelsiolevelsio라는 인디해킹에서 가장 유명한 개발자가 있다. (사진 참고)이 사람은 무려 자신만의 프로덕트를 여러 개 만들어서 월에 1억을 넘게 번다. 그것도 "혼자서" 말이다.이 분의 sns는 다음 링크를 참고하자.https://x.com/levelsio X의 @levelsio님(@levelsio)🇪🇺@euaccofficial ✈️https://t.co/UVJczDtp9x $4.. 공감수 2 댓글수 4 2025. 4. 13.
  • 포트원으로 결제 모듈 개발하는 것에 대하여.. 이번엔  포트원을 이용해서 결제 모듈을 세팅하는 연습을 해볼 것이다. 언어는 Next.js를 채택하였다. 이 언어를 채택한 이유는 프론트엔드 진영에서 가장 핫하고, 풀스택으로 개발을 진행할 수 있기에 선택하였다.이거 왜 하는거임?"인디해킹"이라는 것이 있다. 이건 추후에 글을 작성할 것이다.개인적으로, 개발자가 풀스택. 즉 화면을 다루는 프론트와, 서버와 데이터를 다루는 백엔드를 할 수 있다면? 그리고 그 기술에 "결제 모듈"을 붙일 수 있다면? 이론적으로 보나, 실질적으로 보나 "하나의 완전한 프로덕트"를 만들어 낼 수 있다.게다가. 이제는 Next.js나 Remix 같은 풀스택 프레임워크가 등장하였으니, "1인 개발"을 하는 난이도가 기하급수적으로 낮아졌다. 심지어 커서 AI, bolt AI 같은 a.. 공감수 3 댓글수 5 2025. 4. 12.
  • 타입스크립트의 객체를 다루는 방식 이번에는 타입스크립트에서 객체를 다루는 방식을 이야기해 보겠다.일단 코드는 다음과 같으니 참고하길 바란다.예시 코드 >let user: { id?: number; name: string;} = { id: 1, name: '이정환',};let config: { readonly apiKey: string;} = { apiKey: 'MY API KEY',};// config.apiKey = "hacked";먼저, 객체를 선언한다. 여기까지는 자바스크립트와 동일하다.이때, 내가 객체에 할당하고 싶은 변수에 대한 타입을 작성해 두면 된다.객체 리터럴 타입let user: { id: number; name: string;} = { id: 1, name: '이정환',};객체 리터럴 타입이란, 중괄호.. 공감수 1 댓글수 1 2025. 4. 10.
  • 타입스크립트의 배열과 튜플 이번에 배운 것은 "배열과 튜플"이다. 타입스크립트 뿐 아니라, 언어를 배우면 꼭 알아가는 것이 배열이다.일단 코드는 다음과 같다. 참고하자.// 배열let numArr: number[] = [1, 2, 3];let strArr: string[] = ["hello", "im", "winterlood"];let boolArr: Array = [true, false, true];// 배열에 들어가는 요소들의 타입이 다양할 경우let multiArr: (number | string)[] = [1, "hello"];// 다차원 배열의 타입을 정의하는 방법let doubleArr: number[][] = [ [1, 2, 3], [4, 5],];// 튜플// 길이와 타입이 고정된 배열let tup1: [numb.. 공감수 1 댓글수 1 2025. 4. 9.
  • 타입스크립트의 기본 타입 타입스크립트에는 기본으로 제공되는 타입이 존재하고, 그 안에 원시타입과 리터럴타입이 존재한다.일단 코드는 다음과 같다.// numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num6: number = -Infinity;let num7: number = NaN;// stringlet str1: string = "hello";let str2: string = "hello";let str3: string = `hello`;let str4: string = `hello ${num1}`;// booleanlet bool1:.. 공감수 0 댓글수 0 2025. 4. 8.
  • Next.js의 Dynamic API 처리 Next.js 에서 다이나믹 API를 처리할 때, params를 비동기로 처리해야 한다. 이 부분에서 나는 정말 많은 빌드를 실패했다. 이 부분에서 많은 사람들이 빌드에 실패할 수 있을 것 같다. 공식문서링크는 밑의 링크를 참고하라.https://nextjs.org/docs/messages/sync-dynamic-apis Dynamic APIs are AsynchronousLearn more about why accessing certain APIs synchronously now warns.nextjs.org내 코드import { Suspense } from 'react';import MovieInfo, { getMovie } from '../../../../../components/movie-info.. 공감수 0 댓글수 1 2025. 4. 6.
  • conventional commits (커밋 메세지 작성 가이드라인) 깃허브에 commit을 남길 때, 다들 어떤 식으로 남기는가? 자신만의 규칙이 있는가? 아님 그냥 되는대로, 느낌대로?나의 경우는 "느낌"대로 올리는 것 같다. 물론 commit에는 내가 올린 기능에 대한 설명을 남기는 부분이지만, 그 "규칙"이라는 것에서는 느낌대로 올린다.이때, 사실 commit를 올리는 것에 정답은 없다. 그러나 일정한 프로덕트를 만드는 프로젝트에서는 이 commit 규칙이 필요하게 된다. (뿐만 아니라 깃 협업의 흐름도 정해져야 한다.)이때 쓰이는 스펙이 "conventional commits"이다.conventional commits 이란?일단 공식 문서의 링크는 다음과 같다.https://www.conventionalcommits.org/en/v1.0.0/ Conventiona.. 공감수 1 댓글수 1 2025. 4. 5.
  • 안드로이드 스튜디오 xml 코드 (텍스트/버튼) 대충 정리 안드로이드 스튜디오의 xml의 기본적인 버튼과 폰트에 대한 코드를 얼추 여기에 정리하겠다.(복습용으로 대충 썼다)🎨 1. 버튼 (Button) 스타일링 android:layout_height="wrap_content" android:text="클릭하세요" android:textSize="18sp" android:textColor="#FFFFFF" android:background="@color/blue" android:padding="10dp" android:gravity="center" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf=".. 공감수 0 댓글수 0 2025. 4. 4.
  • 타입스크립트의 동작원리 여기까지는 이론. 다음부터는 실제의 코드를 이야기할 것이다.대다수의 프로그래밍 언어는 어떻게 동작하는가?"컴파일" 을 들어봤을 것이다.컴퓨터는 이진수만 이해할 수 있다. 인간은 이진수를 이해하기 "매우" 힘들고 우리만의 언어를 사용하기 때문에, 중간 과정을 해석해 주는 컴파일이 반드시 필요하다.그리고 컴파일을 해주는 도구가 컴파일러이다.자바스크립트의 컴파일를 거치면 바이트 코드가 된다.물론 그냥 바로 바뀌는 것은 아니고 AST(추상 문법 트리)를 통해서 변환 후에 AST를 바이트 코드로 바꾸게 된다.그렇다면 타입스크립트는 어떻게 실행이 될까?쉽게 말하면. 타입스크립트는 대다수의 프로그래밍 언어처럼 컴파일하는 것과 비슷하게 작동하지만, 중간에 타입을 검사하는 과정이 추가된다.(이때에는 바이트코드가 아니고 .. 공감수 0 댓글수 0 2025. 4. 3.
  • 타입스크립트는 무엇인가? 타입스크립트는 2012년에 마이크로소프트의 개발자이자 C#의 창시자로 알려진 아주 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)의 손에서 처음으로 탄생했다.또한, 타입스크립트는 오픈소스이다.현재 많은 사람들이 이 소스의 개발 및 유지에 참여하고 있다.또한, 타입스크립트는 피할 수 없는 대세 프론트엔드 언어이다. 사실상 프론트엔드로 회사에 들어가고 싶다면, 타입스크립트를 무조건 배워야 한다.타입스크립트는 자바스크립트의 확장판이다.자바스크립트는 유연하다. 그게 장점이지만 또 단점이다. 프로덕트의 규모가 커지고 협업자가 많아질수록 언어의 유연함은 미래 가능성에서 많은 오류를 가져올 수 있다. 이 부분을 해결하는 것이 타입스크립트다.쉽게 생각하면, 자바스크립트에 타입을 넣어.. 공감수 0 댓글수 0 2025. 4. 2.
  • 깃 특정 부분 add 하는 방법 지금까지 그냥 git add .으로 모든 코드를 올리고 commit를 남겼다면, "특정 부분"만 add 하는 방법을 알아보자.(하는 방법은 되게 쉽다.)https://infinitecode.tistory.com/64 [Git] 특정 파일 혹은 폴더만 add하기당황하지않고 git Master가 되는 그 날까지. 지금껏 작업한 내용물을 add처리 할 때 뒤따라오는 경로를 .으로 하여 모든 수정내역들을 Staging Area로 이동하기만 했습니다. 그런데 특정 파일 혹은 폴더infinitecode.tistory.com https://70825.gitbook.io/git-tutorial/add-commit-push-deep/add-unit-file-and-folder 특정 파일/폴더만 add 하기 | Git T.. 공감수 0 댓글수 0 2025. 4. 2.
  • 한 입으로 먹는 타입스크립트 아실 분은 아시겠지만, 인프런에서 4월 1일 만우절 기념으로 몇 개의 강의가 무려 "1천 원"으로 팔리게 되었다.나도 몇 가지 강의를 샀는데 그 중 하나가 타입스크립트 관련 강의였다.(비트코인도 사고, 자바스크립트도 사고, 노션 데이터베이스도 사고, 도커도 사고.. 아무튼 많이 샀다.)타입스크립트를 좀 더 깊게 배우고 싶었는데, 정말 좋은 기회가 온 거 같다. 배운 부분을 글로 작성하고자 한다. 추후에코드를 깃허브에 푸시할 수 있는데, 그건 따로 링크로 올리도록 하겠다.인프런 강의 링크https://inf.run/EvrS5 한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | , 거짓말 같은 이벤트 2탄 🎁 아래의 강의들도 .. 공감수 4 댓글수 8 2025. 4. 1.
  • 깃허브 포크 (Fork)하는 방법 깃허브의 오픈 소스에 기여하고 싶거나, 혹은 관련 코드를 가져와서 자신만의 오브젝트를 디벨롭할 때 많이 쓰이는 "Fork".일단 포크의 정의는 다음과 같다. Fork는 다른 사람의 원격 저장소를 복제해서 내 저장소를 따로 만드는 방법이다. 쉽게 말하면, 복제하고 내 저장소로 따로 가져오는 것.자, 그럼 어떻게 하는 것일까? (많이 쉬움)TMI > 그리고 Clone도 있는데 차이는 무엇일까? 다음 글을 참고하자.https://ittrue.tistory.com/90 [Git / Github] 포크 (Fork) 하는 방법 (오픈 소스 프로젝트 복제하기)Fork란? 오픈 소스 프로젝트를 공부하거나 Contributors가 되고 싶을 때, 해당 원격 저장소(Remote Repository)를 자신의 원격 저장소로.. 공감수 0 댓글수 0 2025. 4. 1.
  • 토스에서는 "이렇게" 프론트엔드 서비스를 최적화한다. 프론트엔드가 하는 일은 여러 개가 존재하지만, 그중 "성능 최적화"가 있을 것이다.여러 부분의 성능 최적화가 있는데, 토스는 어떤 식으로 최적화를 할까? 그 고민과 답을 다음 영상에서 찾아보자.https://www.youtube.com/watch?v=upUON56UEYo https://toss.tech/article/firesidechat_frontend_9 프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다! | EP.9 모닥불프론트엔드 개발자라면 한 번쯤 고민해봤을 성능 최적화! 토스 개발자들이 전하는 최적화의 본질과 실무 노하우를 공개합니다. 초기 로딩부터 런타임 최적화까지, 토스의 박서진, 박건영, 조유toss.tech 공감수 0 댓글수 0 2025. 3. 30.
  • Next.js의 기존 프로젝트에서 ts 추가하는 법 ✅ 1. TypeScript 패키지 설치bash npm install --save-dev typescript @types/react @types/nodetypescript: TypeScript 컴파일러@types/react, @types/node: React와 Node.js의 타입 정의 파일✅ 2. tsconfig.json 자동 생성bash npx tsc --init또는 Next.js가 자동으로 생성하도록 하기:bash touch tsconfig.json npm run dev🚀 npm run dev 실행 시, Next.js가 기본 tsconfig.json 파일을 자동으로 생성해 줌.✅ 3. 파일 확장자 변경프로젝트 내의 파일들을 .js → .ts 또는 .tsx로 변경.컴포넌트 파일 → .tsx서버 액션.. 공감수 0 댓글수 0 2025. 3. 28.
  • [VSCode]한글이 깨져 보이는 파일 인코딩 변경하기 커서 콘솔에 한글이 깨지는 버그가 있어서 찾게 되었다. vs code도 똑같이 통하니 참고할 것https://dewble.tistory.com/entry/change-encoding-of-a-file-that-looks-broken-in-korean [VSCode]한글이 깨져 보이는 파일 인코딩 변경하기파일의 인코딩 문제로 인해 한글이나 특수 문자가 깨져 보일 때가 있습니다. 이런 문제를 해결하기 위해 VSCode를 사용하여 파일의 인코딩을 변경하는 방법을 소개하겠습니다. 1. 원본 파일을 VSCoddewble.tistory.com 공감수 0 댓글수 0 2025. 3. 27.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.