LeeHyojin Blog LeeHyojin Blog

오늘 한 일 🥴 오늘은 네이버 도서 API에서 카테고리별로 도서 정보를 받아오는 기능을 구현했습니다. 이 API는 사용자가 요청한 카테고리별로 도서를 필터링하여 응답해주는 API인데 클라이언트에서 요청하려고 하니 CORS 에러가 났습니다. 해결하기 위해 요청 시 headers에 Access-Control-Allow-Origin 설정도 추가해보고 이런저런 방법을 적용해보았지만 해결되지 않아서 검색한 결과 이 API는 서버프로그래밍(python, jsp, php, node.js 등)을 통해서 호출하도록 되어 있었습니다. 그 이유는 다른 사람의 클라이언트 id, secret을 도용해서 API를 호출하는 것을 막기 위해서입니다. 그래서 저는 서버에서 처리하기 위해 다음과 같은 과정을 거쳐 해결하였습니다. 카테고..

오늘 한 일 😒 input 태그를 사용할 때 주의할 점을 평소에 잘 알고 있다고 생각했었고 또 많은 input 태그를 다뤄보았음에도 불구하고 왜 이런 실수를 했는지 자괴감이 들었습니다...... 시작하기에 앞서 제가 구현하고자 했던 로직은 다음과 같습니다. 유저가 독후감 작성하기를 클릭하여 WriteReport 페이지에 오면 기존에 있던 독후감 보여주기 기존에 있던 독후감을 수정버튼을 통해 수정할 수 있다. 수정버튼을 누르면 기존에 있던 value값에 입력하고자 하는 value 값을 더해서 수정할 수 있다. 이 로직을 수행하기 위해서 input 속성 중 readOnly라는 속성을 사용하게 되었습니다. readOnly 속성은 input값이 읽기 전용인지 아닌지를 boolean 값으로 판단하는 속성입니다. ..

오늘 한 일 🤓 오늘은 사용자가 책 삭제 버튼을 눌러 책을 삭제하고자 할 때 경고창을 띄워주기 위해 모달을 구현했습니다. 처음에는 경고창을 따로 만들지 않고 책 삭제 버튼 클릭 시 바로 서버에 삭제요청을 하여 삭제가 되도록 구현했었는데 내 서비스는 해당 책에 대한 독후감을 작성할 수 있는 서비스라 만약에 사용자가 책 삭제 버튼을 실수로 누르게 된다면 애써 작성하여 모아놓은 독후감까지도 의도치 않게 삭제되는 불미스러운 일이 발생할 것 같다는 생각을 하게 되었습니다. 그래서 " 이 문제를 어떻게 해결하면 좋을까? " 하고 생각해보니 보통 다른 서비스들을 접하다 보면 삭제 버튼을 누르면 정말 삭제할 것인지에 대한 모달창이 뜬다는 것이 문득 생각이 나서 " 아 이래서 유저가 어떠한 액션을 취할 때 필요에 따라 ..

오늘 한 일 🤪 오늘은 리액트로 MyLibrary 페이지를 구현하면서 데이터가 바뀜에 따라 화면에 새로고침이 필요한 부분에 대하여 어떻게 코드를 작성해야 할 까 고민을 하다가 window.location.replace() 라는 메서드를 처음 사용해보았습니다.. 먼저 제가 구현하고자 했던 것은 내 서재에 있는 책을 삭제했을 때 삭제한 책을 뺀 나머지 책을 다시 UI로 MyLibrary 페이지에 바로바로 보여주고 싶었습니다. 저는 이 과정을 작성하면서 다음과 같은 과정을 거치게 되었습니다. useEffect를 사용하여 특정 Props가 바뀔 때, 리렌더링 시키기 history.push()를 사용하여 페이지 이동시키기 window.location.replace("/MyLibrary") 를 통해 새로고침 효과 ..

오늘 한 일 😜 오늘은 내 서재 페이지에 조건에 따라 다른 UI를 보여줄 수 있는 화면을 구현했습니다. 삼항 연산자를 사용하여 조건을 분리했는데 가독성도 좋지 않은 것 같고 이러한 조건이 많아지게 된다면 렌더링 될 때에 UI가 매끄럽게 보여지지 않을 것 같다는 생각을 하게 되었습니다. 먼저 삼항연산자를 통해 작성한 코드는 다음과 같습니다. 위의 코드를 수도코드와 if/else 코드로 작성해보면 다음과 같습니다. 1. 사용자가 로그인을 한 상태이고 내 서재에 등록한 책이 있을 경우 2. 사용자가 로그인을 한 상태이고 내 서재에 등록한 책이 없는 경우 3. 사용자가 로그인을 하지 않은 상태인 경우 if(loggedUserCheck && myLibraryBookLists) { // ... }else if(lo..