프론트엔드 개발 찔찔이

https://www.data.go.kr/ 공공데이터 포털국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datasewww.data.go.kr공공데이터 포털사이트에 있는 오픈 API중에 "자전거 사고 다발" 오픈 API를 가져오려고 한다.  먼저 데이터찾기 > 데이터목록에서 "자전거 사고다발"이라고 검색하면 오픈 API 메뉴에 아래와 같이 JSON과 XML 확장자 카테고리의 API가 나온다. 현재는 위와 같이 API 명세서를 swagger에 연결하여 보여주는 듯 하다.API 명세서에 있는 파라미터값들을 모두 추가해줘야한다. 도로교통공단_자전거사고다발지역정보서비스 하단에 있..

들어가며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" ..

지난시간에 구현했던 LogIn.js 컴포넌트에서 로그인이 되면 setLogIn(true)가 되도록 하였는데,결국 true 값을 home, header 등으로 보내야하기 때문에 App.js를 기준으로 props를 전달하기로 했다.  function App() { return ( } /> } /> } /> );}기존에 구현했던 코드에서 LogIn 컴포넌트에서 데이터를 받아야하고, Home, Header에 데이터를 보내야 한다.  이럴때 가장 쓰기 좋은 방법은 App.js에서 useState를 만들어 데이터를 보내고 받는 방법이다. const [LogInCheck, setLogInC..

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