게시글
질문&답변
2024.05.25
섹션4 01-02-emotion 에러가 나는데 못찾겠습니다ㅜ
안녕하세요! leeyunje96 님! import 구문에서 경로 입력 부분은 백틱(``)이 아닌, 문자열(" ") 또는 문자(' ')로 감싸져야 합니다!^^ import OOO from `...` => import OOO from "..."
- 0
- 1
- 52
질문&답변
2024.05.25
그리드 부분 질문있습니다.
안녕하세요! 부드러운 족제비 님! 4번째 라인까지를 의미하므로 노션에 작성된 grid-column: 1 / 4; 가 맞네요!^^
- 0
- 2
- 56
질문&답변
2024.05.25
이번 final 과제 피드백 부탁드립니다!
안녕하세요! 지루한 들소 님! 전체적으로 코드를 깔끔하게 작성하신 것이 눈에 보입니다!^^ 앞으로도 계속 이렇게 만들어 주세요! 실제로 실무에서 여럿이 협업을 하다보면, 코드가 깔끔해야 레고 블록 조립하듯이 붙였다 떼었다 하는 느낌으로 유지보수 하실 수 있어요! 코드를 한 곳에 모두 작성하는 것이 아닌, emailChk(), pwChk() 등의 형태로 함수로 분리하여 읽기가 쉬워지는 것 같네요!^^ 좋은 부분이라고 생각되며, 이런 코드가 많아서 내가 아닌 다른 사람이 굳이 이해하려고 하지 않고, 눈으로만 보더라도 읽힌다면 그게 바로 좋은 코드 라고 할 수 있겠죠?!^^ * 참고) "이건 어려운 작업이라, 아무나 못 하는거야! 나만 이해할 수 있어! 모르면 나한테 물어봐!" => 대부분의 이런 경우는 사실 좋은 코드라고 보기는 어려울 것 같네요!^^ 뒷 수업에서 더 좋은 코드를 만들기 위한 리팩토링(다시 더 좋은 방법으로 만들기) 방법 들을 많이 배우니, 앞으로도 이렇게 꾸준히 학습해요!^^
- 0
- 1
- 57
질문&답변
2024.05.25
내장함수 리뷰 강의 질문입니다.
안녕하세요! 부드러운 족제비 님! 아래 답변을 참고해 주세요!^^ ============================================================ let isStarted = false 사용하는 이유 => 함수의 중복 실행을 방지 하기 위해 사용되었어요! 쉬운 예를 하나 들어볼까요?! 철수, 영희, 훈이가 동굴에 들어갔는데, 노란색 스위치를 발견했어요! 노란색 스위치를 누르면 금괴를 획득할 수 있답니다! 스위치는 1번 밖에 누를 수 없는데요! 코드가 아래와 같다면 어떨까요? function 노란스위치(){ return "금괴 1개" } const 철수 = 노란스위치() // 금괴 1개 const 영희 = 노란스위치() // 금괴 1개 const 훈이 = 노란스위치() // 금괴 1개 스위치는 1번 밖에 누를 수 없는데, 3번이나 눌렸고, 철수 영희 훈이 각각 금괴를 1개씩 얻었어요! 따라서, 스위치는 1번만 눌리도록 코드를 변경해 주어야 할 것 같네요! let isPushed = false // 질문에서의 isStarted와 동일한 역할 function 노란스위치(){ if(isPushed === false){ isPushed = true return "금괴 1개" } else { return "더이상 금괴가 없어요." } } const 철수 = 노란스위치() // 금괴 1개 const 영희 = 노란스위치() // 더이상 금괴가 없어요. const 훈이 = 노란스위치() // 더이상 금괴가 없어요. 질문에서의 isStarted는 동일한 맥락 으로 타이머를 1회만 작동 하게 만드는 코드로 이해하시면 되겠죠?!^^ ============================================================ let timer 에서 timer = setInterval 재할당 하는 이유 2-1) let timer = setInterval() 2-2) let timer timer = setInerval() => 본 수업에서의 위 2가지 방식의 차이는 없습니다!^^ 따라서, 2-1) 방식으로 진행하셔도 무관해요! ============================================================ clearInterval(timer)를 사용하는 이유 => 타이머가 끝났을 때, 종료하기 위함이에요!^^ 아래의 예시를 볼까요?! 아래는 1초에 1번씩 "바나나" 를 콘솔에 보여주는 코드 랍니다 setInterval(() => { console.log("바나나") }, 1000) // [ 실행결과 ] // 바나나 // 바나나 // 바나나 // 바나나 // 바나나 // 바나나 // ... 계속 위 코드를 실행해 보니, "바나나"를 무한히 보여주고 있는데요! 딱 3번만 보여주고 싶다면, 아래처럼 만들어 볼 수 있겠죠! let 보여준횟수 = 0 setInterval(() => { console.log("바나나") 보여준횟수 = 보여준횟수 + 1 if(보여준횟수 >= 3) { // 보여준횟수가 3번 이상인 경우, 타이머 종료해야함 } }, 1000) 여기서, 타이머를 종료 하려면 어떻게 하는게 좋을까요?! 네! 바로 이 때 사용하는 것이 claerInterval() 이랍니다!^^ 따라서, 아래와 같이 setInterval을 변수에 담아 놓고, 해당 변수를 필요할 때 종료시켜 주면 되겠죠?!^^ let 보여준횟수 = 0 let 나의타이머 = setInterval(() => { console.log("바나나") 보여준횟수 = 보여준횟수 + 1 if(보여준횟수 >= 3) { claerInterval(나의타이머) // 보여준횟수가 3번 이상이므로 타이머 종료해야함 } }, 1000) // [ 실행결과 ] // 바나나 // 바나나 // 바나나 참고) 보여준횟수가 3보다 작을 때만 "바나나"를 보여주면 굳이 타이머를 종료하지 않아도 되는데요? let 보여준횟수 = 0 setInterval(() => { if(보여준횟수 네! 맞아요! 하지만, 이 경우는 사실상 "바나나"만 화면에 안찍힐 뿐, setInterval()이라는 함수는 계속 실행중인 상태이기 때문에, 컴퓨터는 계속 1초에 1번씩 보여준횟수가 3보다 작은지 비교하는 일. 즉, if(보여준횟수 을 검사 해야 한답니다! 무한히요! 따라서, 이러한 코드가 많으면 많을수록 불필요한 일을 무한히 해야하므로, 웹개발의 경우, 느리고 버벅거리는 홈페이지 가 만들어지게 되고, 휴대폰 앱개발의 경우, 배터리가 빨리 소모 되는 등의 문제가 발생되는 것이랍니다!^^
- 0
- 2
- 51
질문&답변
2024.05.25
함수에 대해 질문있습니다.
안녕하세요! 부드러운 족제비 님! 함수를 반드시 만들어야할 필요는 없답니다! 하지만, 함수를 만들면서 우리의 코드 작성이 편리 해지기 때문에 적극 사용할 것을 권장드려요! 더 자세히, 함수는 우리가 만든 코드를 반복하여 만들지 않고, 1번만 만들어서 다음에 또 사용 하기 위해서 만든답니다! 아래 예시는 어린이들이 사과를 구매한 갯수에 따라서 지불해야 하는 돈을 보여줍니다 const 철수 = 100 * 5000 // 100개 * 5000원 const 영희 = 20 * 5000 // 20개 * 5000원 const 훈이 = 30 * 5000 // 30개 * 5000원 const 맹구 = 50 * 5000 // 50개 * 5000원 위 예제는 문제가 있어요! 사과 가격이 6000원으로 오르면? 1. 모든 코드를 6000원으로 수정 해주셔야 겠죠! 철수,영희,훈이는 6000원으로 수정했는데 2. 맹구는 실수로 수정하지 못했다면? 에러가 발생하겠죠! (실무에서는 코드가 많고 매우 복잡하여, 하나 하나 찾아서 변경하기가 어렵습니다.) 따라서, 아래와 같이 변경하면 코드의 안정성을 높이고 관리가 쉬워진답니다! => 이를 유지보수가 좋다 고 합니다. function 사과가격구하기(사과갯수){ return 사과갯수 * 5000 // 나중에 사과가격 오르면? 여기만 6000으로 수정하면 끝! } const 철수 = 사과가격구하기(100) const 영희 = 사과가격구하기(20) const 훈이 = 사과가격구하기(30) const 맹구 = 사과가격구하기(50)
- 0
- 1
- 46
질문&답변
2024.05.25
매개변수 질문있습니다
안녕하세요! cyh1908 님! 해답을 찾으셨다니 다행이에요!^^ 또 궁금한 사항 있으시면 질문 주세요!
- 0
- 2
- 64
질문&답변
2024.05.19
coolsms.default에서 에러가 발생합니다. //sdk 가져오기
안녕하세요! yashinwol 님! coolsms.default 를 사용하셔야 합니다! 추가로, 현재 타입스크립트를 사용하고 계신 것 같은데요! "typeof CoolsmsMessageService' 형식에 'default' 속성이 없습니다" 메시지는 coolsms 라이브러리의 현재 버전에서 타입스크립트를 지원하고 있지 않기 때문에 나오는 에러 메시지이므로 무시하셔도 될 것 같아요! 해당 라인 윗 줄에 // @ts-ignore 를 입력하여 에러 메시지를 숨길 수 있답니다! 마지막으로, import coolsms 와, import * as coolsms 는 라이브러리 제작시 설정 방법에 따라 결과가 충분히 달라질 수 있으므로, 수업의 내용과 동일하게 import coolsms 를 사용해 주세요!^^
- 0
- 1
- 59
질문&답변
2024.05.19
css에서 calc에 대해 질문있습니다.
안녕하세요! 부드러운 족제비 님! 실제로 실무에서는 calc() 함수를 자주 사용하게 되는데요! 그 이유는, 기기별로 사이즈가 다른 경우에 이를 대응하기 위함 이랍니다!^^ (미리 계산하여 고정값으로만 사용한다면, 기기별 사이즈의 비율에 맞게 조정하는 것이 어렵겠죠?!)
- 0
- 2
- 72
질문&답변
2024.05.19
eslint 설치후 eslint.config.mjs 파일 생성이되고 .eslintrc.js 없습니다.
안녕하세요! hojin kim 님! eslint가 최신 버전으로 올라가면서 이런 현상이 생긴 것 같네요! 최초에 nextjs를 설치하면서 자동으로 만들어졌던 .eslintrc 파일을 삭제 한 이후에 eslint를 새롭게 다시 설치하시면 제대로 나오게 됩니다!
- 0
- 2
- 176
질문&답변
2024.05.19
[20-03-search-keyword] 에서 질문 있습니다.
안녕하세요! 민유 님! 위의 작동 로직을 보니 최종적으로 map() 내에서 return 이 빠진 것 같네요! return을 추가 해 주시거나, 현재의 중괄호 {} 를 소괄호()로 변경 해 주세요! (return {} 는 소괄호()로 변경될 수 있다는 것 앞에서 배웠죠?!^^)
- 0
- 2
- 60