스터디

JavaScript의 forEach()와 filter()

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function loadToDos() { const loadedToDos = localStorage.getItem(TODOS_LS); //console.log(loadedToDos); 이건 String if(loadedToDos !== null) // 기존에 등록된 todo가 있으면 { const parsedToDos = JSON.parse(loadedToDos); // JSON 형태로 만들어서 parsedToDos.forEach(function(toDo){ // 각 항목들마다 paintToDo(toDo.text); // text값을 뿌려주기 }); } } function..

JavaScript의 localStorage.getItem()과 setItem()

const toDoForm = document.querySelector(".js-toDoForm"), toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS = 'toDos'; const toDos = []; function saveToDos() { console.log(11111); // 입력된 todo를 String 형태로 TODOS_LS에 담아두기 localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); } function paintToDo(text) { //console.log(text); const li = doc..

JavaScript DOM 이벤트 refefence

developer.mozilla.org/en-US/docs/Web/Events Event reference | MDN DOM Events are sent to notify code of interesting things that have taken place. Each event is represented by an object which is based on the Event interface, and may have additional custom fields and/or functions used to get additional information about wh developer.mozilla.org 영문으로 봐야한다. 한국어로 봤을때 상세 페이지 진입이 안된다.

JavaScript의 addEventListener() 란?

1 2 3 4 5 function handleResize(){ console.log("I have been resized"); } window.addEventListener("resize", handleResize); cs window 객체 안에 내장되어 있는 addEventListener()라는 함수에 대해 알아보자. 첫 번째 인자는 이벤트 명이다. 두 번째 인자는 콜백 함수이다. 첫 번째 인자의 이벤트가 발생하면 실행된다. 따라서 위의 코드는 윈도우 창의 크기를 변경할때마다 handleResize 함수를 실행하는 것이다. addEventListener()함수는 말그대로 이벤트를 받기를 기다리고 있는 중이다. 어떠한 이벤트인지 개발자가 첫 번째 인자에 알려줘야 한다. 이때 중요한것은 두번째 인자인 함수..

let, const, var

const 변하지 않는 변수이다. (constant라는 뜻) 상수를 의미하며 안정적이다. const변수의 값을 변경하려고 시도할 경우 Uncaught TypeError: Assignment to constant variable. 에러가 뜨는 것을 확인할 수 있다. let 변수의 값 변경이 가능하다. var variable이라는 뜻 변수의 값 변경이 가능하다.

게이트웨이

게이트웨이란? - 현재 사용자가 위치한 네트워크에서 다른 네트워크로 이동하기 위해 반드시 거쳐야 하는 거점을 의미. - 서로 다른 네트워크를 연결해준다.

Spring vs Spring Boot

[Spring] - 너무 긴 dependency.. 하나하나 다 걸어줘야한다. - configuration 도 어떤 처리를 해줘야할지 기본설정이 매우 많다. [Spring Boot] - dependency 가 짧아지고 버전 관리도 권장 버전으로 자동 설정된다. - application.properties 만 적용을 해주면 configuration 처리를 일일이 해줄 필요가 없다. (요즘은 application.yml 파일을 더 많이 쓴다. 중복제거도 되고 뎁스로 표현할 수 있음. 인간이 읽기 좋음) - thymeleaf도 매우 간편해짐. Prefix나 suffix설정도 이미 내장되어 있다. - 내장서버가 있기 때문에 서버 구동 시간이 절반 가까이 단축 된다. ㄴ 내장 서블릿 컨테이너 덕분에 jar 파일로..

웹 서버 vs WAS

6대의 WAS를 사용하고 있다? 컴퓨터? 서버? 웹서버? 왜 WAS라고 하지? 웹서버 - 인터넷을 기반으로 한, 정보를 공유, 검색할 수 있게 하는 서비스 - URL(주소), HTTP(통신 규칙), HTML(내용) 서버 - 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템 웹서버 - 인터넷을 기반으로 클라이언트에게 웹 서비스를 제공하는 컴퓨터 ---------------- 클라이언트 : 웹서버에게 주소(URL)을 가지고 통신규칙(HTTP)에 맞게 요청하면, 알맞은 내용(HTML)을 응답 받음 서버 : 클라이언트의 요청을 기다리고, 웹 요청(HTTP)에 대한 데이터를 만들어서 응답. 이때 데이터는 웹에서 처리할 수 있는 HTML, CSS, 이미지 등 정적인 데이터로 한정 ex. 아파치 ..

정보은닉/접근제어자/getter/setter/java

○ 정보은닉 - 정보은닉 : private 접근제어자는 클래스 내부에서만 접근가능하므로 외부에서는 getter setter를 통해 접근 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 import java.util.Scanner; class Circle { private int r; // getter / setter 구성 int getR() { return r; } void setR(int r) { this.r = r; } void write(double a) { System.out.println("반지름 : " + r); System.out.println("넓..

배열의 복사/데이터 복사/깊은 복사/java

○ 배열의 복사 - 데이터 복사(깊은 복사) : 실제 요소로 들어있는 값에 대한 복사로 원본을 수정해도 복사본에 영향을 미치지 않는다. public class ArrCopy { public static void main(String[] args) { int[] nums = {10, 20, 30, 40, 50}; //-- 배열 원본 int[] copys2 = copyArray(nums); //-- 깊은 의미의 배열 복사 수행 // (사용자 정의 메소드 호출) int[] copys3 = (int[])nums.clone(); //-- 깊은 의미의 배열 복사 수행 // (자바 제공 → clone() 메소드) // 배열을 반환하는게 아니라 객체를 반환한다. // 원본 배열 요소의 수정 발생~!!! nums[1] ..