웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
Courses
Reviews
- Bite-sized Next.js(v15)
- Bite-sized Next.js(v15)
- Bite-sized Real-world Projects - SNS Edition
- Bite-sized TypeScript
- Bite-sized React.js: From Basics to Practice
Posts
Q&A
96. 12.19) 배포하기 강의가 9분짜리가 2분 밖에 재생이 되지 않아 진도가 나가지지 않습니다.
안녕하세요 이정환입니다.해당 문제는 강의 영상 업로드의 문제가 아닌인프런 시스템의 버그로, 어제 인프런측에 문의하여 해결되었습니다.수강에 불편함을 드려 죄송합니다 ㅠㅠ
- 0
- 3
- 8
Q&A
타입가드를 만들어 사용하는 이유가 궁금합니다.
안녕하세요 이정환입니다.우선 커스텀 타입가드를 사용하는 주된 이유는 "가독성"을 증진시키기 위함이 맞습니다. 복잡한 조건문을 하나의 함수 호출로 대체하는 효과가 있습니다."false를 리턴하는 것보다 에러를 발생시키는게 유리한지" 라고 질문을 주셨는데요 타입 오류가 발생하면 아예 프로그램이 실행되지 않기 때문에 타입 오류는 발생시켜서는 안됩니다. 따라서 animal.isBark !== undefined 대신에 "isBark" in animal 같은 표현을 사용하는 것 입니다.추가로 "어짜피 에러를 발생시키는게 목적이라면 ..." 이라고 말씀하셨는데, 에러를 발생시키는것은 목적이 아닙니다. 커스텀 타입 가드의 목적은 인수로 전달한 값이 질의하는 타입이 맞는지 true, false 형태로 반환하는 것이 목적입니다.
- 0
- 2
- 13
Q&A
6.8) initialState 타입을 as State로 단언하신 이유가 궁금합니다.
안녕하세요 ohj3694님 이정환입니다.결론부터 말씀드리면, 위 예제에서는 두 방식 모두 동작에 차이는 없지만, 향후 확장성을 고려한 타입 관리 방식의 차이 때문에 as State를 사용하는 방식을 사용하고 있습니다. 다음과 같이 타입 단언 대신 타입 정의를 이용하는 경우 타입 검사가 매우 엄밀히 수행되어 초과 프로퍼티는 담을 수 없는 제약이 발생하게 됩니다.type State = { count: number; text: string; } const initialState: State = { count: 0, text: "hi", extra: 123 // ❌ 에러: State에 없는 속성 }; 그러나 다음과 같이 타입 단언을 이용할 경우, 다소 느슨하게 타입 검사가 이루어져 초과 프로퍼티가 허용됩니다. 큰 차이는 없지만 개발 단계에서는 이런 느슨한 타입 검사가 더 도움이 된다고 생각해 보통 저는 타입 단언을 이용하고 있습니다. (추가로 향후 satisfies 연산자와의 궁합도 좋습니다)type State = { count: number; text: string; } const initialState = { count: 0, text: "hi", extra: 123 // ❗ as State 때문에 통과됨 } as State;
- 0
- 2
- 14
Q&A
배포하기 강의 내용이 잘못 올라가 있는 것 같습니다
안녕하세요 이정환입니다.해당 문제는 강의 영상 업로드의 문제가 아닌인프런 시스템의 버그로, 어제 인프런측에 문의하여 해결되었습니다.수강에 불편함을 드려 죄송합니다 ㅠㅠ
- 0
- 2
- 15
Q&A
network 탭 리퀘스트 관련 질문
안녕하세요 이정환입니다.해결되셨다니 다행입니다 👍
- 0
- 3
- 11
Q&A
85. 12.9) 일기 관리 기능 구현하기 2 음성이 다르게 나오는 문제
안녕하세요 이정환입니다.해당 문제는 인프런 시스템의 버그로, 어제 인프런측에 문의하여 해결되었습니다.수강에 불편함을 드려 죄송합니다 ㅠㅠ
- 1
- 1
- 11
Q&A
여러 사진 중 일부 사진의 허용 사이즈 초과로 실패한 경우에 대해
안녕하세요 재환님 이정환입니다.앗! 그렇네요 🥲 이런 이슈가 있을 수 있겠군요해당 이슈를 해결하려면 재환님이 말씀해주신 대로 catch 문에서 업로드 된 이미지 전체를 삭제하는 로직을 추가해주시면 됩니다!한가지 코멘트를 남기자면 await deletePost와 await deleteImages는 Promise.all을 통해 묶어 병렬처리하면 더 깔끔할 것 같아요!
- 1
- 2
- 24
Q&A
12.11 home 페이지 구현하기
안녕하세요 에렌님 이정환입니다. 수정 버튼에서 오류가 발생한다면 수정 버튼이 렌더링 되고 있는 파일의 코드를 확인하시면 됩니다. 강의와 동일하게 진행하셨다면 src/pages/diary.js의 Diary 컴포넌트 안에 다음과 같이 작성되어 있을겁니다.(사진) 그럼에도 문제가 발생한다면 코드를 살펴봐야 하는데요프로젝트 진행 도중 발생하는 오류는 전체 코드를 확인해야 그 원인을 정확히 파악할 수 있습니다.질문 가이드라인을 확인하셔서 전체 프로젝트 코드를 깃허브 또는 구글 드라이브 링크로 전달해 주시면 살펴보겠습니다.
- 0
- 3
- 19
Q&A
div submit 관련 질문입니다.
안녕하세요 귀한 불도새님 이정환입니다.아래 AI 인턴이 자세하게 답변을 달아 주었네요! 해당 답변을 확인해보시면 스타일링이나 네비게이션 링크와의 통합 등의 이유로 굳이 button이 아니더라도 나 태그를 통한 폼 제출이 필요한 경우가 종종 있습니다.
- 0
- 2
- 14
Q&A
회원가입, 로그인 요청 시 400 에러
안녕하세요 이정환입니다.에러 메세지를 살펴보시면 email address (원화기호)"123@123.com(원화기호)" is invalid 라고 원인이 나타나 있습니다. 이는 이메일 주소가 정상적인 포맷이 아니여서 발생하는 오류인데요 혹시 이메일 주소 입력에 공백이 발생한건 아닌지 체크해 보셔야 할 것 같습니다. 만약 그럼에도 아무런 이슈가 없다면 Supabase 대시보드의 > Authentication > Sign In / Provider 탭에 들어가셔서 아래와 같이 Allow new users to sign up 옵션이 켜져 있는지 확인 부탁드립니다.(사진)또 드래그를 아래로 내리셔서 Email이 활성화 되어 있는지도 확인 부탁드립니다.(사진)위의 모든 사항을 확인 완료하셨음에도 계속해서 오류가 발생한다면 전체 프로젝트 코드를 깃허브 또는 구글 드라이브 형식의 링크로 보내주시면 확인해보겠습니다
- 0
- 5
- 31




