웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
강의) 한 입 크기로 잘라먹는 Next.js
강의) 한 입 크기로 잘라먹는 타입스크립트
강의) 한 입 크기로 잘라먹는 리액트
강의
수강평
- 한 입 크기로 잘라먹는 Next.js(v15)
- 한 입 크기로 잘라먹는 타입스크립트(TypeScript)
- 한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
게시글
질문&답변
일기 수정 content 기본 값이 원래 일기 내용으로 안보이고..
안녕하세요 이정환입니다.올려주신 코드 만으로는 정확한 문제의 원인 파악이 어렵습니다. Editor 컴포넌트 자체에는 문제가 없는 것 같아요 그 밖의 App이나 Edit 컴포넌트에 문제가 있을 듯 합니다.질문 가이드라인에 말씀드린대로 전체 프로젝트 코드를 GitHub or Google Drive를 통해 링크로 전달해 주시면 직접 살펴보겠습니다.
- 0
- 2
- 16
질문&답변
onSubmit 함수안에서 입력 했는지 판별하기
안녕하세요 이정환입니다네 요렇게 하셔도 동일하게 기능 구현하실 수 있습니다.input.name은 State로써 보관된 에 사용자가 입력한 값이고,inputRef.current.value는 현재 에 사용자가 입력한 값이니 둘 다 동일한 값입니다.
- 0
- 2
- 25
질문&답변
userRef를 활용한 Validation 활용법
안녕하세요 이정환입니다.네 기본적으로는 그렇습니다. 이를 좀 더 간편히 하시면 useRef를 배열로 만들어 하나의 레퍼런스 객체가 여러개의 input을 참조할 수 있도록 설정하셔도 됩니다. 이해를 돕기 위해 간단한 예제 하나 보여드릴게요 const inputRef = useRef([]);위 처럼 배열 형태의 레퍼런스 객체를 생성하면, 아래의 코드 처럼 하나의 레퍼런스 객체가 여러개의 UI 요소를 참조하도록 설정할 수 있습니다. inputRef.current[0] = el}/> inputRef.current[1] = el}/> inputRef.current[2] = el}/>이름을 입력하는 input은 inputRef 레퍼런스 객체의 0번에 저장되었습니다.전화번호를 입력하는 input은 inputRef 레퍼런스 객체의 1번에 저장되었습니다.성별을 입력하는 input은 inputRef 레퍼런스 객체의 2번에 저장되었습니다.
- 0
- 2
- 21
질문&답변
이벤트 객체값 확인관련 - console.log
안녕하세요 이정환입니다.input, select에 사용자가 현재 입력한 값은 onChange이벤트 핸들러에 매개변수로 전달되는 이벤트 객체의 target.value 프로퍼티에 들어가 있습니다. 정리하자면 이벤트 핸들러에서 e.target.value로 해당 값을 꺼내 사용하실 수 있습니다.아래 AI 인턴의 예제를 참고해보세요
- 0
- 2
- 13
질문&답변
CJS & ESM 모듈 관련
안녕하세요 wonyongick님 이정환입니다.AI 인턴의 답변대로 현재 두 모듈 시스템 모두 브라우저와 Node.js 환경에서 사용 가능합니다. 두 모듈의 차이점은 강의에서 안내드린 것 처럼, 모듈로 부터 값을 내보내고 불러오는 방법에 있습니다. 또 추가로 ESM은 CJS에 비해 기본값으로 내보내기(export default), 전부 불러오기 import * ... 등의 더 세밀한 기능들을 제공합니다!
- 0
- 2
- 28
질문&답변
npm run dev 무한 로딩 관련 질문입니다.
안녕하세요 오재환님 이정환입니다.우선 주석으로 인해 문제가 발생하는것은 일반적인 상황은 아니므로 문제의 원인이라고 짐작하기는 어려운 것 같습니다. 만약 문제가 있다면 .next 폴더에 있을 것 같은데요, 이럴 경우 AI 인턴의 안내대로 가동중인 Next.js 서버를 중단하신 뒤 .next 폴더를 제거하고 다시 npm run dev, npm run start 등으로 실행하시면 됩니다.그런데 ... 그럼에도 어떠한 오류가 발생하는 것이 아닌, 무한 로딩이 발생하는 상황은 특이하네요 🤔높은 확률로 현재 프로젝트의 설정 오류가 존재하는 것 같습니다 ㅠㅠ 그러나 지금 제공해주신 정보 만으로는 정확한 문제의 원인을 파악하기 어렵기 때문에, 현재 프로젝트를 Github나 Google Drive 등에 올려주시면 평일 오전 중으로 직접 다운로드 받아 확인해보겠습니다.
- 0
- 2
- 61
질문&답변
서버액션 오류
안녕하세요 이정환입니다.음.. 별도의 딜레이를 설정하시지 않았다면, 혹시 딜레이가 걸리는게 아니라 그냥 Supabase 백엔드의 처리 속도가 조금 늦은게 아닐까요? 정확히 2초의 딜레이가 걸리는지 Network탭을 통해 측정해보시면 좋을 것 같아요!
- 0
- 1
- 26
질문&답변
모달창 오류
안녕하세요 이정환입니다.요 에러는 CSS 상에서 발생하는 에러로 보이는데요 일단 기능적으로 문제가 되는 부분은 아니므로 무시하셔도 괜찮습니다! 자세히 말씀드리자면, dialog로 구현된 모달 창에 position:sticky, 또는 position:fixed가 적용되어 있는데 이로 인해 브라우저가 모달 창의 자동 스크롤을 건너 뛰게 된다는 경고성 문구입니다. 모달의 기능에 영향을 주지는 않으므로 무시하셔도 괜찮습니다. 만약 제거하고 싶으시다면 모달 최상위 태그에 overflow:auto 속성을 추가하셔도 됩니다.
- 0
- 1
- 33
질문&답변
병렬라우트
안녕하세요 이정환입니다.넵! 정확히 이해하고 계시네요 modal에는 default 페이지가 들어갑니다.
- 0
- 1
- 29
질문&답변
함수 부분에 대해 질문있습니다.
안녕하세요 이정환입니다.훌륭한 질문 감사합니다. 맞아요 입문 수준에서는 어떤 코드가 미래에 재 사용될 지, 중복으로 사용될지 알기 어렵습니다. 이런 감을 빨리 찾으시려면 일단 함수로 묶지 말고 코드를 작성하시다가 중간 중간 내가 지금 효율적인 코드를 작성하고 있는지 종종 되돌아보시는 걸 추천드립니다. "셀프 코드리뷰" 정도로 일축할 수 있겠네요!너무 시작부터 자꾸 함수로만 묶으려고 하다 보면 오히려 코드가 이상해지는 경우도 많이 생깁니다. 그러니 자연스럽게 쭉쭉 작성하신 다음에 종종 돌아보셔서 "어! 이 부분은 이렇게 중복이 되고 있구나" 하는 부분이 있으시면 그 부분들부터 함수로 묶어보시는 연습을 추천드립니다!
- 0
- 2
- 22