profile
keep on pushing

TypeScript의 구조적 타이핑

데브먼트 타입스크립트 스터디가 끝나고 최종 발표를 위해 정리한 글 입니다.우리가 배운 Javascript는 동적 타입 언어입니다. Javascript에서는 컴파일시 타입을 정하지 않고 런타임까지 타입에 대한 결정을 끌고 갈수 있어 유연성이 높습니다.타입스크립트는 정적

2025년 2월 19일
·
0개의 댓글
·

[Vue.js] TIL : v-model, setup script, 생명주기 훅

v-model디렉티브는 양방향 데이터 바인딩을 지원하는 속성이다.양방향 데이터 바인딩이란 화면의 데이터와 뷰 인스턴스가 항상 일치하는 것이다.v-model디렉티브는 간편한 양방향 바인딩기능을 지원하지만, 내부적으로는 아래 코드와 같은 구조로 동작한다.

2025년 2월 19일
·
0개의 댓글
·

모놀리식, 멀티레포, 모노레포의 차이

typescript 스터디에서 모노레포에 관한 이야기가 나와서 어떻게 모노레포가 등장하게 되었는지(배경)과 이를 해결하기 위한 다른 방법(멀티레포) 그리고 앞선 두 개발전략의 어떤 점을 모노레포가 해결했는지에 대한 글을 작성하게 되었다.모노레포가 등장하기 전에는 모놀리

2025년 2월 16일
·
0개의 댓글
·

[Vue.js] watch 와 watchEffect

🌟 source가 변경되면 콜백함수를 실행한다.computed와 watch의 비교 및 사용사례computed()는 결과값을 반환하지만, watch()는반응형 데이터를 변경했을 때 특정 동작을 실행computed → vue 인스턴스의 상태(ref, reactive 변수

2025년 2월 13일
·
0개의 댓글
·

🍊 JejuMonth 프로젝트 회고

약 5주간 진행했던 프로젝트의 배포와 발표가 마무리 되었다. 아직 고칠점이 많이 보이는 프로젝트 이지만 잠시 쉼표를 찍고 다시 나아가자는 의미에서 회고로 기록해보자.프로젝트 결과물 jeju month 보러가기 jejumonth-github이번 프로젝트의 요구사항은 기본

2025년 2월 10일
·
0개의 댓글
·

useEffect가 필요하지 않을 수도 있습니다.

REACT 공식문서 이런 상황에서는 Effect가 필요합니다. 외부 시스템과 “동기화”해야할 때 주로 React 코드를 벗어난 특정 외부 시스템과 동기화 하기 위해 사용된다. 여기서 외부 시스템은 브라우저 API, 서드파티위젯, 네트워크 등이 있다. > 예) us

2025년 2월 6일
·
0개의 댓글
·

🍊JWT 토큰 만료 처리하기 / axios interceptor를 커스텀 훅으로 사용하기

이번 포스트에서는 JWT를 사용해서 토큰 만료를 판단하고 처리하는 과정에서 겪은 고민과Axios Interceptor에서 React Hook 및 Custom Hook을 사용하기 위해 고민했던 과정을 담았습니다.해당 프로젝트에서는 주어진 백엔드 api를 이용해서 유저기능

2025년 2월 3일
·
0개의 댓글
·

Tailwind에서 동적 스타일링 하기

앞선 포스팅에선 공통 컴포넌트를 만들기 위한 첫번째 방법인 도메인 로직과 뷰를 분리하는 방법에 대해서 알아보았다. 이번에는 두번째 방법인 확장성있는 UI를 만들어보자. 이번 포스팅에서는 현재 진행중인 프로젝트에서 사용하는 버튼 컴포넌트를 예시로 들어보겠다. "버튼"

2025년 1월 17일
·
0개의 댓글
·
post-thumbnail

컴포넌트를 만들 때 고려해야할 점.

현재 프로젝트에서 로그인과 회원가입기능을 만드는 중이다. 이번 프로젝트에서는 Supabase를 사용해서 로컬로그인과 카카오 로그인을 모두 구현하고자한다. 카카오 로그인은 로그인 버튼만 하나 생성하고 내부 처리는 모두 supabase, kakao login api에

2025년 1월 16일
·
0개의 댓글
·
post-thumbnail

Supabase Kakao Login 기능 구현하기 - 1 - 카카오 개발자,supabase 설정하기

