로그인 페이지 통합
오늘 우리는 어제 구현된 로그인을 기반으로 React 페이지를 추가할 것입니다.. 사용자 코멘트 기능 ID연결하다, 댓글 삭제 및 평가 기능 지원. 그것을 위해 다시 축사용할 것이다. 다시 말해서, 페이지를 로드하는 동안 현재 사용자가 로그인되어 있는지 확인하십시오., 로그인한 경우 _ID서버에 값을 요청하고 페이지에서 가져옵니다.. 그리고 댓글은 로그인 상태에서만 작성하실 수 있습니다., 서버 댓글 DB저장하려면 다른 명령을 보내야 합니다.. 그런 다음 React 페이지로 돌아갑니다. DB값을 읽고 적용 DB다음을 기반으로 페이지를 다시 렌더링해야 합니다..
원래 다들 그렇게 쓸데없이 비싸게 구현해, 나는 다른 사람들의 코드를 잠시 살펴보았다., 다른 대안이 없을 것 같습니다. 오늘은 이대로 하고 싶어.
아, ~ 위에 삼그 문제에 대해 많이 생각했어. 일반적으로 회사는 자체 회사를 등록하여 이를 수행해야 합니다., 솔직히 웹상에서 인기 있는 걸 공개한 적이 없어서 그런 것도 기대할 수 없다.. 결국 사용자가 자신의 카페를 만들고, 원하는 경우 메뉴와 가격을 수정할 수 있습니다.. 이 방법을 사용하려면 실제로 프로그래밍 이외의 요소에 대해 생각해야 합니다.. 사용자가 편집에 시간을 투자해야 하는 이유는 무엇입니까?, 이 기능을 남용하는 사용자가 있습니까?, 오전
우선 어떤 홍보를 지원하는 것은 당연하다.. 사용자는 혜택이 부여된 경우에만 참여합니다.. 나는 아직 이것에 대한 비즈니스 모델을 개발하지 않았습니다.. 바로 떠오른 것은 평소 카페를 많이 다니며 후기를 남기는 사람이라면 개인 블로그를 가지고 있을 확률이 높다는 점이다.. 그래서 그 사람이 리뷰도 많이 쓰고 카페도 많이 차렸다면, 페이지 상단의 감사 목록에 그들의 이름을 적으십시오.. 이 이름을 클릭하면 개인 페이지로 이동합니다., 이 개인 페이지의 블로그 또는 Instagram, YouTube 링크를 설정할 수 있습니다..
이 방법을 이용하면 카페를 좋아하는 콘텐츠 크리에이터들이 교류할 수 있는 장을 만들 수 있습니다.. 그러나 개인 필드 + 게시판이라는 새로운 페이지를 생성하고 관리해야 합니다.. 사실 지금까지 개발된 기술로도 충분히 가능할 것이라고 생각합니다., 유지비(시간)크게 어렵지 않을 것 같아요. 여하튼 이 사이트를 이용하시는 분이라면 높은 유지비용은 역사입니다., 평소에 그렇게 희망적으로 생각하는 사람이 아니라서 일단 실천해보고 싶어요..
혼자 개발하다보니 오늘은 무엇을 할지 정했습니다, 어떻게 구현할지 미리 윤곽을 그리는 습관이 생겼습니다.. 너무 많은 시간을 낭비했기 때문입니다.. 소프트웨어 엔지니어링의 무료 예비 계획(요구 사항:요구 사항)컨셉을 강조하지 않았나 싶습니다..
어쨌든 오늘은 위에 나열된 것들을 구현해 봅시다.. 다음 개발에서는 사진도 포함할 수 있습니다.. 아무튼 이런 잡담 그만하고 오늘부터 개발을 시작합시다.….시작하기 위해 코드를 보는 것이 답답합니다.. 조만간 리팩토링을 해야겠습니다..
오류로 시작
*기억하다
클라이언트에서 Axios를 사용하는 경우:
축.포스트 클라이언트에서 서버로 데이터 보내기
axios.get 서버에서 클라이언트로 데이터 보내기
.
app.get(‘/user/api/islogIn’, async(req, res)=>{
콘솔.로그(‘값‘, 요구. isAuthenticated());
이 코드가 무엇이든 잘못된다음과 같이 오류가 발생했습니다.. 다른 주소로 진실손을 돌려 축그냥 물어봐 잘못된반환. 코르했다, 보니 클라이언트 측에서도 허용됨가정된다.
축 .프리셋 .자격 증명으로 = 진실 ;
맨 위에 이 한 줄 app.js 위에 추가했더니 잘되네요.. 교차 도메인이 허용된다고 가정합니다..
COR나뉘다? (Cross-Origin 리소스 공유)
한 오리진에서 실행 중인 애플리케이션이 다른 오리진의 리소스에 액세스할 수 있도록 브라우저에 지시하는 시스템입니다.. 다시 말해서, 원래는 보안상의 이유로 포트가 다르면 접속이 불가능합니다..
암튼 이 문제를 해결했는데 지금 또 채우다문제입니다. 구조가 좀 더 복잡해서 좀 어렵네요. 하지만 공부용으로 아주 유용한 문제라고 생각해서 잘 풀어보고자 합니다..
채우기() 메서드
채우기() 방법은 몽구스제공하는 방법 중 하나로, 문서 검색 쿼리에 사용할 수 있습니다.. 이 방법은 설명서에 포함되어 있습니다. 심판에서 정의한 필드가 다른 컬렉션의 문서에 대한 참조인 경우, 가져 와서 필드 값을 바꾸십시오..
다시 말해서채우기() 방법으로, 검색 결과에서 참조되는 다른 컬렉션에서 문서를 검색하고 이러한 필드의 값을 채울 수 있습니다.. 이를 통해 다른 컬렉션의 문서를 참조하는 필드 값을 쉽게 처리할 수 있습니다..
끊임없는 커피 샵 = 예상하다 커피 샵 .findById (필요한 .매개변수 .ID )
.채우다 (‘메뉴’)
.채우다 (‘repreMenu’)
.채우다 ({
떨어져 있는:‘코멘트’,
채우다: {
떨어져 있는:‘사용자’,
모델:‘사용자’,
선택하다:‘-비밀번호’// 사용자 데이터 비밀번호 제외 필드
}
});
첫 번째 배열 모두 개체 식별가지다. 모두 채우다나는해야한다. 메뉴, 전메뉴배열입니다 채우다준.
여기서 두 번 채우다혼란스러워논평사용자가_ID포함. 그래서 배열에서 _ID채우기 위해 하나일 채우다하다. 그동안(채우기{~에} 관련된 _ID사용자 값으로 채우기 2일 채우다하다.
이 방법으로 리뷰에 사용자의 실제 닉네임을 표시할 수 있었습니다.. 물론 데이터베이스에 등록!
로그인과 통합
이제 삭제해야 합니다..
등록상태.
코멘트 ID그리고 현재 로그인 ID성냥.
이 경우 삭제 버튼만 표시되어야 합니다., 버튼을 누를 때 축~처럼 우편따라서 서버 측에서 삭제할 수 있습니다.. 그럼에도 불구하고 받다데이터 검색은 상위 페이지에서 이미 완료되었으므로 이를 삭제하기만 하면 됩니다..
아래는 나중에 기억해야 할 팁입니다.probs.user.user._id있을 수도 있고 없을 수도 있습니다. 제대로 했다면 그만한 가치가 있다, ~하지 않는 한 한정되지 않은하지만, 만약에 한정되지 않은할당할 때 오류가 발생합니다.. 이것은 삼항 연산자로 해결할 수 있습니다.. 기술이다.
끊임없는 연결된 사용자 ID = 노력하다 .사용자 .사용자 ._ID ? 노력하다 .사용자 .사용자 ._ID :영 ;
+) 왔다 갔다를 많이 하다 보니 변수의 형식이 헷갈린다.. 씨제가 프로그래밍을 시작한지 얼마 안 된 사람이라 포맷이 바로 안 보이면 많이 헷갈리거든요.. 타이프스크립트를 곧 배워야 합니다..
+)!!2개 붙이면 정의되지 않음, null두번째 부울형식 변경 가능. !추가하여 반대 부울 유형으로 변경하려면 !그리고 다시 원래대로. 헷갈리지만 타입이 지정되지 않아서 자주 사용.
이것이 로그인한 것과 로그인하지 않은 것의 차이가 구현된 방식입니다.. 문제는 서버에서 로그아웃해도 렌더링이 진행되지 않는다는 점입니다.. 이것은 React를 조금 공부하면 해결될 수 있을 것 같습니다..
첫 번째 useEfct의 두 번째 인수 값을 설정할 수 없습니까?.
useEffect에 대한 설명은 다음과 같습니다.
종속성 세트 (종속성 배열) useEffect이것은 사용할 때 가장 일반적인 요소입니다.. 이 배열에 포함된 값이 변경될 때만 useEffect달릴 것이다. 배열의 값이 변경되지 않는 경우 useEffect실행되지 않음. 이 배열에 의존하는 상태 소품 포함할 수 있습니다.
빈 배열 (빈 배열)useEffect빈 배열을 전달합니다., 그만큼 useEffect처음 한 번만 실행. 쫓지 않을 것이다. 이 경우구성 요소DidMount와 같은 역할을 한다.
값을 전달하지 않음 (값 없음)useEffect값을 전달하지 않으면, 구성 요소가 렌더링될 때마다 실행. 이 경우componentDidUpdate와 같은 역할을 한다.
+ 부모가 다시 렌더링될 때 자식으로 노력하다통과하면 자식도 다시 렌더링되지만 실패하면 다시 렌더링되지 않습니다..
오류 및 해결 방법
기름부음 페이지2섹션2 (노력하다 ){
끊임없는 (데이터 , setData ) = useState (영 );
끊임없는 URL = 창문 .위치 .경로명 ;
끊임없는 ID = URL .하위 문자열 (URL .lastIndexOf (‘/’) + 하나 );
useEffect (() => {
끊임없는 데이터 불러오기 = 비동기 () => {
시도 {
끊임없는 답변 = 예상하다 축 .받다 (`http://localhost:8080/cafe/api/${ID }`);
setData (답변 .데이터 );
} 잡다 (실수 ) {
콘솔 .규약 (실수 );
}
};
데이터 불러오기 ();
}, (데이터 )); //데이터보정. 구성 요소를 다시 렌더링하려면
콘솔 .규약 (‘데이터 확인‘, 데이터 );
끊임없는 연결된 사용자 ID = 노력하다 .사용자 .사용자 ? 노력하다 .사용자 .사용자 ._ID : 영 ;
끊임없는 리뷰 = ();
만약에 (데이터 != 영 ){
~을 위한 (허용하다 논평 ~에서 데이터 .논평 ){
리뷰 .누르다 (
<컨테이너 클래스 이름 =“시리즈 mt-3 pt-3 pb-3 mb-3”스타일 ={{국경:`2픽셀 고정 ${회색 색상 }`, 최소 높이:‘5렘’, 넓은:’30렘’ }}>{/*2번호 기사*/}
<다양한 스타일 = {{텍스트 정렬:‘오른쪽으로’}}>
{노력하다 .로그인 &&(논평 .사용자 ._ID ===연결된 사용자 ID )&&<단추 유형 =“단추”수업 =“btn btn-개요-보조 btn-sm”>끄다 단추 >}
다양한 >
<다양한 클래스 이름 =“콜-3”>
<다양한 스타일 = {{텍스트 정렬:‘왼쪽’}}>{논평 .사용자 .별명 }다양한 >
<그림
클래스 이름 =“d-블록 w-100”
원천 =“https://cdn.pixabay.com/photo/2023/01/12/05/32/duck-7713310_640.jpg“/>
다양한 >
<다양한 클래스 이름 =“콜-9 ml-3”스타일 ={{왼쪽 여백:`2픽셀 고정 ${회색 색상 }`}}>
<다양한 >{논평 .내용물 }다양한 >
다양한 >
컨테이너 >
);
}}
돌려 주다 (
<다양한 >
{리뷰 }
다양한 >
)
}
이것은 처음으로 작성된 코드입니다.. 사용 효과두 번째 전달된 값은 무한대로 받기 때문에 웹은 무기한 재발행된다.. 이전 값과 다음 값이 같으면 다시 실행되지 않지만 문제는 데이터비동기이므로 값을 예측할 수 없습니다.. 어쨌든 부모로부터 얻은 결과 노력하다로 해결되었다.
useEffect (() => {
끊임없는 데이터 불러오기 = 비동기 () => {
시도 {
끊임없는 답변 = 예상하다 축 .받다 (`http://localhost:8080/cafe/api/${ID }`);
콘솔 .규약 (답변 .데이터 === 데이터 )
setData (답변 .데이터 );
} 잡다 (실수 ) {
콘솔 .규약 (실수 );
}
};
데이터 불러오기 ();
}, (노력하다 .부모 데이터 ))
다음은 부모님 정보입니다..
끊임없는 (마지막 댓글 , setData ) = useState (영 );
댓글을 작성하여 서버로 전송하면가사가다 setData~처럼 마지막 약속로 변한다. 값이 변경될 때마다 다시 렌더링되도록 구현됩니다..
나는 또한 다음과 같이 삭제를 구현.
비동기 함수 양식 제출 (데이터 ) {
끊임없는 URL = 창문 .위치 .경로명 ;
끊임없는 ID = URL .하위 문자열 (URL .lastIndexOf (‘/’) + 하나 );
예상하다 축 .우편 (`http://localhost:8080/cafe/user/review/delete/${ID }`{댓글 ID: 데이터 })
.그 다음에 ((입술 ) => {
setDeleteToggle (진실 );
})
.잡다 ((잘못 ) => {
콘솔 .규약 (잘못 );
});
}
현재 댓글의 ID서버에서 처리.
아파트 .우편 (‘/cafe/user/review/delete/:id’, 비동기 (필요한 , 입술 )=>{
끊임없는 comment_id = 필요한 .몸 .댓글 ID ;
끊임없는 커피 샵 = 예상하다 커피 샵 .업데이트원 (
{_id :요청 .매개변수 .ID },
{당기기:{논평:{_ID :comment_id }}}
)
입술 .보내다 (삭제 확인’);
})
req.params.id카페의 ID오전. 관련된 ID카페에서 comment_id~와 함께 논평가져가다(배열 구조입니다.)
이전까지 찾다찾은 후 직접 편집 .컴퓨터에 저장()내가 그랬어업데이트하려면당신이 전화할 때.
지우고 렌더링
렌더링하기가 매우 어렵다고 생각합니다.. 댓글을 삭제해도 이제는 렌더링을 해야 합니다., 토글 방식으로 구현되었습니다.
setDeleteToggle (진실 );
그만큼 축~처럼 끄다성공하면 위의 코드가 실행됩니다.,
끊임없는 (데이터 , setData ) = useState (영 );
끊임없는 (삭제토글 , setDeleteToggle ) = useState (잘못된 );
끊임없는 URL = 창문 .위치 .경로명 ;
끊임없는 ID = URL .하위 문자열 (URL .lastIndexOf (‘/’) + 하나 );
useEffect (() => {
만약에 (삭제토글 === 진실 ) setDeleteToggle (잘못된 );
끊임없는 데이터 불러오기 = 비동기 () => {
시도 {
끊임없는 답변 = 예상하다 축 .받다 (`http://localhost:8080/cafe/api/${ID }`);
콘솔 .규약 (답변 .데이터 === 데이터 )
setData (답변 .데이터 );
콘솔 .규약 (‘실행‘);
} 잡다 (실수 ) {
콘솔 .규약 (실수 );
}
};
데이터 불러오기 ();
}, (노력하다 .부모 데이터 , 삭제토글 ));
콘솔 .규약 (‘스위치‘, 삭제토글 );
여기 useEffect종속성 배열에 포함된 부분입니다.. 다시 말해서, 이 부분 진실종속성 배열을 변경하므로 useEffect구성 요소를 다시 실행하고 다시 렌더링했습니다.. 그리고 useEffect수행되면 사용자에게 표시할 데이터가 반환됩니다. 축자세히 보면 토글 모드로 동작하는 것을 알 수 있습니다.. 더 좋은 방법 있으면 수정하겠습니다, React를 사용해 본 적이 있습니까? 4우선 이 방법이 가장 좋은 것 같아요.
(… 지금 참으로 왔다 갔다 하는 토글 방식보다는 얕은 복사본으로 객체를 복사해서 새로 대입하는 편이 나을 것 같습니다. <-> 거짓이고 요약을 게시물로 작성하십시오. 복사된 객체는 js 내에서 처리됩니다. 따라서 할당된 주소를 해제할 필요가 없으며 더 나은 방법인 것 같습니다.)
끝
그리고 한가지 문제는 서버측에서 로그아웃을 눌러도 여기서는 렌더링이 진행되지 않는다는 점입니다.. 하지만 업데이트를 해보니 잘 됩니다.. 아파트컴포넌트가 이것을 관리하기 때문에.
내비게이션 바가 구현되는 곳이기 때문입니다.로그 아웃서버 로그오프를 요청하려면 여기를 클릭하십시오., 로그 아웃 상태할 것이다. 이 경우에만 표시됩니다. 반응하다나는 그것을 만들었어야했다. 그냥 둘을 섞어보고 싶어서 일이 커진 느낌이다..
