은성의 개발블로그

매번 html에 javascript 파일을 로 연결해서 실행해왔지만 딱 js 파일에서 console.log 값이 어떻게 나오는지 정리해보려고 합니다! 1. 비주얼스튜디오에서 해당 파일이 있는 폴더를 열어요 맨 위에 File 파일 탭을 누른 후 Open folder에서 찾으시면 됩니다! 2. Termianl 터미널을 열어줍니다 File 탭 옆쪽에 있는 Termianl에서 new terminal 클릭! 터미널을 여는 단축키 : ctrl + shift + ` (백틱 backtick : ~ 밑에 보이는 것) 3. Termianl에서 'node + 파일 이름.js'라고 명령해주면 됩니다! 4. 그러면 바로 실행 결과가 밑에 나옵니다 5. 폴더 안에 js 파일을 실행하고 싶다면.. 'node ./폴더이름/파일'로 ..

frontend - 웹 화면 담당 - 데이터 조회하고 화면에 전달 - 화면에 주소를 담당하는 라우팅 - web publishing : 디자인된 내용을 화면에 구현 - UI, 데이터처리 및 상태 값 관리 backend - 중요한 서비스 로직 - 보안 - 디비 연결 및 관리 - 서비스 코어 기능 - 서버 전송처리 - 모델링 작업 (수집된 데이터 관리) progressive framework library : 자바스크립트를 더욱 손쉽고 편리하게 도와주는 도구 SPA 방식 (single page application) : 하나의 페지가 모든 화면과 기능을 담고 있음 ( 페이지를 한 번만 불러오면 됨) 1. vue angular와 react의 장점만 골라 만들어졌다. 비교적 쉬운 학습 난이도 성능도 리액트와 비교..

간단한 프로젝트라면 아래 코드처럼 초기화 해도 되지만, *{margin:0; padding:0;} 큰프로젝트라면 init.css / reset.css / initialize.css 를 검색한 후 가져다가 쓰는게 낫다. outline : border의 바깥 외곽선 - 요소를 두드러져 보이게 만들고자할 때 사용 - outline 선의 너비는 레이아웃에 관려하지 않고 눈에만 선이 보인다. vh = viewport height vw = viewport width => 스크린 크기에 맞게 상대적 크기를 반환 100vh, 100vw - 전체 화면의 기준 (예시) 스크린 크기가 height = 1000px, width = 600px => 1vh = 10px / 1vw = 6px [ 그라데이션 ] background:..

DOM - 오브젝트 모델 형태로 제어를 하고 interactive 효과를 준다. EVENT btn.addEventListener("행위","작동되는 내용") - 행위에는 click 등을 쓴다. - 이벤트를 자체에 대한 내용을 인자부분에 작성 데이터를 보내는 방식 1. GET - 주소에 요청하는 내용을 함께 보내는 방식 2. POST - body에 포함해서 보내는 방식 [ Network ] //정상 Status Code: 200 //페이지가 없을때 Status Code: 404 //서버에 에러 Status Code: 500 fetch() api를 불러오고 정보를 내보내는 함수 get과 post 방식을 설정한다. 설정을 안하면 기본적으로 get json() - 응답(response stream)을 받아 읽고..

제가 요즘 듣고 있는 강의는 '바닐라 Javascript + Vue.js 과정'이에요. react도 관심이 있는데 sessac에서는 react강좌가 없어서 그 다음으로 관심이 있는 vue를 선택했어요. 아래 링크에서 무료로 이 강의를 들을 수 있습니다! https://sesac.seoul.kr/course/active/detail.do 꿈꾸는 개발자 데뷔코스, 새싹 ‘새싹’은 싹을 틔우기 위해 더 높은 곳을 향해 도전하고 한 단계 성장하여 기업과의 연결, 새로움을 추구하는 인재들의 공간입니다. sesac.seoul.kr js 간단한 건 알아서 여기서부터 정리했습니다. [ forEach ] arrayName.forEach(function(parameter){ }) parameter(인자)는 각각의 요소다...

[상속] - 한 객체의 필드(변수)와 메소드를 다른 객체가 물려받을 수 있는 기능 - 코드 중복를 제거 - 유지 보수에 좋음 class SubstractionableCalculator extends Calculator{ public void substract() { System.out.println(this.left-this.right); } } - extands 객체 이름 : 객체의 기능을 확장 - SubstractionableCalculator가 Calculator의 기능을 부모로 해서 상속 - this.left, this.right는 Calculator 객체에서 정의된 것이다. 객체에 메소드를 추가하는 게 어려움 1. 객체를 자신이 만들지 않아서 소스를 변경할 수 없음. (변경할 수 있..

학교 커뮤니티에서 IoT 스터디할 사람을 구해서 '이번 기회에 아두이노랑 라즈베리파이를 배우자' 라고 생각해서 스터디에 참여했어요! (소수인원이지만..) 저는 'Do it 키트없이 만드는 아두이노' 책을 사고 해당 서적의 강의를 듣고 있어요. 생각보다 책이 얇고 앞에 챕터마다 공부할 날짜를 적는 페이지가 있어서 좋아요. 모르는 단어가 있으면 대부분 설명되어 있습니다. (바로 이 강의) https://www.youtube.com/watch?v=1GNV7B7NR60&list=PLG7te9eYUi7uRWKearigBvxaxVuc66ocr&index=1 아두이노 키트를 직접 사서 하기보다는 autodesk에서 만든 tinkercad에서 온라인으로 아두이노를 다룰 수 있어서 틴커캐드로 배우고 있습니다. https..

방학에 코딩 공부를 하려고 이것저것 찾아본 결과 여러 사이트를 알게 됐어요. 최대한 무료 강의만 보는 편이라 다른 분들에게도 알려주고 싶어서 포스팅합니다! https://www.inflearn.com 인프런 - 프로가 되는 온라인 클래스 | 온라인 강의 플랫폼 프로그래밍, 인공지능, 데이터, 마케팅, 디자인, 엑셀 실무 등 입문부터 실전까지 업계 최고 선배들에게 배울 수 있는 곳. 우리는 성장 기회의 평등을 추구합니다.... www.inflearn.com 1. 인프런 인프런은 무료 강의와 유료 강의가 같이 있는 사이트입니다. 유튜브에 올려져 있는 강의도 있더라고요. 새해에 유료가 무료로 전환되는 이벤트가 있어서 좋습니다. 장점 1. 카테고리별로 강의 구분 가능하다 (무료/유료, 파이썬, 블록체인,,, 등..

[if문] -Python에서는 elif라고 쓰는데 java나 C언어에서는 else if를 쓴다. if(){ }else if(){ }else{ } args[num] : 입력값 [switch문] System.out.println("switc(1)"); switch(1) { case 1: System.out.println("one"); break; case 2: System.out.println("two"); break; case 3: System.out.println("three"); break; default: System.out.println("default"); } - switch(4)가 되면 default구문이 나옴 >> 즉, 주어진 케이스가 없는 경우 default문이 실행됨. [for문] for(..

[실수] float a = 2.2F (F =float type 명시함.) 대부분 double를 쓴다. [정수] 뒤에다 L,B,S 등을 안 붙이면 자동으로 Int로 설정됨. byte b = 100; float 전환하는 것 1. 자동 형 변환 implicit Conversion - 표현범위가 좁은 데이터 타입에서 넓은 데이터타입으로의 변환만 허용 - 예) float > double (O) | double > float (X) 2. 명시적 형 변환 explicit conversion - 괄호 안에 데이터 타입을 지정해서 값 앞에 위치시키는 것 - (데이터타입)데이터값 ..