css

이전 연습에서는 react를 import하고 일일히 다 설정해주었지만, npx로 create-react-app 하면 훨씬 개발하기 편함 터미널에 npx create-react-app movie-app(생성할 디렉토리 이름) 이미 존재하는 폴더 명과 같게 짓지 않도록 유의 npm(node package manager): nodeJS의 모듈들을 패키지화하여 저장하고, 패키지 설치 및 관리 도구 npx(node package runner): 일회성으로 원하는 패키지를 npm registry에 접근하여 실행하고 설치하는 도구 패키지 업데이트 시, npm은 기존 패키지 제거하고 새로 설치해야함 movie-app 디렉토리 터미널에서 npm start하면 노드 서버 실행 (ctrl + c 로 종료) react-app..

react는 우리의 서비스를 interactive 하게 만들어주기 위해 만들어졌다 reactjs는 거의 js로 이루어져 있으며, vanillajs 의 문제점을 많이 해결해준다 따라서 vanilla로 불편함을 알고 react를 쓰는 것과 그냥 react부터 달려드는 것은 다르다 vanillajs 로 버튼 클릭 수 화면에 띄우기 Total clicks: 0 click me react로 같은 기능 만들기 react에서는 script 안에서 element를 만들어 interactive하게 함 어려운 방법, 쉬운 방법이 있는데 어려운 것부터 배워서 react의 본질을 깨우친다 지금까지는 html에서 만든 것을 js에서 가져와서 업데이트 했다면, react에서는 js에서 만들고 업데이트 가능 property에 ad..

js 복습 포스팅박스 열기 클릭 수에 따라 다른 alert 창 띄우기 cnt를 함수 밖에 설정해야 축적이 됨 jQuery는 길고 복잡한 js 코드를 간단하게 쓸 수 있도록 미리 만들어진 라이브러리 (따라서 import 필수!) bootstrap에 이미 jQuery import 되어있음 bootstrap 사용하지 않을 때는 jQuery CDN을 html head에 복사 // id 값이 article-url인 곳을 가리키고, val()로 입력값을 가져온다 - input box의 경우 $('#article-url').val(); // id 값이 article-url인 곳을 가리키고, 입력값을 'something'으로 한다 - input box의 경우 $('#article-url').val('something'..

나만의 쇼핑몰 메인페이지 만들기 수제버거 price: $5 세상에서 제일 맛있는 수제버거 팝니다. 주문자 이름 수량 수량 선택 One Two Three 주소 전화번호 주문하기

bootstrap: 남이 잘 만들어 놓은 css 가져다 쓰기 Primary https://getbootstrap.com/docs/4.0/components/alerts/ Alerts Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. getbootstrap.com 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅박스 열기 아티클 URL 간단 코멘트 기사저장 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여..

1. 웹의 동작 개념 html을 받는 경우 우리가 보는 웹페이지는 브라우저가 서버에 요청한 html 파일을 받아 그려주는 것 서버가 만든 API라는 창구에 미리 정해진 약속대로 요청을 보냄 예) https://naver.com/ 은 "naver.com"이라는 서버에 "/" 창구에 요청을 보낸 것 데이터만 받는 경우 html 말고 데이터만 전송받기도 한다 데이터만 내려받은 경우, JSON 형식으로 2. html 기초 개념 1) html: 크게 head와 body, 태그로 이루어짐 head는 페이지 속성정보, body는 페이지 내용 나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글..