오늘 한 일 개인 프로젝트 인기영화 검색 사이트 제작 API HTML에 표시 카드 클릭시 영화 id 나타나는 alert 창 구현 검색기능 구현 웹사이트 새로고침 후 검색 input 란에 커서 자동위치 시키기 프로젝트 설계 먼저 API를 받아오기 위해 직전 웹종반에서 수강했던 fetch 가져오기를 꼼꼼히 살펴서 설계를 진행했다. fetch("http://spartacodingclub.shop/sparta_api/seoulair") .then((response) => response.json()) .then((data) => { $('#names-q1').empty() let rows = data['RealtimeCityAir']['row'] rows.forEach((a) => { let gu_name = ..

[TIL] 2024. 1. 5. 23:52

-개인과제 시작. 직전 웹종반에서 배웠던 내용을 기본으로 api를 끌고와서 html에 넣어줘야한다. 밑에 api는 console.log()로도 찍어 주고 document.querySelector().append() 를 사용해 내용이 잘 들어가는지 테스트해봤다. 일단 오류 없이 api는 잘 받아와지는 모습. 오늘 느낀점 내가 생각한 틀은 영화 정보를 받아와서 각각의 영화에 대한 카드를 생성해야된다. 그러려면 카드 컴포넌트가 필요할 것이고 컴포넌트를 만들고 fetch와 forEach를 활용해 소스코드의 효율성을 높이는 방향으로 짜봤다. 한 문제에 틀어박혀서 시간을 굉장히 많이 썼다. 처음에 css를 배치하느라 애를쓰기도했고,, 이쁘게 만들었다가 코드가 너무 복잡해져 엎어버리고 css작업은 나중으로 미뤘다. ..

[TIL] 2024. 1. 4. 23:58

1. 콜백함수 콜백함수 (forEach, setTimeout)등은 제어권이 이들한테 있음. call - back = 제어권을 넘겨줄테니까 너가 알고 있는 그 로직으로 처리해 !! setTimeout = 1 초후 console.log()를 찍어줘 forEach = 반복하는 로직을 알아서 처리해. 인자를 넘겨서 제어권을 위임한 함수. 즉 제어권이 있는 위임받은 코드가 알아서 하는 거다. // 근데 어떤 제어권을 가질까? // 1. 호출 시점에 대한 제어권을 갖는다. // setInterval 함수는 반복해서 let count = 0; let timer = setInterval(function(){ // 얘가 제어권을 가지고 있음. console.log(count); if(++count>4) clearInte..

[TIL] 2024. 1. 3. 21:14

오늘은 3주차 강의에서 배운 내용을 다루려고한다. 1. 얕은 복사와 깊은 복사 객체가 중첩되어 사용되었을때 얕은복사를 사용하게되면 바로 아래 단계의 값만 복사되어서 제대로된 복사가 실행되지 않는다. 이를 해결하기 위해 나온 것이 '깊은 복사' 깊은복사는 내부 스코프에 있는 모든 값을 하나하나 다 적용해 복사하는 방법이다. var user = { name: 'wonjang', urls: { portfolio: 'http://github.com/abc', blog: 'http://blog.com', facebook: 'http://facebook.com/abc', } }; var user2 = copyObject(user); user2.name = 'twojang'; // 바로 아래 단계에 대해서는 불변성을..

[TIL] 2024. 1. 2. 22:52

오늘 배운것 1. 변수 JS 에서 변수는 var, let, const 세가지 방법 존재. (var 은 옛날에 쓰던 방법.) let과 const는 es6에서 새로 도입된 방법. 즉, let과 const를 쓰자. var는 여러번 선언해도 오류 발생❌ let, const는 같은 이름의 변수를 두 번 선언하면 오류 발생⭕ const는 상수 즉, 변경할 수 없느 값을 선언할 때 사용. 2. 데이터타입 데이터타입은 typeof 로 확인할 수 있음. 숫자, 문자열, Boolean, undefined, null, Object, Array 3. 연산자 산술 연산자( +, -, *, /, % )가 있음. 등호 연산자( =, +=, -=, /=, %= )가 있음. 비교 연산자( ===, !==, , = )가 있음. 논리 연..

[TIL] 2023. 12. 29. 21:05

오늘 공부한 내용 Sql 강의 1, 2주차 학습 웹개발 종합반 3~5주차 복습 Web 기초 특강 Sql 기본개념 정리 테이블 - 엑셀 파일과 같이 생각하면됨 (food_oders, payments, customers) 컬럼 - 테이블 안에 있는 각 '열' 들을 컬럼이라고 부름.(필드라고도 함) sql의 가장 기본 구조 SELECT 와 FROM SELECT * 을 입력하면 FROM에 입력한 테이블에 관한 모든 컬럼을 불러와준다는 의미. Query를 실행하려면 ctrl + enter 키를 누르면 됨. 컬럼에는 각 별명을 지어서 내보낼 수 있음. SELECT restaurant_name as res_name 과 같이 'as' 사용. WHERE 는 조건을 주기위해 즉, 컬럼에 필터링을 할 때 사용되는 문법임. ..

[TIL] 2023. 12. 28. 21:20

오늘 한 일 생활코딩 기초 자바 문법 복습. 웹개발 종합반 강의 2~4주차까지 복습 A형 독감에 걸려 몸 상태가 안좋아서 공부할 시간이 적었다. 안그래도 12시간씩 공부하는 프로그램에 참여했는데, 몸 관리에 소홀해서 시간을 날려먹은게 후회스럽다. 내일 할 일 복습용으로 만들었던 자기소개 페이지 깃허브에 배포. 웹개발 종합반 한 번 더 돌아보기. 미니프로젝트 청강하기. SQL 강의 듣기.

[TIL] 2023. 12. 27. 20:48

What I Did Today 1. 개인 복습 자기소개 웹페이지 제작하기. - About Me 페이지 제작 - what im learning 페이지 제작 - My Favorites 페이지 제작 - Guest Book 페이지 제작 TIL Issues encountered 1. Guest Book 페이지 CSS템플릿 레이아웃을 맞추는데 상당히 오랜 시간이 걸렸음. 2. what im learning 페이지 servicebox를 누르면 모달창이 뜨고 모달창의 body 부분을 누르면 나가게 되는 기능을 구현하려다 닫히지 않고 무한 반복 되는 현상 What I tried / How I resolved the issues 1. copyright Free CSS 템플릿을 받아와 적용하는 작업이였어서 폴더 안에 들어있..

[TIL] 2023. 12. 26. 21:22