우당탕탕 아장아장

청년취업사관학교 후기 - 프론트엔드 마포 2기 참여중인 청년취업사관학교, 생각지도 못한 지원을 많이 해주셔서 너무나 만족함! 우선, 강사님의 열정 + 수업내용은 말할 것도 없고❤❤ 간식 지원 및 리프레쉬를 위한 연극이라니! 청년취업사관학교 새싹 Seoul Software ACademy 의 줄임말! 건물 내 있는 구내식당에서 매일 바뀌는 밥과 반찬 그리고 국을 먹을 수도 있고, 프로젝트가 끝났다고 이렇게 맛있는 음식을 가득 주문해주셨다~!💕 용산에 있는 본사에서 마포까지 와주셧다! 감사합니다! 피자, 치킨, 떡볶이! 오늘 먹은 음식들이라 더욱 신이 나서 쓰는 청년취업사관학교 후기! 그리고 오늘 즐거웠던 연극관람까지!!! 이렇게 잠을 쫓을수도 있고, 배고픔을 달래줄 수 있는 간식까지 제공을 해준다!!🌼🤍 거..

5주차 화요일 15. API 활용 ✅ API(Application Programming Interface) - 응용 프로그램에서 데이터를 주고 받기 위한 방법 - 개발 시간 및 비용 절감 가능 끝에 &units=metric 넣어서 화씨➡섭씨로 변경 위도 경도! 정확하지는 않음~~~ 배열만 찾아내기! 역 이름만 뽑아내기! 위도 경도 뽑아내기! 완료! 새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 5주차 블로그 포스팅

5주차 월요일 11. Fullpage 플러그인 12. Swiper slider 13. JSON 데이터 통신 Fullpage 플러그인 헤드태그에 3개, 바디에 script 입력! ➡ 사이트를 가져오기 때문에, 인터넷이 연결이 되어있어야 함! 필요한 옵션(네이베이션) 추가 a태그 옆 # 붙이기 네이케이션 아래에 넣기! Swiper slider https://swiperjs.com/ 복붙해서 이미지 태그 넣고, 우클릭 이미지 주소 복사! JSON 데이터 통신 JSON.stringify() : 객체 또는 배열을 JSON 포맷의 문자열로 변환 직렬화 : 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데, 이를 직렬화라고 함 직렬화 : 키 값은 "문자열" JSON.parse() : JSON 포맷의 ..

4주차 목요일 09. ES6 문법 ✅ 고차함수 - 인자로 함수를 받거나 함수를 반환하는 함수 - 함수 안에서 다른 함수를 원하는 시점에 호출할 수 있는 권 한을 가진 함수 ➡ calcurator : 매개변수로 함수를 전달 받는 함수 ✅ 콜백함수 - 인자로 전달되는 시점에 바로 함수를 호출하는 것이 아닌 고차 함수 내부에서 필요한 순간에 호출을 하는 함수 - 함수처럼 사용하면서 인자를 전달 ➡ add, sub ✅ forEach() 함수 ➡ 배열의 길이 생각 안해도 됨 ✅ find() 함수 - 조건을 만족하는 첫 번째 아이템('문자열')을 찾아서 반환해줌 ✅ some() 함수 - 배열의 아이템들이 조건을 부분적으로 만족하는지 확인 ✅ every() 함수 - 배열의 아이템들이 조건을 전부 만족하는지 확인 ✅ ..

4주차 수요일 08. 클래스 ✅ 클래스 내부 함수 종류 - 생성자 메서드 - 프로토타입 메서드 - 정적 메서드 ➡ return문은 생략 해야 함 ➡ function 키워드 없이 함수 선언 화살표 함수로 표현도 가능 ➡ 결과 : undefined ➡ 결과 : 에러 ✅ 캡슐화(Encapsulation) - 캡슐화를 원하는 프로퍼티나 메서드 앞에 # 기호를 붙임 ✅ 접근자 프로퍼티 - 데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티 - 접근자 프로퍼티 : 자체적으로 값❌, 다른 프로퍼티의 값을 읽거나 저장 변경하는 함수 ✅ getter 함수 - 값을 불러올 때 ➡ 객체이름.display ✅ setter 함수 - 값을 변경하고 싶으면 함수를 하나 생성해서 우회해서 저장하기! ✅ 클래스 상속 - 한 클래..

