부트스트랩이 뭐지? 프레임워크 현실에서 뭔가를 만들기 전에 세우는 틀, 소프트웨어 개발에서의 뼈대 역할을 하는 것 부트스트랩 반응형 최신 웹사이트를 빠르게 만들 수 있도록 도와주는 CSS 프레임워크 앱에 넣어 사용할 수 있는 다양한 컴포넌트들을 모아둔 컴포넌트 모음과 웹 사이트 레이아웃을 보조하는 그리드 시스템으로 구성되어 있다. Bootstrap Docs 부트스트랩의 구성 요소들은 세기 힘들 정도로 많기 때문에 작업을 하거나 궁금할 때마다 Bootstrap docs를 보는 것을 추천한다. https://getbootstrap.com/docs/5.3/getting-started/introduction/ Get started with Bootstrap Bootstrap is a powerful, featu..

비교 연산자 https://ko.javascript.info/comparison 비교 연산자 ko.javascript.info 일반적으로 JS에서는 이중 등호 연산자(==)와 부등 연산자(!=) 보다 삼중 등호 연산자(===) 및 불일치 연산자(!==)를 권장한다. 작업하고 있는 값의 자료형에 좀 더 신경 쓸 수 있기 때문이다. 텍스트 비교에 대한 추가 정보 숫자가 아닌 일반 문자열도 >, 'aa' // true 'a' > '..

Flexbox가 대체 뭐야? 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 쓰이는 일련의 속성이자 도구 일반적으로 컨테이너를 만들고 그 안에서 공간을 배분할 때 사용한다. 이 때, 창의 크기가 달라짐에 따라 유동성 있게 공간 배분의 법칙을 적용하는 것이 Flexbox이다. Flexbox를 이용하면 하나의 컨테이너 안에서 다양한 요소를 보기 좋게 배열하면서 레이아웃을 유연하게 조정할 수 있다. 컨테이너 안의 상자와 요소가 유연하게 변화하는 것이다. css 내에서 특정 컨테이너에 flexbox 속성을 부여하려면 다음과 같이 display 속성에 flex 값을 주면 된다. The Flex Model flexbox에는 다음과 같이 두 개의 축이 존재한다. 주축(main axis)의 기본 방향은 왼쪽에서 오른쪽..

화살표 함수 function을 선언하고 작성하는 방법 대신 함수를 간단히 작성하는 방법이다. - 익명 함수라고도 불림 const summarizeUser = (userName, userAge, userHobby) => { return userName, userAge, userHobby; }; console.log(summarizeUser(name, age, hobbies)); 또한 아래처럼 중괄호와 return 구문을 생략할 수도 있다. const add = (a, b) => a + b; // 들어오는 인수가 하나라면 괄호를 생략해도 무방하다. const addOne = a => a + 1; // 들어오는 인수가 없다면 괄호를 반드시 명시해주어야 한다. const addSomething = () => 1..

불투명도와 알파 채널 알파 채널 RGBA: RGB 채널에 A(알파 채널, 색상이 비치는 정도; 투명도) 채널을 추가한 것이다. 범위는 0(완전 투명) ~ 1(완전 불투명)이며, rgba(0, 209, 112, 0.5) 형식으로 CSS 문서에 쓰인다. 불투명도 opacity라는 불투명도 속성을 따로 지정할 수 있다. 알파 채널과 마찬가지로 0~1의 범위를 가지며, 요소가 중첩 되어있어도 지정한 범위에 모두 적용된다. 위치 속성 MDN CSS position https://developer.mozilla.org/ko/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDN CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다..

코드를 효율적으로 작성하기 복사 붙여넣기나 수동 작업을 많이 하지 않고 코드를 작성할 수 있는, 사용할 수 있는 많은 도구를 이용하는 것. IDE Look & Feel을 구성하고, 자주 사용하는 단축키를 숙지하며, IDE에 내장된 자동 완성과 힌트, 확장 프로그램을 세팅함으로써 자신에게 최적의 PC 환경을 구축할 수 있다. 문제 해결하기 많은 강의를 들었거나 오랜 기간 개발자로서 근무했어도 문제를 해결하려는데 기억이 나지 않는 상황이나 어려움에 직면하기 마련이다. 개발자는 모든 명령어를 외우는 것이 목표가 될 수 없고, 어차피 다 외울 수도 없다. 일반적인 언어의 원리와 코드 작성에 관해 어떻게 생각해야 하는지 학습해야 한다. 구글링은 필수이며, MDN에 좋은 문서가 많으므로 적극 활용한다. 코드 디버깅..

