AI Platform / Web

1. CSS란 CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. CSS는 웹페이지에서 스타일이나 레이아웃에 이용된다. 그리고 html 웹페이지 자체에서도 사용 가능하고, 따로 css 파일을 만들어서 불러오는 방식으로도 사용 가능하다. 매우 기초적인 것 중에 중요한 부분 위주로 정리해 보겠다. 그 이후에 CSS 구조 정리로 넘어가자 .html 문서와 같은 폴더..

0. 들어가면서 앞에서 우리는 ip값을 이용해서 경도와 위도를 알아보았다. 이제는 알게된 경도와 위도를 이용하여 날씨를 알아보자. 빠르게 날씨 예측을 하고 싶다면, 인증키 받고 바로 가장 아래로 스크롤을 내리자. 1. Openweathermap 인증키 받기 openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap 2 Billion Forecasts Per Day 2,500 new subscribers a day 2,600,000 customers 20+ weather APIs 2 Billion Forecasts Per Day 2,500 new subscribers a day 2,600,000 customers 20+ weather APIs op..

1. helpermethod 자바스크립트에서 helpermethod인 some과 all에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. some과 all의 차이점을 인지하면서 보자. 2. some 리스트의 각 요소 중에 단 하나라도 만족하는 것이 있다면 True 없다면 False가 출력된다. const arr = [10, 20, 30] const isBiggerThan20 = arr.some(num => num > 20) console.log(isBiggerThan20) // true 3. every 리스트의 모든 요소가 조건을 만족하면 true, 아니라면 false를 리턴한다. const arr = [10, 20, 30] const allBiggerThan5 = arr.every(n..

1. helpermethod 자바스크립트에서 helpermethod인 filter와 find에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. 2. filter 리스트 안에서 홀수만 뽑고 싶거나, 만약 todoList를 만들었을 때, 할 일이 끝난 것만 뽑아내고 싶을 때 사용하면 된다. 즉, 특정 조건을 만족하는 것만 모아서 배열을 리턴한다. 일반 사용 const arr = [1, 2, 3, 4, 5] const newArr = arr.filter(num => num % 2) console.log(newArr) 전체를 순회하며 조건을 만족하는 요소를 찾아낸다. 3. find filter와 가장 비슷하지만 가장 큰 차이점은 filter는 배열을 리턴하지만, find는 특정 값(요소)을 리..

1. helpermethod 자바스크립트에서 helpermethod인 forEach에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. 2. forEach forEach의 가장 큰 특징은 리턴 없이 하나씩 돌려주는 것이다. 일반 사용 const fruits = ['apple', 'banana', 'peach', 'blue berry'] fruits.forEach(function(fruit){ console.log(fruit); }) // 과일이 하나씩 출력된다. axios 사용 // return값이 없어서 axios에 유용하게 사용가능하다. const urls = ['https://han...', 'https://python...', 'https://javascript...'] urls...

1. helpermethod 자바스크립트에서 helpermethod인 map에 대해 알아보자. 가장 기초적인 예시부터 다양한 예시를 적어보겠다. 2. map map은 주로 리스트 안의 숫자들을 각각 하나씩 더하거나 곱할 때 사용한다. const arr1 = [1, 2, 3] const newArr1 = arr1.map(num => num + 1) console.log(newArr1) // 위의 코드와 아래의 코드는 같다. const arr1 = [1, 2, 3] const newArr1 = arr1.map(function(num) { return num + 1 }) console.log(newArr1) // [2, 3, 4]

0. 들어가면서 우리는 지금까지 Vue의 기초와 자바스크립트 기초, Vue Cli에 대해 알아봤다. 이제 라우터에 대해 알아볼 것이다. 글을 읽는 대상은 초보자이기 때문에 쉬운 단어를 활용하여 실습 형식으로 이해가 되도록 적어보겠다. 지금까지 배운 Vue Cli에 대해 간단히 요약해 보겠다. Vue CLI의 핵심은 컴포넌트이다. 컴포넌트의 조합이 single page application조합을 만들어 나가는 것이다. 그리고 하나의 컴포넌트는 template script style이라는 3개의 구조로 이루어져 있다. 해당 컴포넌트를 쓰려면 컴포넌트를 만든 후에 App.vue의 import HelloWorld from '@/components/HelloWorld.vue' 위의 부분을 보면 @라는 것을 볼 수..

0. 들어가면서 우리는 지금까지 로컬에서 Vue를 만들어 보았다. Vue cli와 Vue router 관련해서는 클릭해서 알아보자. 지금까지 Vue를 완성했다고 가정하고 들어가 보겠다. 1. Vue Build 하기 우선 서버를 실행하면 다음과 같은 창이 나올 것이다. 보면 최적화하기 위해서는 Build 하라고 나온다. 빌드를 진행하자. $ npm run build 완료가 됐다면 상태창은 다음과 같다. 설치 후에 dist라는 폴더가 생성되었고 폴더 안에는 js 파일 2개와 css 파일 하나가 생성이 됐다. 우리는 지금까지 각각의 파일 안에 style을 만들어 놨다. 그러나 build를 하면 우리가 작성한 모든 자바스크립트 코드, 작성한 라이브러리, 라이브러리가 의존하는 코드를 포함하여 모두가 압축되어 들어..