저장공간 저장공간

분류 전체보기

• React Native로 모바일과 웹을 한번에 개발하기

  개발여정 2024. 7. 19. 18:31

  무더위가 점점 무르익어가는 7월 초쯤... 회사에서 현재 React Native로 개발된 애플리케이션의 기능을 웹에서도 제공할 수 있는지 검토해달라는 요청을 받게 되었습니다... 🥲 어떻게 개발할 수 있을까? 🤔처음에는 "꼭 필요한 작업일까요!?", "꼭 해야하나요!?" 라고 말하며 방어를 열심히 했지만 일단 요청을 받았으니 해야하겠죠...!! 혼미해지는 정신을 붙잡고 어떻게 React Native로 개발된 애플리케이션을 웹에서 제공할 수 있을지 고민해 보았습니다. 첫 번째 방안은 React로 웹 애플리케이션을 처음부터 다시 만드는 것이었습니다. 하지만 이 방안은 처음부터 개발해야 하는 고통스러운 작업이 필요할거라 생각이 들었습니다. 회사에서는 한정적인 시간과 최소한의 리소스로 빠르게 결과물을 내기를..

  Read More
• 엑셀 파일 다운로드 기능 구현 여정 🚀

  개발여정 2024. 7. 12. 20:15

  회사 프로젝트에서 사용자가 화면에서 데이터를 확인하는 것뿐만 아니라 검색 결과를 엑셀 파일로 다운로드할 수 있는 기능을 구현해야 했습니다. 완성 코드 미리보기 👀https://codesandbox.io/p/sandbox/excel-download-poc-yv2y26?file=%2Fsrc%2FExcelSheet.ts%3A18%2C30 무엇을 고려해야 할까...? 🤔어떻게 구현할지 고민하기에 앞서 만족되어야 하는 조건을 다음과 같이 고려해봤습니다.클라이언트 사이드에서 엑셀에 필요한 데이터를 엑셀 파일로 변환할 수 있을 것변환한 엑셀 파일을 저장할 수 있는 기능을 제공할 것다양한 브라우저에서 엑셀 다운로드 기능이 지원될 것타입스크립트를 지원할 것 어떻게 구현하지...? 🔍엑셀다운로드 기능 구현을 위해서 ..

  Read More
• Masonry Layout 구현 여정 🚀

  개발여정 2024. 7. 5. 23:42

  회사에 입사한지 1달하고도 보름쯤... 신입으로써 회사 곳간의 식량을 충실히(?) 축내고 있던 시기였습니다. 이번 스프린트 때 어떤 일을 맡을지 플래닝을 진행하던 도중 저에게 "Masonry Layout" 이라는 글자가 적힌 백로그가 눈에 들어왔습니다.  "Masonry Layout... Masonry..."를 마음속으로 잠시 되어었던 저는 곧장 "이건 제가 꼭 개발하고 싶습니다!!!"라며 멤버들에게 소리쳤습니다. 당시 CSS Grid를 공부하고 있었고 자연스레 Masonry Layout에 대해 어렴풋이 알고 있었던 저는 공부했던 것을 실제 프로덕션에 반영해볼 수 있는 기회라 생각하여 크게 소리쳤고, 멤버들은 신입이지만 패기있는 모습에 "한번해보세요!!" 라며, 저에게 백로그를 양보해 주었습니다. Mas..

  Read More
• OCR 구현 여정 🚀

  개발여정 2024. 6. 28. 22:40

  최근 회사 프로젝트에서 모바일 환경에서 동작하는 모바일 애플리케이션을 만들기로 하였습니다. 이 때까지 웹 애플리케이션만 만들어 왔기 때문에 저는 모바일 애플리케이션 개발을 하고 싶은 마음에 "무조건 제가 하겠습니다!" 라고 당당히 외쳤지만... 시간이 지날수록 자꾸만 작아지는건 왜 일까요...? 🥲무엇을 개발해야 할까?모바일 애플리케이션 개발이 처음이라 시간이 지날수록 계속해서 작아졌지만, 정신을 차리고 우선 구현되어야 하는 몇 가지 요구사항을 파악했습니다. 🔍* 크로스 플랫폼(IOS/Android)이면 좋지만 Android를 우선해서 동작하도록 한다.* 바코드 스캔이 되어야 한다.* OCR (Optical Character Recognition) 문자 인식이 되어야 한다.* 나머지 기타 등등...무..

  Read More
• 아이템 24 - 일관성 있는 별칭 사용하기

  타입스크립트 2023. 3. 14. 21:02

  interface Coordinate { x: number; y: number; } interface BoundingBox { x: [number, number]; y: [number, number]; } interface Polygon { exterior: Coordinate[]; holes: Coordinate[][]; bbox?: BoundingBox; } function isPointInPolygon(polygon: Polygon, pt: Coordinate) { if (polygon.bbox) { if (pt.x polygon.bbox.x[1] || pt.y polygon.bbox.y[1]..

  Read More
• 아이템 23 - 한꺼번에 객체 생성하기

  타입스크립트 2023. 3. 14. 20:39

  변수에 객체를 할당하는 방법 자바스크립트에서는 객체를 생성할 때 다음과 같이 생성할 수 있습니다. const pt = {}; pt.x = 3; pt.y = 4; 하지만 위의 예제를 타입스크립트에서 사용하면 다음과 같은 오류가 발생합니다. const pt = {}; pt.x = 3; // ~ Property 'x' does not exist on type '{}' pt.y = 4; // ~ Property 'y' does not exist on type '{}' 따라서 타입스크립트에서는 객체를 생성할 때, 속성을 하나씩 추가하기보다는 여러 속성을 포함해서 한꺼번에 생성하는 것이 좋습니다. 타입스트립트에서 객체 생성 방법 타입 선언 활용 (type 키..

  Read More
• 아이템 22 - 타입 좁히기

  타입스크립트 2023. 3. 14. 18:05

  여러가지 타입이 가능할 때, 문맥에 따라 특정 타입으로 추론하게 하는 방법 타입 좁히기는 타입스크립트가 넓은 타입으로부터 좁은 타입으로 추론하는 과정을 말하는데, 다음과 같은 방법으로 타입을 좁힐 수 있습니다. 조건문 const el = document.getElementById('foo'); // Type is HTMLElement | null if (el) { el // Type is HTMLElement } else { el // Type is null } 예외를 던지거나 함수를 반환(early return) // 예외를 던지는 방법 const el = document.getElementById('foo'); // Type is HTMLElement | null if (..

  Read More
• 아이템 21 - 타입 넓히기

  타입스크립트 2023. 3. 14. 17:20

  타입스크립트에서는 타입을 추론할 때, 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추합니다. 이러한 과정을 넓히기(widening)라고 부릅니다. 넓히기 과정에서는 일반적으로 변수가 선언된 후로는 타입이 바뀌지 않는 것을 가정하고 명확성과 유연성 사이의 균형을 유지해서 타입을 추론하려고 합니다. 원시값의 넓히기 과정 예시 let x = 'x'; 변수 x 에는 타입을 명시하지 않았으므로 타입스크립트는 타입 추론을 하게 되는데, 할당 가능한 값들의 집합에는 다음과 같은 후보군이 존재합니다. any string 'x' 일반적으로 타입을 추론할 때, 변수가 선언된 후로는 타입이 바뀌지 않는 것을 가정하기 때문에 위 후보군 중에서 any 타입은 다른 타입도 할당할 수 있어 후..

  Read More