웹개발 썸네일형 리스트형 [React] 투두리스트 웹 만들기3 에러가 난 원인이 components에 있는 TodoContext함수를 인식을 못해서 였는데 폴더 이름과 함수 이름을 바꿔 보아도 해결되지 않아서 TodoContext함수만 따로 빼주었습니다. + 버튼을 누르면 45도 회전시켜서 X버튼으로 보이게 하고 할일을 입력할 수 있는 인풋 창이 생성됩니다. 여기서 처음 알게 된 것은 box-sizing: border-box; 라는 css 속성인데 border-box로 설정하면 요소의 width 값은 '콘텐츠 크기 + 좌우 padding 값 + 좌우 border 값'으로 계산되는 것입니다. width: 100%; 즉 width값이 100%이기 때문에 요소의 크기와 width 값이 동일하게 적용됩니다. 이제 UI 부분은 모두 구현된 것 같고 기능을 구현해 보도록 하겠.. 더보기 [Next.js] 개발환경 셋팅 요새는 React 보다는 Next.js를 쓰는 것이 인기라고 하네요. 저도 트렌드를 따라서 Next.js 공부를 해보려고 합니다. Next.js는 React문법을 기본으로 사용하기 때문에 공부하기 수월할 것 같습니다! 먼저 개발환경 셋팅을 해보겠습니다. Node.js 18버전 이상이 필요하다고 하네요. 왼쪽 버튼을 눌러 다운받아 줍니다. 에디터는 VScode를 그대로 사용하면 될 것 같습니다. 코드를 짤 폴더도 만들어 주겠습니다. 그리고 이것을 VScode에서 열어주면 되겠네요. 폴더를 연 다음 터미널을 열어서 npx create-next-app@latest --experimental-app 명령어를 입력해줍니다. 그러면 이렇게 에러가 발생합니다. 하하,, 구글링을 해 볼 차례입니다. 생각보다 쉽게 해결.. 더보기 이전 1 다음
