어떤 에러? 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번이 쓰이고 있는 모양이다. 에러 메시지에서 ..

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

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

이번에는 netlify 같은 서비스의 도움을 받지 않고, 웹팩으로 빌드해보고 Github Pages에서 배포해보기로 했다. 일단 빌드하는 데도 삽질을 많이 했지만, 배포하고 나니 로컬환경에선 잘 동작했던 게 먹통이 되어서 (...) 또 한바탕 삽질을 했다. 아직 온전히 웹팩을 이해한 것은 아니지만, 현재 배포까지는 해결했기 때문에 다음엔 이 만큼의 삽질을 하지 않기 위해 기록한다... 😇 그래서 웹팩이 뭔지?... 웹팩.. 프론트엔드를 공부하다 보면 한번쯤은 들어봤을 법한 이름. 우리가 사용하는 여러 웹 애플리케이션은 모두 수많은 자원들을 바탕으로 구성되어 있다. HTML, CSS, JavaScript 파일 뿐만 아니라 페이지를 구성하는 이미지, 폰트 등등.. 만들 때야 각각의 자원들을 필요에 따라서 구..

검색 기능을 만들다 보니.. 이렇게 구글에서 추천 검색어를 띄워주는 걸 만들면 좋겠다 싶었다. 완벽한 검색 기능을 만들 순 없겠지만!.. 일단 첫 글자라도 일치하는 모든 데이터를 가져와 보기로. filter 메서드를 통해서 걸러오면 되는데, 한글은 영문이 아니기 때문에 toLowerCase 같은 메서드를 사용하지 않아도 된다. 필터링된 해수욕장들을 li 태그 안에 넣는 작업을 거친다. 그리고 DOM 작업을 좀 거치면 이렇게 첫 글자가 일치하는 해수욕장들이 뜬다! +++ 완성 후 검색어가 가나다순으로 정렬되었으면 좋겠다는 피드백이 있었어서 추가 작업을 진행했다. 아래에서 볼 수 있다. https://i-ten.tistory.com/187 에러 수정 삽질 기록 (3) 지난 글 (https://i-ten.ti..

먼저 JSON 파일에서 데이터를 가져와서 필요한 형태로 가공해야 하는데... 배열 안의 객체 형태였고, 당시 이런 형태를 별로 다뤄본 적이 없었다. 내가 필요한 형태는 beach-num과 name을 매치시켜서 배열에 name만 쭉 가져오고 싶었다. 그리고 한참 동안 배열 메서드로만 삽질을 하는데 ( . . .) 그러다 mdn 문서를 보고 깨달았다. 아.. 구조 분해 할당을 사용해야 하는구나.. 🥹 Object.entries에 대한 페이지를 쭉 보다 보면, entires 메서드를 구조 분해 할당을 이용해서 key, value 값으로 가져올 수 있다는 걸 알 수 있다. 좋아 그럼 나도 이제 써보자..🥹 파일에 저장된 데이터를 다시 json화 해서 값만 가져온 뒤, entires 메서드를 이용해서 beachN..

들어가며 자바스크립트에 대한 지식이 1mm 내린 비처럼 있을랑 말랑 했던 시절.. this에 대한 설명글들을 봐도 도무지 이해하기가 어려웠다. 이게 뭔가에 따라서 달라지는건 알겠는데 그래서... 어떻게 된다는 ? ?.. 짧게 얘기하자면 this는 누가 호출했느냐에 따라 달라진다. 어렵게만 느껴졌던 this에 대해 정리해 보자. 그래서 this란?? 일단 this의 사전적 의미는 '이것'이긴 한데.. 뭘 가리키느냐. 바로 자신이 속한 객체나 생성할 인스턴스를 가리키는 변수다. C++이나 JAVA와 같은 클래스 기반의 언어에서의 this는 클래스가 생성한 인스턴스다. 이미 this를 선언하면서 생성된 인스턴스를 가리킨다고 결정된 것이다. 그런데 자바스크립트의 this는 좀 특이하다. 자바스크립트에서의 th..