[Typescript] Template Literal Type의 빛과 어둠 (Feat. Date String)
안녕하세요. 준찌입니다. 이번 포스팅에서는 Template Literal Type 문법으로 타입을 작성했을 때 얻을 수 있는 장점과 단점에 대해 알아보려고 합니다. 해당 개념에 대해 간략히 소개하고, Date String 타입을 Template Literal Type
[꼭꼭] React Query 계층 구조 도입하기
우아한 테크코스에는 코치와 커피 또는 식사를 함께 할 수 있는 코치와의 쿠폰 제도가 있습니다. 쿠폰을 받으면, 이를 준 사람에게 신청하여 커피나 식사를 함께 하는 방식으로 만남을 갖는 우아한 테크코스 만의 문화인데요. 우리는 위와 같이 쿠폰 문화와 유사한 Coffee
[꼭꼭] 우리들의 컴포넌트
우아한 테크코스에는 코치와 커피 또는 식사를 함께 할 수 있는 코치와의 쿠폰 제도가 있습니다. 쿠폰을 받으면, 이를 준 사람에게 신청하여 커피나 식사를 함께 하는 방식으로 만남을 갖는 우아한 테크코스 만의 문화인데요. 우리는 위와 같이 쿠폰 문화와 유사한 Coffee
[꼭꼭] Context API 잘 사용해보기
우아한테크코스 내부의 쿠폰 문화 (커피챗과 유사한)를 온라인으로 가져가고 있는 꼭꼭 프로젝트는 코치와 크루, 크루와 크루 간의 대면 만남을 유도하고자 쉬운 쿠폰의 관리, 사용을 목적으로 프로덕트를 개발하고 있습니다.안녕하세요. 우아한테크코스에서 프론트엔드 개발자로 꼭꼭
[꼭꼭] 우리만의 HTTP 캐싱
안녕하세요. 우아한테크코스에서 프론트엔드 개발자로 꼭꼭 프로젝트에 참여중인 준찌라고합니다. 저희는 이번 프로젝트에서 성능 최적화를 위해 정적 리소스를 캐싱하고자 하였습니다. 이 포스팅은 왜 캐싱을 적용하게 되었는지 부터 어떻게 진행하였는지에 대해 정리하고 있습니다. 재
백엔드라는 바람에도 흔들리지 않는 나의 코드
프론트엔드 코드가 API 서버가 정의한 응답 스키마에 철저히 의존하고 있을 때 응답 스키마가 변경된다면? 우리는 모든 remote data 호출 코드를 조사해 수정해주어야 합니다. 이러한 강한 의존성으로 인해 유지보수가 힘들어 질 때 즈음 새로운 아이디어를 얻게 되었습
로직을 공유하는 5가지 방법 (feat. React Class Component)
👻쥬니어가 제안하는 로직을 공유하는 5가지 방법👻 리액트 개발자신가요? 당신은 어떻게 로직을 공유하고 있나요? (???: 커스텀 훅이요!) 당신은 Modal UI를 개발해야하는 프론트 개발자입니다. 이 때 최신 리액트 개발자라면... 모달을 사용하는 컴포넌트에서
[우아한 테크코스 #12] 👻 setState 👻로 돌아보는 12주차 회고록
안녕하세요 준찌(혹은 찌구리, 준조림, 준구리)입니다. 이번 주차는 페어주차였습니다 !! 이번 페어 프로그래밍 간에는 페어노트를 활용해보았는데요. 저번 페어에서 느꼈던 프로젝트 매니징 영역에서의 문제를 해결하고자 제안해보았습니다.(이번 페어분이 문서화를 좋아하시는 분이
[우아한테크코스 #11] 인라인 스타일과 함께하는 11주차 회고
이번주는 코로롱이 끝난 주..! 정확히 수요일날부터 나갈 수 있었지만.. POCO의 권유로 재택으로 코스를 진행했다..(ㅇㅈㅇㅈ 일어나서 준비다했지만 다시 잘 수 있어서 행복했습니다..)좀 자고 일어나니 스크럼 시간이었기에.. 진행 ! 스크럼 시간에는 항상 외롭다. 모
[우아한테크코스 #8] API 서버를 배포해봅시다
아주 간단합니다. 백엔드 API서버를 하나 만든다고 생각하시면 될 것 같아요 터미널에서 node index.js 를 작성하면 백엔드 서버가 '로컬'에서 실행됩니다. 로컬에서 실행되는 경우 3000포트로 서버를 열어 놨으므로 localhost:3000 주소로 요청을 보내
[우아한테크코스 #7] Browser History API를 통해 SPA처럼 라우팅을 적용해보자
SPA는 Single Page Application(싱글 페이지 어플리케이션)의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다.간단한 어플리케이션을 SPA처럼 동작하게 만들어볼거에요.tab 버튼을 누르면 해당 탭에 맞는 화면이 나타난다.tab 버튼을
[우아한테크코스 #6] 추상화가 좋을지 판단해보자
VideoList 종류가 여러 개이다!저장된 비디오들을 보여주는 Saved Video List 영역검색된 비디오들을 보여주는 Search Video List 영역처음에 이 두 개의 UI 영역을 하나의 클래스로 개발하였습니다. 추상화 하기 전 방식 하지만 다음과 같은 문
[우아한테크코스 #6] 네트워크 통신 테스트
요번 유튜브 미션은 다음과 같은 명세를 따릅니다.유튜브 검색 API를 사용하여 응답 데이터를 나의 어플리케이션에 띄워야 하기에 네트워크 통신을 하기위한 코드를 구현해야합니다 ! 다음 코드는 네트워크 요청을 수행하는 모듈입니다.generateFetcher : fetche
[우아한테크코스 #6] 데이터 캐싱하기
캐싱이란? > 컴퓨팅에서 캐시는 일반적으로 일시적인 특징이 있는 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층입니다. 따라서 이후에 해당 데이터에 대한 요청이 있을 경우 데이터의 기본 스토리지 위치에 액세스할 때보다 더 빠르게 요청을 처리할 수 있습니다. 캐
[우아한테크코스 #5] 오해해버린 설계
우선 저번 미션에선 설계를 해두고 큰 모듈에서 작은 모듈로 개발해나갔습니다. 그러다보니 다음과 같은 문제점들이 있더군요 !!😳 작은 모듈들이 각자의 일을 잘 하지 못했다! (각자의 일을 잘하도록 리팩토링 하는 과정이 매우 길어졌습니다) 😳 작은 모듈들이 추가되어야
[우아한테크코스 #4] 이벤트를 관리해보자 (당신이라면 어떻게 하시겠습니까)
만약 당신이라면 다음과 같은 상황에서 어떻게 이벤트를 바인딩 할 것인가..!A class 에서 비즈니스 로직을 담은 핸들러를 멤버로 갖고 있고, B Class 에서 A의 핸들러를 DOM 에 바인딩 하려고 한다면 ?저는 크게 세 가지 방법을 떠올릴 것 같아요.A와 B는
[우아한테크코스 #3] UI와 도메인 로직의 분리, 그리고 모델링
페어와 함께 생각해본 설계도를 도식화해보면 위와 같습니다. 여기에서의 각 Entity는 다음과 같은 역할을 합니다LottoGameManager : 게임을 시작하고, Domain 과 View 를 셋팅하는 역할을 수행합니다. 도메인의 메소드를 직접 호출하여 데이터를 변형하
[우아한테크코스 #3] 나의 디자인 패턴 혐오증
디자인 패턴 혐오증이라는 제목이지만, 사실 혐오하지 않습니다. 디자인 패턴에 매달려 좋은 아이디어를 잃어
[우아한테크코스 #2] class, 그리고 static method
우리는 클래스를 만들고, 이 클래스를 통해 여러 객체들을 만들어낼 수 있어요. 하지만 우리가 흔히 알고있길 class를 선언 하지 않고도 object literal로도 객체들을 만들 수 있어요. 그렇다면 우리가 클래스를 선언하여 객체를 만들땐 적절한 다른 이유가 있어야