본문 바로가기

전체 글111

[새싹X코딩온] 풀스택 4주차 회고록 - 2 | Node.js, javascript 심화 Node.js Node.js의 특징 스택 ( Stack ) 한쪽 끝에서만 자료를 넣고 빼는 작업이 이루어지는 자료구조 LIFO ( 후입선출 ) 구조 top : 스택의 가장 윗 부분 pop : 가장 최근에 삽입된 자료 삭제 push : top에 새로운 자료 추가 stack underflow : 스택이 비어있는데 pop을 시도했을 때 발생 stack overflow : 스택이 꽉 차있는데 push를 시도했을 때 발생 콜 스택 ( Call Stack) function first() { second(); console.log(1); return; } function second() { console.log(2); return; } first(); 위의 코드가 실행되면 어떤 값이 출력될까? 콜스택은 LIFO ( .. 2023. 8. 13.
[새싹X코딩온] 풀스택 4주차 회고록 - 1 | 클라이언트와 서버 서버 ( Back-End ) 클라이언트에게 네트워크 통해 서비스를 제공하는 컴퓨터 시스템 DB에서 필요한 정보를 가공하여 클라이언트에게 전달해주는 추상적 존재 클라이언트 ( Front-End ) 웹 브라우저로부터 입력(정보요청)을 받아 서버와 통신하고 사용자에게 결과를 전달하는 시스템 우리같은 사용자나 컴퓨터, 스마트 기기가 될 수도 있다. 클라이언트와 서버의 통신 클라이언트가 웹 브라우저를 통해 원하는 서비스를 요청하면 서버에서는 해당 요청사항에 맞는 결과를 응답한다 이때 요청과 응답이 Http 요청과 Http 응답이다. Http ( Hyper Text Transfer Protocol ) 브라우저와 서버가 통신할 수 있도록 만들어주는 여러 프로토콜 가운데 한 종류로 웹 브라우저와 웹 서버 사이에 HTM.. 2023. 8. 12.
[새싹X코딩온] 풀스택 3주차 회고록 - 2 | jQuery jQuery js 기반으로 간편하게 사용할 수 있게 단순화 시킨 오픈소스 기반의 js 라이브러리 라이브러리와 프레임워크 비교 라이브러리 자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음 ex) Python - pandas, NumPy, js - Chart.js, Moment.js ... 프레임워크 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의 컴포넌트들은 재사용이 가능 ex) Spring, Vue.js, React, Flask .... uncompressed, minified : 일반 패키지 uncompressed : 압축되어 있지 않은 공백과 들여쓰기가 되어 있는 형태 minified .. 2023. 8. 3.
[새싹X코딩온] 풀스택 3주차 회고록 - 1 | Bootstrap Grid System 반응형 웹 ( Responsive Web ) 반응형 동일한 페이지를 보여주나, 디바이스 크기에 따라 레이아웃을 다르게 보여준다 모바일 웹 접속 경우가 많으므로 반응형은 매우 중요한 기술 적응형 사용자가 모바일 환경인지, PC 인지에 따라 다른 페이지를 보여준다 % 단위 em 단위 font-size 속성 값에 비례해서 결정되는 상대단위 중첩이 적용됨 rem 최상위 요소(html) 크기에 비례 중첩의 영향을 받지 않음 부트스트랩 CDN ( Content Delivery Network ) 사용자에게 콘텐츠를 배포하는데 도움을 주는 네트워크 bootstrap cdn css, js 코드가 미리 정의 되어 있음 적용방법 적용 전, 후 차이점 ( h1 태그 사용 ) 부트스트랩을 적용하게 되면 이미 부트스트랩에서 설정.. 2023. 8. 1.
[새싹X코딩온] 풀스택 2주차 회고록 - 2 | javascript 과제 js 실습 계산기 dom_ex.html 값1: 값2: 연산자: 결과: 계산하기 초기화 dom_ex.js const inputs = document.querySelectorAll('input'); const val1 = document.getElementById('value1'); const val2 = document.getElementById('value2'); const calc = document.getElementById('calc'); const result = document.getElementById('result'); const sub = document.getElementById('sub'); sub.addEventListener('click', function () { if (calc... 2023. 7. 30.
[새싹X코딩온] 풀스택 2주차 회고록 - 1 | CSS, javascript CSS 복잡한 속성 - Display inline 내용물 만큼 공간 할당 width, height, padding, margin 사용 불가 줄바꿈 없이 옆에 바로 배치된다. block div, p, ul, ol 태그와 같이 한 줄을 다 차지 inline 요소와 달리 width, height, padding, margin 사용 가능 inline-block block과 inline 요소의 장점을 가짐 none 요소를 화면에 표시하지 않음 요소가 차지하는 공간도 사라진다. visibillity:hidden 라는 속성도 있지만 visibillity는 요소가 차지하는 공간이 남는다. flex 부모 요소에 flex를 선언하면, 자식 요소들의 레이아웃을 변경시킴. flexbox 기본용어 주축 (main axis) :.. 2023. 7. 25.

티스토리툴바