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..

2048 링크 http://2048-game-deployment.s3-website.ap-northeast-2.amazonaws.com/ 2048 2048-game-deployment.s3-website.ap-northeast-2.amazonaws.com 프로젝트 소개 및 회고 React, JS, AWS배포와 알고리즘 공부를 하면서 여태 배운 내용을 되돌아보고 복습하며 간단한 사이드 프로젝트를 하고 싶던 와중에 동기분께서 2048 프로젝트를 제안해주셔서 같이 협업하여 프로젝트를 경험할 수 있는 좋은 기회를 얻게 되었습니다. 혼자서 했다면 정말 힘들었을텐데 같이 협업함으로써 정말 왜 협업이 필요한 것인지를 몸으로 느낄 수 있었습니다. 에러를 마주하게 되거나 오랫동안 풀리지 않는 코드를 붙잡고 있다면 번아웃..

※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 프로젝트를 하면서 느꼈던 점 구글 캘린더, 네이버 캘린더 등등 평소에 캘린더 웹앱을 사용하면서 막연히 나도 언젠간 이런 웹앱을 만들어보고 싶다는 생각을 했었습니다. 이 캘린더를 구현할 때, 처음부터 이런 저런 기능들을 다 구현해가면서 시작하지는 않았습니다. 빈 js파일을 만들고 new Date()를 통해 날짜를 받아오는 테스트 과정만 따로 진행하여 Date에 대한 메서드들을 능숙하게 사용할 수 있을 때까지 계속해서 빈 페이지에 연습했습니다. 하나가 끝나고 나면 input으로 할일목록 제출하..

※ 목차 Calendar 구현 목표 Calendar 코드리뷰 - HTML마크업 Calendar 코드리뷰 - CSS 적용하기 Calendar 코드리뷰 - JavaScript 적용하기 Calendar - 프로젝트를 마치며 최종 완성본 구현 목표 순서 1. 첫 로딩이 되면 현재 출력하고자 하는 달이 윤년인지 윤년체크를 한다. 2. 윤년 체크가 완료되면 해당하는 달의 일 수만큼 html 요소들을 createElement 메서드로 만들고 필요한 속성들도 setAttribute 메서드로 정의 해준다. 3. 왼쪽 파트에 현재 날짜를 보여주기 위해 함수를 작성하는데 이 함수는 재활용 할 여지가 있으므로 따로 함수로 만들어준다. 4. 첫 로딩이 되면서 해당 날짜에 등록된 할일 목록이 있으면 출력해줄 수 있는 함수를 만들..