본문 바로가기

분류 전체보기72

[React] 카카오톡/라인 인앱 브라우저에서 외부 브라우저로 열기 카카오톡, 라인에서 인앱 브라우저에서 외부 브라우저로 열기할 때 사용하려고 한다.GA utm 파라미터를 잃게되거나 혹은 다른 url로 변경될 때 전달되지 않은 값이 있을 수 있으니 이걸로 처리하는게 좋을 듯 싶다. import React, { useEffect } from 'react';const InAppBrowserRedirect = () => { useEffect(() => { const copyToClipboard = (val) => { const textarea = document.createElement('textarea'); document.body.appendChild(textarea); textarea.value = val; textarea.se.. 2024. 12. 6.
[Front-End] Flutter "open source"는 소프트웨어의 코드가 공개되어 있고, 누구나 해당 소프트웨어를 사용하거나 수정할 수 있는 형태를 가리킨다."Framwork"는 소프트웨어를 개발하기 위한 기본 구조와 함께 특정 작업이나 기능을 수행하기 위한 도구, 규칙 등의 집합체다."Native Compiled"는 안드로이드와 iOS코드로 직접 컴파일(코드변환)이 이루어진다는 것이다."Multi Platform"이란 여러개의 플랫폼(운영체제)에서 사용 가능하도록 개발 가능하다는 뜻이다.  Flutter의 경쟁자들Flutter VS React-Native VS Kotlin 플러터는 개발 경험이 너무 좋기 떄문에 놀라울정도로 빠르게 성장했고, 앞으로 더욱 성장할 것이다. Flutter Mac 설치 커맨드Shell타입 확인 커맨드e.. 2024. 5. 15.
[Front-End] Turborepo 새로운 프로젝트를 진행하며 적용한 모노레포! 모노레포란? 하나의 레포지토리에서 독립적인 여러 프로젝트를 관리하는 방법. 기존에 많이 쓰던 Multi Repo 장점 - 빠른 코드 수정 utilA, utilB를 변경 하더라도 App에 바로 반영 - 멀티 레포의 경우 버전을 올리고 의존성을 다시 설치해야만 사용할 수 있었음 각 레포마다 사용했던 같은 코드들의 중복을 제거하므로서 util, component를 한곳에 관리하여 코드의 중복을 줄이고 생산성을 높일 수 있었습니다. 수월한 코드 리팩토링 - 코드를 한번에 관리하기. 때문에 대규모 리팩토링이 쉬워짐. 코드 컨벤션 통일 - 멀티 레포에서는 각 레포마다 다른 컨벤션을 가졌다면 모노레포에서 한 곳에서 관리하여 통일하기 수월함, eslint 패키지 주입하여 컨.. 2024. 4. 19.
[Front-End] FSD 저도 제일 처음 시작할 때 직면하는 문제 중 하나였습니다. 누가 정해주면 참 좋지만 그게 협업을 하면서도 다 다르게 아키텍처 문제가 발생하니 이 점을 확장할 수 있는 FSD를 보겠습니다. 기능 분할 설계 (Feature-Sliced Design, FSD) 레이어(layer), 슬라이스(slice), 세그먼트(segment)의 세가지 개념을 구분합니다. 레이어 레이어는 최상위 디렉토리이자 애플리케이션 분해의 첫 번째 단계입니다. 레이어의 수는 최대 7개로 제한되어 있으며, 일부는 선택 사항이지만 표준화되어 있습니다. app: 애플리케이션 로직이 초기화되는 곳. Provider, Router, 전역 스타일, 전역 타입 선언 등이 정의 되며, 애플리케이션 진입점 역할을 합니다. processes: 이 레이어는.. 2024. 4. 3.

티스토리툴바