2주 차 지난 주보다 백엔드 실습이 훨씬 많았던 2주 차! MongoDB와 파이썬을 연동해보고, Flask로 웹서버를 구현해보았다. 거기에 AWS로 배포까지.. 👏 이번 주를 보내며 겪었던 우여곡절을 정리해본다. 글이 길어질 것 같아 몇몇 부분은 따로 작성해야겠다 싶기도.. 팬명록 MongoDB NoSQL인 MongoDB를 처음 사용해보았다. 가입부터 프로젝트, 클러스터 생성까지.. 👀 그런데 막상 DB에 데이터를 넣으려 하니 에러 발생... 🚫 m1 맥북에서 mongoDB 연결 안 되는 현상 SSL CERTIFICATE_VERIFY_FAILED 오류인데, pymongo는 TLS/SSL을 이용해서 서버와 연결하는데 특정 환경에서 지원을 안 하는 경우가 있다고 한다. 그래서 certifi라는 패키지를 추가..

어떤 에러? Flask 서버 패키지를 설치하고 서버를 실행하니 에러 메시지 등장~ 😇 Address already in use Port 5000 is in use by another program. Either identify and stop that program, or start the server with a different port. On macOS, try disabling the 'AirPlay Receiver' service from System Preferences -> Sharing. 읽어보면 대략 포트 5000번이 이미 사용되고 있어서 서버를 실행시킬 수 없다는 내용이다. 나는 맥북 유저인데 OS가 몬테레이로 업그레이드된 이후 포트 5000번이 쓰이고 있는 모양이다. 에러 메시지에서 ..

사전 캠프 시작! 왜 내일배움캠프를 수강신청 하게 되었는가, 어떤 자세로 임하는 지는 따로 포스팅 하기로 하고.. 2주간 사전캠프에서 수강하는 웹개발 종합반은 풀스택을 가볍게 맛볼 수 있는! 그런 강의다. 이미 알고 있었던 부분을 제외하고, 새롭게 알게된 부분을 정리해본다. 이번 강의에서는 웹개발종합반 1,2주차 내용이 주를 이룬다. 모바일을 위한 설정 CSS에서 max-width로 최대치를 설정해두고, width를 퍼센트 값으로 주면 모바일에서도 유동적으로 보인다. 팬명록 만들기 누구로 할까 고민하다가 얼마전 새 앨범이 나온 아이들 노래에 꽂혀서.. 🤭 부트스트랩을 이용해서 뚝딱뚝딱 만들었다. 부트스트랩 부트스트랩은 오픈소스 CSS 프레임워크다. 반응형과 깔끔한 UI를 지원하지만 이미 정해져있는 디자인..

우여곡절 구구절절 우여곡절 끝에 완성했던 바닐라 자바스크립트 프로젝트, 오늘의 바다.. 🥹 프로젝트 도중에 개인 사정으로 잠시 놓기도 했고.. 이런저런 일들이 많았어서 생각보다 완성까지 오래 걸렸다. 심지어 회고쓰는 것도 이제야.. (..!) 더 늦기 전에 서둘러 작성해본다. 좋았던 경험 1. 공공데이터 API를 쓰면서 그래도 적지 않은 수의 데이터를 다루어 본 것 같다. (데이터 엑셀파일에는 420여 개 정도의 전국의 해수욕장 데이터가 담겨있다.) 2. 자바스크립트로 나름대로 고민하며 기능을 구현했다. 이건 좋았던 것이기도, 아쉽기도 한데 일단 좋았던 것. 순수하게 자바스크립트로만 만든 프로젝트를 한번쯤 해보고 싶었기에 시작해서 구현하면서 연습도 되고- 중첩된 object 속 데이터를 어떻게 꺼내올 것..

지금까지 현재까지 데이터를 파이어베이스 백엔드로 보내고 받고 할 수 있는 웹 애플리케이션을 만들었다. 급한 일이 생겨서 막바지에 경주마처럼 배포까지 해놓은 상태 ^^.. 이번에도 디자인 간단하게 뚝딱뚝딱.. 하지만 여기서 끝내기엔 너무.. 🤔 기능이 꽤.. 부족.. 🤔 (단순한 기능인게 사실..) 인증(로그인)기능을 우선적으로 추가해볼 생각. 그리고 리팩토링이 매우 필요하기도 하고.. 일단 지금의 문제점은 특히 주문 관련된 페이지 컴포넌트들이 너무 무거워서 분리될 필요성이 있고, 뭔가 액션이 일어날 때마다 전체적인 요소들의 렌더링이 다시 일어나는 것을 볼 수 있어서 useMemo 훅을 이용한다던가.. 최적화가 꼭 필요할 것 같다. 또 강의에서 대체로 css module을 많이 사용해왔고, 나도 분리된 c..

