전체 글744 코딩 알려주는 누나의 React 강의를 마치며 4월 2일을 기점으로 약 20일 동안 (중간에 못한 날도 며칠 있지만) React에 대한 전반적인 복습과 Redux, React-Query 복습 및 활용하는 방법, Axios Instance, Intersection 하는 방법, 협업해서 파일 구조 설정하는 방법, 비즈니스 로직, UI 분리해서 컴포넌트화 하는 방법 등등 전체적으로 한번 복습하면서 정리할 수 있었던 시간이었던 것 같습니다! 이미 개발자로 일하고 계신 분들에게는 아는 내용일 수 있지만 저처럼 다른 언어를 주로 사용하다가 React나 관련 라이브러리들을 한번 활용하면서 복습해보고 싶다거나 개발자를 준비하고 계신 분들이 듣기 좋은 강의였다고 생각합니다! 아쉬웠던 점을 찾아보자면.. 아무래도 개발자를 준비하시는 분들에게 중점을 둔 강의이다 보니 .. 2024. 4. 22. [React] useState를 선언할 때 let이 아닌 const를 사용하는 이유 강의를 듣다가 useState를 선언할 때 왜 let이 아닌 const를 사용하는지에 대한 의문이 생겼고, 강의 내용을 쓸 수 없기 때문에 구글링을 통해서 클로저에 대한 부가적인 이해 및 관련 글을 읽게 되었다. hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com 위 두 글을 정독하게 되었는 데 useState를 함수 뜯어보았을 대략적으로나마 어떤 방식으로 hook이 작동되는지 알 수 있었고 그 과정 속에서 클로저의 역할을 이해하게 되었는 데 (이해.. 2024. 4. 3. 코딩 알려주는 누나의 React 강의를 시작하며 이직을 준비하면서 어떤 부분을 채워나가면 좋을지 고민하면서 패스트캠퍼스, 인프런 등과 같은 강의 사이트도 찾아보고 유튜브로 구독해 뒀던 분들의 강의 영상도 찾아보면서 어떤 걸 들어야 할지 고민을 많이 해보았는 데 이전 회사에서는 Next.js를 중심으로 개발을 진행하였다 보니 React를 중심으로 기초부터 복습할 수 있으면서도 Redux와 React-Query까지 함께 학습하여 실습 프로젝트와 함께 활용해볼 수 있는 점에서 매력적으로 다가왔습니다. 처음부터 다시 시작한다는 마음으로 열심히 해보고 싶습니다 3. (✨2024 최신 업데이트)리액트: 프론트엔드 개발자로 가는 마지막 단계 html 강좌부터 시작하여 javascript 그리고 이번 react 강의까지 모두 누나쌤과 함께 하였습니다! 약 5달 전까.. 2024. 4. 2. [React] useMemo 🔗 출처 🖥️ useMemo의 기능 ⚠️ useMemo는 결과값을 기억해두는 React Hook이기 때문에 빈번하게 사용할 경우 성능에 안좋은 영향을 줄 수 있습니다. 1️⃣ 복잡한 계산을 저장해 놓는 용도 아래 코드를 예시로 들자면 🙅♂️ 렌더링 될 때마다 expensiveCalculate 함수가 재실행되기 때문에 복잡한 작업을 수행해야 하는 경우 불필요한 함수가 매번 재실행되는 것이기 때문에 성능 저하 문제를 초래할 수 있습니다. 즉, 복잡한 작업을 할수록 비싼 값을 내야 한다. import React, { useState } from "react"; const expensiveCalculate = (numbers) => { console.log("calculate sum...."); return .. 2024. 3. 29. [React] useRef 🔗 출처 : 설명도 너무 깔끔하게 잘해주시고, 예제도 같이 따라 해볼 수 있어서 useRef에 대해서 어렵게 느껴진다면 시청해 보기 아주 좋을 것 같습니다! 🙅♂️ React에서 변수를 사용하지 못하는 이유 값의 변화를 UI에 실시간으로 보여줄 수 없다. 화면이 렌더링 되면 변수의 값이 초기화된다. 🥸 특징 : useState의 장점 + 변수의 장점을 합친 React Hook이다 👉 useState의 특징 렌더링 되도 값이 유지된다. 변화를 실시간으로 화면에 보여줘야 하기 때문에 매번 렌더링이 일어난다. (렌더링이 많아지면 성능에 안 좋음) 👉 변수의 특징 렌더링 되면 값이 사라진다. 변화를 실시간으로 화면에 보여주지 않아도 되기 때문에 성능에 좋다. 👉 useRef의 특징 useState와 변수의 장.. 2024. 3. 28. [React] useLayoutEffect 🔗 출처 useLayoutEffect – React The library for web and native user interfaces react-ko.dev 🤓 정의 useLayoutEffect는 브라우저가 화면을 다시 채우기 전에 실행되는 버전의 useEffect입니다. useEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 비동기적으로 동작하기 때문에 다른 작업에 의해 blocking 하지 않고 필요한 시기에 실행됩니다. 🆚 화면이 업데이트된 후 effect가 실행됩니다. useLayoutEffect 🟰 첫 렌더링, 의존성 배열에 넣어준 state의 변화를 감지하여 콜백함수가 실행됩니다. 🆚 콜백함수는 동기적으로 동작하기 때문에 해당.. 2024. 3. 25. [React] useId 🔗 출처 useId – React The library for web and native user interfaces react.dev 🤓 정의 useId()는 React 18 버전에 출시된 훅으로 접근성 속성에 전달될 수 있는 고유 Id를 생성하기 위한 React Hook입니다. 🥸 문법과 특징 const id = useId() 매개변수를 사용하지 않습니다. 라벨과 관련된 Id 생성 : label 요소와 그와 연결된 입력 요소(input, select, textarea)에 대한 id와 htmlFor 속성을 사용할 때 사용합니다. 여러 관련 요소에 대한 Id 생성 : 여러 관련 요소에 Id를 제공해야 하는 경우 호출하여 공유 접두사를 생성할 수 있습니다. import { useId } from "reac.. 2024. 3. 24. [일기] 다시 시작 보호되어 있는 글 입니다. 2024. 3. 24. [Next.js] Drag&Drop 기능 구현하기 이번에는 관리자 페이지에서 이미지를 업로드할 때 파일 선택 버튼 외에도 드래그 앤 드롭으로 이미지를 삽입할 수 있는 기능을 구현해보았다. 코드 아래 링크에 블로그와 기존에 구현했던 이미지 파일 변환 기능을 활용하여 구현하였다. Test 페이지 (/pages/test.js) import Head from "next/head" import FileBox from "@/elements/library/fileBox/Test" import { useEffect, useState } from "react" import styled from "styled-components" const Test = () => { const [imageFile, setImageFile] = useState(null) // AWS에 이.. 2024. 1. 9. 이전 1 2 3 4 5 6 7 ··· 83 다음 728x90
