React 17 Next.js 에센셜: Next.js 웹앱에서 Client Side Rendering을 추구하면 안되는걸까? Getting Started: React Essentials | Next.js An overview of essential React features for building Next.js Applications, including Server Components. Next.js로 애플리케이션을 빌드하려면 서버 컴포넌트와 같은 React의 최신 기능에 익숙해지는 것이 도움이 됩니다. 이 페이지에서는 서버 컴포넌트와 클라이언트 컴포넌트의 차이점, 사용 시기, 권장 패턴에 대해 설명합니다. React를 처음 사용한다면 React 문서를 참조하는 것도 좋습니다. 다음은 학습에 도움이 되는 몇 가지 훌륭한 리소스입니다: React 튜토리얼 React로 생각하기 React 배우기 서버 컴포넌트 서버 및 클라이언트 .. 2023. 5. 17. Next.js의 CJK(한중일) 폰트 최적화 이슈, 오픈소스 생태계 Next.js 써보셨나요? 매우 진지하게 추천합니다... React는 대화형 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다. 여기서 사용자 인터페이스(UI)는 사용자가 화면에서 보고 상호작용하는 요소를 의미합니다. 라이브러리라는 UI를 구축하는 데 유용한 함수를 제공하지만 해당 함수를 어디에 사용할지는 개발자에게 맡긴다는 뜻입니다. React의 성공 요인 중 하나는 애플리케이션 구축의 다른 세세한 측면에 대해 상대적으로 의견이 분분하지 않아 자유도가 높다는 점입니다. 그 결과 서드파티 도구와 솔루션으로 구성된 생태계가 번성하게 되었습니다. 그러나 이는 또한 완벽한 React 애플리케이션을 처음부터 구축하려면 약간의 노력이 필요하다는 것을 의미합니다. 일반적인 웹 애플리케이션을 구축할 때 .. 2023. 5. 5. 리액트네이티브 개발경험 끌올 프로젝트: @rnx-kit Adam Foxman: 지난 몇 년 동안 리액트 네이티브는 Microsoft 전체에서 많이 사용되었습니다. 하지만 최근에야 리액트 네이티브의 개발자 경험과 커뮤니티가 얼마나 위태로운 상황에 처해 있는지 깨달았습니다. 그래서 가능한 가장 영향력 있는 방법으로 문제에 접근하기로 결정했습니다. 바로 소스로 직접 가보기로 했습니다! React Native 생태계에 뛰어든 마이크로소프트, 새로운 도구를 오픈소싱하고, 새로운 회사 간 그룹을 만들고, 심지어 핵심 코드베이스에서 Meta와 직접 협업하는 등 커뮤니티의 모든 사람의 삶을 개선하기 위해 어떤 노력을 기울이고 있는지 이 강연에 참여하여 들어보세요. 어떤 현명한 사람이 말한 "밀물이 모든 배를 띄운다"는 말이 있듯이, 저희는 조수를 일으키는 달이 되고 싶습니.. 2023. 4. 4. 안드로이드 최소 타겟 SDK 버전이 또 올랐다! 이번에는 33?! (안드로이드 13) 구글 플레이스토어로부터 안드로이드 버전 상향에 대한 최소 레벨 가이드를 보내왔습니다ㅠ 안녕하세요, 구글 플레이 개발자님들께 개발자 업데이트에 대한 안내사항을 보냅니다. 작년, 저희는 사용자들을 각종 위험으로부터 보호하기 위해 최신 개인정보 보호 및 보안 기능을 갖추지 못한 앱은 설치하지 않도록, 차츰 타겟 API 레벨 요구사항을 상향할 것을 발표했었습니다. 타겟 API 레벨의 업데이트 주기를 더욱 명확하게 하기 위해, 올해부터 매년 8월 31일에 업데이트하는 것으로 통일하겠습니다. 올해 8월 31일부터는 다음 사항이 적용됩니다: 신규 앱 및 기존 앱 업데이트는 Google Play에 제출하려면 API 레벨 33을 대상으로 해야 합니다. (Wear OS의 경우 API 30을 대상으로해야 함) 기존 앱 역시.. 2023. 3. 22. 리액트 네이티브 애플리케이션의 최적화 :: The Ultimate RN Guide Video Summary 이 비디오에서는 React Native를 최적화하는 방법에 대해 설명합니다. 이 비디오는 세 가지 유형의 최적화로 나뉘며, 첫 번째로 UI 리렌더링에 주의하는 방법을 설명합니다. React는 부모 컴포넌트가 업데이트 될 때 모든 자식을 리렌더링하거나, 컴포넌트 속성이 변경되었을 때 변경되지 않았더라도 리렌더링하는 경우가 있습니다. 이러한 불필요한 업데이트를 줄이는 방법으로는 컴포넌트를 메모이제이션하고, 가능한 경우 uncontrolled 컴포넌트를 사용하며, 전역 상태를 사용하는 것이 있습니다. Points 📱 React Native 최적화를 위해서는 UI re-rendering 문제를 이해해야 합니다. 🔄 불필요한 re-rendering은 메모리 사용량을 늘리거나 디바이스를 느.. 2023. 3. 22. Flipper와 Hermes:: 리액트 네이티브 개발자의 성능 최적화 Video Summary React Native는 계속해서 기능과 도구를 발전시키고 있기 때문에, 항상 가능한 최신 버전(LTS)을 사용하고 업데이트하는 것이 중요하다. Flipper를 사용하여 디버깅 속도를 향상시키고 auto-linking을 사용하여 종속성 관리를 자동화하고, Hermes를 사용하여 Android 애플리케이션의 시작 시간을 최적화할 수 있다. Facts 🔧 항상 최신 React Native 버전을 사용하는 것이 좋다. 🐛 Flipper를 사용하면 더 빠르게 디버깅할 수 있다. 📦 Auto-linking으로 종속성 관리를 자동화할 수 있다. 📈 Hermes를 사용하여 Android 애플리케이션의 시작 시간을 최적화할 수 있다. 🐰 dongmin,yu React Native Pedomet.. 2023. 3. 21. RedWood.js 이메일 기능 추가하기 초기 가설: 다음 라이브러리 (패키지)를 통해서 메일링 기능 구현 GitHub - sofn-xyz/mailing: Build, test, send emails with React 사용법: yarn: yarn add mailing-core mjml mjml-react nodemailer &&\\ yarn add --dev mailing @types/mjml @types/mjml-react @types/nodemailer 또는 npm: npm install --save mailing-core mjml mjml-react nodemailer &&\\ npm install --save-dev mailing @types/mjml @types/mjml-react @types/nodemailer npx mailing.. 2022. 8. 17. 스파르타코딩클럽 리액트심화반 05주차 꼬리스타그램🐈 https://my-community-99787.firebaseapp.com/ React App my-community-99787.firebaseapp.com src/pages/ MyPage와 Signup 페이지에서 닉네임 Validation => clear MyPage.js 구현하기 (email, displayName, profile) => clear!! PostList에서 댓글 수 미리 로드하기 => clear! src/components/ Header UI 이쁘게 Post 수정하기/삭제하기/공유하기 src/elements/ Like 좋아요 버튼 활성화 Spinner 만들기 (Material UI 이용) src/redux/ image.js 이미지 리사이즈, 크롭 기능 만들기 user.js 이미지 업로.. 2021. 8. 2. 스파르타코딩클럽 리액트심화반 04주차 후기! 우여곡절 끝에 4주차 강의도 끝냈다!!! 이번엔 좀 시간이 오래 들었는데, 내일배움카드로 왕초보시작반(웹개발종합반)을 듣는 분들을 대상으로 하는 스몰프로젝트에 미니튜터로 참석하면서 좀 정신이 그쪽에 가 있었다ㅠ 하지만 너무 재미있었지 이번 주차엔 아 이거 넘 하고싶다 하던걸 거의 다 구현했다. 의사코드로 가짜 데이터들만 넣어놨던 알림 탭도 진짜 댓글이 작성되면 실시간으로 쌓이도록 구현했고, Material-UI를 사용해서 알람 뱃지도 구현했다 알람뱃지는 내가 직접 css로 작성해서 만들어놓은 상태였는데, Material-ui를 사용하니 뱃지가 사라질때 애니메이션까지 덤으로 나타나서 진짜 뭔가 제대로 된 느낌이었다. 튜터님은 Material-ui의 아이콘을 사용해서 알람탭과 로그인 로그아웃 등의 버튼을 아.. 2021. 7. 30. 스파르타코딩클럽 리액트 심화반 3주차 후기 뷰가 거의 바뀌지 않으니 뭐가 달라졌나 싶을 수도 있지만 기능적으로는 많은 걸 구현했다. 우선 알림 (Notification.js)를 만들어서, 내 게시물에 새로운 댓글이 달리거나 하면 알림이 생기고 그 개수만큼 뱃지 형태로 숫자가 디스플레이되도록 '뷰만' 구성했다. 아직 댓글 기능과 알림 기능이 제대로 구현된 상태는 아님. 그리고 후에 댓글 기능을 제대로 구현할 것을 염두해 두고, 게시물 수정하기 버튼(포스트 날짜 옆에 있는 수정 아이콘 클릭!)을 클릭해서 들어갔을때, 이 게시물에 댓글이 이미 달린 상태라면 사진은 변경할 수 없도록 disabled 속성을 주었다. "이 버튼을 눌러 일상을 공유하세요" 부분이 게시물에 댓글이 달렸을 때는 "댓글이 달린 사진은 수정할 수 없어요"라고 나오고, 클릭해도 이미.. 2021. 7. 21. 스파르타코딩클럽 리액트 심화반 2주차 후기 리액트 심화반 2주차! 어느정도 앱의 형태가 잡혔다!! 커밋할 체인지들도 너무 많았음ㅎㅎ 이번 주차에 내가 바꾼 것들! Post의 내용을 좀 더 인스타그램스럽게 바꿔보았다. 예를 들면 스크린샷에 보이는 댓글란의 배치! 원형의 사용자 프로필 이미지는 댓글의 내용이 길어질 경우 사용자의 이름 바로 옆에 배치될 수 있도록, flex-start를 적용했고, 사용자의displayName은 댓글 내용과 같은 라인에 배치되되, 약간의 공백과 굵은 글씨로 구별이 될 수 있도록 했다. 또 moment 모듈의 locale/ko를 사용해 댓글과 게시물의 작성 시점을 'SNS스럽게' n시간 전, n일 전으로 렌더링했다. 파이어베이스의 인증 함수를 이용해서 로그인,가입,로그아웃을 구체화시켰고, 로그인 상태에서만 나타나야 할 플.. 2021. 7. 16. 스파르타코딩클럽 제1회 스파르톤 생존일지 01. 혼자서 집에서 하는 코딩이 집과 침대만 오고가다보니 나태해지는 것 같아 스파르타코딩클럽에서 진행하는 스파르톤에 참여했다! 게더라는 재미있는 사이트를 이용해서 라이브로 사람들과 소통하면서 협업하는 느낌(사실 각자 자기 할 일 하는거지만)을 받으니까 뭔가 스타트업에서 줌채팅으로 일하는 느낌이잖앟ㅎ 넘 재미있어요 9시부터 9시간 동안 진행할 예정이라 1시간마다 생존일지를 올리려구요 화이팅!! ps. 꼬리가 자꾸 화면으로 들어와서 조원분들의 예쁨을 받았다. 나는 코로 꼬리 털이 다 들어왔다....ㅂㄷㅂㄷ PM 09:00 코로나 시국에 실업급여 받으면서 쉬려니 사람들이랑 대화하는 것도 오랜만인 느낌ㅎㅎ 재미있다. PM 10:00 우선 지난번에 개발한 앱에 사용할 JSON 데이터를 다듬어볼 생각 PM 11:00 아.. 2021. 7. 10. 이전 1 2 다음
