728x90 전체 글304 인터랙티브 자바스크립트 : 이벤트 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 ex) 버튼 클릭, 스크롤, 키보드 입력, ...이벤트 핸들링 : 자바스크립트를 통해 이벤트를 다루는 일이벤트 핸들러 : 이벤트가 발생했을 때 일어나야하는 구체적인 동작들을 표현한 코드. 이벤트 리스너(Event Listener)라고도 부른다. 이벤트가 발생했을 때 어떤 특별한 동작을 하도록 이벤트를 다루는 것을 이벤트 핸들링이라고 부른다구체적인 동작들을 코드로 표현한 함수 부분을 이벤트 핸들러라고 부른다 * 이벤트 핸들링은 js 코드 뿐만아니라 html 코드에도 작성할 수 있긴 하지만 코드의 유지보수를 위해서 js에 작성하는 편 이벤트 핸들러 등록하기 onclick 프로퍼티를 사용하.. 2024. 6. 8. 인터랙티브 자바스크립트 : 브라우저와 자바스크립트 자바스크립트는 원래 브라우저를 다루기 위해 등장한 언어 윈도우 객체는 브라우저의 창을 대변한다//window 객체 출력 console.log(window);console.log(window.innerWidth); // 탭 내부의 너비 console.log(window.innerHeigth);// 탭 내부의 높이 window.open() → 새로운 창이 열림window.close() → 새로운 창을 닫음 윈도우 객체는 자바스크립트의 다른 모든 객체를 포함하고 있다→ 따라서 윈도우 객체를 전역 개체라고도 부른다 DOM 문서 객체 모델 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록.. 2024. 6. 8. 인터랙티브 자바스크립트 : 태그 선택하기 웹 서비스와 JavaScript JavaScript웹 페이지를 다양하게 동작하도록 만들어준다 id로 태그 선택하기 document 객체의 getElementById 라는 메소드를 사용해서 id로 태그를 선택한다 // id 태그 선택하기const myTag= document.getElementById('myNumber');//접근하고자하는 id 값을 문자열로 전달한다console.log(myTag); → id 속성을 택해서 어떤 요소를 가져오겠다는 의미 ☑️실행결과myNumber를 id로 가진 태그가 출력된다 💡존재하지 않은 id를 파라미터에 넣으면 undefined가 아니리 null 값이 리턴된다 class로 태그 선택하기 document 객체의 getElementsByC.. 2024. 6. 8. 컴퓨터 네트워크 과제 echo software router 구현 echo software router 구현 클라이언트는 0~4의 범위를 가지는 난수가 들어가는 응용 계층 헤더 필드 key를 패킷에 담아 라우터에게 보낸다. 이 때, 터미널에 해당 key 값을 출력해준다. 라우터는 해당 헤더 필드 값을 읽고, 자신의 포워딩 테이블을 참고하여, 해당하는 output port 번호를 port 필드에 넣은 뒤, 클라이언트에 되돌려준다. - 서버에 구현해야하는 포워딩 테이블은 아래의 형태를 가지고 있다. keyport0413223140 클라이언트는 패킷을 수신하면 port 필드 값을 출력해준다. 클라이언트는 총 5개의 패킷을 연달아서 보낸다. 즉, 답장도 5개가 돌아오고, 출력되는 port 값도 5개가 된다. key값을 난수로 생성하므로 그 때마다 key와 port 값은 .. 2024. 6. 5. 컴퓨터 네트워크 과제 rdt2.2 over UDP 구현 과제 rdt2.2 over UDP 구현 전송계층 프로토콜은 UDP를 사용하되 응용 프로그램 상에서 rdt2.2 프로토콜을 구현 client.c는 총 3개의 패킷을 보내며 각각 다음의 상황을 재현 1. 정상적인 패킷2. [Our-of-Order] 순서가 뒤바뀐 패킷 (임의로 순서를 바꿔서 패킷을 보낸다.)3. [Bit error] 비트에러가 발생한 패킷 (임의로 데이터를 변조하여 비트에러를 발생시켜서 패킷을 보낸다.) rdt2.2를 기반으로 작동하는 서버 프로그램은 이 세가지 상황 모두에 대해 잘 대처할 수 있어야 합니다. Out of-order와 bit error의 경우는 ack을 통해 재전송을 요청하고, client를 이를 통해 패킷을 재전송 ⚫ 이 때 반드시 탐지한 오류가 무엇인지, seq 번호는 .. 2024. 6. 5. 컴퓨터 네트워크 과제 UDP Echo server 구현 클라이언트가 보낸 메시지를 그대로 수신해주는 에코 프로그램을 구현 클라이언트가 Hello world!, This is me! 등의 문자열을 입력하면, 이를 서버가 수신하여 화면에 출력한 후, 다시 이를 그대로 클라이언트로 회신하여 클라이언트가 이를 다시 화면에 출력해주는 프로그램을 구현한다 구현코드 client.c #include #include #include #include #include #include int readline ( int fd, char *ptr, int maxlen ){ int n, rc; char c; for(n=1; n 0 ){ /* Put sendto() here */ sendto(sock, &SendBuffer, sizeof(SendBuf.. 2024. 6. 5. 5주차 스터디 자바스크립트 웹 개발 기본기 (4) async/await을 활용한 세련된 비동기 코드 [코드잇 부스트 백엔드 스터디 ] 4. async/await을 활용한 세련된 비동기 코드 async/await이란? promise 객체가 등장함으로써 콜백 헬을 해결할 수 있게됨→ 이후에도 발전되어 async/await을 사용하게 됨 async funtion fetchAndPrint(){ const response = await fetch('https://jsonplaceholder.typicode.com/users'); const result = await response.text(); console.log(result);} fetchAndPrint(); asynchronous 의 줄임말을 사용 (비동기를 의미한다)await : 뒤에 코드를 실행하고 코드가 리턴하는 promise 객체를 기다린다fulfilled 상태가 되면.. 2024. 6. 4. 5주차 스터디 자바스크립트 웹 개발 기본기 (3) 비동기 실행과 Promise 객체 [코드잇 부스트 백엔드 스터디 ] 3. 비동기 실행과 Promise 객체 fetch 함수와 비동기 실행 비동기 실행한번 시작된 작업이 완료되기 전에 바로 다음코드로 실행이 넘어가고 나중에 콜백이 실행됨으로써 작업이 마무리 된다 console.log('Start!');fetch('https://jsonplaceholder.typicode.com/users') .then((response)=>response.text()) .then((result)=>{console.log(result);});console.log('End'); fetch 함수에 비동기 실행이 되는 부분이 있다 fecth 함수는 리퀘스트를 보내고 어떤 객체를 리턴한다그 객체의 then 메소드로 콜백을 등록한다→ 콜백은 서버로부터 리스폰스를 받았을 때 실행된다 .. 2024. 6. 4. 5주차 스터디 자바스크립트 웹 개발 기본기 (2) Web API [코드잇 부스트 백엔드 스터디 ] 2. Web API 배우기 API란 Application Programming Interface의 약자로, 원래는 '개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 등'을 의미 웹 개발에서는 어느 URL로 어떤 리퀘스트를 보냈을 때, 무슨 처리가 수행되고 어떤 리스폰스가 오는지에 관해 미리 정해진 규격을 Web API 💡Web API를 설계한다는 것은 서비스에서 사용될 모든 URL들을 나열하고, 각각의 URL에 관한 예상 리퀘스트와 리스폰스의 내용을 정리한다는 뜻 * REST API는 오늘날 많은 웹 개발자들이 Web API 설계를 할 때, 준수하기 위해 노력하는 일종의 가이드라인 JSON이란 JSON(JavaScript Object Notation) • 어떤 정보를 교.. 2024. 6. 4. 5주차 스터디 자바스크립트 웹 개발 기본기 (1) 웹 기초 [코드잇 부스트 백엔드 스터디 ] 1. 웹 기초 다지기 📌 웹 브라우저와 서버가 통신하는데 필요한 자바스크립트 코드를 어떻게 작성하는지 웹 개론JSONAjaxpromise fetchasync/await fetch 함수 사용해보기 웹 브라우저와 서버가 통신하는 방법 fetch('https://www.google.com') .then((response)=> response.text()) .then((result)=>{console.log(result)}); * html은 웹페이지의 뼈대를 구성하기 위해 사용하는 마크업 언어 💡웹 브라우저가 서버로부터 받는 것은 코드 덩어리웹브라우저가 그것을 해석해서 사용자에게 화면을 보여준다 이런 오류 발생 fetch 함수 살펴보기 ☑️용어웹 브라우저가 서버로 보내는 요청 Requ.. 2024. 6. 4. 5주차 스터디 자바스크립트 객체 지향 기본기 (2) [코드잇 부스트 백엔드 스터디 ] 2. 객체 지향 프로그래밍의 4개의 기둥 📌 객체 지향 프로그래밍의 핵심 개념 4가지추상화 캡슐화 상속 다형성 추상화 어떤 구체적인 존재를 원하는 방향으로 간략화해서 나타내는 것→ 따라서 클래스를 설계하는 것도 모두 추상화 과정에 해당! 💡클래스의 이름, 프로퍼티와 메소드의 이름을 잘 짓는 것 중요 추상화 직접 해보기 실습각 프로퍼티와 메소드 이름 위에 그 의미를 나타내는 간단한 주석을 직접 작성 class BankAccount { constructor(name, money) { // 소유주 this.holder = name; // 잔액 this.balance = money; } // 입금하기 deposit(money) { this.balance += m.. 2024. 6. 4. 5주차 스터디 자바스크립트 객체 지향 기본기 (1) [코드잇 부스트 백엔드 스터디 ] 1. 객체와 클래스 객체 지향 프로그래밍이란? 객체 간의 상호작용을 중심으로 하는 프로그래밍 객체• 객체의 상태를 나타내는 변수• 객체의 행동을 나타내는 함수 ex) 유저 - 변수: 유저의 아이디, 유저의 생일 / 함수: 좋아요, 상품 구매 💡객체 지향 프로그래밍→ 프로퍼티와 메소드로 이루어진 각 객체들의 상호 작용을 중심으로 코드를 작성하는 것 절차 지향 프로그래밍→ 변수와 함수를 가지고 작업의 순서에 맞게 코드를 작성하는 것 객체 만들기 1-1 : Object-Literal Object Literal• 객체를 나타내는 문자열 const user= { email : 'chris123@google.com', //프로퍼티 birthdate: '1992-03-21', buy(i.. 2024. 6. 4. 4주차 스터디 모던 자바스크립트 (4) [코드잇 부스트 백엔드 스터디 ] 5. 자바스크립트의 유용한 내부 기능배열 메소드 ☑️forEach 메소드를 호출할 때 아규먼트로 콜백함수를 작성해주게 되면,이 콜백 함수의 첫 번째 파라미터로 배열의 요소를 순서대로 하나씩 전달하면서 매번 이 함수를 실행하는 원리로 동작// forEach와 mapconst members = ['영훈', '윤수', '동욱', '태호'];for (let member of members) { console.log(`${member}님이 입장하셨습니다.`);}members.forEach(function (member, index, arr) { // 콜백함수 console.log(`${member}님이 입장하셨습니다.`);});• 두번째 파라미터 index, i 는 요소의 인덱스를 관리할 수 있다• .. 2024. 5. 25. 4주차 스터디 모던 자바스크립트 (3) [코드잇 부스트 백엔드 스터디 ] 4. 자바스크립트의 문법과 표현 문장과 표현식 문장 (statements)• 어떤 동작이 일어나도록 작성된 최소한의 코드 덩어리 표현식 (expressions)• 표현식은 결과적으로 하나의 값이 되는 모든 코드→ 길이와는 상관없이 결과적으로 하나의 값이 되는 코드를 모두 표현식이라고 할 수가 있다.표현식이면서 문장, 문장이면서 표현식 // 할당 연산자는 값을 할당하는 동작도 하지만, 할당한 값을 그대로 가지는 표현식이다.title = 'JavaScript'; // JavaScript// 함수 호출은 함수를 실행하는 동작도 하지만, 실행한 함수의 리턴 값을 가지는 표현식이다.sayHi(); // sayHi 함수의 리턴 값// console.log 메소드는 콘솔에 아규먼트를 출력하는 동작도 하지만, und.. 2024. 5. 25. 4주차 스터디 모던 자바스크립트 (2) [코드잇 부스트 백엔드 스터디 ] 3. 함수 다루기함수를 만드는 방법 함수 선언을 변수에 할당, 함수 선언을 값 처럼 사용하는 방식 → 함수 표현식 // 함수를 만드는 방법const myBtn = document. querySelector('#myBtn');myBtn.addEventListener('click', function () {console. log('button is.clicked!');}); 함수 선언과 함수 표현식 차이💡일반적으로 변수에 할당해서 함수를 만드는 함수 표현식은 변수의 특성상 선언 이전에 접근 할 수 없음 • 함수 선언은 변수의 var 키워드처럼 함수 스코프를 갖는다→ 함수 안에 선언된 함수는 함수 밖에서 호출할 수 없지만 , 다른 코드 블록에서 선언하면 전역적으로 호출 가능 • 함수 표현식의 경우 할당된 .. 2024. 5. 25. 4주차 스터디 모던 자바스크립트 (1) [코드잇 부스트 백엔드 스터디 ] 1. 모던 자바스크립트 이해하기 모던 자바스크립트란? ECMAScript• 자바스크립트라는 프로그래밍 언어의 표준 (자바스크립트 표준 명세서)• ecma 국제 표준화 기구에서 관리 (ECMA-262로 관리됨)• 1997년에 처음 나옴 ES년도가 정식명💡ES6이 자바스크립의 발전에 굉장히 큰 영향을 준 버전 →ES6+라고도 부름 Modern JavaScript현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트 ECMAScript 더 알아보기 • JavaScript는 프로그래밍 언어이고, ECMAScript는 프로그래밍 언어의 표준• CMAScript는 JavaScript가 갖추어야 할 내용을 정리해둔 '설명서• JavaScript는 ECMAScript를 준수해서 만들어낸 .. 2024. 5. 25. 3주차 컴퓨터 구조 이해하기 [코드잇 부스트 백엔드 스터디 ] 1. 컴퓨터의 언어, 이진법 이진법 컴퓨터는 통신을 하기 위해 0과 1만을 사용하는 이진법을 언어로 사용0123456789 → 10진법01 → 2진법 비트와 바이트 비트• 데이터의 최소 단위• 이진수로 총 몇 자리인지를 나타낸다 바이트• 1바이트 = 8비트• 작은 단위인 bit는 소문자 b로, 보다 큰 단위인 Byte는 대문자 B로 적는다 2. 논리 연산 논리연산 0과 1의 전달 방법 • 컴퓨터가 0과 1이라는 언어를 서로 주고 받을 수 있는 비밀→ 반도체 반도체• 상황에 따라 전기가 통하기도 하고 통하지 않기도 하는 특수한 물질두 부품사이에 전기가 흐르면 1, 흐르지 않으면 0 논리 연산• 0 거짓, off• 1 참, on• AND, OR , NOR두 가지 작동 방식두 신호가 모두 O.. 2024. 5. 20. 3주차 소프트웨어 이해하기 [코드잇 부스트 백엔드 스터디] 1. 컴퍼일러와 인터프리터 다양한 애플리케이션 애플리케이션• 사용자(End user)가 직접 사용하는 프로그램• 범위가 넓다 (핸드폰, 컴퓨터 뿐만 아니라 여러 기계들에도 탑재) 애플리케이션을 만드는 프로그램 애플리케이션들은 어떤 과정을 통해 만들어지는 걸까?• 프로그래밍 언어로 코딩을 해서 만듦 → 컴파일러와 인터프리터가 이 프로그래밍 코드를 실행할 수 있는 애플리케이션으로 바꿔줌 프로그래밍 언어의 번역기, 컴파일러 사람이 작성하기 쉬운 고수준 프로그래밍 언어 → High-levelHigh-level 언어를 컴퓨터가 실행할 수 있는 기계어(machine code)로 번역해야 함 💡컴파일러• 한 언어의 코드를 다른 언어의 코드로 바꿔 주는 것• 프로그래밍 언어의 번역기 컴파일러 단점• .. 2024. 5. 20. [데이터베이스] SQLD 1과목 : 데이터 모델과 SQL 개념정리 데이터 모델과 SQL 1. 정규화 정규화 • 하나의 엔터티에 많은 속성을 넣음→ 엔터티를 조회할 때 마다 많은 양의 데이터가 조회 됨• 최소한의 데이터만을 하나의 엔터티에 넣는식으로 데이터를 분해하는 과정을 정규화라고 함• 데이터의 중복을 제거하여 용량을 최소화시킴• 데이터 일관성, 최대한 데이터 유연성을 위한 과정• 데이터의 이상현상을 줄이기 위한 데이터베이스 설계 기법• 논리 데이터 모델링 수행 시점에서 고려됨 이상현상정규화를 하지 않아 발생하는 현상삽입이상갱신이상삭제이상정규화단계 (중요) 1) 제 1정규화• 모든 속성은 반드시 하나의 값을 가져야 함• 테이블 컬럼이 원자성을 갖도록 테이블을 분해하는 단계2) 제 2 정규화• 제 1정규화를 진행한 테이블에 대해 완전 함수 종속을 만들도록 테이블을 분.. 2024. 5. 13. [데이터베이스] SQLD 1과목 : 데이터 모델의 이해 개념정리 SQLD 시험을 준비하면서 1과목 개념정리 한 것을 토대로 작성함 데이터 모델의 이해 1. 데이터 모델의 이해 데이터 모델링의 개념 • 정보시스템을 구축하기 위한 데이터 관점의 업무 분석 기법• 데이터베이스를 구축하기 위한 분석 및 설계의 과정• 현실세계의 데이터를 약속된 표기법으로 표현하는 과정• 현실세계의 비즈니스 프로세스와 데이터 요구 사항을 추상적이고 구조화된 형태로 표현하는 과정• 데이터베이스의 구조와 관계를 정의하며, 이를 통해 데이터의 저장, 조작, 관리 방법을 명확하게 정의 데이터 모델링 특징 (중요) ☑️단순화 ▪︎현실을 단순화하여 핵심 요소에 집중하고 불필요한 세부 사항 제거▪︎단순화를 통해 복잡한 현실 세계를 이해하고 표현하기 쉬워짐 ☑️ 추상화 ▪︎현실세계를 일정한 형식에 .. 2024. 5. 13. 2주차 프로그래밍과 데이터 in JavaScript [코드잇 부스트 백엔드 스터디] 1. 객체 객체와 프로퍼티 객체• key-value 한 쌍을 객체의 속성, property 라고 한다property name (string)• 문자열로 이루어짐• 주의 사항→ 첫 번째 글자는 반드시 문자, 밑줄, 달러 기호중 하나로 시작할 것→ 띄어쓰기 금지→ 하이픈 금지property value• 모든 자료형 값을 사용할 수 있다 (문자열, 숫자, 불린, null 등 )• 객체 안에 객체를 넣을 수도 있다객체와 프로퍼티 익히기객체의 프로퍼티 네임의 자료형은 문자열이지만, 반드시 따옴표로 감싸줘야 할 필요는 없다.다만첫번째 글자가 문자, 밑줄, 달러 기호 중 하나로 시작하지 않는 경우띄어쓰기를 해야하거나그리고 하이픈을 써야 하는 경우에는따옴표로 감싸주어야 한다. 객체 다루기 💡객체도 결국 값이기 .. 2024. 5. 12. 이전 1 ··· 9 10 11 12 13 14 15 다음 728x90
