영화 api를 받아서 영화 검색 사이트를 만드는 프로젝트 프로젝트 진행 순서 1. 간단한 와이어 프레임 2. html에 input, button태그와 영화 카드창 생성하기 3. javascript로 기능 구현 : 검색 기능, 홈화면에 모든 영화 정보 띄우는 기능 4. css로 레이아웃 수정하기 3. javascript로 기능 구현 : 검색 기능, 홈화면에 모든 영화 정보 띄우는 기능 홈화면에 모든 영화 정보 띄우는 기능 function movieList(rows) { rows.map((a) => { const temp = document.createElement('div'); temp.innerHTML = ` ${a['title']} ${a['overview']} ${a['vote_average']} `..
JS 문법 종합반 5주차 : Class 클래스는 객체를 생성하기 위한 일종의 템플릿 아래의 예제처럼 클래스 사용 constructor 라는 생성자 함수를 사용하여 객체 생성 this 사용하여 인스턴스(실제 객체)에 접근 클래스 안에 메소드를 정의할 수 있음 new 클래스명( )으로 객체 생성 가능 class Car { constructor (modelName, modelYear, type, price) { this.modelName = modelName this.modelYear = modelYear this.type = type this.price = price } makeNoise () { console.log(`${this.modelName} 빵빵!`) } } let car1 = new Car( '..
try...catch try...catch 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정합니다. try { nonExistentFunction(); //실행될 부분 } catch (error) { console.error(error); //에러 발생시 실행될 부분 } try...catch - JavaScript | MDN try...catch 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정합니다. developer.mozilla.org 프로그래머스 입문 : 배열 원소의 길이 문제 : 문자열 배열 strlist가 매개변수로 주어집니다. strlist 각 원소의 길이를 담은 배열을 retrun하도록 solu..
Git 특강 CLI 명령어 숙지하기! pwd 현재 경로 확인하기 ls cd cat vi touch rm mkdir rmdir rm -rf 등등 git은 버전 관리를 위한 도구 github 이용해서 협업시에 push권한을 설정하기보단 fork를 통해 pull request를 받은 후에 github에서 코드 리뷰를 한 후에 merge 작업을 진행하는 것이 바람직함 JS 문법 종합반 3주차 숙제 풀이 : 객체를 복사할 때 newUser = user 로 쓰면 안됨! user의 데이터가 저장된 주소를 불러오기 때문에 newUser를 수정하면 user의 값도 변경됨 따라서 아래와 같이 for문을 사용해서 객체 안에 담긴 내용을 복사해야 함 var user = { name: "john", age: 20, } var ..
2주차 강의 구조분해할당 let user = { name : 'nbc', age : 30 } let { name : newName, age : newAge } = user console.log(newName) console.log(newAge) console.log(user) 구조분해할당 후에 콘솔로 찍어 볼 때 console.log(name)은 'name is not defined'으로 오류가 발생함 그래서 구조분해할당 후 console.log(user)를 하면 결과는 위에 첨부한 사진처럼 newName : 'nbc'가 아닌 name: 'nbc'로 확인됨 왜지...? 객체로부터 속성을 해체하여 객체의 원래 속성명과는 다른 이름의 변수에 할당할 수 있습니다. 해당 설명에 따르면, 아무래도 이미 다른 이름..
양꼬치 문제 : 자바스크립트 풀이 function solution(n, k) { var answer = 12000*n + 2000*k - 2000*Math.floor(n/10); return answer; } 양꼬치 10인분마다 음료수 한개를 서비스를 받기 때문에 서비스를 받은 음료수 갯수를 구해야 한다 양꼬치 주문/10 으로 한 후 몫을 구하기 위해 Math.floor()를 사용했다!! parseInt()라는 사용법은 같아보이는데 parseInt()는 공식문서에서도 잘 사용하지 않는다고 하여 Math.floor()를 사용해서 몫을 구했다! 피자 나눠 먹기(1) 풀이 function solution(n) { if (n % 7 == 0) { var answer = n/7 } else { var answer..
팀 소개 프로젝트라는 간단한 프로젝트였지만! 웹 개발에 대해 서버까지 어떤 방식으로 작동되는지 조금 더 잘 이해하게 된 시간이었다..!! 웹개발 종합반 강의를 들었을 땐 강의에서 하는걸 그냥 따라하기만 했어서 과연 내가 제대로 이해한 건지 파악이 어려웠는데, 프로젝트를 진행하다 보니 이해가 잘 되지 않았던 부분에 대해 알게 되었던 시간이었다. 일단, 서버와 스크립트가 연결이 되어 fetch로 정보를 보내거나 받거나 하는 동작을 수행한다는 것까지는 이해를 했는데, 직접 코드를 작성해서 DB를 이용하는 과정을 만들어내는 건 조금 어려웠다...! 하지만 팀원들의 도움과 구글검색으로 충분히 해결할 수 있는 문제들이었고, 이 과정을 통해 서버가 어떤 방식으로 작동하는지 아주~ 얕게나마 지식을 쌓게 되었던 값진 시..
KPT 회고록 https://huu-oong.tistory.com/7 내배캠 1주차 미니프로젝트 KPT 회고록 KPT keep 현재 만족하고 있는 부분 계속 이어갔으면 하는 부분 Problem 불편하게 느끼는 부분 개선이 필요하다고 생각되는 부분 Try problem에 대한 해결책 다음 회고 때 판별 가능한 것 당장 실행가능 huu-oong.tistory.com 부트스트랩같은 라이브러리를 사용하지 않고, 완전 날것의 UI의 웹페이지를 만들어버려서 아쉬움이 있었다! 다음 프로젝트에서는 초기에 꼭꼭꼭 충분한 자료조사를 진행하고, 명확한 틀을 정한 후에 진행하는 방식으로 해야겠다는 큰 깨달음도 알게 되었다...!! 다음엔 코드도 웹페이지도 더 예쁘게 만들고 싶다!!😂 튜터님의 꿀팁 [부트스트랩같은 라이브러리 ..
