목록JS (9)
모르면 배우면 된다
AJAX. 비동기로 데이터 가져오기 ! 데이터를 가져오는 법 : 1) 정확한 URL 입력 2) GET 요청 GET 요청을 서버에 날리는 방법 1. URL을 직접 입력창에 입력 2. 버튼으로 GET 요청 날리기. HTML 버튼 SUBMIT. 근데 새로고침됨. 3. AJAX : 새로고침없이 서버에게 GET 요청 -> 부드럽게 데이터를 주고받을 수 있음. JS로 AJAX 하는 법 fetch(url) // url로 get 요청을 보낸다. .then((response)=>{ //.then : 값을 가져온다. then 안에는 callback 함수가 담긴다. (응답 끝나면 이 함수를 실행해줘!) if(!response.ok){ throw new Error('에러') } return response.json() }) ..
타입스크립트 스터디를 한 달 동안 진행했다. 기간 : 2022년 7~8월 한 달 목표 : TypeScript란 무엇인가, 어떻게 사용하는가 가볍게 훑어보기! 진행한 이유 : JD를 살펴보니 요즘 TS를 사용하는 곳이 많아서, 한번 찍어먹어보자 싶었음. 공부기록 : https://github.com/justdoitho1/studyingTypeScriptTogether/tree/main/okdol
자료구조 예시 const arr = [ { a : 'apple', b : 'apple', c : 'carrot', d : 'donut', }, { a : 'apple', b : 'apple', c : 'apple', d : 'apple', }, { a : 'apple', b : 'banana', c : 'apple', d : 'donut', }, { a : 'apple', b : 'donut', c : 'apple', d : 'donut', }, ] 배열 안 객체에서, value의 중복값을 찾아, 하나만 남겨두고 나머지는 value를 '' 처리하도록
함수 선언문 vs 표현식 함수 선언문 : 괄호 안에 함수를 만드는 것 . 함수 표현식 : 함수를 하나의 ‘값’으로 취급하는 것. JS는 함수도 하나의 값으로 취급할 수 있다. 변수를 하나 만들어서 함수를 할당하는 것. 변수에 함수를 할당하는 점에서 다른 언어의 변수 활용 방식과 많이 다름 다른 변수에 할당도 될까? → YES //함수 표현식!!! let byunsu = function hamsu(){ alert('유명함수') }; let byunsu2 = function(){ alert('무명함수'); } //함수호출 byunsu(); -> 변수를 호출. 괄호 닫아주기 //함수 내용 그대로 출력 byunsu; //function hamsu(){~~~가 출력됨 //비정상함수호출 hamsu(); -> 할당한..
객체 JS는 객체 기반 언어. 객체를 만들어 사용할 수 있다는 말. 전통적인 OOP랑은 다르나, 점점 닮아가는 중. Java와 점점 닮아가고 있다. 객체 : 여러 가지 자료 형태의 데이터를 복합적으로 모아서 정의하는 데이터 타입. 숫자, 배열, String 등등등 객체 분류 내장 객체 : 언어 자체가 제공하는 객체. 브라우저 환경에 관계 없이 일관된 결과 기대할 수 있음. ex. String, Date, RegExp, Math BOM 객체 : 브라우저에 내장된 객체 ? DOM 객체 : 문서의 구조를 읽기 위한 객체 ? 사용자 정의 객체 : 사용자가 직접 정의해 사용하는 객체. 원시형 vs 객체형 원시형 : 오직 하나의 데이터만 담을 수 있다. ex. int i = 0; 객체형 : 여러 가지 형태의 데이터..
자바스크립트 배열 메소드 reduce parameter 누산값(prev) : initialValues가 있다면 초기값은 initialValues, 없으면 배열의 첫 번째 값. 초기값이 없을 경우 인덱스 1에서 루프를 싲가한다. 현재값(cur) : 루프를 돌면서 만나는 배열의 각 요소. 현재 요소를 칭함, 현재 인덱스 원본 배열 return 누적 계산의 결과값. 배열/숫자 등 다양한 타입 반환 가능. 초기값과 return 값의 타입을 맞춰야 한다. 예를 들어 초기값이 정수였으면 반환값도 정수. arr.reduce((prev, cur)=>{ return ; },[initialValues]) 초기값 주는 것을 권장. 빈 배열 && 초기값 없을 경우 TypeError가 발생한다. 특히 배열의 원소가 객체로 이뤄..
1. const, let const와 let은 왜 나왔을까? 바로 이전에 쓰던 var의 한계를 보완하기 위해. 그렇다면 var는 어떤 한계가 있었을까? 1) 아래에서 선언한 것을 위에서 받아들여버림! :hoisting 때문! console.log(a); //undefined var a= 1; console.log(a); //1 코드를 실행하기 전, 선언한 변수/함수를 먼저 실행(인식)하는 것을 hoisting이라고 한다. (hoist : 끌어올리다) 이 hoisting 때문에 위와 같은 현상이 발생한다. 이는 JavaScript의 특징이다. java나 C는 첫 번째 console.log(a); 에서 에러가 났어야 하는데, 호이스팅하면서 변수 선언 및 초기화를 진행해 undefined가 된 것. 2) 전역..
https://www.notion.so/JS-100-1-0465a498481c471488646526a181087f JS 100제 - 1권 A new tool for teams & individuals that blends everyday work apps into one. www.notion.so 문제출처 : 제주코딩베이스 JS 100제 우선 49번 문제까지 해결. 49번까지는 JS의 기본 메소드를 학습할 수 있는 문제들로 구성돼 있다. 학습 목표 JS가 가진 여러 메소드를 활용해 객체와 배열을 자유자재로 다룰 수 있도록 트레이닝하는 것을 목표로 했다. 풀이 방식 1) 풀이가 머릿속으로 바로 떠오르지 않을 때는 먼저 어떤 프로세스로 코딩할지 주석으로 먼저 썼다. 2) 각 프로세스에 맞는 함수가 무엇이 있..

JS 공부를 하면서 제주 코딩 베이스에서 JS 문제 100개를 무료배포하고 있는 것을 발견했다. 쉬운 문제도 있지만 잘 기억나지 않았던 내장함수 등을 다시 짚어보면서 공부할 수 있는 계기가 됐다. 그중 공부했던 부분을 정리. 1. 배열삭제 let nums = [100, 200, 300, 400, 500]; nums.splice(-2, 2); console.log(nums); 마지막 한 개를 삭제할 때는 pop()이 제일 간편하지만, 여러 개를 삭제해야 할 때는 splice를 사용할 수 있다. array.splice(num1, num2); 첫 번째 인자: 삭제를 시작할 인덱스 두 번째 인자 : 삭제할 개수 인덱스 0 은 첫 번째 원소를 말하고, -1은 맨 마지막 원소를 말한다. 마지막에서 두 번째는 -2 ..