개발하고 싶은 초심자

해당 글을 작성하다가 나온 에러 메시지인데, if문 안에 return 대신 continue를 작성했을 때 발생했다. Jump target cannot cross function boundary. 직역하면 점프 대상은 함수 경계를 넘을 수 없습니다, 라는 의미인데, 이는 when we try to use a break/continue statement outside of a for loop, e.g. inforEach()or a function, 즉 forEach()나 함수 등 for loop 바깥쪽에 break/continue를 사용하려고 할 때 발생하는 오류인 것이다. (에러에 대한 해결책 레퍼런스 링크) 이를 해결할 수 있는 방법은 두 가지가 있는데 ① try ... catch문을 사용한다. // e..

교육 엔지니어로서 근무하면서, 수강생들의 질문을 받게 되는데 그 질문으로부터 내가 공부를 더 하게 되기도 한다. DOM의 CRUD에 대해 학습하면서 이런 궁금증을 가져본 적이 없었는데, 질문의 내용과 답변 내용이 나의 학습 수준 향상에 도움이 많이 되어 블로그 글로 정리해보게 되었다. Title 1 2 3 4 5 6 container 안에서 Title만 남기는 방법으로 for ... of 반복문으로 순회를 하고, remove 메소드를 활용했다. const container = document.querySelector('#container'); for (const element of container.children) { if(element.textContent === 'Title') continue; ..

수강생 시절에도 배웠던 내용들이지만, 요즘 개발을 하면서 더욱 잘 알 필요성이 느껴져 글로 작성하게 되었다. put과 patch가 수정할 때 사용하는 http 메소드라는 것은 어렴풋이 알고 있었다. 하지만 둘의 차이점을 경험하지 못했다. 수강생 시절에 진행했던 프로젝트에서는 수정 요청을 받을 때마다 patch 메소드만을 사용해왔기 때문이다. 그러나 현재 진행하고 있는 개발에서 put과 patch 메소드 사용에 명확한 이유가 있어야 했다. 일단 put과 patch의 정의부터 알아보자. put: 요청 페이로드를 사용해 새로운 리소스를 생성하거나, 대상 리소스를 나타내는 데이터를 대체합니다. patch: 리소스의 부분적인 수정을 할 때에 사용됩니다. 그렇다면 put과 patch는 어떻게 사용할 수 있을까? e..

useState는 비동기인가 동기인가. 이런 주제를 왜 생각하게 되었냐면, api 요청을 patch로 하면서 상태를 변경하게 되었는데, 내가 생각한 로직대로 작성하면 제대로 상태가 변경되지 않은 채로 서버에 변경 요청이 가지 않았다. 그래서 내가 생각한대로 상태 변경이 되려면 어떻게 해야할까 생각하며 구글링을 해보다가, useState가 비동기인가 동기인가 라는 흥미로운 주제를 보게 되었다. 그래서 그 부분에 대한 내용을 찾기 시작했고, 정리한 내용을 블로그에 정리해보게 되었다. 결론부터 말하자면 useState는 비동기로 동작한다. 정확하게는, setState가 비동기로 동작한다. ✸ setState는 React에서 사용하는 비동기 함수로, 개발자들이 어플리케이션 상태를 변경할 때 매우 유용합니다. 비..

map을 사용하고 있었는데, Uncaught TypeError: Cannot read properties of undefined (reading 'map') 에러 메시지가 콘솔에 뜨면서 코드가 작동되지 않았다. 콘솔에 찍어봤을 때 map을 돌린 배열이 찍혔는데, 왜 undefined라고 뜨는지에 대해 한참 고민했다. React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 배열.map(...)을 반복 실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다. 그러면 어떻게 해결할 수 있을지에 대해 구글링을 해본 결과, && 연산자를 쓰는 방법이었다. true && expressi..

(참고링크) 진작에 그렇게 했어야했지만...회사 노트북에 개발 환경을 구축하려다가 nvm을 설치하고 터미널을 재시동했음에도 불구하고 nvm 명령어를 사용할 수 없다는 메시지가 자꾸 떴다. homebrew를 설치하고 brew install nvm, brew install wget 등등 모든 방법을 사용해보았지만 이미 설치되었다는 문구만 계속 뜰 뿐...해결이 되지는 않았다. 그러던 차에 터미널에 zsh: command not found: nvm이 뜨는 것을 발견했다. 그래, 안되면 터미널에 뜬 문장 그대로 검색을 해보면 되지! 라는 생각으로 바로 구글링을 해보았다(처음부터 구글링을 했으면 삽질도 안했을텐데 난 왜 그랬을까...). 그 결과 해결한 방법이 상단의 참고링크였다. 우선, 터미널에 어떤 문구가 뜨..

항상 리액트에서 경로를 지정하여 import 해올 때 상대경로를 사용하게 될 때가 많은데, 경로를 불러오는 게 너무 헷갈려서 애를 먹다가, 아예 절대경로로 사용하는 방법을 쓰고 있다. (여기 리액트에서 절대경로 사용하는 방법 에 대해 미리 기술해둔 바 있다) 하지만 항상 절대경로로 지정해두는 것은 그다지 좋은 방법이 아니기 때문에, 이번 기회에 상대경로로 불러오는 방법에 대해 알아보고, 그 방법을 기술해보고자 한다. 먼저, 파일의 구조가 어떻게 되어있는지부터 살펴보고자 한다. App.js src ㄴ components ㄴ Modal ㄴ LoginModal.js ㄴ LogoutModal.js ㄴ Nav ㄴ Header.js ㄴ pages ㄴ Login.js ㄴ Logout.js 이러한 파일 구조가 있다고 ..

개발 도중 숫자 앞에 0 등의 숫자를 작성하여 여백을 표현해야 하는 상황이 생겼다. → 구글링을 해보니 이런 것들을 zero fill이라고 한다. 구글링을 하다 찾게 된 mdn 문서가 있었는데, 바로 padStart()였다. 그런데 문제가 있었다. 클라이언트가 input창으로 보내줄 때 데이터 타입은 string이었는데, 막상 서버에서 받아오는 데이터 타입은 number였다. 처음 생각했던 방법은 데이터베이스에 데이터를 저장하는 타입을 string으로 바꾸자고 할까? 였다. 하지만 딱히 number가 아닌 string으로 저장한다고해서 뭔가 더 좋아지는 것은 아니었다. 그렇다면 어떻게 해야할까?를 더 생각하다보니, 어쨌든 프론트엔드에서는 요청을 받아 응답이 온 데이터를 띄워주는 것이니, 보여질 때만 ze..