⭐ https://github.com/yeonhub
📧 lsy3237@gmail.com
📧 lsy3237@gmail.com
지난번에 gesture handler, reanimated 라이브러리를 사용해 top sheet를 직접 구현해 보았는데, 오늘은 top sheet가 확장/축소 됐을 때 다른 컨텐츠를 보여주고 하단에 자연스럽게 스크롤이 생기게 적용했다. 1. 컨텐츠 배치top sheet 아래 부분에 메인 컨텐츠가 표시되어야 하므로 Section 컴포넌트를 ScrollView로 묶어주었다. 현재 상태(top sheet가 축소된 상태)에서는 Section에 스크롤이 생기지 않는다.하지만 확장되면 늘어난 top sheet의 높이만큼 스크롤이 생긴다. 2. 확장/축소 컨텐츠위 사진처럼 서로 다른 컨텐츠를 자연스럽게 변환하기 위해 몇 가지 기능을 추가해야 했다. 2-1. useSharedVa..
회사에서 진행하는 Kotlin 앱을 React Native로 컨버팅 하는 프로젝트 진행 중 기획 단계가 끝나고 어떤 라이브러리를 사용할지 설계 중이었다. 기존 앱의 메인 페이지에는 상단에 드래그 가능한 Top Sheet가 구현되어 있는데, 열심히 찾아보아도 RN에선 Botton Sheet 라이브러리만 있을 뿐 원하는 Top Sheet 라이브러리는 없었다. # 가장 많이 사용하는 Bottom Sheet 라이브러리https://ui.gorhom.dev/components/bottom-sheet/ React Native Bottom Sheet | Gorhom UIA performant interactive bottom sheet with fully configurable options 🚀ui.gorhom.d..
웹 스크래핑을 할 때 일반적으로 많이 사용하는 언어는 아마 파이썬일 것이다.다른 언어에 비해 배우고 쉽고, 웹 스크래핑에 특화된 라이브러리들이 많기 때문일 것이다. 그러나 JavaScript에 익숙한 사람이라면 새로운 언어를 배우지 않고 node 환경에서 웹 스크래핑을 하는 것도 좋은 선택지라고 생각한다. https://blog.apify.com/web-scraping-javascript-vs-python/ Web scraping in JavaScript vs. PythonLearn how to choose the right tools for web scraping in 2024.blog.apify.comJavaScript is rightfully referred to as the language of ..
https://rising2024.rocketpunch.com/ 라스콘4 - Rising to Global 🚀FAQ 🧐rising2024.rocketpunch.com라이징 스타트업 콘서트는 로켓펀치에서 주관하는 컨퍼런스다.트랙 A와 B로 나누어 신청을 받았고 운 좋게 트랙 A에 당첨되어 참석할 수 있었다. 1. 인공지능 세상을 만드는 AIoT : 혁신 기술과 실용 사례Assistant Professor / Director of Smart Communities and IoT Lab - 김정윤 1. AIoT a. 기존의 인공지능과 사물인터넷을 융합한 기술2. AIoT의 장점 a. 초연결성, 초지능성, 초융합성 모든 사물이 사람과 연결되고, 인간의 사고 능력을 뛰어넘는 인공지능을 활용하여, 기존 기술로는..
매주 약 18만 개의 숫자 조합을 생성하고 DB에 저장해야 하는 업무가 있다. Kotlin으로 짜인 앱에서 숫자 조합을 생성 요청을 보내면 서버에 있는 PHP 코드가 해당 로직을 확인한 뒤 숫자 조합을 생성하고 DB에 저장하게 된다. 하지만 요구사항에 실시간으로 스크래핑한 후 몇 가지 알고리즘 조건을 지켜야 했기에 18만 개의 조합을 모두 DB에 저장되기까지 약 4시간 정도의 긴 시간이 걸렸다. 앞으로 계속 사용해야 할 코드이기 때문에 Javascript로 컨버팅하기로 했다. 1. cheeriohttps://cheerio.js.org/docs/intro Welcome to Cheerio! | cheerioLet's get a quick overview of Cheerio in less than 5 mi..
개발에 입문할 때 처음 배웠던 프로그래밍 언어가 Javascript였기 때문에 백엔드 작업이 필요할 때 같은 문법을 사용하는 Node 환경을 사용해 왔다.그렇기에 Java, PHP, Ruby 같은 다른 언어를 공부하거나 볼 수 있는 기회가 없었다. 하지만 현재 회사에서는 PHP를 사용했기 때문에 Flow chart 확인 및 유지보수 그리고 추후 리펙터링과 Node.js로 컨버팅 하기 위해 느꼈던 점을 작성하고자 한다. 1. 호출 방식PHP const registerUser = () => { axios.post('http://localhost/register.php', registerInfo) .then(response => { console.log(response); ..
그동안 React로 CSR 방식의 프로젝트만 구현했었는데, SSR 방식을 알아보던 중 React 문법을 사용할 수 있는 Next.js를 직접 사용해 보면서 어떤 차이점이 있는지 알아보고 싶어 간단한 애플리케이션을 구현해보았다. 1. 애플리케이션 생성 https://nextjs.org/docs/getting-started/installation Getting Started: Installation | Next.js Create a new Next.js application with `create-next-app`. Set up TypeScript, styles, and configure your `next.config.js` file. nextjs.org 기존에 React로 생성할 때 CRA(create-..
https://kofearticle.substack.com/ Korean FE article | Han Jung(한정) | Substack 매주 한국어로 번역 혹은 작성된 프론트엔드 글을 전달합니다. Click to read Korean FE article, by Han Jung(한정), a Substack publication with thousands of subscribers. kofearticle.substack.com 프론트엔드 기술에 관한 새로운 소식, 뉴스를 확인하기 위해 Korean FE article 팀의 아티클을 구독 중에 있다. 그중 2월 첫 아티클을 보고 궁금한 점이 생겼다. React 프로젝트를 시작하는 방법에 관한 이야기였는데, 아카데미에서 배우며 프로젝트를 시작할 때 또는 작은..
[Week 2-1] 웹으로도 앱처럼 사용가능한 PWA를 알아봅시다. 들어가기 전에 PWA가 무엇인지 간단하게 정리하자면 Progressive Web Apps PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다. 앱스토어 혹은 구글플레이에서 설치 가능한 앱을 웹 기술로 구현했다고 생각하면 쉽다. https://developer.mozilla.org/ko/docs/Web/Progressive_web_apps/Tutorials/js13kGames 프로그레시브 웹 앱 소개 - 프로그레시브 웹 앱 | MDN 이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다. developer.mo..
2월 챌린지에선 상황에 맞는 프론트엔드 개발 전략에 관한 주제로 진행된다고 한다. React의 장점인 SPA, 렌더링이 서버측과 클라이언트 측 어디에서 되는지에 따른 SSR, CSR과 웹 앱/네이티브 앱의 장점을 모두 활용한 PWA가 있다. 그 중 첫 번째 주제로 SPA에 대해 알아보는 시간이 되었다. [Week 1-1] SPA의 원리를 배우고, 사용자 경험을 향상하는 방법을 탐구합니다. 1-1) SPA의 기본적인 이해 SPA(Single Page Application) 웹 페이지가 하나의 애플리케이션으로 페이지의 리로드/리렌더링 없이 필요한 부분만 빠르게 업데이트하여 좋은 UX를 제공할 수 있다. SPA - 페이지 전환 없이 동적 컨텐츠 업데이트 - CSR - 초기 로딩 시간 길어짐 - 전통적인 SEO..
1월 원티드 챌린지에서 프론트 엔드에서도 테스트 코드가 필요하다는 것을 알게 되었다. 프론트 엔드에서 테스트 코드를 활용한 경험을 담은 기술블로그의 글을 읽다 보면 공통적으로 말하는 장점이 있다. 1. 오류를 빠르게 발견하고 수정할 수 있다. 2. 다른 라이브러리/프레임워크로 쉽게 리펙터링이 가능하다. 3. 로직의 흐름을 파악하기 쉬우므로 문서화 역할을 하며 새로운 팀원이 해석하기 쉽다. 여기에 추가적으로 TDD 방법론을 적용하였을 때 개발 시간이 줄어든다는 실제 사례를 에서 본 기억이 있다. 복잡한 비즈니스 로직이 포함된 코드가 아닌 간단한 사칙연산 수준의 코드를 구현함에 있어서도 위처럼 유의미하게 차이가 발생했다. 챌린지에서 배웠던 내용을 한마디로 요약하자면 "UI 테스트는 하지 않고, 요구사항의 사..
[Week 2-1] 백엔드 코드를 수정할 수 없을 때 프론트엔드가 할 수 있는 최적화 방법 3-1) 성능 측정 툴 소개 및 사용법 웹 애플리케이션의 성능을 측정하고 분석하는 데 사용할 수 있는 툴에 대해 알아보았다. 애플리케이션의 로딩 속도, 실행 시간, UX 등 다양한 측면에서 성능을 평가하고, 이를 통해 성능 저하의 원인을 찾아 개선할 수 있도록 도와준다. Lighthouse Lighthouse - 웹 성능을 분석하는 오픈 소스 - 주요 기능 1) 성능 분석 2) 접근성 검사 3) SEO 평가 4) PWA 기준 평가 https://chromewebstore.google.com/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ko Lighthouse Li..
[Week 1-2] 테스트코드를 활용한 효율적인 리팩토링 2-1) 무엇을 테스트할 것인가? 오늘 챌린지에선 리펙터링시 테스트 코드를 활용할 것을 소개하고 있다. 개념으로만 테스트 주도 개발(TDD)이 중요하다고만 알고 있었는데 특히 프론트 엔드에서 무엇을 고려하여 진행해야 하는지 알 수 있었다. UI 테스트는 진행하지 않는다. 테스트를 계획할 때 무엇을 테스트 할 것인지 명확하게 파악을 해야 하는데 UI 테스트는 중요하지 않다. 컴포넌트 렌더링 순서를 확인하거나, 태그와 요소들의 간격 등은 굳이 테스트할 필요가 없다. 요구사항의 "사용자 시나리오"에 집중해야 한다. UI, Style 부분보다 "기능"에 더 중점을 두고 테스트를 해야한다. 회원가입 form에서 input이 제대로 되는지, 혹은 필수 항목들..
[Week 1-1] 전역변수를 설정하는 기준과 방법 -챌린지 강병진 멘토님- https://github.com/jasonkang14 jasonkang14 - Overview I believe software engineers can change the world. jasonkang14 has 47 repositories available. Follow their code on GitHub. github.com 1-1) 지역변수와 전역변수 비교 - 지역 변수 (Local Variable) 함수 내부에서 선언된 변수 지역 변수는 해당 함수 내부에서만 접근할 수 있으며, 함수가 종료되면 메모리에서 사라진다. 다른 함수에서는 같은 이름의 지역 변수를 사용해도 각각 독립된 메모리 공간을 가지므로, 서로 영향을 미..
5. 5부 아키텍처 좋은 아키텍처는 유스케이스를 그 중심에 두기 때문에, 프레임워크나 도구, 환경에 전혀 구애받지 않고 유스케이스를 지원하는 구조를 아무런 문제 없이 기술할 수 있다. - 클린 아키텍처(209p) 프레임워크 독립성 테스트 용이성 UI 독립성 데이터베이스 독립성 모든 외부 에이전시에 대한 독립성 - 클린 아키텍처(214p) 소프트웨어를 계층으로 분리하여 관심사의 분리를 목표로 한다. 이를 통해 외부 요소 없이 테스트가 가능하고 기존에 사용하던 DB를 바꾸어도 문제가 발생하지 않는다. https://medium.com/humanscape-tech/clean-architecture-%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98%EC%99%80-%EB%8F%85%EB%A6%B..
