본문 바로가기

Spec UP - Frontend/생활코딩_JavaScript22

서버-클라이언트 통신 이해하기/JSON/AJAX/API활용 서버-클라이언트 통신 이해하기 8) 서버→클라이언트: "JSON"을 이해하기 클라이언트 -> 서버로 데이터를 요청하고 서버에서 클라이언트로 데이터를 전송해줄 때 데이터포맷을 JSON 이라고 한다. 서울시 OpenAPI에 접속해보기 http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 에서 JSON 뷰를 설치하면 데이터형식을 좀 더 깔끔하게 볼 수 있다. JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유.. 2021. 12. 24.

jquery Quiz https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week02/06.+Jquery+%EC%97%B0%EC%8A%B5%EB%AC%B8%EC%A0%9C+%EC%99%84%EC%84%B1%EB%B3%B8.html jQuery 연습하고 가기! s3.ap-northeast-2.amazonaws.com jQuery + Javascript의 조합을 연습하자! 1. 빈칸 체크 함수 만들기 1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기 [완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기 클릭 2. 이메일 판별 함수 만들기 2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기 2-2. 이메일.. 2021. 12. 23.

jQuery jQuery 란? 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다.HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리! 👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만, 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다. jQuery와 Javascript - 코드 비교해보기 document.getElementById("element").style.display = "none"; //javascript 문법 $('#element').hide(); //jQuery 문법 Javascript로 길고 복잡하게 .. 2021. 12. 23.

스타벅스 랜딩 페이지(홈페이지)를 만드는 예제 오픈 그래프(The Open Graph protocol) 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정합니다. Slack - KakaoTalk - og:type: 페이지의 유형(E.g, website, video.movie) og:site_name: 속한 사이트의 이름 og:title: 페이지의 이름(제목) og:description: 페이지의 간단한 설명 og:image: 페이지의 대표 이미지 주소(URL) og:url: 페이지 주소(URL) 트위터 카드(Twitter Cards) 웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보를 지정합니다. twitter:card: 페이지(카드)의 유형(E.g. summary, player) twitter:si.. 2021. 10. 28.

라이브러리와 프레임워크 다른 사람이 이미 잘 만들어놓은 것을 부품으로 삼아 내가 만들고자하는것을 빠르게 조립해서 만드는 것은 오늘날 소프트웨어 개발에 있어서 중요한 부분입니다. 지금까지는 스스로 생산자가 되는 방법을 알아봤다면, 이번에는 다른사람이만든 소프트웨어를 부품삼아 내가 만들고있는 소프트웨어의 생산자가 되는 방법을 살펴보겠습니다. (feat. 소프트웨어의 사회성) 이 때 알아두면 좋은 키워드가 라이브러리와 프레임워크입니다. (둘 다 다른사람의 도움을 받아 소프트웨어를 만든다는 공통점이 있습니다.) 1) 라이브러리 : 내가 만들고자하는 프로그램에 필요한 부품들이 되는 소프트웨어를, 재사용하기 쉽도록 잘 정리정돈해놓은 소프트웨어 2) 프레임워크 : 우리가 만들고자하는 것이 있을때 그것이 무엇이냐에 따라 언제나 필요한 공통적.. 2021. 10. 12.

파일로 쪼개서 정리정돈하기 (.js) 이전 시간에 코드를 정리정돈할 수 있는 도구인 함수, 객체 등을 공부하였습니다. 이번 시간에는 서로 연관된 코드들을 파일로 그룹핑하여 묶는 정리 방법을 알아보겠습니다. 객체의 활용시간에 완성해두었던 주/야간모드 전환코드입니다. 지금까지 작업해두었던 내용을 다른 웹페이지에도 적용해야한다고 생각해봅시다. 태그 내용만 복사해서 다른 html 파일에 붙여넣으면 동일한 버튼이 생성된것처럼 보여지겠지만, 실제로 그 기능은 작동되지않습니다. 이 기능을 실행하기 위해서는 부분도 함께 복사해서 적용을 시켜줘야합니다. 하지만, 이렇게 적용해야할 페이지가 매우 많고 수시로 수정작업도 일어난다고 가정해봅시다. 파일을 관리하기가 매우 어려워질것입니다. 때문에 여기서 우리가 만들어낸 부분만 파일을 따로 생성해서 저장한 뒤 관리하.. 2021. 10. 5.

