learn-all-with-javascript

HTML: 뼈대를 잡고텍스트, 이미지, 입력창 등 우리가 웹에서 보는 요소를 정의할 때 사용한다.CSS: 디자인을 한 후HTML에 정의된 요소들에 스타일을 부여한다.JAVASCRIPT: 웹의 모든 동작을 처리한다.버튼을 클릭했을 때, API 서버와 통신할 때 등 모든

HTML 태그는 정보를 보여주는 역할을 한다. 이미지, 텍스트, 비디오, 입력창 등의 개별 정보는 전부 HTML로 부터 만들어진다.이 정보들을 HTML 언어로 표시하기 위해선 태그와 속성, 콘텐츠를 이해해야 한다. 이 때 콘텐츠는 태그가 될 수 있다.기본 형식: &lt

1. CSS 기본 문법 CSS는 밋밋한 HTML 태그에 디자인을 씌워주는 언어다. 선택자(Selector) 선택자는 스타일을 적용할 대상이다. 태그, id, class 등을 선택할 수 있다. 태그를 선택자로 하면 모든 태그에 스타일이 적용된다. id는 고유한 요소라

기존 div 요소는 줄바꿈이 되어 수진으로 배치가 되는데 수평적으로 배치하고 싶을 때자식을 부모 기준으로 가운데 정렬 하고 싶을 때핵심은 Container와 Item이다. flex-direction: 자식의 정렬 방향을 설정한다. row는 수평으로, column은 수직

초기 설정 (구간 나누기) 네이버 홈 화면 처럼 그랩마켓 웹 화면을 구현할 것이다. 검정색: header 노란색: body-banner 파란색: body 빨간색: footer 1. html 2. css #header { height: 64px; backgro

html 파일 하단(footer 아래)에 script 요소 추가하기배열 생성해서 그 안에 상품 정보 넣고 for문으로 html string을 만들어서 product-list에 append하기var product 라는 배열 안에 상품 넣기

함수가 가장 나중에 불린다고 해서 CallBack 함수라고 부른다.보통 콜백 함수를 구현할 때 함수의 인자에 함수를 넣는 방식으로 진행한다.콜백 함수를 사용할 때 함수로 정의된 변수를 넣지 않고 바로 함수를 넣을 수도 있다. 함수에 이름을 붙여서 선언하지 않고 1회용으

인터프리터는 개발자가 짠 javascript 코드를 읽고 순차적으로 코드를 실행시킨다. 그러나 만일 특정 코드에서 시간이 오래 걸리면 그 아래 줄의 코드는 실행되지 않은 채로 대기하는 참사가 일어날 수 있다. >이를 방지하기 위해 javascript는 비동기 방식을

HTTP(Hypertext Transfer Protocol)는 웹을 개발하는 사람이라면 누구나 다 알아야 하는 통신 프로토콜이다.프로토콜이란 상호 간 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의되었다.나는 이렇게 줄테니 넌 이렇게 받고 난 너가

컴퓨터끼리 네트워크 통신을 할 때 여러가지 방식으로 통신을 하는데 이런 통신 방식들을 묶어서 통신 프로토콜이라고 한다.이때 HTTP 프로토콜을 활용한 통신이 HTTP 통신이다.HTTP 통신으로 서버에게 정보를 요청하기 위해 지켜야할 규칙1\. 어떤 서버에게 요청할 것인

일반적으로 javascript에서 네트워크 통신을 하도록 돕는 fetch함수가 있다. 그런데 이 fetch함수보다 네트워크 통신을 더 편하게 도와주는 외부 라이브러리가 있는데 바로 axios다.javascript에서 외부 라이브러리를 사용하기 위해선 script 태그를

백엔드 개발자들이 쉽게 서버 통신 테스트하도록 도와준다.1\. postman 가입2\. My Workspace3\. New4\. Mock Server 선택5\. Request URL에 path 작성 => URL/path6\. Mock Server naming==> po

JavaScript Object Notation의 약자로 데이터를 저장하거나 전송할 때 많이 사용되는 DATA 형식입니다. JSON은 우리가 배운 javascript 객체 표현식을 기본으로 한다.그렇기에 javascript 프로그래밍을 할 때 찰떡이다. 네트워크 통신을

이제 그랩 마켓 코드에 axios를 적용해서 네트워크 통신을 해보자<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> script 초반에 axios.get을 해주고

