Leo.K | To become a cooler Developer

Spring Security 의존성만 추가하면 기본적으로 /login 페이지가 적용된다. id는 user, 비밀번호는 Spring Security가 잘 적용되었다면 스프링 부트를 실행할 때 비밀번호를 준다. 그 번호를 입력하면 된다. This generated password is for development use only. Your security configuration must be updated before running your application in production. 이런식으로 의존성을 추가하면 로그인 페이지를 기본 제공하는데 추후에 커스텀이 가능하고, 각 페이지마다 ROLE_USER 또는 ROLE_ADMIN의 권한을 주어 로그인이 필요한 페이지를 스프링에게 알려주면, 사용자의 권한에..

CH.2 리눅스 시스템의 이해 1. 리눅스와 하드웨어 1-1. 하드웨어의 이해 1-2. 하드웨어의 선택 ※ RAID (Rebundant Array of Independent Disks) 분류 RAID 0 : 스트라이핑 기능(분배 기록) 사용, 빠른 입출력 성능, 고장 대비 능력이 좋지 않음 RAID 1 : 두 개 이상의 디스크를 미러링을 통해 하나의 디스크처럼 사용한다. RAID 2 : ECC(에러 검출 기능) 탑재 RAID 3 : 하나의 디스크를 에러 검출을 위한 패리티 정보 저장용으로 사용하고 나머지 디스크에 데이터를 균등하게 분산 저장한다. RAID 4 : RAID 3과 같은 방식이지만 블록 단위로 분산하여 저장한다. RAID 5 : 하나의 디스크에 패리티 정보를 저장하지 않고 분산 저장 (회전식 ..

[ HTTP ] 목차 모든 것이 HTTP 클라이언트 서버 구조 STATEFULL, STATELESS 비 연결성(CONNECTIONLESS) HTTP 메시지 1. 모든 것이 HTTP(Hyper Text Transfer Protocol) HTTP 메시지에 모든 것을 전송할 수 있다. - HTML, TEXT - Img, 음성, 영상, 파일 - JSON, XML(API) - 거의 모든 형태의 데이터 전송 가능 - 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 (1) HTTP 역사 - HTTP/0.9 1991년 : GET 메서드만 지원, HTTP 헤더X - HTTP/1.0 1996년 : 다른 메서드와, 헤더 추가 - HTTP/1.1 1997년 : 가장 많이 사용, 우리에게 가장 중요한 버전 - RFC20..

CH.1 리눅스의 개요 1. 운영체제의 개요 1-1. 운영체제의 이해 ※ 운영체제(사용자와 하드웨어의 중간 매개체)의 주요 역할 하드웨어 제어, 사용자들 간에 하드웨어 자원을 공유하게 해준다. 스케줄링을 통해 자원을 효율적으로 사용할 수 있도록 해준다. 입출력을 용이하게 한다. 오류를 사전에 방지하거나 복구한다. 편리한 사용자 인터페이스를 제공한다. ※ 운영체제의 유형 다중 교환 (Multi-Switching) : 다수의 작업이 동시 실행. foregroud 프로그램에서만 동작한다. 단일 작업 (Single-Tasking) : 한 번에 하나의 작업만 처리한다. 다중 작업 (Multi-Tasking) : 여러 개의 작업을 동시에 수행한다. 다중 사용자 (Multi-User) : 단일 프로세서에서 여러 사용..

2023-03-24 #3 State state : 기본적으로 데이터를 저장하는 저장소. 바뀔 변수의 값을 저장해 줄 저장소. 이번 강의에서는 바뀐 값을 저장해줄 state 변수에 대해서 알아보았다. 0. 문제점 Container라는 컴포넌트를 만들면서 내부의 버튼에 이벤트를 등록해주고 count를 증가시키는 것은 어렵지 않다. 하지만 문제점은 가장 초기의 상태(counter == 0)를 렌더링 해주고, 그 이후에는 렌더링을 하지 않기 때문에 내부적으로 클릭이벤트가 발생할 때마다 counter의 값은 1씩 증가하는데, 그 값이 보이지 않는다는 점이다. 단순하게 클릭 이벤트가 발생하여 값이 증가할때마다 reRendering하여 값을 갱신해주는 방법이 있다. 1. vanilla JS VS react JS 여기..

[ URI와 웹 브라우저 요청 흐름 ] 목차 URI 웹 브라우저 요청 흐름 1. URI ( Uniform Resource Identifier ) - URI? URL? URN? URI는 로케이터(locater), 이름(name) 또는 둘 다 추가로 분류될 수 있다. URI : 자원(RESOURCE) 자체를 식별하는 방법. URL : 자원의 위치 URN : 자원의 이름 (거의 사용하지 않는다.) UNIFORM : 리소스를 식별하는 통일된 방식 RESOURCE : 자원, URI로 식별할 수 있는 모든 것 (제한 없음) IDENTIFIER : 다른 항목과 구분하는데 필요한 정보 URL - LOCATOR : 리소스가 있는 위치를 지정 URN - NAME : 리소스에 이름을 부여 위치는 변할 수 있지만, 이름은 변..

[ 인터넷 네트워크 ] 목차 인터넷 통신 IP TCP, UDP PORT DNS 1. 인터넷 통신 클라이언트와 서버가 유선적인 케이블로 연결된 것이 아닌 이상 복잡한 인터넷 망을 통해 통신이 진행된다. 어떤 규칙으로 넘어가는가? 수많은 복잡한 노드를 거쳐서 어떻게 목적지로 도착하는가? 에 대한 의문을 갖고 학습해 보자. 2. IP(인터넷 프로토콜) - 역할 각 PC에 고유한 IP 주소가 부여되는데, 지정된 IP주소에 데이터를 전달한다. 패킷이라는 통신 단위로 메시지 전달 - IP 패킷 규칙 정보 출발지 IP, 목적지 IP, 기타..., 전송데이터 클라이언트와 서버사이의 노드끼리 목적지로 가기 위한 노드가 어디 있나? 하면서 소통을 진행하고, 서로 전달하면서 목적지에 도달한다. 이렇게 인터넷 망의 노드끼리 ..

2023.03.22 #2.0 Introduction ReactJS는 웹 페이지를 Interactive하게 만들어 준다. 바닐라 JS와 ReactJS를 직접 코드로 비교하면서 살펴보자. #2.1 Before React 바닐라 JS로 버튼을 클릭하면 클릭한 카운트가 증가되도록 아주 간단한 기능을 구현해보자. 1. html 작성 2. 자바스크립트로 가져오기 3. 이벤트 리스너 등록 4. 데이터 없데이트 5. 업데이트 html 위와 같은 순서로 진행하면 아래와 같은 소스코드와 결과를 확인할 수 있다. Total clicks : 0 Click me 같은 기능을 ReactJS로 구현한 뒤에 장점을 파악해보고자 할 건데, 그 전에 React를 사용하기 위한 js파일을 import해야 한다. 아래의 두 링크를 impo..

오늘은 자료구조 편 문제 풀이 2번째 시간이다. https://www.acmicpc.net/problem/1546 1546번: 평균 첫째 줄에 시험 본 과목의 개수 N이 주어진다. 이 값은 1000보다 작거나 같다. 둘째 줄에 세준이의 현재 성적이 주어진다. 이 값은 100보다 작거나 같은 음이 아닌 정수이고, 적어도 하나의 값은 0보 www.acmicpc.net 문제를 읽어보고 시간 복잡도 -> 분석 -> 텍스트 코딩 -> 실제 코딩 순서로 진행해 보자 1. 시간 복잡도 해당 문제의 시간 제한은 2초이기 때문에 2억 번의 연산 안에 마무리하면 된다. 문제에서 제시되는 데이터의 크기가 1000개 이하이기 때문에 일반적인 연산을 통해서도 시간제한 나오기는 쉽지 않을 것이다. 2. 분석 최고점을 구한 후에 ..

2023-03-17 #7 TO-DO-LIST 우리는 추가와 삭제가 가능한 멋진 todo-list를 위해 기본적인 설정을 화면에 구현했다. 이 내용은 이전 게시글에서 이미 기록한 개념이기 때문에 생략하고 마지막에 전체 소스코드를 보여주려고 한다. 하지만 새로고침을 하거나 이용자가 누구인가와 관계없이 똑같은 todo-list가 나온다면 우리는 todo-list를 그 때마다 계속해서 작성해야할 것이다. 만약 todo-list를 1,000개 작성했는데 단숨에 날라간다면...? 그건 어딘가 부족한 todo-list 일 거다. 그래서 우린 todo-list에 나타낸 텍스트를 저장하는 기능과 로딩하는 기능, 이미 달성한 일은 제거하도록 삭제하는 기능을 추가로 구현해야 한다. 1. todo - list의 배열 생성 1..

2023-03-16 #5.0 Interval setInterval({function}, {time}) 함수를 사용하여 특정 주기마다 함수를 실행할 수 있다. 이때 주기에 해당하는 time argument는 ms(1s === 1000ms)단위라는 점에 유의하자. const clock = document.querySelector("#clock"); function sayHello(){ console.log("hello"); } //interval -> 매 2초 등 간격을 의미 setInterval(sayHello, 5000); #5.1 Timeouts and Dates setTimeout({function}, {time}) 함수를 사용하여 특정 시간이 지난 후에 단 한 번만 함수를 호출할 수 있다. http..

const loginForm = document.querySelector("#login-form"); const loginInput = loginForm.querySelector("input"); const loginButton = loginForm.querySelector("button"); function onLogInBtnClick(){ console.log(loginInput.value); } loginButton.addEventListener("click", onLogInBtnClick) 2023.03.14 #4.0 Input Values 모든 것은 HTML에서 시작되어야 한다. HTML에서 태그를 작성하고 자바스크립트로 기능을 구현한다. 먼저, HTML 코드 작성하기 1. 사용자가 이름을 작성..