728x90 분류 전체보기244 인터랙티브 자바스크립트 : 이벤트 이벤트와 이벤트 핸들링, 그리고 이벤트 핸들러이벤트 : 웹 페이지에서 발생하는 대부분의 일(사건)들 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. 이전 1 ··· 17 18 19 20 21 22 23 ··· 28 다음 728x90
