프론트엔드 개발 찔찔이

들어가며Next.js란?서버 사이드 렌더링(SSR)을 통해 HTML을 서버에서 마크업하여 검색 엔진에서 페이지를 더 잘 인식하고 색인화 하는데 도움이 되어 SEO 관리에 좋음기존의 리액트는 클라이언트 사이드 렌더링(CSR)으로 클라이언트 측에서 마크업이 생성되어 로딩시간이 오래걸리고 SEO 관련 적용 시간이 오래걸린다는 단점이 있음Next.js와 React의 차이1. 서버 사이드 렌더링 (SSR)React는 클라이언트 측에서만 렌더링되지만, Next.js는 서버 측에서도 렌더링할 수 있음SSR은 페이지 로딩 속도를 개선하고 검색 엔진 최적화(SEO)를 개선하는데 도움2. 정적 사이트 생성 (SSG)Next.js는 빌드 시점에 페이지를 렌더링하여 HTML 파일을 생성하고 정적 사이트를 생성할 수 있음SSG..

들어가며styled components를 이용하여 제작한 노트앱 프로젝트를 배포하고 모니터링하던 중에 이상한 오류를 발견했다.pc환경에선 최신순, 오래된순 정렬이 정상적으로 작동하는데 모바일(아이폰 mini12 기종)로 확인해보니 정렬이 안되는오류가 있었다.먼저 어떤 형식으로 날짜를 설정했는지 보고 오류를 찾아보도록 하겠다. toLocaleDateString()// POST:CREATE if(!contRef.current.value){ if(window.confirm("내용이 없습니다. 그대로 저장하시겠습니까?")){ axios.post(`${process.env.REACT_APP_API_URL}/notes`,{ (...)..

지난 포스팅에서는 댓글 리스트를 불러와봤다.그리고 댓글 작성 시 나의 정보를 댓글 데이터에 추가하기 위해 암호화한 로컬스토리지를 저장하는 작업을 했다. 해당 작업으로 새로고침해도 로그인을 유지할 수 있도록 true 값을 저장하는 작업도 할 수 있었다.//Header.js 로그아웃 버튼에 추가 secureLocalStorage.setItem("AutoLogIn", false); //LogIn.js 로그인 성공 조건문에 추가 secureLocalStorage.setItem("AutoLogIn", true); //App.js 에 추가 useEffect(()=>{ const AutoLogIn = secureLocalStorage.getItem("AutoLogIn"); setLogInCheck(..

지난 포스팅에서 로그인, 로그아웃까지 만들었다. 이번엔 로그인한 상태에서 댓글을 달면 좌측에 리스트에 추가 시켜볼 것이다. 댓글 리스트 불러오기  먼저 data.json 파일에 리뷰 리스트에 해당되는 데이터 배열을 추가한다. "review": [ { "memName": "김철수", "memId": "kim1234", "day": "2024-05-32", "content": "잘 보고 갑니다.", "id": "6082" }, { "memName": "홍길동", "memId": "hong1234", "day": "2024-05-32", "content": "항상 행복하세요.", "id": "5004" ..

현재 나는 리액트를 독학으로 공부중이다.지금은 리액트로 서버 데이터를 주고받는 연습중인데,이전에는 fetch 메서드로 REST API를 호출했다면 그보다 더 쉽다는 axios를 이용하여 REST API를 호출할 예정이다. 현재 회사의 퍼블리셔들끼리 스터디를 진행하여 프로젝트를 만들 예정이고 거기서 나는 로그인을 구현하기로 했다. 일단 우리는 백엔드 개발자가 아예 없는 관계로 프론트 상에서만 구현을 해야한다.   내 유일한 코드 리뷰어 챗 GPT는 대충 "가능은 하지만 학습용으로만 사용하고 실제로는 반드시 백엔드와 연동해라"라고 한다.  일단 머리로는 아이디 비밀번호를 치면 데이터를 얻어와서(GET) 비교한 후에맞는게 있으면 로그인, 없으면 back하면 되는거 아닌가? 했는데.. GET: 주로 데이터를 조..