합을 구하는 함수 만들기 0부터 n-1까지 더하는 함수를 만들고 싶다면? function get_sum(n) { let sum = 0 (기준 변수를 설정하는 것) for (let i = 0; i

보통 자바스크립트는 웹 사이트(웹 문서)에 움직이는 그림을 그릴 때 쓰이는 작고 가벼운 언어이다. 자바스크립트를 이용해 사이트 내의 팝업을 띄울 수 있으며, D-day 기능처럼 카운팅이 되는 모습도 작성할 수 있다. 이제는 자바스크립트로 앱도 만들 수 있다. (리액트 네이티브가 자바스크립트를 기반으로 하기 때문이다!!) 따라서 자바스크립트를 배워 놓으면 웹도 만들고 앱도 만들 수 있다. 크롬 브라우저에서 F12(맥은 : alt(option) + command + i)를 눌러 개발자 콘솔 창을 열어서 코드를 입력하며 공부할 수 있다. 위 스샷처럼 console.log("Hello World!"); 입력하고 Enter를 치면 Hello World!라고 나온다. console.log(변수)는 콘솔 창에 괄호 ..

앱 서비스를 만든다는 건, 클라이언트와 서버 모두 만들어야 한다는 것을 뜻한다. 클라이언트와 서버 앱 서비스, 웹 사이트 클라이언트에서 원하는 데이터가 있을 때마다 서버에 요청하고, 응답 데이터를 받아 사용자에게 보여준다.(데이터를 주고받는 관계) 클라이언트(프론트) 클라이언트는 사용자가 보는 화면이다. 웹 사이트로 따지면 크롬 브라우저나 사파리, 익스플로러가 해당되겠고 앱으로 따지면 휴대폰에 많이 존재하는 어플, 즉 앱 자체가 해당된다. 서버(백앤드) 서버는 사용자가 원하는 데이터가 있는 곳이고, 원하는 데이터를 요청하면 이에 응답해주는 곳이기도 합니다. 앱과 리액트 네이티브 앱 개발이라고 하면 단연 "안드로이드"와 "iOS(아이폰)" 두 가지가 떠오른다. 안드로이드는 Java&Kotlin이라는 기술로..

1주차 강의 내용을 바탕으로 숙제를 해야 한다. 위 스샷처럼 팬명록을 만들어야 한다. 아이유 팬명록을 한번 만들어 보자! 아이유 팬명록 여기까지는 미리 알려주셔서 이제부터 하나씩 만들어 보세! 닉네임 닉네임 box를 만들어 주고 정렬을 해주고 그림자까지 만들어 주었다. .mypost { width: 95%; max-width: 500px; margin: 20px auto 20px auto; box-shadow: 0px 0px 3px 0px black; padding: 20px; } 응원댓글 응원 댓글도 추가해주고~ * { font-family: 'Noto Serif KR', serif; } 폰트도 설정해주었다. 응원남기기 .mybtns { display: flex; flex-direction: row; ..

Javascript는 script 안에 코드를 입력해준다. script는 브라우저 개발자툴(f12)에 Console탭과 똑같은 것이다. script를 Console탭에 이어서 코드를 입력하여 실행되는 것을 확인 할 수 있고 Console탭에서 코드를 따로 입력하여 실행되는 것을 테스트할 수 있다. 프로그래밍을 배울 때 함수, 변수, 자료형, 조건문, 반복문 이 다섯 개를 꼭 기억하면 된다. 함수 안에 로 공간을 만들어 작성한다. 영화 기록하기 영화 기록하기 영화 기록하기 버튼을 클릭 하였을 때 안녕!이라는 팝업창을 뜨도록 하는 것이다. function sum(a,b) { alert(a+b) } sum 이라는 거는 우리가 그냥 지어준 이름이고 aaabbb 다 상관이 없다. sum(a,b)는 alert()을..

이번에는 만들어놓은 index.html에 포스팅 박스를 만들어 보는 시간이다. 위 이미지 처럼 포스팅 박스를 만들어 주면 된다. Box 이름표 만들고 설정하기! 내 생애 최고의 영화들 영화 기록하기 간단한 글씨를 씁니다. body mytitle 밑에 mypost 이름표를 만들어 주고 간단한 글씨를 씁니다.라고 적어주었다. 텍스트를 넣음으로써 어느 위치에 코드를 넣은 것인지 확인이 되었다. 영역확인과 설정 .mypost { background-color: green; width: 500px; } Box 칼라를 넣어 영역을 확인하고 폭을 500px로 설정하였다. Top과 포스팅 박스 사이의 여백을 만들어 주고 중앙으로 이동시켜보자! .mypost { background-color: green; width: ..

어제에 이어서 부트스트랩 사이트에 코드를 편리하게 활용해보자! 페이지 Top 아래에 카드를 만들어보자! 부트스트랩 사이트 Components에서 Card를 선택해서 만들고자 하는 디자인을 선택해서 코드를 복사하자! Card title This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. Card title This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit long..

bootstrap이란? 예쁜 CSS를 미리 모아둔 것으로 미리 완성된 부트스트랩을 가져다 사용하기 좋다. 부트스트랩 컴포넌트 5.0: https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 부트스트랩 활용법 index.html 파일을 만들어서 연습하기! 이걸로 시작해보죠! 나는 버튼이다. 첫 번째 h1내용을 지우고 두 번째 button 내용을 붙여 넣기! 부트스트랩 사이트에서 원하는 것을 찾아 ..