4주차 화요일 06. 함수 함수의 호출을 할 경우, 매개 변수 갯수 맞추기! ➡ 함수의 장점 : 코드 재사용 ✅ 대표적인 자바스크립트 함수 - eval parseInt isNaN ➡ 기본적으로 함수 선언은 위쪽에! ✅ confirm("메시지") 함수 ✅ alert("메시지") 함수 ✅ 화살표 함수 function adder() let 함수이름 = () => 특징① 매개변수가 없는 경우 중괄호 생략 가능 : 코드가 한 줄인 경우 특징② 매개변수가 1개인 경우 소괄호, 중괄호 생략 가능 - 소괄호 : 매개변수가 한 개인 경우 - 중괄호 : 코드가 한 줄인 경우 특징③ 한 줄인 경우 return을 생략 가능 새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅

4주차 월요일 05. 객체 ✅ 배열과의 차이점 - 배열은 원소에 접근 할 때, 숫자를 사용 - 객체는 원소에 접근 할 때, 문자열을 사용 (index가 없음) 하나의 아이템에 대한 다양한 속성들을 저장할 때 주로 사용 따옴표가 없는 키 : 키에 따옴표 생략 가능 따옴표 사용 시 : 키 이름에 공백을 포함하고 싶을 때 ➡ 키 자리에는 "문자열"만 ✅ 객체 안의 값에게 접근하기 ① console.log(고양이["이름"]); ② console.log(고양이.이름); ➡ 둘 다 같은 결과! ✅ 객체 내의 모든 키 목록 확인하기 console.log(Object.keys(고양이)); ① 객체["키"] = 값; ② 객체.키 = 값; 객체의 키는 순서가 없음 ✅ 배열안에 객체 넣기 ✅ 객체안에 배열 넣기 진영이라는 ..

3주차 수요일 04. 배열 데이터 값을 하나의 목록으로 생성 = [] 가 있으면 배열! 배열은 프로퍼티와 메서드로 다룬다. ✅ 배열의 길이 .length : 배열 내 원소의 개수를 확인 for문에 많이 사용! ✅ 배열의 원소 추가 : 배열의 끝에 새로운 원소를 추가, 추가 후 배열 안에 갯수 알려줌 .push(추가할_원소) : 배열 끝에 추가 .unshift(추가할_원소) : 배열 시작에 추가 ✅ 배열의 원소 제거, 제거된 원소를 값으로 반환 var 마지막동물 = 동물.pop(); : 배열의 마지막 원소 제거 console.log(마지막동물); var 첫번째동물=동물.shift(); : 배열의 첫 번째 원소 제거 console.log(첫번째동물); var 결합된배열 = 첫번째배열.concat(두번째배열)..

3주차 월요일 1. 자바스크립트 소개 2. 자료형과 변수 웹 페이지 내용 및 모양의 동적 제어 : 자바스크립트로 HTML 태그의 속성이나 컨텐츠의 값을 변경 ✅ 코드 작성 방법 - 웹 문서 내에서 작성 : - 자바스크립트 파일에 작성 : main.js ✅ 식별자는 가독성을 위해 두 단어 이상 구성되는 경우 두 번째 이후 단어의 첫 글자는 대문자로 작성 ✅ 식별자 작성 규칙 - 첫 번째 문자 : 알파벳, 언더바, $문자만 사용 가능 - 두 번째 이상 문자 : 첫 번째 문자 + 숫자 사용 가능 - 대소문자 구분 : myHome ≠ myhome ✅ 주석 - 한 줄 // - 두 줄 이상 /* ... */ ✅ 자바스크립트의 기본 자료형 숫자 : 5; ("5"의 경우 문자열 5) 문자열 : "반갑습니다. 저는 문자..

2주차 월요일 13. CSS 레이아웃 14. HTML5 테이블 태그 ✅ float: left (or right);를 사용하는 경우 둥둥 떠다녀서 영역을 설정할 수 없음 그럴 경우 부모에게 overflow: hidden;을 줘서 영역을 설정 overflow: hidden; 이 없을 경우, 부모가 자식을 감싸지 못함 ✅ float 특징 자식 태그에 float을 적용하면 부모 태그는 높이 값을 잃어버림 - float 속성은 상속 전체 초기화 후 중앙정렬 margin: 0 auto; 부모에게 overflow: hidden; or 위에 있는 코드가 뭔지 확인하지 않아도 되서, clear:both 일반적으로 많이 사용 %로 주면 가득찬 상태로 비율만큼 가득차게 변신! 테이블의 헤드, 바디, 풋! td rowspan..