일반적으로 string 자료형을 조합할 때 + 연산자를 사용한다. 그러나 문자열을 더하는 과정이 많아지면 + 연산자가 많아지고 띄어쓰기 같은 작업을 하기가 번거롭다. 이때 Template Literal을 사용하면 더 쉽게 만들 수 있고 가독성이 높아진다.\`\`(백틱)

객체와 배열에 들어가있는 값을 가져올 때 Destructuring 기능을 사용하면 손쉽게 값을 뽑아낼 수 있다.

기본적으로 배열을 다룰 때 for을 사용🚨 for문은 for문안에 int i가 아니라 var i첫 번째 인자는 값, 두 번째 인자는 인덱스map, forEach 메소드는 모두 배열을 조회한다는 기능은 동일(조회 방법도 동일)하지만forEach는 별다른 return이

함수를 표현하는 새로운 방식인 Lamda 식은 () => {} 형식을 사용한다.함수를 축약해서 표현하므로 코드가 더 깔끔하고 return 구문을 생략할 수 있다는 점이 장점>.<

3항 연산자는 if문을 단축 형태로 사용할 수 있다.

애초에 js는 브라우저에서만 실행되는 언어였다. 하지만 점점 웹 개발,브라우저 뿐 아니라 자체적으로 프로그램을 만들어서 실행할 수 있도록 나온 기술이 node.js이다.node.js는 대표적으로 서버 프로그램 개발할 때 많이 사용된다. 물론 java, python 같은

node.js를 설치하면 npm은 같이 설치된다.: react 프로젝트를 손쉽게 만들어주는 도구npm install -g create-react-appcreate-react-app .npm start

이런식으로 컴포넌트를 나눠서 개발하게 되면 재활용할 수 있다는 장점이 있다. DOM: 브라우저에서 최종적으로 화면에 그려주는 HTML 결과물을 의미한다.DOM을 조작할 때 javascript를 사용하는데, 더 편하게 조작하기 위해 jQuery라는 기술을 사용한다.그러나

기존 html에서는 <script> 태그를 활용해서 자바스크립트 파일을 불러왔다.ES6에서는 모듈을 불러오는 방식으로 import를 사용한다.import를 하기 위해선 export가 되어있어야 한다.여러 객체를 export, import 할 수 있다.

React 프로젝트를 처음 만들었을 때 보이는 index.html 파일.<div id = "root> 태그 안에 아무것도 없다.index.js: react의 컴포넌트를 DOM에 렌더링하는 진입 파일React는 가상 DOM 기술을 사용하기 때문에 우리가 작성한 컴포

jsx: React 컴포넌트에서 사용되는 문법js파일에서 HTML 태그를 작성할 수 있었던 건 jsx 문법을 사용하기에 가능하다.jsx 문법의 대표적인 특징은 javascript 문법을 태그들 사이에 사용할 수 있다는 것{} 사이에 작성하면 된다.

컴포넌트는 기본으로 다른 컴포넌트를 가질 수 있다. 이때 부모 컴포넌트에서 자식 컴포넌트로 값을 넘겨줘야할 때가 있다. 그럴 때 props를 이용해 값을 전달해줄 수 있다.

컴포넌트는 return을 통해서 UI 요소를 보여준다. 그러나 컴포넌트의 UI를 업데이트 해줘야하는 아래 예시와 같은 상황이 많이 발생시간을 보여주는 화면을 구현할 때,시간을 표시하는 컴포넌트는 시간이 지나면서 계속 업데이트되는 것네트워크 통신을 통해 데이터를 받아오면

컴포넌트가 맨 처음 렌더링 될 때 state를 업데이트하는 상황이면 state 변경 코드가 실행되고 컴포넌트가 렌더링되는 무한 반복에러가 뜬다.아무튼 React에서는 렌더링하는 것을 제어할 수 있는 장치로 useEffect라는 메소드를 제공해준다.useEffect(fu

React-router-dom: React에서 화면전환을 하기 위해 이용하는 라이브러리 1. React-router-dom 설치하기 npm install react-router-dom@5.2.0

상품 아이템을 클릭했을 때 해당 페이지로 이동을 구현해보자상품 정보가 출력되는 index.js파일에 Link 컴포넌트 불러오기import {Link} from 'react-router-dom'Link 태그 안에 콘텐츠가 들어가면 그 콘텐츠에 링크가 생성되는겨link 컴

Antd: 디자인을 손쉽게 도와주는 라이브러리 -> 더 손쉽게 화면 UI 디자인 가능(버튼, 아이콘, 팝오버, 카드) https://ant.design/components/overview/

Form 발행시 각각의 아이템들을 Form.Item으로 감싸줘야한다.그러면 Form.Item 안에 있는 name이 value값을 가져오는 key가 된다.onFinish(prop):왜 쓰는거지? 몰라;Divider: 중간에 실선으로 칸 나눠줌placeholder: 맨 처

API 서버는 쉽게 얘기하면 정보를 제공하는 서버다이전에 상품 정보를 불러올 때 포스트맨 Mock 서버(임시 API서버)를 활용했다.이처럼 회원 정보, 이벤트 정보 등을 받아올 때 API서버를 통해서 받아오게 된다.더 다양한 정보 요청을 위해 Node.js로 서버 개발