신나는 개발자

나는 원래 컴퓨터공학을 전공하면서 HTML. CSS보다 프로그래밍 언어인 JavaScript에 더 관심이 있어서 이번 수업에 더 관심이 많았다. AWS와 데이터 베이스 먼저 자바스크립트를 하기 전 데이터베이스에 대해 4일 짧게 공부하였다. AWS환경에 RDBMS인 mySQL과 noSQL인 mongoDB를 깔아서 사용해보았다. AWS를 처음으로 환경을 셋팅하고 실행을 해보았는데 예전에 OS를 공부할 때 가상 머신으로 사용하던 우분투의 CLI환경과 별 다른게 없다. 또한 RDBMS인 mySQL은 써본적이 있어서 익숙했지만 mongoDB의 경우는 처음 써보아서 매우 낯설었지만 쉽고 다른 프로그래밍 언어와 비슷한 특성 가져서 공부를 하면 익숙하게 할 수 있을 거 같았다. 자바스크립트 자바스크립트는 기존에 다른 ..

패스트캠퍼스/패캠 오프라인 2020. 4. 25. 20:42

함수 함수를 정의 하는 방법 4가지 함수 선언문으로 정의하는 방법 function square(x) {return x*x}; 함수 리터럴로 정의하는 방법 var square = function(x){return x*x}; Function 생성자로 정의하는 방법 var square = new function("x", "return x*x") 화살표 함수 표현식으로 정의하는 방법(ES6) var square = x => x*x; 함수 호이스팅으로 인해 자바스크립트 엔진은 함수 선언문을 프로그램 첫머리 또는 함수 첫 머리로 끌어올린다. 하지만 2번 3번 4번으로 정의한 함수는 변수에 함수를 할당해야 사용할 수 있기 때문에 호출하는 코드보다 앞으로 나와야한다. 중첩함수 자바스크립트는 함수 내부에 함수를 쓰는 중..

자바스크립트/바닐라 자바스크립트 2020. 4. 20. 11:08

1. 자바스크립트의 개요 자바스크립트의 특징 인터프리터 언어이다. 단 최근 브라우저에 JIT 컴파일러가 내장되어 있어 실생 속도가 매우 빨라졌다. 동적 프로토타입 기반 객체 지향 언어이다. C++이나 Java 등은 클래스를 이용하여 객체를 생성하는 클래스 기반 객체 지향 언어이지만 자바스크립트는 클래스가 아닌 프로토타입을 상속하는 프로토타입 객체 지향 언어이다. 자바스크립트에서는 객체를 생성한 훙에도 프로퍼티와 메서드를 동적으로 추가하거나 삭제가 가능하다. C++, Java와 다른 점 중 하나이다. 동적 타입 언어다. C++, Java는 실행되기 전 변수 타입이 결정되는 정적 타입 언어이지만 자바스크립트는 변수 타입이 없기 떄문에 프로그래을 실행하는 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀔 수..

자바스크립트/바닐라 자바스크립트 2020. 4. 20. 11:07

변수와 값 변수와 데이터 타입 자바스크립트에서는 변수 타입이 없으므로 var 하나로 사용했다. 하지만 ES6버젼에서 새로운 변수 선언문이 등장했다. let와 const은 다음에 소개하겠습니다. 그 외에 데이터 타입은 다른 언어와 비슷하며 값이 없음을 표현하는 값에는 null과 undefined가 있다. undefined는 정의되지 않은 상태를 뜻하며 다음 값이 undefined가 된다. 값을 아직 할당하지 않는 변수의 값 없는 객체의 프로퍼티를 읽으려고 시도했을 때의 값 없는 배열의 요소를 읽으려고 시도했을 때의 값 아무것도 반환하지 않는 함수가 반환하는 값 함수를 호출했을 때 전달받지 못한 인수의 값 그에 반해 null의 경우는 아무것도 없음을 표현한 리터럴이다. ES6에서 추가된 데이터 타입 심벌 실..

자바스크립트/바닐라 자바스크립트 2020. 4. 20. 11:07

html, css 반응형 웹 프로젝트 프로젝트 github 프로젝트를 시작하면서 패스트캠퍼스에서 html과 css수업을 끝내고 간략한 프로젝트를 진행하기로 했다. 해당 프로젝트는 강사님이 주신 피그마 파일을 가지고 만들게 되었다. 프로젝트를 진행하면서 강사님이 중요하게 여긴것은 웹접근성이었다. 그래서 최대한 배운내용과 기술 사이트등을 참고하며 만들었습니다. 만들면서 참고한 사이트 웹접근성 널리 레진코믹스 github AOA 접근성 유튜브 아쉬운 점 하지만 그럼에도 불구하고 몇가지 놓친점이 있어서 아쉬웠습니다. a에 role=button을 통해 링크가 아닌 버튼임을 알려주고aria-pressed="true"로 클릭이 된다는것을 알려주는게 좋다고 하셨다. 보이지는 않지만 처음 텝키가 갔을때 바로가기 키을 넣..

패스트캠퍼스/패캠 오프라인 2020. 4. 11. 18:43

반응형으로 개발할 때 실 디바이스로 테스트가 중요하다. 크기를 1px단위로 확인하면서 반응형으로 짤려면 엄청 힘들다. img에서 srcset를 사용하여서 해상도에 따라 image의 크기를 바꿔줄 수 있다. 높은 해상도에서 이미지의 픽셀이 깨지는 것을 방지한다. css에서도 방지할 수 있지만 html에서 사용하면 성능면에서 좋다. /* 1.25 dpr */ @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ /* Retina-specific stuff here */ } /* 1.3 dpr */ @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){ /*..

패스트캠퍼스/패캠 오프라인 2020. 4. 6. 18:56

SCSS의 개요 CSS Preprocessor(CSS 전처리기) 3대장으로 Sass(SCSS), Less, Stylus 등이 있다. Less는 진입장벽이 비교적 낮지만 몇몇 기능들이 떨어진다. Stylus는 덜 유명하고 비교적 늦게 나와 사소한 버그들이 몇몇 보인다. Sass(SCSS)는 가장 유명하고 오래되어 안정적이다. Sass와 SCSS의 차이점 SCSS는 Sass의 모든 기능을 지원하는 상위집합이다. 차이점으로는 {}와 ;의 유무이다. .list width: 100px float: left li color: red bakground: url("./image") &:last-child margin-right: -10px .list{ width: 100px; float: left; li{ color:..

패스트캠퍼스/패캠 온라인 2020. 3. 30. 15:08

2주차에 배운 내용 반응형 프레임워크를 사용해 프로토타이핑을 제작해보면 설계하는데 많은 시간을 절약 할 수 있습니다. 하지만 프로토타입에서만 사용해야하고 실제 만들 제품은 사용하지 않는것이 좋다. Bootstrap Foundation Bulma UI Kit Semantic UI : 시맨틱 요소를 생각하여 만들어진 프레임워크라 좋다. html6 : 다양한 태그들이 추가된다. required input 태그에 사용되는 속성으로 유효성을 체크한다. 유효성체크는 예전에는 자바스크립트로만 가능했지만 html에서 가능해졌다. time required와 비슷하게 예전에는 자바스크립트로 설정한 시간들을 태그를 사용하여 설정 할 수 있다. 정렬방법 text-align(black요소) vertical-align(inlin..

패스트캠퍼스/패캠 오프라인 2020. 3. 28. 22:34