Article(s)
About 17 min
Article(s) 관련
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice.
Library | Kodeco > Android & Kotlin
Search the best collection of iOS and Android tutorials on the web
Frontend Masters Boost – Helping Your Journey to Senior Developer
Helping Your Journey to Senior Developer
Smashing Magazine — For Web Designers And Developers
Magazine on CSS, JavaScript, front-end, accessibility, UX and design. For developers, designers and front-end engineers.
요즘IT
요즘 사람들의 IT 매거진, 요즘IT
카카오테크, 미래의 문턱을 낮추는 기술
미래의 문턱을 낮추는 기술
지마켓 기술블로그
지마켓의 기술과 경험을 공유합니다.
ZUM 기술 블로그
생각을 읽다, ZUM, 고객의 생각을 읽고 담는 줌 인터넷 개발자들의 '좀 다른 개발 이야기'를 소개 합니다.
SitePoint – Learn HTML, CSS, JavaScript, PHP, Ruby & Responsive Design
Learn Web Design & Development with SitePoint tutorials, courses and books - HTML5, CSS3, JavaScript, PHP, mobile app development, Responsive Web Design
freecodeCamp
freecodecamp.org
How to Avoid Prop Drilling in React
In order to write scalable, reusable, and maintainable applications with React, you'll need to go beyond the surface of using React components, useEffect, useContext, useState, and the like. It involves learning in detail how React works in more depth. And if you don't properly understand these key React concepts...
How to Use TypeScript with React
In this article, you will learn how to use TypeScript with React. By the end, you will have a solid understanding of how to write React code with TypeScript. Want to watch the video version of this tutorial? You can check out the video below: Table of Contents *
React 서버 컴포넌트를 사용해야 하는 이유와 방법
2020년 말, React 팀은 '제로-번들-사이즈 React 서버 컴포넌트' 개념을 도입했습니다. 그 이후로 React 개발자 커뮤니티는 이 미래 지향적인 접근 방식을 실험하고 적용하는 방법을 학습해 왔습니다. React는 UI를 구축하는 방식에 대한 우리의 생각을 바꾸었습니다. 그리고 React 서버 컴포넌트를 사용하는 새로운 모델은 훨씬 더 구조화되고 편리하며, 유지 관리하기 쉽고 더 나은 사용자
What is Throttling in JavaScript? Explained with a Simple React Use Case
Welcome back, fellow developers! Today, we are once again delving into JavaScript and Web Development and learning about throttling. As a developer, making your website user-friendly is important. This goes a long way toward the product's success, and a key part of the user experience is the website's performance.
How to Build a Realtime Chart with React, HighCharts, and Pusher
In today's tutorial, you are going to learn about WebSockets and how you can use them to create interactive realtime data applications. To illustrate just how innovative real time technologies are, we will build a chart application which automatically updates with new dynamic online data. This is going to
How to Use the useReducer Hook in React
In this article, we'll take a deep look at the useReducer hook in React. It can look confusing, especially if you are coming across the hook for the first time. This article breaks down the useReducer hook concept into understandable bits with both code and real-world examples to enable you
How to Use React Developer Tools – Explained With Examples
Traditional browser developer tools are designed to inspect and debug web pages by interacting with your HTML, CSS, and JavaScript code. However, you can't use them to inspect and debug React applications efficiently due to the nature of React. This is where the React Developer Tools, AKA React DevTools comes
How to Create a React Native Splash Screen
In this article, you'll get a hands-on practical guide for creating a native splash screen for React Native CLI applications. Note that this tutorial is not applicable for apps created with Expo. SVG Icon Image and Background The first thing you need is an image. It can be in
How to Build a QR Code Generator for URLs with Node.js, Next.js, and Azure Blob Storage
A while ago, a client asked me to help them create a special app for generating QR codes so users could receive payments. What set this app apart was that instead of users entering a URL to generate a QR code, they would initiate a request through the app...
How to Create a React Chatbot – a Step by Step Guide
In the ever-evolving realm of web technologies, the integration of AI-powered chatbots has become a defining trend in 2024. With rapid advancements in Large Language Models (LLMs), chatbots have grown to become pivotal tools adopted across many websites and services. From FAQ bots to live chat support, they can...
How to Handle Events in React – Explained with Code Examples
Event handling is fundamental to understanding how React processes browser events and updates the DOM. As a React developer, it's a critical skill to have, as it enables efficient management of user interactions within web apps. This article covers how to set up event handlers and proceeds to more elegant...
How to Store Data Locally in React Native Expo
React Native has grown in popularity as a mobile application development tool because of its ability to create cross-platform applications using familiar JavaScript and React principles. When building mobile applications, one common requirement is the ability to save data locally on the device. This is when local storage comes...
Zustand vs useState – How to Manage State in React Apps
State management in React applications has evolved a lot in recent years, especially with the advancement of functional state and the introduction of hooks. Developers have more flexibility and state management has generally become simpler. But as applications grow, they become more complex to manage – and you may...
How to Style React Components
You can only make your React app visually appealing to users with styling. That makes styling a fundamental aspect of building captivating user interfaces. With React's component-based architecture, there are a ton of options for styling. These include traditional CSS, utility-first approach, CSS-in-JS solutions, and more. In this article, we'll...
React 19 – New Hooks Explained with Examples
Hi fellow readers! Web Development is a constantly evolving landscape. The whole ecosystem consists of different libraries and technologies. React is one of the most widely used libraries in web development. There are small releases every now and then. However, this year, the React team has made a significant...
Learn the Basics of Go by Building a Full Stack Web App with React and Go
Go can work great on the backend for a React project. We just released a course on the freeCodeCamp.org channel that will leach you how to build a full stack web app with React and Go. This comprehensive course is designed to teach you the fundamenta...
React Context API Explained with Examples
Managing state has always been a critical aspect of making web applications with React. The most basic way to do this is prop drilling. In prop drilling, you pass props around from the parent component to other components that need it, no matter how deeply nested they are. The problem...
How to Build a Rating Component with the React Compound Component Pattern
Have you ever watched a captivating movie or used a fantastic product and wanted to share your experience? In today's world, feedback is critical, and ratings are like currency. Rating systems are everywhere, from the classic star ratings on movie review websites to the ubiquitous thumbs up/down on streaming...
Learn High-Level System Design by Building a YouTube Clone
High-Level System Design involves creating a blueprint for complex systems, focusing on architecture, component interactions, and scalability. It addresses how different parts of a system communicate, manage data, and handle user requests efficiently...
How to Create Multi-Page Animations Using Framer Motion & React-Router-Dom
The web has evolved from rigid color coding and 2D rendering to an era of complex, aesthetically pleasing animations and 3D rendering options. Additionally, there have been integrations with new technologies, such as virtual reality tools and frameworks, to make the user experience worthwhile. In this article, we'll optimize...
How to Validate Forms in React and React Native Using Yup and Formik
Validation is a key part of development, regardless of what programming language you’re writing. Developers should always be validating user input, API parameters, and retrieved values. One of the most common elements where you’ll need to apply user input validation is via a form. This could be a user sign...
What's New in React 19
React 19 has just been released, bringing a wealth of new features and enhancements to this popular JavaScript library. For developers looking to stay ahead of the curve, understanding these updates is crucial. This course is designed to help you nav...
Mastering Shadcn UI Components
We just published a course on the freeCodeCamp.org YouTube channel that will help you master Shadcn. This comprehensive course dives deep into the versatile world of Shadcn, a powerful toolset for building modern web applications with customizable an...
How to Create Infinite Scrolling in React Using the Intersection Observer API
Hi fellow developers! Have you ever wondered how social media apps like Facebook and Instagram keep you scrolling endlessly through your feed? This user experience, designed to load new content on demand, uses a technique called infinite scrolling. This helps keep you hooked to these apps for hours. Traditionally,...
React 19 Actions – How to Simplify Form Submission and Loading States
React 19 introduces Actions, which are asynchronous functions. Actions are helpful in making form submissions easier. This tutorial dives into what Actions are and how to use them. You'll learn about: 1. The new React 19 feature, Actions 2. The new React 19 hooks, useActionState and useFormStatus ...
Data Flow in Redux Explained – A State Management Handbook
In complex React applications, managing application state effectively can become a challenge. This is where Redux, a predictable state management library, steps in. By introducing a unidirectional data flow, Redux brings order and clarity to how data updates and interacts within your React components. This article discusses the inner workings ...
Build a Meditation App with React Native & Expo Router
Are you looking to enhance your React Native skills while creating a practical and soothing application? This new course from freeCodeCamp.org is perfect for you! You'll learn how to build a meditation app using Expo, an open-source platform for maki...
How to Improve User Experience with Optimistic UI and SWR
Have you ever noticed how some apps feel like they can read your mind? You click a button, and before you can even blink, it's done – no loading screens, no waiting around. It's like magic, right? Well, let me tell you a little secret: that's the power of Optimistic...
How to Build a Counter Button with React, TailwindCSS, and TypeScript
How can you keep track of the number of times a user clicks a button? How are the hearts on Instagram or the likes on Facebook counted? In this tutorial, we will build a button that tracks the number of times a button has been clicked. Along the way...
How to Upgrade from Node 16 and Jest 26 While Staying on React Scripts 4
Recently, I was trying to upgrade some of my open source projects. They were made using create-react-app around 2019, and I wanted to upgrade to a newer version of NodeJS and Jest. This would let me take advantage of the security updates, bug fixes, speed improvements, and...
What is the tRPC Library? Explained with a Demo Project
For a while now, I've been noticing a technology named tRPC that's cited in many modern tech stacks, including T3. But I didn't know what it was or why it had become so popular. So I began researching and learning about it. I didn't know what it...
What's the Difference Between the useMemo and useCallback Hooks?
React provides various hooks that make it easier to manage application state and other React features in functional components. Hooks provide class component features to functional components, and they don't need a lot of code compared to class components. Hooks also make your life easier by providing some convenient features...
How to Use React Router to Build Single Page Applications
Single Page Applications (SPAs) have revolutionized web development. They offer a more dynamic and fluid user experience compared to traditional multi-page applications. Traditional web apps require full-page reloads for almost every click the user makes. SPAs, on the other hand, load a single HTML page and update the page contents...
How to Use React's Context API – Tutorial with Examples
In React, data is typically passed down from parent to child via props. But this can lead to 'prop drilling' – where we have to pass props down through lots of components to get them where they're needed. Also, some props (for example, the current authenticated user, UI theme, or...
Build a Sticky Notes App with React and Appwrite
Are you ready to dive into an exciting project that combines the latest in frontend and backend technologies? Imagine having a personalized notes application with dynamic features like draggable notes, autosave, and customizable colors. Not only will...
Common React Mistakes to Avoid
React is a highly popular and powerful JavaScript library for user interface development. Its component-based architecture, combined with its declarative nature, is one of the primary reasons it works well for both small and large-scale applications. But like with any technology, there are pitfalls that you can fall into...
Relative Vs Dynamic Routing in React – Different Routing Methods with Examples
Single-Page Applications (SPAs) have been growing in popularity as people become accustomed to better user experiences and improved application responsiveness. This is in part thanks to the introduction of Client-Side Routing (CSR). CSR enables navig...
Create a MacOS App with React Native
Single-Page Applications (SPAs) have been growing in popularity as people become accustomed to better user experiences and improved application responsiveness. This is in part thanks to the introduction of Client-Side Routing (CSR). CSR enables navig...
How to Use React Compiler – A Complete Guide
In this tutorial, you'll learn how the React compiler can help you write more optimized React applications. React is a user interface library that has been doing its job quite well for over a decade. The component architecture, uni-directional data f...
Learn the MERN Stack by Building a Store
The MERN stack is a popular method to develop full-stack web applications. We just released a new course on the freeCodeCamp.org YouTube channel that will guide you through building dynamic, responsive web applications using the popular MERN stack. T....
Essential JavaScript Concepts to Know Before Learning React – With Code Examples
You may have seen the shiny technologies like React, Vue, and Angular that promise to revolutionize your front-end development. It's tempting to dive headfirst into these frameworks, eager to build stunning user interfaces. But hold on! Before you em...
Use the FARM Stack to Develop Full Stack Apps
The FARM stack is a modern web development stack that combines three powerful technologies: FastAPI, React, and MongoDB. This full-stack solution provides developers with a robust set of tools to build scalable, efficient, and high-performance web ap...
How to Build an AI Chatbot with Spring AI, React, and Docker
Hey Java developers, I’ve got good news: Spring now has official support for building AI applications using the Spring AI module. In this tutorial, we’ll build a chatbot application using Spring Boot, React, Docker, and OpenAI. This app will let user...
How to Boost Web Performance with Prefetching – Improve User Experience by Reducing Load Time
We've all encountered the frustration of waiting through long loading screens, only to find ourselves stuck with unresponsive pages. You see loading spinners everywhere, but nothing seems to move forward. Let me paint a clearer picture for you: This...
How to Create a Reusable Modal Component in React
When using React, we strive to create reusable components as much as we can to limit the number of components and repetition. This keeps your code “DRY”. DRY is a concept you may have come across—it means “Don’t Repeat Yourself”. DRY is a coding prin...
Learn React Hooks – Common Hooks Explained with Code Examples
Web development is a popular field in the tech industry. It involves building web software using HTML, CSS, and JavaScript – sometimes with the help of various frameworks and libraries. Using libraries and frameworks allows developers to focus more o...
Kodeco
kodeco.com
React Native Tutorial - Building Android Apps with JavaScript
In this React Native tutorial you’ll learn how to build native apps based on the hugely popular React JavaScript library, with a focus on Android.
Frontend Masters Boost – Helping Your Journey to Senior Developer
frontendmasters.com
Prefetching When Server Loading Won’t Do
We'll look at how to use @auth/core, add a Google Provider, and get our sessions persisting in DynamoDB. There is a GitHub repo for reference on everything.
Combining React Server Components with react-query for Easy Data Management
Server-side component rendering can improve data loading efficiency over client-rendered SPAs. Despite their benefits, such as out-of-order streaming, they have limitations, including slow server action updates and lack of support for client-side interactivity. React Query complements RSC by managing client-side data updates, addressing some of RSC's drawbacks.
How to Create Multi-Page Animations Using Framer Motion & React-Router-Dom
Animations are what make plain websites turn into exciting and unforgettable experiences. They give your website a bit of personality and uniqueness and leave the visitor admiring the overall aesthetic. It's a no-brainer that humans love beautiful things. We all love products that look easy on the eyes. In...
What are Controlled and Uncontrolled Components in React.js?
In React.js, managing form inputs and user interactions is a crucial part of building dynamic web applications. Two key concepts that developers need to understand are controlled and uncontrolled components. These concepts define how form data is handled within a React component. Controlled components rely on React state...
Smashing Magazine — For Web Designers And Developers
smashingmagazine.com
The Forensics Of React Server Components (RSCs)
React Server Components (RSCs) combine the best of client-side rendering, and author Lazar Nikolov thoroughly examines how we got here with a deep look at the impact that RSCs have on the page load timeline.
요즘IT
yozm.wishket.com
선언형 프로그래밍으로 이해하기 쉬운 코드 작성하기 | 요즘IT
선언형 프로그래밍으로 이해하기 쉬운 코드 작성하기
리액트 상태 관리 라이브러리, 어떤 것을 써야 할까? | 요즘IT
리액트 상태 관리 라이브러리, 어떤 것을 써야 할까?
새로 등장한 ‘리액트 서버 컴포넌트’ 이해하기 | 요즘IT
새로 등장한 ‘리액트 서버 컴포넌트’ 이해하기
리액트 바깥의 프론트엔드 : 리액트 등장부터 애플리케이션 구성 | 요즘IT
리액트 바깥의 프론트엔드 : 리액트 등장부터 애플리케이션 구성
딥링크 실전에서 잘 사용하는 방법 | 요즘IT
딥링크 실전에서 잘 사용하는 방법
use 훅이 바꿀 리액트 비동기 처리의 미래 맛보기 | 요즘IT
use 훅이 바꿀 리액트 비동기 처리의 미래 맛보기
몇 천 페이지의 유저 가이드를 새로 만들며 | 요즘IT
몇 천 페이지의 유저 가이드를 새로 만들며
대형 웹 애플리케이션 Micro Frontends 전환기 | 요즘IT
대형 웹 애플리케이션 Micro Frontends 전환기
웹 기반 그래픽 편집기의 구조와 7가지 디자인 패턴 | 요즘IT
웹 기반 그래픽 편집기의 구조와 7가지 디자인 패턴
프론트엔드와 SOLID 원칙 살펴보기 | 요즘IT
프론트엔드와 SOLID 원칙 살펴보기
리액트 배칭(Batching)의 모든 것 | 요즘IT
리액트 배칭(Batching)의 모든 것
React Native, Metro를 넘어서 (1,2) | 요즘IT
React Native, Metro를 넘어서 (1,2)
크로스 플랫폼 디자인 시스템, 1.5년의 기록 (1,2) | 요즘IT
크로스 플랫폼 디자인 시스템, 1.5년의 기록 (1,2)
2024 프론트엔드 기술 스택 트렌드 이야기 | 요즘IT
2024 프론트엔드 기술 스택 트렌드 이야기
리액트에서 key에 index를 넣으면 안 되는 ‘진짜’ 이유 | 요즘IT
리액트에서 key에 index를 넣으면 안 되는 ‘진짜’ 이유
알아두면 유용한 ‘리액트’ 개념과 성능 최적화 팁 | 요즘IT
알아두면 유용한 ‘리액트’ 개념과 성능 최적화 팁
카카오테크, 미래의 문턱을 낮추는 기술
tech.kakao.com
OROR Forge: Figma to Code 도구 제작기
안녕하세요, OROR 프론트엔드 팀의 테오입니다! 이번 글에서는 프론트엔...
카카오엔터테인먼트 FE 기술블로그
fe-developers.kakaoent.com
React Query의 구조와 useQuery 실행 흐름 살펴보기 | 카카오엔터테인먼트 FE 기술블로그
리액트 프런트엔드 프로젝트에서 서버 상태 관리를 위해 React Query 라이브러리를 사용하는 것은 데이터 조회, 캐싱, 동기화, 업데이트 등 많은 이점을 가져다줍니다.
더 가치 있는 공통 컴포넌트 만들기 | 카카오엔터테인먼트 FE 기술블로그
리액트 공통 컴포넌트를 만들 때 고려하면 좋은 점들의 인사이트를 제공합니다.
파일 변수 Deep-Dive | 카카오엔터테인먼트 FE 기술블로그
파일 변수가 무엇인지 알아보고, 어떻게 활용할 수 있는지 알아봅니다.
우아한형제들 기술블로그
techblog.woowahan.com
갤럭시 S24가 찾아준 배민커넥트 Android 성능 이슈 해결기(feat. React Native) | 우아한형제들 기술블로그
갤럭시 S24가 찾아준 배민커넥트 Android 성능 이슈 해결기(feat. React Native)
셀프서비스, 챗봇에게 물어보세요 | 우아한형제들 기술블로그
셀프서비스, 챗봇에게 물어보세요
tech.inflab.com
tech.inflab.com
개발 파트 소개 - 3. 모바일 앱 개발 파트 (React Native)
인프랩 채용 공고 안녕하세요. 인프랩의 향로입니다. 저희 인프랩 개발팀은 현재 백엔드, 프론트엔드, 모바일 앱, 데브옵스 파트로 나뉘어져 있습니다. 각각의 개발 파트가 어떻게 일…
지마켓 기술블로그
dev.gmarket.com
백엔드 개발자의 험난한 React 캘린더 컴포넌트 만들기 대작전 (feat. Props Drilling)
안녕하세요. Seller & SD Engineering 팀의 개발자 김민우입니다. 저는 주로 백엔드 개발을 담당하고 있지만, 최근에 프론트엔드 개발, 특히 React로 캘린더 컴포넌트 만들기에 도전했습니다. 이 글에서는 백엔드 개발자의 시각에서 본 프론트엔드 개발의 독특한 점들과 더불어 Props Drilling 문제를 해결한 경험을 공유하고자 합니다. 프론트엔드 개발에 대한 저의 경험은 전문적인 관점이 아닐 수 있지만, 이 분야에 대한 새로운 시각을 제공하려 합니다. 배경 : 저희 팀은 새로 오픈 할 ESM 개편안 중 '통계' 작업을 맡았습니다. 본래는 통계 페이지들의 특성상 상단에는 단순 조건 필터링, 하단에는 해당 조건에 따른 결과(그래프, 테이블 등)로 단순하게 구성하기 때문에 프론트에 대한 리소...
ZUM 기술 블로그
zuminternet.github.io
Next, d3로 서버 사이드 지도 렌더링하기
지속 가능한 서비스를 만들기 위해 기존 아키텍처를 유지하면서 서비스를 개선하는 과정을 소개합니다.
Sitepoint
sitepoint.com
React Router v6: A Beginner’s Guide — SitePoint
Learn how to navigate through a React application with multiple views with React Router, the de facto standard routing library for React.
