본문 바로가기

분류 전체보기

 (76)
[TIL] 06 문자열 정리 typeof , length, concat, substr, slice, search, replace, split , boolean // 암시적(개발자가 의도하지 않았지만 자동으로 바뀐) 형 변환 // 문자 : string let str = 'hello world'; console.log(typeof str); //string let result1 = 1 + '2'; console.log(typeof result1); //string console.log(result1); //12 //문자열과 다른 데이터 타입이 더하기 연산자로 만나면 문자열이 우선시된다. let result2 = '1' + true; console.log(result2); //1true console.log(typeof result2);..
[TIL] 팀프로젝트 회고 프로젝트 명 : Stage 팀 소개 프로젝트 일정 : 12/21 - 12/27일 까지 온라인(ZEP) 회의로 진행 필수 작업 : [팀 페이지, 멤버 개인 페이지, 댓글 창 CRUD 구현, 각 멤버 페이지에서 뒤로 가기] 추가 작업 : 댓글 수정 작업, CSS 변경, 각 멤버 페이지 Top 버튼 추가 사용 기술 : HTML, CSS, JavaScript, jQuery, Bootstrap, Firebase, github - 댓글 수정하기 - 댓글 삭제하기 - Keep 팀원들과 현 상황을 서로 소통하고 공유하면서 해결하기 사소한 부분들 까지도 (git push/pull 할 때) 하겠다고 미리 말해주기 막히는 부분이나 모르는 부분이 있으면 팀원들에게 솔직하게 말하고 같이 해결해나가기 모르는 부분들 정리해보기 오..
[TIL] 4일차 막혔던 점 CSS에서 배경을 그라데이션을 주고 싶어서 linear-gradient를 썼는데, 화면에서 스크롤을 내리거나 댓글창이 하나 둘씩 더 만들어질 때 배경색이 이어지지 않고 끊기는 현상이 발생했다. 여기서 어디가 문제인지 구글링을 해보았는데 그래도 계속 제자리였다. * { margin: 0; padding: 0; } html{ height: 100vh; } body { width: 100%; background: linear-gradient(#e66465, #9198e5); } 어쩔 수 없이 다 건드려 봐야겠다는 생각을 했다. html로 width도 옮겨보고, height값을 body 태그로 내려도 보았지만 제자리였다. 그래서 하나 둘씩 주석처리하면서 해본 결과 * { margin: 0; paddi..
[TIL] 3일차 jQuery에 다양한 메서드들을 알게되어서 그 새로운 메서드 3가지를 여기에 정리해야겠다. text() : 선택한 요소의 텍스트 콘텐츠를 가져오거나 설정한다. 만약 값을 설정하려면 매개변수로 값을 전달하면 된다. 이건 텍스트 창! //textContent의 요소의 텍스트 설정하기 const textArea = $('#textContent p').text(); console.log(textArea); //출력 : 이건 텍스트 창! // #textContent 요소의 텍스트 설정하기 $('#textContent p').text('안녕하세요!'); // 화면에 안녕하세요! 로 바뀐다. find() : 선택한 요소의 하위 요소를 찾는다. 텍스트 창 코멘트 창 버튼 창 const container = $('#te..
[TIL]2일차 발생한 문제가 무엇인지? Firestore에 데이터를 추가하는 함수를 쓰려고 찾아보았다. 여태 async function을 쓸 때는 항상 await가 필요한 줄 알았는데 오늘 확실하게 정리해보려고 한다. async 함수를 선언할 때 await를 사용하지 않아도 상관없지만, 보통 async 함수를 사용하는 상황에서는 비동기 작업을 수행하고 그 결과를 기다리기 위해 await를 함께 사용하는 것이 일반적이라고 한다. async만 사용하는 경우 async 함수는 함수 내에서 await를 사용할 수 있게 해준다. 그러나 await를 사용하지 않아도 일반적인 함수처럼 동작한다. 이 경우에는 함수가 항상 Promise를 반환하게 된다. async function exAsync() { console.log("with..
[TIL] 1일차 🐣 배운 것 정리 오늘은 git과 github에 대해 배웠다. git을 깔고서 vscode에서 terminal를 이용하면 내 코드를 올릴 수가 있는데, 간단하고 편하게 코드를 이용해서 올릴 수가 있다. 나는 윈도우를 사용해서 vscode를 쓰고 있어서 꼭 터미널을 키면 + 버튼을 눌러 git bash로 먼저 바꿔주고 나서 입력해야한다. pwd print working directory 로 현재 내가 작업하는 폴더를 보여준다. 경로확인이 된다. ls & ls -a ls는 list를 말하고, ls -a 는 list all 의 약자로 숨겨져 있는 파일도 다 보여달라는 요청이다. cd change directory의 명령으로 내가 원하는 폴더로의 이동을 시켜준다. 참고로 cd ..
Firebase collection의 문서의 데이터를 가져와 사용하기 // Firebase firestore에서 're-movies' 컬렉션의 모든 문서를 가져오기 let docs = await getDocs(collection(db, 're-movies')); // 가져온 문서들을 반복하여 각 문서의 데이터를 사용하여 카드 생성 docs.forEach((doc) => { // 현재 반복 중인 문서의 데이터를 가져와서 'row'변수에 할당 let row = doc.data(); // 현재 문서에서 필요한 데이터를 추출 let image = row['image']; let title = row['title']; let star = row['star']; let comment = row['comment']; // 동적으로 생성된 HTML 카드 탬플릿 let temp_html ..
웹 페이지에서 입력된 데이터를 Firebase DB에 저장하는 코드 // 'makeBtn' 버튼이 클릭되었을 때 실행되는 함수 $('#makeBtn').click(async function () { //사용자가 입력한 값들을 변수에 저장 let image = $('#image').val(); // 이미지 URL let title = $('#title').val(); // 영화 제목 let star = $('#star').val(); //평점 let comment = $('#comment').val(); // 코멘트 //Firestore에 추가할 데이터 객체 생성 let doc = { image: image, title: title, star: star, comment: comment, }; // Firestore의 're-movies' 컬렉션에 데이터 객체 추가 awai..
관계형 데이터베이스 VS 비관계형 데이터베이스 사용 이유 기초 관계형 데이터베이스 비관계형 데이터베이스 [데이터 정리] 데이터를 표 형태로 정리해서 저장함. 각 표는 항목별로 정해진 규칙을 따라 데이터를 담고 있다. [자유로운 형태] 데이터를 훨씬 자유롭게 저장할 수 있다. 규칙이 덜 엄격하다. [정해진 규칙] 표 안의 데이터 형식과 관계가 정해져 있어, 마치 엑셀 시트처럼 각각의 행과 열이 정돈되어 있다. [구조적인 규칙이 없음] 표가 아니라 문서, key-value 쌍 등 다양한 형태로 데이터를 담을 수 있다. [SQL 사용] 데이터를 다룰 때 SQL이라는 언어를 사용한다. SQL은 구조적인 질문을 할 수 있게 해주는 언어이다. [NoSQL사용] NoSQL언어를 사용함. Not Only SQL의 약자로, 다양한 형식의 데이터를 다룰 수 있는 데이터베이스를 의미한..
[fetch] fetch 기본 예시 쉽게 풀어보기 `fetch`는 컴퓨터에게 다른 곳에서 정보를 가져오라는 하는 명령이다. 간단히 말하면, `fetch`는 우리가 인터넷에서 무언가를 찾을 때 사용하는 도구이다. 우리가 컴퓨터에게 "이 주소로 가서 정보를 가져와줘!"라고 말하면, `fetch`는 그 주소로 가서 정보를 가져오고, 우리가 그 정보를 활용할 수 있게 도와주는 것이다. 간단한 예제를 들어보자. fetch('https://www.exampleapi.com/data') .then(response => { return response.json(); // 서버에서 데이터가 도착하면 이 부분이 실행됨. //JSON 형식으로 변환하여 데이터 출력 }) .then(data => { // JSON 형식으로 변환된 데이터를 사용하여 다른 작업을 수행함 cons..

티스토리툴바