You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[CSS] 📚 미디어 쿼리 - 반응형 레이아웃](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbmZk3%2Fbtrhh7PT8vl%2FfGmW7ftyZUT37UvhkFJ3T0%2Fimg.jpg)
[CSS] 📚 미디어 쿼리 - 반응형 레이아웃
미디어 쿼리(Media Query) 란? 미디어 쿼리는 CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용한다. @media 키워드로 시작하는 미디어 쿼리의 문법 구조는 아래와 같다. @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일이 무시된다. 미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지가 있다. 1. HTML의 link태그의 media속성에 값을 설정해 주는 방법 2. css파일 내에 직접 media를 설정해 주는 방법 @media all and (min-width:480px) { ... } 3. media query를 설정한 파일을 css파일 내에서 impo..
![[CSS] 📚 그리드(Grid) 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcHUmp9%2Fbtrg4KfAsQh%2FM6rlrkEeWkPlQA8PReOqY0%2Fimg.png)
[CSS] 📚 그리드(Grid) 💯 총정리
Grid Grid가 나오기 이전에는, float이나 table, flex를 이용해 레이아웃을 짰다. CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다. 그리드 용어 그리드 컨테이너 display: grid로 표기하며 모든 그리드 아이템의 부모 요소이다. 일단 컨테이너가 될 요소에게 grid를 주면 그때부터 자식 요소들은 Grid Items이 된다. HEADER MAIN ASIDE FOOTER [그리드 아이템 정렬] align-self 단일 그리드 아이템(Item)을 수직(열 축) 정렬 값 의미 기본값 normal stretch와 같습니다. normal start 시작점(위쪽) 정렬 center 수직 가운데 정렬 end 끝점(..
💻 코딩 순서도 설계 사이트 추천 (diarams.net)
diarams.net 의 특징 1. 무료 2. OS관련없이 지원 3. 웹이기 때문에 별도의 프로그램 설치가 필요없음. 클라우드 저장 가능하다는 점 (깃헙, 원드라이브, 구글드라이브 등 다양하게 지원) 4. 물론 설치형 프로그램으로 로컬에서도 관리 가능 5. 순서도 뿐만 아니라 여러가지 다이어그램을 지원 6. 직관적인 UI 7. 한글 지원 diarams.net 사용법 Diagram Software and Flowchart Maker Security-first diagramming for teams. Bring your storage to our online tool, or go max privacy with the desktop app. No login or registration required. www..
![[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJg1v4%2FbtrgWDP1xj8%2FHzvrvrotIm0OzG3aWCmOaK%2Fimg.jpg)
[JS] 📚 모듈 사용하기 import / export 완벽 💯 정리
자바스크립트 모듈 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다. 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다. 모듈 export 파일이나 모듈안의 함수나, 객체를 export 하는데 사용됩니다. export에는 Named exports와 Default exports 두가지 방법이 있습니다. // 변수, 함수 선언식을 하..
👩💻 JDBC vs ODBC 차이 정리
JDBC (Java Database Connectivity) Java에서 DB에 접근하여 데이터 조회, 삽입, 수정, 삭제를 가능케하는 것을 말합니다. 다시말해 Java가 Database를 사용할 수 있도록 연결해주는 응용프로그램 인터페이스인 Java API 입니다. 이 응용프로그램 인터페이스는 데이터베이스 관리 시스템에 넘겨질 SQL 형태의 데이터베이스 접근요구 문장을, 각 시스템에 맞도록 바꾸는 역할을 합니다. API는 동적으로 올바른 Java 패키지를 로드하고, JDBC 드라이버 매니저에 등록하기 위한 메커니즘을 제공합니다. JDBC connection는 명령문을 만들고, 실행하는 것을 지원합니다. JDBC란 Java에서 DataBase와 연결하여 작업하기 위해서 Java와 연동되는 DBMS(e..
📚 제이쿼리 메소드 종류 총정리
jQuery 메소드 정리 요소 getter & setter 메소드 설명 .html() 해당 요소의 HTML 콘텐츠를 반환하거나 설정함. .text() 해당 요소의 텍스트 콘텐츠를 반환하거나 설정함. .width() 선택한 요소 중에서 첫 번째 요소의 너비를 픽셀 단위의 정수로 반환하거나 설정함. .height() 선택한 요소 중에서 첫 번째 요소의 높이를 픽셀 단위의 정수로 반환하거나 설정함. .attr() 해당 요소의 명시된 속성의 속성값을 반환하거나 설정함. .val() 요소의 값을 반환하거나 설정함. .value = 같은 거 html() == innerHTML과 같다. 안녕하세요. text() == textContent와 같다. 안녕하세요. width(), height() // setter $("i..
📚 제이쿼리 선택자(Selector) 종류 총정리
jQuery CSS 선택자 모음 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".class") 지정한 클래스를 가지는 모든 요소를 선택 element $("element") 지정된 태그명을 가지는 모든 요소를 선택 #id $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 , $("selector1, selecotr2") 모든 지정한 선택자들의 결과들을 결합하여 선택 자식 선택자 (child) 선택자 예제 설명 :first-child $("div:first-child") 부모의 첫 번째 자식인 모든 요소를 선택 :first-of-type $("div:first-of-type") 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택 :last-child ..
![[JS] 📚 자바스크립트 실행 컨텍스트 원리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWuLYP%2FbtrfU41mHjv%2FqFww4qi7966Hikg9QLsOJ1%2Fimg.webp)
[JS] 📚 자바스크립트 실행 컨텍스트 원리
실행 컨텍스트 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다. 자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고 있어야 한다. 실행에 필요한 여러가지 정보란 아래와 같은 것들이 있다. 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(Scope) this 이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리한다. 아래의 코드를 살펴보자. var x..
![[CSS] 📚 플랙스(Flex) 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPGp00%2FbtrgUo5WGcq%2FQmnpxfv6BD3K0Lspkwzd6k%2Fimg.jpg)
[CSS] 📚 플랙스(Flex) 💯 총정리
CSS Flexbox Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다. Q. 요즘 다들 grid 쓰는데, flex이제 안쓰는거 아닙니까? A. 정답은 No다. 물론 grid로만 레이아웃을 모두 구현은 가능하다. 하지만 단순한 컨텐츠를 가로 정렬하는데는 flex가 훨씬 간단하게 구현이 가능 하기 때문에, grid는 2차원 행렬 같이 큰 틀 레이아웃을 구현 할때 쓰고, flex는 1차원 행렬 같이 안의 컨텐츠 아이템을 가로 정렬할때 자주 쓴다고 보면 된다. 다음..
![[JS] 📚 제너레이터 - 이터레이터 강화판](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FEHEcr%2FbtrgMATDqp6%2FYB5KE0M4S5MikxmOEYtUZ1%2Fimg.jpg)
[JS] 📚 제너레이터 - 이터레이터 강화판
제네레이터란? 이터러블이며 동시에 이터레이터 = 이터레이터를 리턴하는 함수 (async가 Promise를 리턴하는 함수듯이, 제너레이터는 이터레이터를 리턴하는 함수다.) 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 구현할 수 있다. (Promise와 async 관계와 비슷하게 보면 된다.) 이터러블 프로토콜 방식 let range = { from: 1, to: 5, [Symbol.iterator]() { return { current: this.from, last: this.to, next() { if (this.current generatorObj.next() -> yield 2 -> ... -> end ● 제너레이터의 실행 결과가 이터레이이터..
![[JS] 📚 이터러블 & 이터레이터 - 💯완벽 이해](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbN5cj4%2FbtrgXqVWxha%2FaPP3oGTyORu4fjRd76NUck%2Fimg.jpg)
[JS] 📚 이터러블 & 이터레이터 - 💯완벽 이해
이터러블(interable) 이터러블(interable)이란 자료를 반복할 수 있는 객체를 말하는 것이다. 우리가 흔히 쓰는 배열 역시 이터러블 객체이다. 그럼 만일 이 배열에게 이터러블 표식을 없애버리면 어떻게 될까? let arr = [1,2,3] for(const a of arr) console.log (a) // 정상작동 1,2,3 arr[Symbol.iterator] = null; // 이렇게 하면 순회가 되지 않는다 for(const a of arr) console.log (a) // Uncaught TypeError: arr is not iterable 멀쩡한 배열임에 불구하고 for..of로 순회할수가 없게 되었다. 저 [Symbol.iterator] 라는 코드가 눈에 띈다. 이제 저것이 ..
🗺️ Geolocation API로 위치, 날씨 정보를 얻어오기
Geolocation API Geolocation API는 자바스크립트 프로그램이 사용자의 실제 위치를 브라우저에게 요청할 수 있도록 해준다. 물론 이런 정보들은 주요한 개인 정보와 관련되어 있으므로, 브라우저에서는 Geolocation API가 물리적인 위치 정보에 접근하기 전에 자바스크립트 프로그램이 항상 사용자의 허락을 받도록 하고 있다. Geolocation API는 환경에 따라 GPS를 비롯한 Wi-Fi, 휴대전화의 기지국, IP 주소 등에서 위치 정보를 알아낸다. 브라우저가 지원하는 Geolocation API는navigator.gelocation으로 정의되어 있다. Geolocation API 사용법 이 객체에는 다음 세가지 메서드가 존재한다. navigator.geolocation.getC..
