분류 전체보기 (76) 썸네일형 리스트형 [TIL] async / await Async/Await는 ES8에서 도입된 비동기 처리 방식 문법으로 함수 내에서 await 키워드를 사용하여 비동기 작업이 끝날 때까지 기다린다. Async/Await를 사용하면 코드가 간결해지고 가독성이 좋다. Async/Await는 try/catch로 에러를 처리한다. Async/Await는 Promise객체를 반환한다. (then()을 사용 가능) Promise는 비동기 작업을 다룰 때 사용하는 객체다. 비동기 작업이 끝나면 성공(resolve) 또는 실패(reject)를 알려준다. Promise는 .catch()를 사용하여 에러를 처리한다. 작업이 성공 시에는 .then()을 통해 성공 시 처리할 코드를 실패 시에는 .catch()를 통해 실패 시 처리할 코드를 작성한다. [TIL] Next.js에서 라우팅이 안되는 경우가 있다?! export const Navbar = () => { return ( 홈 로그인 마이페이지 ); }; 이렇게 라우팅을 해주려고 하는데 계속 에러가 났다 . export const LoginPage = () => { return ( 여긴 LoginPage ); }; 그래서 이것저것 해보다가 해결했는데 const ConsultPage = () => { return ( 여긴 ConsultPage ); }; export default ConsultPage; 이렇게 하니까 바로 해결! 그 이유는 " nextjs에서는 default로 export하지 않으면 사이트에 접속했을 때 에러가 발생한다 " 라는 설명이 있었다. [TIL] useEffect의 실행 순서 React 컴포넌트는 먼저 랜더링되며, 이 과정에서 JSX 코드가 반환되고 DOM에 반영됩니다. 이것이 기본적인 랜더링 과정이죠. useEffect 실행: 컴포넌트 렌더링이 완료 된 후 useEffect 내부의 함수가 실행된다. 이 함수는 비동기적으로 실행될 수 있기 때문에 비동기 작업을 수행하는데 유용하다. dependency array의 값이 변경될 때마다 useEffect가 실행된다. clear : 컴포넌트가 unMount 될 때 실행되는 함수로 사이드 이펙트를 정리하는데 사용된다. [TIL] 버츄얼 돔과 리얼 돔의 차이 DOM(Document Object Model)은 웹 페이지의 구성 요소들을 트리 구조로 표현한 것이다. 즉, HTML 문서의 각 요소들을 노드로 나타내는 방식이다. 가상 DOM은 실제 DOM의 복사본 형태로, 메모리 상에 존재하는 JS 객체로 이루어져 있다. 가상 DOM의 핵심 장점은 실제 DOM을 직접 조작하는 것보다 훨씬 효율적이라는 점이다. JS 객체를 변경하는 작업이 훨씬 더 가볍고, 리액트의 버전업데이트로 가상 DOM에서 batch update가 가능해졌는데, 이로 인해 단 한번만의 갱신이 필요하다는 큰 차이가 있다. [TIL] 상태 관리를 왜 해야할까? 리액트는 가상DOM 방식을 사용해 화면에 있는 요소들을 제어한다. 직접 변수를 변경하는 것이 아닌 state를 통해 데이터를 관리해야 변경된 사항을 적용할 수 있다. 상태 관리를 사용하는 이점으로는 변경사항을 적용할 수 있다는 점과 하나의 state의 값으로 하위 컴포넌트에 props로 전달하여 일관된 데이터를 공유할 수 있다는 점이다. 만약 input의 값을 지정하는 state처럼 다른 컴포넌트에서도 지역적으로 쓰일 수 있는 state일 경우 커스텀 훅 내에서 state를 선언하여 사용한다. anstack-query를 통해 서버에서 데이터를 받았을 때는 queryKey를 통해 데이터 관리한다. [TIL] 팀프로젝트 회고 프로젝트 명 : CookHub 🌿 프로젝트 소개 : CookHub는 사용자들이 요리와 관련된 정보를 쉽게 찾고, 🔍 요리법에 대한 리뷰를 댓글로 남길 수 있는 사이트를 제공 다양한 요리 레시피 제공: 사용자들은 다양한 요리 레시피를 탐색할 수 있다. 사용자 참여: 사용자들은 요리 레시피에 대해서 다른 사람들과 의견을 공유할 수 있다. 직관적인 사용자 인터페이스: 리액트와 Next.js를 사용하여 사용자 친화적인 인터페이스를 제공한다. 개발 기간 : 2024.03.18 ~ 2024.03.25 (8일) 개발 환경 🚀 Stacks : html, css, typeScript, React 🛠 Tools : Figma, Git 👥 Collaboration : GitHub, Notion, Slack 📂 Package.. [TIL] Image 올리기 next.js에서는 Image를 올릴때 import Image from "next/image"; import 후에 이미지 크기같은걸 정해서 올리면 잘 올라간다! [TIL] changeEvent const onChangeHandler = (event: React.ChangeEvent) => { setChange(event.target.value); }; typeScript에서 이렇게만 input 에 썼었는데 export default function useInput() { const [value, setValue] = useState(""); const onChange = (e: React.ChangeEvent) => { setValue(e.target.value); }; return { value, setValue, onChange }; } 이렇게 따로 커스텀 훅인 useInput을 정의해서 선언했더니 다른 페이지에서 가져오기가 훨씬 편하고, 코드가 깔끔해졌다. const { value: ed.. [TIL] TailwindCSS 사용하기 next.js를 사용하면 TailWindCss를 사용할 수 있는데 프로젝트를 하다보니 className=" " 으로해서 css를 적용해줄 수 있었다. TailWindCSS를 쓸 수 있는 사이트이다. https://tailwindcss.com/ 완료 이렇게하면 padding right와 padding left가 늘어나고, text가 white로 바뀌고, border-radius 가 바뀐다. [TIL] nextJS에 이미지 url 넣기 /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: 'https', hostname: 'i.example', }, ], }, }; export default nextConfig; 이미지가 말썽.. next.config.mjs 에 찾아서 들어가보니 해결.. 이전 1 2 3 4 ··· 8 다음