Supabase 카카오 로그인 공식문서카카오 Developer카카오 로그인 버튼 로고이번에 구현할 기능은 supabase에서 제공하는 카카오 로그인 공식문서만 정독해도 만들기 어렵지 않은 기능이다. 카카오 Developer링크에서 로그인후 카카오 로그인을 사용할 어플

2025년 1월 14일
·
0개의 댓글
·
post-thumbnail

스토리북 기능 톺아보기 -1

스토리북(Storybook)의 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 됩니다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 생각하시면 이해가 편하실 것 같습니다.

2024년 12월 4일
·
0개의 댓글
·

프로그래머스 뉴스클러스터링 (카카오 기출)

https://tech.kakao.com/posts/344이 문제는 자카드 유사도 J(a,b) 를 설명해주고 자카드유사도 값을 직접 계산하는 프로그램을 작성하는 문제이다. 자카드 유사도를 구하는 공식은 간단하다. 교집합을 합집합으로 나눈 수이다. 이 값은 늘

2024년 10월 30일
·
0개의 댓글
·

Javascript의 클래스

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/class객체를 생성할 수 잇는 템플릿(청사진, 틀)클래스를 이용해서 만든 객체를 인스턴스(instance)라고 한다.apple

2024년 10월 20일
·
0개의 댓글
·
post-thumbnail

React의 createPortal

| createPortal 공식문서 바로가기흥미를 끄는 리액트의 기능이 생겨 이를 알아보는 글입니다.이름도 무려 포탈이다..! 포탈이란 무엇인고? 게임을 하다보면 캐릭터가 어떤 포탈 속에 쏙 빨려들어가서 이곳에서 저곳으로 이동하게 된다.리액트 공식문서에서는 create

2024년 9월 30일
·
0개의 댓글
·
post-thumbnail

IntersectionObserver를 활용한 무한스크롤 구현하기

무한스크롤\_작은용량원티드 프리온보딩 챌린지의 사전과제로 intersection observer를 활용하여 무한스크롤 구현하기를 해보았다.사실 전에 프로젝트에서 이미 react-query의 useInfiniteQuery를 활용하여 만들어본적이

2024년 9월 25일
·
0개의 댓글
·
post-thumbnail

Next.js 페이지 라우터 / 레이아웃 설정하기

Next.js의 페이지 라우터는 page 폴더의 구조를 기반으로 한 라우팅 방식으로써, React Router 처럼 페이지의 라우팅기능을 제공한다.srcpages \- api \- \_app.tsx 페이지의 역할은 하지 않으나, Next 앱의 모든 페

2024년 9월 15일
·
0개의 댓글
·

Next.js ISR과 On-Demand-ISR

증분 정적 재생성 이란, SSG 방식으로 생성된 정적 페이지를 일정시간을 주기로 다시 생성하는 기술이다.빌드타임에 생성된 페이지에 유통기한을 설정유통기한이 끝나기 전에는 계속 똑같은 페이지 응답유통기한이 끝난 이후에는 Next서버에서 다시 새로운 페이지를 정적으로 생성

2024년 9월 15일
·
0개의 댓글
·
post-thumbnail

Next.js SSG를 정적, 동적경로에 적용하기

이란 SSR의 단점을 보완하는 사전렌더링 방식으로 빌드타임에 페이지를 사전 렌더링해둔다.SSG에서는빌드타임에 백엔드 서버에 데이터를 요청하기 때문에 데이터의 양이 많아서 응답 속도가 느리더라도 즉,장점 ) 사전렌더링에 많은 시간이 소요되는 페이지더라도 사용자의 요청에는

2024년 9월 15일
·
0개의 댓글
·

Next.js SSR getServerSideProps

가장 기본적인 사전 렌더링 방식브라우저 접속 요청이 들어올 때 마다 사전렌더링을 진행페이지 내부의 데이터를 항상 최신버전으로 유지할 수 있음데이터 응답속도가 느려지면, 사용자는 로딩을 기다려야 함루트 페이지 컴포넌트를 서버사이드 랜더링방식으로 동작하도록 만들어 보자 i

2024년 9월 15일
·
0개의 댓글
·
post-thumbnail

Next.js 사전렌더링과 데이터 패칭

사전렌더링 포스트에서 언급하지 않고 넘어갔던 데이터패칭부분을 정리해 보려고 한다.단점) 초기 접속 요청으로 부터 데이터 로딩까지 오랜 시간이 걸림이유 ) 컴포넌트 마운트 시점에 데이터 요청이 이루어지기 때문기존의 리액트앱에서는 FCP가 이루어진 시점 = 컴포넌트가 마운

2024년 9월 15일
·
0개의 댓글
·