목록2024/05 (21)
훈돌라
function App() { const handleClick = () => { alert("안녕하세요!"); } // return ( /* */ div style={{ height: '100vh', display: ' flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', }} > { } span>이것은 내가 만든 App 코드입니다span> button onClick= {handleClick} >클릭!button> div> );}export default App; 객체 안 ..
function sum (num1, num2) { return num1 + num2;} console.log(sum(2,3)); function isEvenOrOdd(num){ if(num%2 === 0){ console.log("짝수입니다") } if(num%2 === 1){ console.log("홀수입니다") }}isEvenOrOdd(5);isEvenOrOdd(4); const name = "훈돌라";const age = 28; const user = `이름 : ${name}나이 : ${age}`; console.log(user); document.querySelector document.querySelector docume..
본격적인 리액트를 배우기 앞서, 리액트에서 가장 많이 쓰이고 중요한 JS 문법들을 되새김질 하는 시간. // let blockScopeVariable = "Available only in this block";// if (true) {// let blockedScope = "Visible inside this block";// console.log(blockedScope);// }// console.log(blockedScope);// console.log(blockScopeVariable);//블록드스코프가 블록 범위를 벗어나서 로그에 찍히지 않음. (오류발생)// let blockScopeVariable = "Available only in this block";// if (true) ..
다크모드에서 댓글 수정하기 버튼을 누르면 인풋 창 안의 커서와 텍스트가 보이지 않는다.드래그 해보니 텍스트가 보이고, 확인을 눌렀을 때 수정은 되는걸로 보아 css 에 문제가 있는 것 같음. 확인해보니, A 팀원분이 만든 다크모드 코드에 B 팀원분이 수정을 했는데 B 팀원분이 " #commentInput, #passwordInput 컬러 부분 제가 어제 컬러 color: var(--rvInput-tc); 로 수정해서 그런 것 같아요" 라고 하셨고, css 에 dark 일 땐 하얀색이고, dark 가 아닐 땐 값이 안 정해져 있어서 적용이 안 된 것 같다. :root { --header-bg: black; --header-ft: white; --body-bg: white; --body-ft:..
한 줄 정리 : 최신 영화 리스트와 각 영화의 상세정보, 리뷰 등을 확인하고 작성할 수 있는 웹사이트내용메인페이지메인페이지 반응형@media screen으로 화면의 단위를 3개로 나눔1300px 이상 : 영화카드 4개 보임1000px 이상 : 영화카드 3개 보임700px 이상 : 영화카드 2개 보임그 이하 : 영화 카드 1개 보임영화 검색addEventListener를 input으로 설정하여 입력 이벤트를 실시간으로 반영하여 검색결과 보여줌.영화 카드카드를 마우스 hover하면 영화 줄거리를 보여줌카드를 클릭하면 해당 영화의 상세 페이지로 이동..상세페이지 (영화 설명)헤더바 : 메인페이지로 돌아가는 홈버튼과 라이트/다크 모드로 바꿀 수 있는 버튼이 있음영화 정보영화 제목, 런타임, 개봉일, 장르, 평점..
저번 글에 이어서오늘은 팀원분이 완성해두신 상세페이지 -> 리뷰 작성 기능에 유효성 검사를 추가해보려고 한다. 우선 어떤 식으로 유효성 검사를 구현할지 먼저 생각을 좀 해봤다. 1. 댓글 텍스트 수2. 캡스락 keyup 여부3. 한/영 여부인데, 사실 한/영 여부는 불필요하다고 생각했고, 댓글 텍스트 수도 실제로는 제한이 없기 때문에 2. 캡스락 keyup 여부를 구현하기로 했다. const usernameInput = document.getElementById("username"); usernameInput.addEventListener("keyup", function (event) { if (event.getModifierState("CapsLock")) { // CapsLoc..