javascript5 React 1일 # React 설치 1) Visual Studio Code terminal에서 react 설치를 원하는 위치로 이동 ex) C:\Users\user\Documents\frontendReview에서 내부에 있는 basic폴더로 이동을 원할 경우 >> cd basic ++ 상위 폴더로 이동을 원할 경우 >> cd .. npm install -g create-react-app 먼저 입력 2) npx create-react-app react-basic 입력 terminal 꺼내기 단축키: Ctrl + j npx: npm과 유사한 패키지 매니저 create-react-app: 리액트 프로젝트를 만들 때 필요한 명령어 react-basic: 생성할 프로젝트 폴더 이름 3) 생성한 폴더로 이동 cd react-bas.. 2023. 1. 17. JS 8일차 # Side Bar - nav를 화면 왼쪽에 안보이게 translate 해두었다가 메뉴버튼을 클릭했을 때 왼쪽에서 나오게 한다 - nav가 나왔을 때 나머지 여백은 overlay로 덮이고, 닫기버튼이 없는 대신 overlay를 클릭하면 nav가 닫히도록 한다. ☰ Logo Link Link Link Side Bar Lorem ipsum dolor sit amet consectetur adipisicing elit. # Modal - 다른 컨텐츠들 위에 창을 띄우는 것 - modal 창 상단의 닫기버튼이나 창을 제외한 부분을 클릭하면 닫히도록 한다 Open Modal × Modal Content Lorem ipsum, dolor sit amet consectetur adipisicing elit. # fo.. 2022. 12. 29. JS 7일차 # Accordion Tab Lorem ipsum dolor sit amet consectetur adipisicing elit. - 버튼을 클릭했을 때(onclick) 함수 f의 argument를 this로 둠으로서 js에서의 el은 button이 된다. - 그리고 다시 item을 el의 바로 다음 element인 div로 선언한다 - toggle을 통해 div의 크기를조절할 수 있도록 한다. # Accordion 2 Guinness Heineken Budwiser Guinness Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores molestiae, quia cum modi sit suscipit qui harum rerum odit... 2022. 12. 27. JS 6일차 # 자바스크립트와 HTML 1. window 객체 - 웹개발을 위한 도구모음 - 메시지 창 띄우기 window.alert("Hello"); - 접속 기기의 위치를 리턴(ex. 위치기반앱) window.navigator.geolocation - 유저의 페이지 탐색기록 window.history - 브라우저의 저장공간 (ex. 로그인토큰, 테마, 쇼핑카트) document.cookie // 쿠키 window.localStorage // 쿠키의 대체제 - 서버에 데이터를 요청하는 메서드 (ex. AJAX: 페이지 새로고침없이 서버에 요청을 전송할 수 있는 기술) window.XMLHttpRequest window.fetch // 비교적 최신메서드 - 뷰 개발(화면 출력과 관련) window.document /.. 2022. 12. 27. JS 2일차 1. if 조건문 if(조건) { 조건이 참일 경우 실행되는 코드 } else { 조건 외의 코드 } - if 조건문에서 조건이 boolean타입이 아닌 경우 조건이 nul, ' ', undefined 일 경우 false 조건이 !null이리 경우 null을 부정함으로서 true가 됨 2. switch 조건문 - 엄격 동등 연산(===)을 수행한다 var year = 2022; switch(year) { case 2021: console.log('작년'); break; case 2022: console.log('이번 년도'); break; case 2023: console.log('내년'); break; default: console.log('.'); } 3. 삼항연산자 - 조건 ? 값1 : 값2 - 조.. 2022. 12. 14. 이전 1 다음