강의: NodeJS 완벽 가이드: MVC, REST APIs, GraphQL, Deno 플랫폼: Udemy Node.js란 무엇인가? JavaScript 런타임이다. js는 브라우저에서 많이 사용하는 프로그래밍 언어: 도메인 편집이나, 브라우저에서 로딩된 페이지를 편집하거나, 팝업, 모달(modal)과 같은 효과를 불러오는데 사용한다. 브라우저에서 실행되므로 로딩 후에도 페이지와 상호작용이 가능하게 해준다. 브라우저에서 인터랙티브 사용자 인터페이스를 구현하는데 필수적인 요소이다. Node.js는 다른 버전의 js라고 할 수 있다. - js 기반이나 몇몇 기능을 추가 및 삭제함 js 코드를 서버에서 실행할 수 있도록 해준다. - 이론적으로 서버 뿐 아니라 어떤 기기에서도 실행 가능함 인터넷에서 작동하는 컴..

박스 모델 가로와 세로 CSS의 모든 것이 박스 모델 안에 들어가며, 박스마다 다른 특성을 가진다. 그 중에서 콘텐츠 박스는 단락의 텍스트와 같은 실질적 정보, 핵심 정보를 담는 곳이다. width, height 속성으로 박스 모델 내 콘텐츠가 들어갈 영역의 너비, 높이를 지정한다. 테두리(border)와 모깎기 요소를 둘러싸고 있는 박스 모델의 테두리이다. 테두리의 속성, 스타일, 상하좌우 너비, 곡률 등 여러 가지를 설정할 수 있다. 웹 페이지를 보기 좋게 만드는데 중요한 역할을 하고, 각 요소를 구별하는데 도움이 되며, 눈에 띄도록 만들어준다. border-width: 테두리 두께 border-color: 테두리 색상 border-style: 테두리 스타일(실선, 점선, 절취선 등) border-r..

전체 요소 선택자 크기가 큰 문서에는 그닥 좋은 선택지는 아니다. - 강사도 잘 안써봄 * { color: black; } ID 선택자 html 문서에서 태그 내에 주어진 id 속성 값에 따른 css 스타일 부여 방식이다. 문서 내에서 각 id 값은 하나만 있어야 한다. - 고유한 식별자여야 하기 때문에 중복되면 안 된다. # 기호를 붙여 연결한다. #id { background-color: cyan; } 클래스 선택자 id와 비슷한 개념으로 마크업에 클래스를 추가해 css와 연결한다. 클래스는 여러 요소들을 묶어 그룹을 만들어 동일한 스타일을 적용할 수 있다. - 고유한 식별자가 아님 적용하고 싶은 요소 태그에 class 값을 부여하고, css 내에서는 . 기호를 붙여 연결한다. .class { bac..

웹 사이트에 JavaScript 추가하기 html 내에 .js 파일을 script 태그를 통해 가져올 수 있다. 보통 head에 지정을 해주나, html 문서가 모두 렌더링 된 다음 js 코드를 작동시키고 싶다면 body의 맨 끝에 추가해준다. 변수와 상수 변수는 let, 상수는 const로 선언 - 상수는 값을 변경할 수 없으며, 가급적 자주 사용하는 것이 좋다. 상수는 값 변경할 수 없고 용도가 제한적이기 때문에 해당 코드의 의도를 명확히 보여줄 수 있다. 코드 수명 주기 전반에 걸쳐 절대 변하지 않는 값이 있을 때 이를 명확히 함으로써, 다른 개발자가 코드를 읽을 때 이 데이터는 절대 변하지 않는다는 것을 바로 알려줄 수 있다. → 코드의 명확한 이해를 돕는다. 변수의 이름: 변수 내에 어떤 종류의..