TC - 어플개발 (Twitter clone coding)

미방

내가 만들고 있는 앱을 예로 들어 설명해보겠다. 웹과 상호작용을 하는게 많다면 이 상태라는것을 이용해야한다. 예를들어, 트위터나 인스타처럼 글을 작성하고 업로드 버튼을 누르면 내가 작성한 글이 웹에 다시 렌더링 되는것을 하려면 말이다. 리액트에서 이것을 하려면 두가지가

CHAT GPT 한테 물어보니, 콜백 함수(callback function)는 다른 함수에서 자신을 호출하도록 미리 약속된 함수를 의미합니다. 이 함수는 일반적으로 다른 함수에 인수(argument)로 전달되며, 해당 함수가 실행된 이후에 호출됩니다.예를 들어, 다음과

순서가 갑자기 조금 뒤죽박죽 됐지만 https://velog.io/@dlife/react-Twitter-project-summary-2 전전글의 8번 State의 다른 추가적 기능 설명이다. 목표 : 특정 상황에 따라서 모달창

기본적으로 form을 전송하면 Submit 이벤트가 트리거되고, 그럼 브라우저는 자동으로 HTTP 요청을 만들어 전송하는데 위에서 말한것처럼 이 동작을 안하려고함. 이 리액트 앱을 서비스하는 서버로 HTTP 요청을 보내면 페이지가 다시 로딩될 텐데 그 요청을 처리할

5번일지에서 body, author이 객체로 잘 들어온것을 확인했고, 이전 상태를 바탕으로 새로운 상태를 만들어 새로운 배열도 확인 했으니 이제 그 데이터를 렌더링만 해주면 된다. 우선 map()을 이용할거다.

지금까지는 내 메모리에만 저장 되었기 떄문에 새로고침하면 데이터가 전부 날라갔다. 백엔드를 추가해서 어디서든, 접근가능하고 데이터가 남아있게 해보겠다. 우선 컴퓨터 하나로 작업하기 위해서 백엔드 서버를 구동해준다. 해당 깃헙 주소로 가서 readme.md 파일에 나온

이전시간까지는 데이터를 보내고 그 데이터를 백엔드에서 저장하는것까지 진행했었다. 간단히 풀어서 설명하면 이렇다. 그래서 이번엔 페이지를 다시 로드하거나 페이지를 처음 방문했을 때 백엔드에서 가져온 포스트가 표시되게 해볼 것이다.

async/await를 사용하는 것은 비동기 작업을 수행하고 해당 작업이 완료되기를 기다리는 데 사용된다. 일반적으로 useEffect()는 컴포넌트가 렌더링 될 때마다 실행되기 때문에, 이러한 비동기 작업을 수행할 때 async/await를 사용하면 더욱 쉽고

새로고침 해서 백엔드에서 데이터를 가져올때 반응은 즉각적이다. 왜냐면 지금 내 컴퓨터 하나에서 프론트와 백서버 둘 다 작업중이기 떄문이다. 그런데 실제로는 요청을 보내 이렇게 데이터를 가져오거나 저장하는 데 시간이 좀 걸리는 경우가 많다. 그래서 백엔드 코드에서 딜레이

어플이 복잡해지고 커질 수록 여러개의 페이지가 존재할텐데 만약 타인에게 공유할 url이 하나뿐이라면 (즉, 메인 화면) 공유하려고 하는 해당 페이지까지 찾아가야하므로 매우 번거로운 작업이 아닐 수 없다. 따라서 우리는 해당 url 마다 공유할 수 있는 수단이 필요하다.

지난시간에 라우트를 설정하고 각 라우트별로 원하는 컴포넌트를 렌더링 되게 진행해보았다. 그런데 이제 원하는 컴포넌트를 렌더링 했으나 다른 컴포넌트들과 레이아웃되어서 렌더링 되지도 않고, 원래 동작하던 기능들도 동작하지 않는 문제점이 생겼다. 그래서 그걸 해결하는 방법

이전 시간에 레이아웃 라우트를 추가해주고, 레이아웃 라우트에 필요한 여러 속성들을 설정해주었다. 가장 아랫단에 위치할 컴포넌트 객체로 기존에 추가해줬던 객체들을 안에 래핑되게 해주었고, 래핑하고 있는 가장 아랫단의 루트 컴포넌트인 RootLayout 컴포넌트에서 Oul

`form`이 `Modal`에 래핑 되어서 `NewPost` 컴포넌트가 렌더링 되기까지 성공했다. 그런데 이미 포스팅된 `Post`들 위에 렌더링 되지 않는 문제가 생겼다. 그래서 Posts 컴포넌트 자체를 레이아웃 컴포넌트로 바꿔야 한다. (이전의 App 컴포넌트)

이전 시간까지 했던 것들은 원하는 페이지들을 각각 라우트 별로 분리해서 추가해주었고, 중첩이 되어 렌더링 되어야 할 컴포넌트들은 레이아웃 라우트로 설정해주었다. 결과적으로 여태까지 `MainHeader` 가 위치한 `RootLayout` 컴포넌트가 가장 아랫단에 위

프로젝트에서 "react-router-dom" 을 6.4 이상 버전으로 설치했다면 매우 편리한 기능들을 사용 할 수 있다. 특정 경로에서 특정 컴포넌트를 가져오는 수준을 뛰어넘는 기능이다. loader(), action () 라는 기능이다. 설명하기에 앞서서, 기존의

에러가 하나 생겼는데 고치는데 꽤나 애를 먹었다. 이전 포스팅에 합칠까 하다가 중요한 부분이라서 짧아도 한 포스팅으로 빼서 작성한다.

useEffect 훅 을 대신한 `Loader` 기능을 통해서 데이터를 가져올 수 있게 됐다. 하지만 데이터 보내는 것도, 새 포스트를 작성하는 것은 리팩토링이 아직이다. 그러니까 데이터 가져오기 말고 데이터를 보내는 작업도 리팩토링이 필요하다. 여기선 action 을

리액트로 개발을 하다 에러가 생기면 해당 부분의 컴포넌트만 렌더링되지 않는것이 아니라 전부 다 렌더링이 되지 않는다. 다시말해 리액트에서는 예외 발생 시 예외를 발생한 컴포넌트만 언마운트 되지 않는다. 예외 발생 시 모든 컴포넌트가 언마운트 된다.

상세 페이지 구현(포스트 눌렀을 때) 새로운 라우트 추가. 내 목표는 어떤 포스팅이 추가되든, 기존에 있든 상관없이 각기 다른 포스트들의 상세페이지를 보려고한다. 그럴려면 뭔가 형태는 동일하지만, 구별할 수있는 식별자를 추가해서 구분해서 렌더링 해준다. 그 형태를

리액트는 `하나의 html` 파일로 동작함. - 처음에 가장 처음 실행되는 파일 : `main.jsx`파일. - import 되는 파일들 : react, react-dom 같은 라이브러리. package.json에 설치가 되어있음. - package.json은 No