티스토리

만규야그래선안돼

검색하기

블로그 홈

만규야그래선안돼

minkyunoori.tistory.com/m

화이팅

구독자: 4

방명록 방문하기

공지 공지 모두보기

주요 글 목록

Tailwind 4.0 새로워진 점 이전 두 게시물에 이어 4.0에서 새로 도입되고, 변경된 점들을 알아보자 1. 향상된 고성능의 엔진 도입 프레임워크를 다시 만든 수준으로 아키텍처 및 속도면에서 큰 개선을 이뤘다고 한다. 아래 표에서도 보이듯이, 빌드속도가 대량 개편되었다고 한다. 특히 flex, col-span-2나 font-bold와 같이 사용중인 속성을 재사용하는 증분 재빌드의 경우 대폭 속도가 상향되어 버전업을 하는 것만으로도 속도 개선을 느낄 수 있다고한다. 2. 현대 웹을 위한 Tailwind v4.0 3.0이후 웹 플랫폼의 많은 발전이 이루어졌고 4.0버전에선 이 최신 웹기술을 최대한 활용한다고 한다. @layer을 통해 theme, base, componenets, utilities 계층을 명확히 구분이 가능하며 스타일간.. 공감수 0 댓글수 0 2025. 4. 16.
Tailwind V4.1 달라진 점 저번 시간에 우연히 발견한 베타 버전이 아닌 정식 4.0버전의 릴리즈 공식 홈페이지를 가면 4.1버전이 나온 것을 볼 수 있다. 4.0보다는 변경사항이 적으나 그래도 신기한게 몇가지 있어 나열해보자면 4.1 버전의 변경점 1. text-shadow text-shadow-색상 지정을 통해 텍스트 그림자를 적용할 수 있게 되었다.제목이나 강조하고픈 텍스트에 스타일링 적용하면 좋을 것 같은 유틸리티이다. 예전엔 글꼴을 특이한걸 고르거나 같은 글씨체에 relative와 absolute를 활용해 위와같이 표현할 수 있었는데 간편한 거 같다. 2. maskcss 마스킹 기능을 활용가능한 유틸리티로 이미지 혹은 그라데이션을 통해 요소를 가리거나 드러낼 수 있게 되었다. 3. 향상된 이전 브라우저 호환성 최신 기능.. 공감수 0 댓글수 0 2025. 4. 10.
Tailwind V 4.0 config.js 어디로? 개요 Tailwind를 새로운 프로젝트에서 사용 중 tailwind.config.js가 작동하지 않는 문제를 겪었다. Next.js를 15버전을 사용하며 바뀐게 있나 확인하며 여러 시도를 했으나 버그는 고쳐지지 않고 오히려 이외의 라이브러리 버전 및 postcss.config, global.css등 어디까지 내가 바꾼거였는지 헷갈렸다. Tailwind 버전을 보니 낯선 4로 시작하는 버전이었다(4.13). 설마 4버전에서 config 파일관련 변경사항이 있었나 했는데 맞았다... Tailwind V4.~ config 파일 적용 가장 큰 변화 중에 하나로 v4 부터는 Content-Aware Engine이 도입되어 설정없이 사용이 가능하다고 한다. 따라서 기존에 tailwind.config.js에 작성.. 공감수 1 댓글수 2 2025. 4. 8.
리액트에서의 렌더링 발생 렌더링 이전에 브라우저 렌더링 과정에 대해서 배운적이 있는데 리액트에서도 이와 유사하게 렌더링이 이루어지곤 한다. 리액트에서 렌더링(Rendering)은 컴포넌트가 state와 props의 값을 기반으로 UI를 생성하고 DOM에 결과를 업데이트하는 과정이다. 리액트에선 크게 3가지 방법으로 렌더링이 발생하곤 한다.1. 초기 렌더링 : 컴포넌트가 처음 화면에 나타날 때 발생 2. 업데이트 렌더링 : 상태(state)나 속성(props)가 변경될 때 발생- setState가 실행되는 경우- useState의 setter가 실행되는 경우- useReducer의 dispatch가 실행되는 경우- 컴포넌트의 keyprops가 변경되는 경우 따라서 key를 임시의 index로 지정하면 안되는경우가 이 경우에 해당된.. 공감수 0 댓글수 1 2025. 4. 2.
함수형 컴포넌트 함수형 컴포넌트이전 시간에 배운 클래스형 컴포넌트와 달리 함수 형태로 정의되며, 더 간결하고 직관적인 방식으로 UI를 표현이 가능함 특징생명주기 메서드의 부재 : props를 받아 단순히 리액트 요소만 반환하는 함수임함수형 컴포넌트와 렌더링된 값 : 클래스형 컴포넌트의 props는 this로부터 가져오고 this가 가리키는 객체의 경우 변경이 가능하기에 변경된 값을 읽어 render을 비롯한 다른 메서드가 실행된다. 반면 함수형 컴포넌트의 경우 this에 바인딩된 props가 아닌 props자체를 받기에 값이 변경 불가하고, 해당 값을 그대로 사용하게 된다.함수 형태로 정의 :함수형 컴포넌트는 단순한 JavaScript 함수로 정의됩니다. JSX를 반환하며, 반드시 return 문 안에 UI 요소를 포함.. 공감수 0 댓글수 0 2025. 4. 1.
클래스형 컴포넌트 현재는 비교적 함수형 컴포넌트가 많이 사용되지만서도 아직까지 클래스형 컴포넌트 형태를 사용하거나 기존 만들어진 클래스형 컴포넌트 형태를 유지하는 곳도 많다 클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의되며, 생명주기 메소드를 사용할 수 있으며 내부 상태를 가질 수 있어 데이터 변경에 따른 렌더링을 감지 및 관리할 수 있다 클래스형 컴포넌트의 구조 1. 클래스를 선언하고 만들고 싶은 컴포넌트를 extends한다.(React.Component 또는 React.PureComponenet)import React from 'react'class Samplecomponent extends React.Component { render() { return Sample Component }} 2. p.. 공감수 1 댓글수 1 2025. 4. 1.
JS - Module Pattern 디자인 패턴 디자인 패턴은 기본적으로 소프트웨어를 개발하는 과정에서 문제를 해결하기 위한 일반적인 접근 방식이나 코드 설계의 규칙을 의미한다이러한 패턴을 통해 코드의 재사용성을 높이고, 효율적으로 문제를 해결하는데에 활용된다 이러한 디자인 패턴에는 목적에 맞게 다양한 패턴들이 존재하며 패턴의 개념에 기반해 현대의 웹 개발에서도 다양한 패턴으로 발전하고 있다 예를들어, React의 어플리케이션에서 중요한 역할을 하는 Hooks의 경우 Reducer패턴을 활용해 복잡한 상태변화를 단일 액션으로 처리하는 패턴으로도 볼 수 있다 useEffect의 경우 컴포넌트가 렌더링될 때 특정 작업을 실행하게 해주는 옵저버 패턴에 해당한다 모듈 패턴 모듈 패턴은 캡슐화와 네임스페이스를 제공해 코드의 구조화, 유지보수 충돌.. 공감수 0 댓글수 0 2025. 3. 30.
불변객체와 순수 컴포넌트 불변객체 : 생성 후에 그 상태를 변경할 수 없는 객체 불변객체는 다음과 같은 특징을 가진다. 1. 상태 변경 불가 : 한 번 생성된 후엔 내부 상태가 변경되지 않음 2. 수정 시 새 객체 생성 : 데이터 변경이 필요한 경우, 기존 객체를 수정하는 대신 변경된 값을 가진 새로운 객체를 생성함 3. 원존 보존 : 원본 데이터는 항상 그대로 유지// 일반 객체(가변 객체)const user = { name: "민수" };user.name = "수민"; // 원본 객체가 변경됨// 불변 객체 방식const user = { name: "민수" };const newUser = { ...user, name: "수민" }; // 새 객체 생성, 원본은 유지 이러한 불변 객체, 객체의 불변성은 함수형 프로그래밍의 핵.. 공감수 0 댓글수 0 2025. 3. 29.
Vue 템플릿 문법 Vue템플릿 문법은 Vue로 화면을 조작하는 방법을 의미한다 크게 데이터 바인딩과 디렉티브가 존재한다 데이터 바인딩 : Vue인스턴스에서 정의한 속성들을 리액트, Next.js에선 흔히 { } 하나만 넣어 데이터를 바인딩하지만, Vue에선 {{ }} 두 개가 쓰인다 { title } // React{{ title }} // Vue.js 디렉티브 : 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있음 Hello Vue.js 추가로, v-model, v-for, v-bind같은 요소들이 Vue의 디렉티브에 해당된다 공감수 0 댓글수 0 2025. 3. 22.
Next.JS caching(2) Full Route Cache와 Client-Side Router Cache 개요캐싱 2025.01.05 - [코딩/Flex프로젝트] - 재테크 블로그 프로젝트 (12) - 리팩토링 [Next.js caching ] 이전 글에서 Next의 캐싱 중 Request Memoization, DataCache에 대하여 다루어 보았다 Next.js Caching (latest ver.) Next.js에선 여러가지 캐싱 방식을 제공하고, 각 캐싱 방식들은 다른 목적, 시기, 실행 위치가 다르다. Next.js에서는 성능 향상과 비용 절감을 목적으로 선택 해제하지 않는 이상 가능한 많이 캐싱한다. 아래 사진은 빌드 시 그리고, 정적 경로가 처음 방문될 때의 동작을 보여준다. 캐싱 동작은 경로가 (정적,동적) 렌더링 방식과 데이터의 캐싱 여부와 초기 방문 혹은 후속 네비게이션에 따른 요청인지에.. 공감수 1 댓글수 0 2025. 3. 2.
Infinite Scroll 무한 스크롤 Infinite Scroll 무한스크롤화면을 아래로 스크롤 할 때 콘텐츠가 지속적으로 로드되어야 하는경우 페이지네이션 대신 무한스크롤이 사용된다 장단점으로는 다음과 같다 장점1. 새로운 콘텐츠 조회의 편리함 : 다음, 더 보기와 같은 상호작용 없이 바로바로 로드가 가능 2. 모바일 기기에 적합 : PC에서도 마찬가지로 작은 뷰 구성엔 적합한 경우가 빈번 단점1. 특정 콘텐츠 조회의 어려움 : 특정 위치의 콘텐츠를 조회 및 기억하기가 어려움 2. 페이지 속도의 감소 : 콘텐츠가 방대할 수록 로드하는데에 더 많은 시간이 소요됨 3. 푸터가 fixed가 아닌 경우 조회 지연 장단점이 명확한 만큼 내가 구현하려는 곳의 성질에 맞게 체계적이고 조건에 맞는 컨텐츠가 조회되어야하는 경우엔 페이지 네이션, 단순히 무한.. 공감수 1 댓글수 0 2025. 3. 1.
엔터 이벤트가 두 번 발생하는 경우 Input의 빈번한 사용과 문제 발생프로젝트에서 텍스트를 작성하고 post하는 과정은 매우 빈번하다 검색창, 채팅, 블로그 글, 회원가입, 로그인 등 하지만, 가끔 위 사진과 같이 애를 먹는 경우가 있는데 다름 아닌 enter 이벤트를 통해 입력 값을 처리할 때 종종 등장하곤 한다 위와 같은 상황이 발생하는 경우는 다음과 같다 1. 영어가 아닌 한글을 작성 후 Enter를 클릭하는 경우2. 한글 작성 후 스페이스바를 누르지 않고 바로 Enter를 클릭하는 경우 const handleKeyDown2 = async (e: React.KeyboardEvent) => { if (e.key !== "Enter") return; setLogs2((prev) => [...prev, message2]);.. 공감수 0 댓글수 0 2025. 2. 28.
Vue 스타일 가이드 배워보기 개요 현재 프로젝트에서는 팀원 3명 모두 새롭게 Vue를 사용해서 개발하고있다. 프로젝트 코드가 일관되게 유지하고자 여러 컨벤션들이랑 룰들을 미리 정했다. 1. 상세한 코드리뷰2. 변수, 함수, 파일, 폴더 명명 규칙 수립3. prettier, esLint와 같은 코드 포매팅 tool을 통한 코드 구조 통일화 하지만 우리끼리 규칙을 정하고, 좋은 코드를 찾고 하는건 귀찮고 더군다나 새로운 언어를 접한 우리 팀의 입장으로서는 반갑지 못한 일이었다. 위에서 언급한 방법들을 지키며, Vue에서 권장하는 방식으로 개발을 할 수 있는 방식이 있으니 그건 바로 Vue 스타일 가이드이다. https://ko.vuejs.org/style-guide/ Vue.jsVue.js - The Progressive JavaS.. 공감수 1 댓글수 0 2025. 1. 23.
Vue 공식문서와 함께 프로젝트 실행 개요 Vue 현재 진행중인 프로젝트에서 난 FE파트 PL을 맡게 되었다. 원래대로라면 Next.js로 진행하려던 프로젝트였을텐데.. 팀원들의 고민과 vue 추천으로 인해 끝내 Vue.js로 프로젝트를 작업하게 되었다. 물론, 프로젝트에 걸맞는 이유들이 있어 설득된 것이지만, 분명 프로젝트에서 활용될 Next의 장점들도 많다고 생각했다. 결과적으로, 내가 쓰고싶었던 건 Next.js였으나 사실 Next에 대해서 잘 아는 것보다 Vue.js를 잘몰라서 뭔가 팀원들에게 강하게 의견제시를 못하지 않았나 싶다. 단순히 한 기술에 대해서 잘 이야기할 수 있는건 단순 그 기술에대해서 정보를 나열할 때고, 대조를 하는경우 그 대조군에 대한 이해가 필요하다는 걸 깨달은 한 주 였다. 그럼 이제 내 친구가 될 Vue에 대.. 공감수 0 댓글수 0 2025. 1. 17.
재테크 블로그 프로젝트 (12) - 리팩토링 [Next.js caching ] 개요 캐싱 캐싱은 서버가 동일한 요청에 대해 매번 데이터베이스나 외부 API에 접근하지 않고, 미리 저장된 데이터를 빠르게 반환함으로써 응답 시간을 단축하고, 서버의 부하를 줄이는 기술이다. 동일한 콘텐츠를 보여주는데 api를 매번 새롭게 요청 할 경우 네트워크 부하 및 성능 저하가 발생한다. 그래서 매번 최신 데이터가 필요하거나 데이터 갱신이 자주 이뤄져야하는게 아닌경우 캐싱을 활용해 api 요청방식의 전략을 잘 짜는 것이 중요하다. 나의 경우 주가 그래프 파트 및 일부 요소에만 적용을 했는데 Next JS에서 제공하는 캐싱 개념과 우리 서비스에 적합한 캐싱 방법을 사용해보려 한다. Next.js Caching (latest ver.) Next.js에선 여러가지 캐싱 방식을 제공하고, 각 캐싱 방식들은.. 공감수 1 댓글수 0 2025. 1. 5.
재테크 블로그 프로젝트 (11) - 리팩토링 [getStaticProps, data fetching] 개요 리팩토링 계획 중 getStaticProps, getServerSideProps를 사용해 서버 측에서 데이터를 요청하는 방법을 해보려고 하던 중 난관에 봉착했다. 처음 마주한 문제는 getStaticProps, getServerSideProps의 경우 page에서 요청해야 된다는 내용이었다. 해당 오류에 맞게 어서 최상단의 Page에서 요청을 했으나 이번엔 다른 문제가 발생했다. Next 13 버전부터는 해당 함수들을 지원하지 않고 다른 데이터 요청 방법을 사용해야한다고 한다. 뭐가 문제인지를 확인하고, 적절한 data fetching 방식을 알아보자. getStaticProps 사용 불가?아래 사진을보면 Next 공식문서에서 Pages Router 방식과 App Router에서 사용되는 방식의 .. 공감수 3 댓글수 2 2025. 1. 3.
재테크 블로그 프로젝트 (10) - 리팩토링 [폰트 감소 번들사이즈 최종] 개요 새해가 밝은 지금, 지금까지 번들사이즈를 측정하고 감소시키려고 여러 시도를 했다. 오늘은 마지막으로 로컬 폰트로 변경, Next 이미지의 Objectfit 속성 전환, size 지정을 해주었다. 최종 번들사이즈 결과를 비교하고, 성능 점수를 보고 번들사이즈에 대한 리팩토링을 마무리 해보자 로고 폰트 로컬 폰트로 변경개발 마무리 단계가 아닌 초반부터 의아했던 점이 있는데 늘 Lighthouse 성능 평가의 LCP 부문에서 유독 낮은 점수를 받았다. 근데 다름 아닌 텍스트인 FLEX 로고 부분에서 매번 낮은 붉은색 경고가 보이곤해서 무슨 문제일까 냅두다가 우리 전역 폰트인 Pretendar와는 다르게 로고에서 사용중인 폰트는 웹폰트로 사용중이어서 이부분에서 문제인가 하고 접근하게 되었다. 먼저 로고.. 공감수 0 댓글수 0 2025. 1. 2.
재테크 블로그 프로젝트 (9) - 리팩토링 [번들 사이즈 줄이기] 개요 이전글에서 측정한 번들크기를 보고 여러 방법을 시도 후 얼만큼 번들크기를 감소시켰는지 확인해보자 번들 사이즈에 대해 검색하며 배운 방법들을 사용해보려 한다. 1. 불필요한 파일,코드 삭제2. 코드 스플리팅3. 미사용 라이브러리 의존성을 삭제 및 Third-Party 라이브러리 최소화 (가능하다면) 추가로 저번 시간에 활용하지 못한 방법중 하나가 cloc을 통해 코드의 줄 개수를 측정하는 것이다.cloc : 코드 라인, 주석 라인, 빈 줄 등을 계산해주는 CLI 도구cloc . // 프로젝트의 전체 코드 라인 수를 출력 물론, 적은양의 코드가 항상 옳다고는 할 수 없지만, 가독성과 로직이 유사하다면 아무래도 적은 양의 코드가 좋은 평가를 받는다. cloc을 통한 코드, 파일 수의 비교와 저번.. 공감수 0 댓글수 0 2024. 12. 29.
재테크 블로그 프로젝트 (8) - 리팩토링 [번들 사이즈 측정] 개요 프로젝트가 마감되고 12월 셋째 주를 쉬고 크리스마스도 보내고 가족들과도 많은 시간을 보냈다.이제껏 진행했던 여느 프로젝트처럼 막판에 부랴부랴 기능이 돌아가고 오류가 나지 않게끔 하느라 애썼다.하지만, 불편하고 불필요한 코드가 계속 눈엣가시처럼 걸려서 한 번은 치워야겠다 하고 다짐을 했다. 이제는 정말 1월이 되기 전 끝 마쳐야 할 거 같아서 진행하려하고 당장 생각한 목표는 다음과 같다.번들사이즈 감소무한 스크롤 미반영 컴포넌트 반영getServerSideProps 활용한 데이터 페칭불필요한 파일, 코드삭제비효율적인 로직 변경 각 요소들이 시간이 얼만큼 잡아먹을지는 모르겠지만, 첫 매듭을 번들 사이즈를 줄이면서 시작하려고 한다. Next 프로젝트의 번들사이즈NextJS로 만든 애플리케이션을 사용하려.. 공감수 2 댓글수 1 2024. 12. 28.
재테크 블로그 프로젝트 (7) Lighthouse 성능 측정 및 개선 개요 랜딩페이지가 어느정도 완성되어 다른 기능들을 하나 둘 개발 중, 메인 화면에 유독 컨텐츠들이 많아 실제 배포환경에서 렌더링이 늦거나 유저경험을 저해하는 해프닝이 생길까 하고 검사를 받아보고 싶었다.마침, 크롬 브라우저의 관리자 모드에서 제공하는 Lighthouse가 웹 페이지의 성능, 접근성, SEO(검색 엔진 최적화), 그리고 기타 웹 품질 지표를 분석하고 개선할 수 있도록 도와주는 오픈 소스 도구라고 해서 사용해보았다. Lighthouse 사용검사를 받고 싶은 페이지에서 개발자 모드를 킨 후, (윈도우는 f12, 맥은 cmd+option+i 또는 fn+f12) 하단의 요소들 중 Lighthouse를 선택한다.모드, 기기, 카테고리를 선택 후 페이지 로드 분석을 클릭 나의 경우 모드 : 기본 값,.. 공감수 1 댓글수 0 2024. 11. 24.
재테크 블로그 프로젝트 (6) - Next.js와 Datadog 연결 개요SW아카데미 수업 중 모니터링에 관한 수업을 들었다. 교수님께서 진행중인 서비스에도 모니터링 시스템을 도입하면 좋을 것 같았다.수업에서 들은 모니터링, 옵저빙 툴은 여러 종류가 있었지만, Datadog의 경우 많이 들어보기도 했고, 팀원의 강추가 있었다.또한, Next와의 연결 문서도 나름 잘 정리되어있는 Datadog을 선택했다. (비용이 세다는 말이 많아 좀 걸리긴 했다..) Datadog?클라우드 기반 애플리케이션과 인프라를 모니터링하고 분석하는 종합적인 모니터링 및 데이터 분석 플랫폼으로 주요 기능은 다음과 같다.1. 모니터링 및 관찰성 : 애플리케이션, 서버, 컨테이너, 데이터베이스, 네트워크 등 모든 인프라와 애플리케이션 계층에서 데이터를 수집하고 시각화2. 로그 관리 : 중앙 집중화된 로.. 공감수 1 댓글수 1 2024. 11. 21.
재테크 블로그 프로젝트 (5) - Next.js의 API 사전 연결 개요 : api가 개발은 됐는데 서버이슈로 요청을 못받는 경우엔 어떡해야할까 프로젝트 진행 중 제공받은 서버가 계속 변동되고 일정에도 차질이 생겨 api연동이 지체되고 있는 상황이다.프론트엔드의 경우 UI 제작은 어느정도 완료되어서 슬슬 api를 하나 둘 연결해나가야하는데,마침 api 명세는 상세하게 있어 해당 명세를 통해 api를 사전연결해 로직을 미리 구현하려했다. api 없이 내 생각으로만 미리 로직을 구현하는 것과 큰 차이가 있을지 싶지만 우리팀은 TypeScript를 사용해 개발하기에 props혹은 api 요청, 응답에 대한 타입 정의가 미리 이루어져야하기에 api 명세없이 독단적으로 로직을 짜기엔 향후 수정도 많이 해야한다. 다른 방법은 없을까?→ MSW, PostMan을 이용한 방법이 있지만.. 공감수 3 댓글수 3 2024. 11. 20.
재테크 블로그 프로젝트 (4) - 중간 개발 점검 NextJS 폴더구조 재구성 개요 개발 기간이 약 한달 정도 되면서 어느정도 UI도 잡혀가고, api연결도 일부 완성했으나 정신이 없어 이제야 작성한다...개발 내용 현황에 대해선 여유가 될 때마다 바로바로 기록할 예정 일단 폴더구조가 초반에 비해 조금 바뀐면이 있어 이를 정리하고자 한다.프로젝트 폴더구조.github깃허브 Issue, PR 컨벤션 파일 .yml을 포함깃허브 액션에 관한 파일들을 담은 workflows폴더를 포함.huskycommit, push 이전 팀이 정한 코드 규칙을 강제하고자 위한 husky 규칙을 보관하는 폴더.NextNextJS 프로젝트 빌드 결과물 및 캐시파일을 보관하는 폴더(Next Build 시 해당 폴더에 생성).Node_modules프로젝트에서 사용하는 모든 NPM 패키지와 해당하는 의존성이 설.. 공감수 6 댓글수 4 2024. 10. 28.
재테크 블로그 프로젝트 (3) - KIS(한국투자증권) API연동 개요 재테크 블로그의 기능 중 랜딩페이지, 모의투자, 주가예측 파트에서 여러 가지 주식 정보를 요하는 기능이 있어 주식정보를 제공하는 open api를 찾던 중 빈번히 사용되는 KIS에서 제공하는 api를 알게 되었고 이를 해당 파트 개발 전 미리 연결해 보기로 했다.1. 한국 투자 증권 계정 만들기나의 경우 한국투자 증권 계정, 계좌가 없기에 아이디, 비밀번호도 당연히 없었다. 그래서 KIS 페이지를 통해 인증 관련 소프트웨어를 설치하고(진짜 많다) 계정을 만든다.참고로 계좌가 없는 경우 오픈 api 사용이 불가하기에 계좌를 만들어준다. 본인의 경우 이미 주거래은행 및 주식거래 계좌가 있어 그냥 제일 기능이 협소한 계좌로 만들었다. 추가로 이 과정에서 인증하는 과정이 앱을 통해 QR로 인정하는게 간편해.. 공감수 16 댓글수 12 2024. 10. 3.
재테크 블로그 프로젝트 (2) - 기술선정 개요 이번 프로젝트 만큼은 기술 선정 이유를 정하고 시작하기로 계획 했기에 본격적 개발 직전에 프레임워크와 기타 기술들 선정 이유들을 정리하고자 한다.타이밍 좋게 학교 과제 중에서도 front-end 개발 기술스택을 정리해야하는 과제가 있다. TypeScript 이제는 선택이 아닌 필수가 되어버린듯한 타입스크립트 얼마 전 수업 중 리액트 실습하는 시간이 있었는데 일반 js로 파일을 작성하다보니 props 혹은 함수에 타입지정을 하지 않다보니 불러오거나 사용할 때 내부 요소가 뭐가 들어가야하고 타입 오타가 있는지에 대해 스스로 점검 해야하는 불편함이 있었다. 실습이니 망정이지, 프로젝트였다면 분명 엄청 번거로웠을 것이다. 그리고 이번 프로젝트의 경우 팀원 3명과 작업하기에 TypeScript가 필요한 .. 공감수 7 댓글수 2 2024. 10. 2.
재테크 블로그 프로젝트(1)-초기세팅 개요 다음주 본격적인 개발에 앞서 초기세팅을하고 팀원들에게 설명을 주말에 해주는게 좋을거 같아서 초기세팅을 진행했다. 확실히 정해지지 않은 라이브러리는 나중에 해당 기능을 개발할 때 차차 추가하도록하고, 나머지 사항들을 세팅하며 프로젝트를 생성해보려한다. 프로젝트 생성항상 사용하는 옵션을 사용했다지금까지 이 옵션으로 쭉 사용했다.Next를 통해 프로젝트를 만들면서 typescript, es-lint, Tailwind-CSS는 항상 고정으로 사용했다. 다만,이번에 css 라이브러리를 전에 썼던 styled-components를 사용할까 했지만 내가 tailwind도 그렇고 처음 배웠을 때 tailwind가 적응도 빠르고 남의 코드 볼 때도 더 이해가 잘됐기에 tailwind를 이번에도 사용하기로 했다. .. 공감수 7 댓글수 2 2024. 9. 29.
재테크 블로그 프로젝트(0) 개요 24년 9월 개강과 함께 마지막 학기, 3개월 가량의 수업 겸 프로젝트를 시작하게 되었고우리팀의 프로젝트 주제는 재테크 블로그로 결정되었다. 이전 프로젝트와는 다르게 이번 프로젝트의 경우 블로그에 상세하게 과정을 적으려는 이유가 크게 두 가지가 있는데프로젝트를 진행하는 FE 팀원들(나 포함)중 내가 제일 경험이 많아 나름 파트장 같은 주도적인 역할을 해야하고, 이에 따라 문제가 생기거나 개발 중 궁금증이 생겼을 때 척척 해결해주는 포지션이 되고자.이제껏 기술 스택을 선정하고 사용할 때 이유없이 사용한 경우가 빈번했기에 이번 기회에 프로젝트를 진행하며 항상 이유를 생각하며 기술을 선정하고, 기억하는 습관을 갖고자. 프로젝트의 문서화 작업은 이번주에 끝이나서 본격적으로 개발이 코앞이기에 프로젝트 요구사.. 공감수 10 댓글수 5 2024. 9. 28.
Dynamic Import Dynamic Import 동적 임포트전에 프로젝트 진행 중 빌드 크기 및 초기 렌더링 속도 이슈가 있어서 도입했던 것인데지금도 물론 초보지만 그때는 걸음마 뗀 망아지였기에 그냥 쓰라길래 쓰는 그런 기술인데 궁금해서 찾아봤다.내가 당시 사용한 것과 각 블로그나 문서에서 설명하는 예시가 비슷해 이해가 더 빠르게 됐다. 각설하고 알아보자Dynamic?'동적'이라는 말이 붙은 것 처럼 경우에 따라 필요 코드를 import 하는 것으로버튼을 눌렀을 때 보여져야하는 모달창이라던가, nav바 클릭에 따라 보여지는 콘텐츠가 다른경우 사용한다.이로써 초기에 불필요한 파일이 초기 번들에 포함되는 것을 막고 별도의 번들에 포함시켜 초기에 로딩해야 하는 스크립트의 사이즈를 줄일 수 있게 된다.당연히 초기에 로딩되는 번들 .. 공감수 0 댓글수 1 2024. 7. 7.
디자인 패턴 (4) Container 패턴 본 글은 하단의 링크의 글들을 공부하며 필사한 글임.Container/Presentational Pattern?리액트에서 관심사의 분리를 강제하는 방법으로 해당 패턴을 사용해, 비즈니스 로직과 뷰를 분리해낼 수 있다. 관심사 분리를 위해 두 컴포넌트로 분리한다.1. Presentational Components : 데이터가 어떻게 사용자한테 보여질 지에 대해 다루는 컴포넌트(렌더링)- 뷰의 역할 2. Container Components : 어떤 데이터가 보여질지를 다루는 컴포넌트- 비즈니스 로직의 역할 Presentational Components Presentational Component의 경우 props를 통해 데이터를 받으며 받은 데이터를 화면에 표현하는 것이 목적이며 데이터를 건드리지 않.. 공감수 0 댓글수 0 2024. 7. 7.
디자인 패턴 (3) Provider 패턴 본 글은 하단의 링크의 글들을 공부하며 필사한 글임. 여러 컴포넌트로 쪼개서 개발을 하다 보면 상위 컴포넌트에서 쓰이는 데이터를 하위 컴포넌트로 전달해야 할 일이 생긴다.보통이라면 props를 통해 전달해야겠지만 컴포넌트 간의 거리가 멀어질 수록 이 방법은 번거롭고 비용이 발생한다. 추가로 리팩토링 또한 어려워진다.데이터를 필요로 하지 않는 컴포넌트들은 제외하고 데이터를 필요로 하는 컴포넌트가 데이터에 접근할 수 있는 방법이 필요하다.Provider패턴을 통해 위와 같은 방법을 구현할 수 있다.Provider1. 가장 먼저 모든 컴포넌트를 Provider로 감싼다. data를 필요로 하는 최상위 컴포넌트를 감싸면 된다. Provider는 Context객체를 제공하고, 리액트에서 제공하는 createCon.. 공감수 0 댓글수 0 2024. 6. 26.

문의안내

티스토리
로그인
고객센터

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