Ann's log

코드 = 요구사항을 상세히 표현하는 수단 기계가 실행할 정도로 상세하게 요구사항을 명시하는 작업 = 프로그래밍 나쁜 코드의 위험을 이해하지 못하는 관리자의 말을 그대로 따르는 행동은 전문가 답지 못하다. 좋은 코드를 사수하는 일은 바로 우리 프로그래머들의 책임이다. 빨리 가는 유일한 방법은, 언제나 코드를 최대한 깨끗하게 유지하는 습관이다. 깨끗한 코드는 한 가지를 잘 한다 (한 가지에 집중한다). 나쁜 코드는 너무 많은 일을 하려 애쓰다가 의도가 뒤섞이고 목적이 흐려진다. 새 코드를 짜면서 우리는 끊임없이 기존 코드를 읽는다. 따라서 읽기 쉬운 코드가 매우 중요하다. 기존 코드를 읽기가 어려우면 새 코드를 짜기도 어렵다. 잘 짠 코드가 전부는 아니다. 시간이 지나도 언제나 깨끗하게 유지해야 한다. 적극..

⛔️ 에러 요즘 Next.js 강의를 듣기 시작했는데, 저번에만 해도 잘 실행되던 Next.js 프로젝트에 다음과 같은 에러가 생겼다.. ✅ 해결 방법 해결 방법을 찾아 보니 vscode에 다른 프로젝트가 열려 있으면 충돌이 나서 그런 걸 수도 있다고 해서 다른 프로젝트는 닫았는데도 계속 에러가 발생하였다.. 다른 해결 방법을 찾아보니 프로젝트에 .babelrc 파일을 생성하고, .eslintrc 파일 내용을 수정하라고 되어 있었다. 그래서 일단 프로젝트에 생성 되어져 있던 .eslintrc.json 파일 내용을 다음과 같이 수정하니 에러가 바로 사라졌다! { "extends": ["next/babel","next/core-web-vitals"] } 혹시 다음에도 에러가 발생하면 .babelrc 파일도 ..

역시나 Heroku의 무료 플랜이 사라짐에 따라, 예전에 만들어둔 PHP 프로젝트도 다른 서비스를 사용하여 다시 배포하게 되었다. 내가 예전에 만들어둔 PHP 프로젝트는 Laravel 같은 PHP 프레임워크를 사용하지 않고 만든 프로젝트라서 뭔가 배포 서비스를 찾는게 어려웠다.. (어쩌면 내가 잘못 찾는 걸지도..ㅎ) 아무튼, 괜찮은 무료 서비스를 찾다가 Qoddi라는 서비스를 사용하게 되었다. 아직 덜 알려진 서비스라서 사용하는 사람도 많이 없고 정보도 많이 없는 것 같지만, 합리적인 무료 플랜을 제공하고 배포 방법도 쉬운 것 같아서 선택하게 되었다. Qoddi는 무료로 다음과 같은 서비스를 제공 해준다. 배포 전에 확인할 것 PHP 버전 체크. (PHP 최신 버전을 이용하기를 권장하는 듯.) 프로젝트..

지금까지 Node.js 서버와 PHP 프로젝트를 배포할때 Heroku를 사용했었는데, Heroku의 무료 플랜이 없어진다는 이메일을 보고 Heroku를 대체할 수 있는 서비스를 찾아 보게 되었다. 찾아 보니까 내 생각보다 다양한 서비스가 있다는 것을 알게 되었지만, 어떤 것을 사용해야 할지 정하는게 어려웠다... 일단은 사람들이 많이 사용하고 있어서 정보를 찾기가 쉬운지, 무료로 좋은 플랜을 제공 해주는지 등등의 조건을 따져봤다. 여러 조건을 따진 결과, Fly.io를 선택하게 되었다. Fly.io에서는 무료 플랜인 Hobby plan으로 다음을 제공 해준다. Up to 3 shared-cpu-1x 256mb VMs 3GB persistent volume storage (total) 160GB outbo..

React Hooks에 대해 공부하면서 간단히 정리해 봄. 공식 문서를 참고하였다. https://ko.reactjs.org/docs/hooks-reference.html Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org 기본 Hooks useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환 → 컴포넌트의 state(상태)를 동적으로 관리 setState함수는 state를 갱신할 때 사용함 useEffect useEffect(function, deps); useEffect에 전달된 함수는 화면에..

최근에 npm-check-updates를 사용하면서 이전에 만들어 둔 프로젝트의 React 버전을 업데이트 하였다. 그런데 프로젝트를 수정하기 위해 실행시켜 보면 콘솔창에 다음과 같은 경고가 나타났다. 경고의 내용은 ReactDOM.render는 React 18에서 더이상 지원되지 않기 때문에 createRoot을 대신 사용하라는 것이었다. 그리고 변경하기 전까지는 계속 React 17 환경에서 프로젝트가 실행된다고 한다. 해결 방법은 공식 문서에서 볼 수 있었다! https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html How to Upgrade to React 18 – React Blog As we shared in the release pos..

이전에 만든 리액트 프로젝트의 모바일 화면을 수정하기 위해 touch 이벤트를 다루는 방법을 찾아 보게 되었다. 명칭이 touch carousel이 맞는지는 정확히 모르겠지만,,😅 내가 만들고자 한 화면은 넷플릭스 모바일 앱 화면과 비슷하다. 화면 터치가 되고 있는 슬라이드만 움직이고, 슬라이드의 양 끝에 도달하면 더이상 슬라이드 되지 않는다. touch 이벤트 사용하기 // 모바일 화면일때 touchX 값 관리 const [ touchX, setTouchX ] = useState(0); // 화면 터치가 시작되면 X값을 설정함 function onTouchStart(e) { setTouchX(e.changedTouches[0].pageX); } // 화면 터치가 완료되면 해당 ul의 left값만 변경..

React 프로젝트의 검색 기능에 보완 해야할 부분이 있다는 것을 알게 되었다. 검색 후 페이지 새로고침을 하거나, 검색 결과 상세 페이지 이동 후 다시 검색 페이지로 돌아오면 검색 결과가 사라져 있다.. 그렇게 큰 문제는 아니지만, 한번 인식하니까 계속 신경이 쓰여서 이 부분에 대해 공부도 할겸 해결 방법을 찾아 보게 되었다. 방법을 찾던 중에 sessionStorage에 대해 알게 되었고 문제를 해결할 수 있었다! 🥳🥳 이 글에서 정리하는 내용: 1. web storage object? 2. sessionStorage와 localStorage의 차이점 3. React에서 sessionStorage 사용하기 web storage object? Web storage, sometimes known as D..