리액트를 공부하다 보면 어느 순간 리덕스에 대해서 알아보아야 하는 시기가 온다. 나에게도 드디어 그 시기가 왔다!... 🧐 리덕스에 대해 깊고 좋은 글들은 이미 충분히 많으니... 아직은 초심자인 나의 관점에서 개념을 가볍게 살펴보기로~ (고로 이 글은 초심자들에게 적합) Redux and Context API 리덕스는 가장 많이 사용하고 있는 상태 관리 라이브러리다. 컴포넌트의 상태 업데이트 로직을 효율적으로 관리할 수 있고, 상태를 공유하는 방법도 훨씬 편하게 전달할 수 있다. 아마 리덕스를 처음 접하는 사람들이라면 지금까지 Context API를 써왔을 것이다. (나 또한...) React.createContext 메서드를 통해서 컨텍스트를 만들어서 제공되는 Provider를 통해서 값을 공유하는..

리액트를 좀 공부하다 보니 컴포넌트의 생명주기에 대해서도 알아봐야 할 것 같아서 정리해본다. 우선 이 생명주기라는게, 컴포넌트가 화면에 나타나서 업데이트되고 사라질 때까지의 주기를 말한다. 이 주기에 사용되는 메서드들 세 가지는 다음과 같다. 이 메서드들을 useEffect 훅과 비교해서 살펴보려 한다. componentDidMount() componentDidUpdate() componentWillUnmount() mount ?? 먼저 마운트(mount)라는 용어가 무엇인지를 알아야겠다. 마운트와 언마운트가 있는데, 마운트는 사전적인 의미로는 '시작하다'라는 뜻이지만- 리액트 컴포넌트에서의 마운트는 DOM 트리가 생성되고 웹브라우저에 나타날 때를 말한다. 그러니 이렇게 말할 수 있겠다. 마운트(moun..

지난 글 (https://i-ten.tistory.com/186)에 이은 에러 해결 기록.. 아마 이번 글이 마지막일 듯하다. 🔥 에러 페이지 이동시 무한 새로고침 나도 발견했었고 친구가 무려 녹화해서 보내준... 꽤나 당황스러운 에러 😇 에러 페이지에 무슨 일이 있는 것인가 이게 대체 뭔가.. 하는 혼란이 찾아왔었지만 해결은 의외로 간단했다. 웹팩으로 빌드하면서 error.html 문서에 패키지로 묶은 스크립트 파일 info가 선언되어 있었기 때문이었다. 스크립트 태그를 없애니 자연스럽게 해결~ 🔥 검색어 추천 가나다 순 정렬 이건 에러는 아니고, 한 친구가 가나다순으로 목록이 나오면 좋겠다고 해서 추가했다. API에 사용되는 해수욕장 목록 엑셀 데이터에 번호 붙이는 기준이 무엇인진 모르겠으나 (위..

지난 글(https://i-ten.tistory.com/185)에 이어서 두 번째 에러 해결 과정을 기록한다. 역시나 더 좋고 깔끔한 코드와 해결방법이 있을 것이라고 생각한다! 🔥 아무거나 입력했을 때 무한 로딩 + 최적화 말 그대로 아무렇게나 막 쳐서 검색했을 때 무한 로딩이 걸리는 현상. 값의 유효성을 확인하지 않고 그냥 넘겨버렸기 때문에 나타난 버그다. 버그를 수정하면서 사용자를 위해 검색 결과가 없다는 것을 안내하는 텍스트도 같이 추가하기로 했다. 아래는 필터링된 검색 결과를 보여주는 함수 코드의 일부인데, 검색 결과 배열에 아무것도 없을 때 에러 메시지를 보여주는 코드를 추가했다. 물론 활성화된걸 없애주는 코드도 아래 어딘가에 있음. 그리고 검색결과를 넘기는 함수에서는 try-catch문으로 해..