객체와 반복문 / 객체 프로퍼티와 메소드 이번 시간에는 반복문을 활용하여 생성된 객체 내에 있는 모든 데이터를 가져오는 방법을 알아보겠습니다. 먼저, 객체를 만들고 불러오는 지난 예제입니다. 이 데이터를 반복문을 활용해 동일한 결과를 출력하도록 만들어 보겠습니다. - 아래 사이트를 참조하여 for..in 형식으로 작성하겠습니다. loops - How to iterate over a JavaScript object? - Stack Overflow How to iterate over a JavaScript object? I have an object in JavaScript: { abc: '...', bca: '...', zzz: '...', xxx: '...', ccc: '...', // ... } I want to use a for loop t.. 2021. 9. 28.

객체 쓰기와 읽기 배열은 정보(데이터)의 양이 많아졌을 때 서로 연관된 정보를 정리정돈하기 위한 도구입니다. 그리고 배열이라는 도구는 순서에 따라 정돈된다는 특징이 있습니다. https://nossodia.tistory.com/121?category=921581 배열과 반복문 집에 시간이지날수록 살림은 늘어나고 살림이 늘어날 수록 정리가 힘들어집니다. 때문에 사물들을 잘 정리할 수 있도록 옷장, 책장, 냉장고 등을 구입하기도 하고, 방이 많은 집을 선호합니다. nossodia.tistory.com 배열이라는 도구는 정보를 담는 그릇이면서 정보가 순서대로 저장된다는 특징이 있지만, 객체는 순서 없이 저장할 수 있는 정보라고 할 수 있습니다. 먼저, 객체의 문법에 대해 살펴보겠습니다. 배열은 var coworkers["데이터.. 2021. 9. 27.

객체 / 객체의 활용 프로그래밍을 하다보면 코드가 많아지고, 이를 정리하기위해 함수를 이용합니다. 그리고 함수뿐 아니라 연관되어있는 변수가 많아지면 똑같이 복잡도의 한계에 도달하게 됩니다. 이러한 상황에서 서로 연관된 함수와 변수들을 같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구가 바로 객체입니다. 이전 시간에 만들었던 nightDayHandler()함수 입니다. 위에 표시한 var alist로 시작하는 부분이 중복되는 것을 볼 수 있습니다. 중복된 코드를 함수로 독립시켜보도록 하겠습니다. 위에 중복되었던 부분을 setColor()라는 함수로 생성하였습니다. 그리고 실제 적용할 색상은 'powderblue'와 'red'로 각각 다르기때문에 매개변수로 (color)를 설정하고 함수를 호출할때 매개변수를 통해 색상값을 적용.. 2021. 9. 24.

함수 : 매개변수(Parameter), 인자(Argument), 리턴(Return) 함수라는 개념을 이해하기 쉽게 비유하자면 자판기를 생각해볼 수 있다. 자판기는 사용자가 원하는 메뉴를 누르면 요청한 제품을 제공한다. 여기서 메뉴를 누르는 요청이 '입력', 자판기가 요청을 받은 제품을 제공하는 것이 '출력'이라고 할 수 있다. 함수 역시 입력과 출력으로 이루어져있으며, 여기서 입력값과 관련된 것이 Parameter(매개변수), Argument(인자)이고, 출력값은 Return(리턴)과 관계가 있다고 할 수 있다. 그렇다면 Parameter(매개변수), Argument(인자), Return은 어떠한 개념인지 알아보도록하자. 위 예제에서 onePlusOne() 이라는 함수를 생성하였다. 이 함수는 document.write(1+1); 즉, 1+1인 2만 출력하는 함수이다. 그렇다면 이 함수.. 2021. 9. 17.

이전 1 2 3 다음

티스토리툴바