내일배움캠프/Today I Learned47 [TIL 2023.05.29] 영화 검색 페이지 만들기 (GOE’s CINEMA) 목차 💻오늘 배운 내용 ❓발생한 이슈/고민 💡해결과정 🧐궁금점과 부족한 내용 📋레퍼런스 💻오늘 배운 내용 CSS grid 사용 그리드 사용 방법은 의외로 간단했다. display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 2%; display를 grid로 두고 columns(가로), rows(세로) 값을 설정해주면 된다. 만약 간격을 주고싶다면 grid-column-gap 또는 grid-row-gap을 사용 fr이라는 단위는 fraction(뜻은 여기로)이라는 의미로 숫자 비율대로 트랙의 크기를 나눈다. 오픈 api를 이용해 바닐라 자바스크립트로 영화 카드 생성 결론은 웹개발 종합반에서 배웠던 내용을 응용해서 살짝만 변형한다면 굉장히.. 2023. 5. 30. [TIL 2023.05.26] this의 정의, 활용방법, call, apply, bind 목차 💻오늘 배운 내용 ❓발생한 이슈/고민 💡해결과정 🧐궁금점과 부족한 내용 💻오늘 배운 내용 this 객체지향 언어에서의 this는 곧 클래스로 생성한 인스턴스 💡 비슷한 성질을 가진 여러개의 객체를 만들기 위해, 일종의 설계도라고 할 수 있는 생성자 함수(Constructor)를 만들어 찍어내듯 사용하는데 이렇게 생성된 객체를 인스턴스 생성자 함수(Constructor) = 거푸집 인스턴스 = 거푸집으로 찍어낸 칼 this는 실행 컨텍스트가 생성될 때 결정된다. 즉, bind 한다. this는 함수를 호출할 때 결정된다. 1] 전역 공간에서의 this 전역객체를 가리킨다 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경) 2] 메소드 내부에서의 this 함수와.. 2023. 5. 27. [TIL 2023.05.25] JavaScript 데이터 타입, 실행컨텍스트 목차 💻오늘 배운 내용 ❓발생한 이슈/고민 💡해결과정 📋레퍼런스 💻오늘 배운 내용 데이터 타입의 종류 데이터 타입은 크게 기본형과 참조형 2가지로 나뉘는데 구분 기준은 **값의 저장 방식**과, **불변성 여부**이다. 복제의 방식 기본형 : 값이 담긴 주소값을 바로 복제 참조형 : 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주소값을 복제 불변성의 여부 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음 /** 선언과 할당을 풀어 쓴 방식 */ var str; str = 'test!'; /** 선언과 할당을 붙여 쓴 방식 */ var str = 'test!'; ⬇ 위를 예제로 값이 들어간다면 주소 … 1002 1003 … 데이터 str/@5002 주소 … 5002 5003 … 데이터 test! 표와.. 2023. 5. 26. [TIL 2023.05.24] ES6, 일급객체로서의 함수, Map과 Set 💻오늘 배운 내용 ES6 2015년도에 대규모 문법적 향상 및 변경이 있었기 때문에, ES6가 항상 언급이 되곤 한다. let, const의 등장 var: 재할당, 재선언은 가능 let: 재할당은 가능하고, 재선언은 불가 const: 재할당, 재선언이 불가능, 초기값이 없으면 선언 불가능 기존에 변수 선언을 위해 존재하던 var를 대체해서 나온 변수 선언에 사용 되는 키워드 화살표 함수 (Arrow Function) 삼항 연산자 (ternary operator) 구조 분해 할당 (Destructuring) 단축 속성명 (property shorthand) 전개 구문 (Spread) 나머지 매개변수(rest parameter) 템플릿 리터럴 (Template literals) 일급 객체로서의 함수 다른 객.. 2023. 5. 25. [TIL 2023.05.23] TIL 쓰는법, JavaScript 조건문, 비교문 💻오늘 배운 내용 TIL을 유익하게 쓰는법 ‘문시해알’ “내가 엊그제, 어제 뭘 배웠는지 설명할 수 있는가?” 어떤 문제가 있었는지 내가 시도해 본 것들 (🌟자세히!) 어떻게 해결했는지 새롭게 알게된 내용 (🌟자세히!) 번외,팁) 프론트엔드 지망생일 경우 모든 것을 전부 꾸며라. 배포포함 ❗ 주의, ‘해야한다’가 아닌 ‘권장’일 뿐 블로그를 꾸미는 것이 중요한 것이 아니다. 지금 당장 내가 해야하는 일에 소홀하면 안됨. nodemon, codesnap VScode에 새로운 익스텐션을 추가했다. nodemon - 매번 터미널에 명령어를 입력하지 않아도 새로고침 시 자동으로 값을 보여줌 codesnap - 간편한 코드캡쳐 기능 깔끔하고 보기 좋다. JavaScript 어제에 이어서 이론 공부. 화살표 함수와.. 2023. 5. 24. [TIL 2023.05.22] JavaScript 특징과 기본 문법 💻오늘 배운 내용 자바스크립트 특징 및 기본 문법 JavaScript JS 언어의 특징 [1] 객체 지향 프로그래밍 지원 자바스크립트는 객체 지향 프로그래밍이 가능한 언어로서, 객체를 생성하고 관리하는 데에 강점이 있다. 이를 통해 복잡한 기능을 구현할 수 있다. [2] 동적 타이핑 런타임 시점에 변수에 할당되는 값에 따라 자동으로 데이터 타입이 결정된다. [3] 함수형 프로그래밍 지원 자바스크립트는 함수형 프로그래밍을 지원하는 언어로서, 함수를 일급 객체로 취급하고, 고차 함수를 지원한다. 이를 통해 코드의 재사용성과 가독성을 높일 수 있다. [4] 비동기 처리 작업을 순차적으로 기다리지 않고, 병렬로 처리할 수 있도록 하는 방식. [5] 클라이언트 측 및 서버 측 모두에서 사용 가능 클라이언트 측에서.. 2023. 5. 23. [TIL 2023.05.19] 팀소개 프로젝트 마무리&발표 💻오늘 배운 내용 RESTful API? REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다. HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. CRUD Operation이란 Create : 데이터 생성(POST) Read : 데이터 조회(GET) Update : 데이터 수정(PUT, PATCH) Delete : 데이터 삭제(DELETE) REST 구성 요소 REST는 다음과 같.. 2023. 5. 19. [TIL 2023.05.18] 팀소개 프로젝트 오류수정 ❓발생한 이슈/고민 💡해결과정 서버와 합치는 과정에서 이전과 같은 문제가 발생!😱 동적으로 추가되는 카드라서 형제요소를 찾지 못한 것이 원인이었다. card.innerHTML = temp_html; // 컨테이너 생성 및 카드 추가 const container = document.createElement('li'); container.classList.add('card-container'); container.appendChild(card); list.appendChild(container); $('.js-click-modal').click(function () { const container = $(this).closest('.card-container'); container.addClass('moda.. 2023. 5. 19. [TIL 2023.05.17] CSS와 jQuery에 대한 이해와 .env…? 💻오늘 배운 내용 jQuery CSS trasition .env? 📖 jQuery 길고 복잡한 자바스크립트 문법을 손쉽게 코딩하도록 간소화한 자바스크립트 라이브러리. 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작 이벤트 처리 애니메이션 Ajax 등을 훨씬 더 간단하게 만들어준다. jQuery 써서 html 변경하려면 안녕 이렇게 코드 양이 절반으로 줄어들어서 쓰는 것이다. $ 이건 querySelector와 동일하게 사용하면 된다. jQuery 써서 스타일 변경하려면 안녕 이러면 css 스타일 변경이 가능하다. (주의) html 셀렉터로 찾으면 html 함수들을 뒤에 붙여야하고 jQuery 셀렉터로 찾으면 jQuery 함수들을 뒤에 붙여야 잘 된다. $('어쩌구').i.. 2023. 5. 19. [TIL 2023.05.16] 팀프로젝트 css 수정과 내 컴퓨터의 이미지 파일을 링크화 하기 💻오늘 배운 내용 CSS : cubic-bezier post images에 이미지 업로드해서 링크 만들기 ❓발생한 이슈/고민 여전한 repository 연동 이슈. mian에 있는 파일들을 내 branch에 pull 해오고 싶었는데 왜인지 오류가 났다. 가져오지를 못해! 모달창 내 요소들이 좌측에 몰려있다, 그리고 수직으로 정렬되어 있는 것이 마음에 들지 않았다. 이미지와 팀원소개 텍스트를 나란히 놓고 싶다! 어제 만들었던 모달창 애니메이션 기능이 마음에 들지 않았다 클릭해서 위로 올라오는 모션까지는 좋지만 브라우저 창 전체를 덮어버린 것이 불만! 올라오는 애니메이션이 실행되면서도 페이지 타이틀은 계속 보이게 하고 싶었다. 💡해결과정 main의 파일들을 가져오려하니 “refusing to merge un.. 2023. 5. 19. [TIL 2023.05.15] git에 대하여 / 팀프로젝트 (소개페이지 만들기) 💻오늘 배운 내용 Git이란? 팀프로젝트 -우리팀 소개 페이지 만들기 GIT 명령어 기반의 인터페이스, CLI(Command Line Interface) 특강을 들으며 앞으로 무수히 마주하게 될 git을 알아봤다. 자주쓰는 CLI 명령어 pwd | 현재 경로 확인 절대경로 | 전체경로 (처음부터 현재까지 모든 경로) 상대경로 | 현재 경로 기준 ('.'으로 나타낸다/'..'은 상위경로) ls -al | 현재 경로의 숨김 파일 및 폴더까지 모두 조회 (앞에 '.' 붙으면 숨김파일) ls | 현재경로의 파일 및 폴더 조회 clear | vash창 클린하게 cat | 파일내용출력 cd | 경로로 이동하기 '..' 상위디렉토리 / '.' 현재디렉토리 / '~' 홈 touch | 비어있는 파일생성 🌟vi 편집기 .. 2023. 5. 19. 이전 1 2 3 4 다음
