GABOJOK 개린D

👩🏻‍⚖️ Facts 1. 토이프로젝트 (팀 소개 페이지) 끝 9.25 ~ 10.11 주제 : 팀 소개 페이지 자유롭게 만들것( JavaScript, Firebase ) 제출 완료 DONE : 파이어베이스 게시판 crud 완료, 게시판 글목록 페이지네이션 완료, 검색시 페이지네이션 완료 YET : input 태그 공백 문제 해결 못함. 비밀번호 보안성 부족. 2. JS 문법 종합반 수강 10.12 ~ 10.17 1회독 앞두고 있음. 😳 Feelings 1. 프로젝트 생각보다 제출이라던가 발표에 시간이 꽤 걸렸다. 조금만 더 완성도를 높이고 싶어서 욕심부리다가, 정말 급하게 제출을 해야했다. 그만큼 최선을 다한 프로젝트 였지만, 제출도 중요한데, 시간 분배가 미흡했다. 프로젝트에 관한 내용은 따로 회고로 ..

🚗 this의 바인딩 1. . call( ) .call() 은 즉시실행함수 이면서, this에 값을 바인딩 할 수 있는 애다. .call(this가 참조 할 대상, 해당 함수에 넣을 파라미터 값) 호출 주체가 없는 경우. var func = function (a, b, c) { console.log(this, a, b, c); //{ x: 1 } 1 2 3 }; func.call({ x: 1 }, 1, 2, 3); 호출 주체가 있는 경우 var obje = { gogo: function (a) { console.log(this, a); }, }; //this에 바인딩 하지 않는 경우 obje.gogo(2); //obj내부에 있는 애들 전체 호출 { gogo: [Function: gogo], toto: [..

🚗 this 1. 그냥 사용한다면 👉 브라우저 에서는 window / node.js 에서는 global 이라는 의미를 가지고 있다. 2. 일반 함수 내부에서 호출 👉 브라우저 에서는 window / node.js 에서는 global 이라는 의미를 가지고 있다. 3. script type = 'module' 배경의 일반 함수 내부에서 호출 👉 undefined 을 의미한다. 4. object 내의 함수 내부에서 호출 👉 해당 함수를 실행 한 바로 위 object 를 의미 5. 화살표 함수에서의 호출 👉 브라우저 에서는 window / node.js 에서는global 이라는 의미를 가지고 있다. 6. 생성자 함수 안에서의 호출 👉 새로 생성되는 intance(생성자 함수로 부터 생성되는 오브젝트) 를 뜻한다..

👀 obj의 자료를 이런식으로도 만들어 낼 수 있다. 변수에 값을 담는다. 새로운 변수에 obj을 만들고, 그 안에 전에 만들어둔 변수 이름을 넣어준다. 새로만든 obj.변수이름 을 출력하면 마치 객체처럼 해당 값이 출력된다. let p = "pop"; let j = "jaze"; let music = { p, j }; console.log(music.p); //pop 이런 방식을 우리는 단축속성명 이라고 부른다. 🚗 단축속성명 (property shorthand) 단축속성명은 변수가 미리 준비된 경우, 이를 활용하여 객체의 키와 값을 한번에 정의할 수 있다. 문자열, 함수, 객체 등 자료형에 상관 없이 적용이 가능하다. 아래 예시를 살펴보자. let country = "korea"; let member..

오늘은 javaScript 문법 강의를 들었다. 헷갈렸던 부분을 다시 되집기에 정말 좋았는데, 그동안 잘 사용하지 않았던 switch문에 대해 적어보려고 한다. if문과 비슷하게 조건에 해당하는 결과를 지정해 줄 수 있지만, 좀더 직관적이라고 느껴졌다. 일단 아래의 예시를 살펴보자. 🚗 switch switch문은 해당 값이 이런 경우~ 이렇게 해주고 멈춰줘~ 이렇게 사용된다. 배열의 요소들을 forEach문 이용해서 반복시키며 switch문을 사용해 보겠다. 배열에 담긴 값이기 때문에, 앞에 요소부터 순서대로 돌아간다. ❓break를 사용하지 않을 경우 ➡️ 계속 아래로 흘러서 해당하는 경우 이후의 모든 경우가 출력된다. let na = ["김", "박", "김", "선우", "남궁"]; na.forE..

keep _ 좋았던 부분. 지속하고 싶은 부분 😃 의사소통을 중요하게 생각한 부분 😃 비대면으로 진행되는 부트캠프 이지만, 최대한 의사소통에 주의를 기울이고 소통하려고 서로 노력했던 점이 정말 좋았다. 😃 현재 작업과정의 "진척도" 와 "문제 상황" 들을 정말 활발히 공유했던 부분 😃 현재 작업과정이 얼마나 진행되었는지, 현재 우리 팀원이 무엇을 하고 있는지 계속해서 체크하고, 만약 문제가 발생했을 경우, 화면공유를 통해 함께 코드를 살펴보고, 원인을 분석하고, 검색해 보며 함께 고민 했던 부분 또한 좋았다. 또한 해당 문제를 해결한 방법도 함께 공유하고, 참고한 블로그와 사이트들을 링크로 정말 활발히 주고받았다. 😃 서로 알고있는 좋은 정보나 지식들을 함께 공유하고 알려준 부분 😃 자신이 알고있는 좋은..

드디어 프로젝트가 끝났다. 정말 정리할 게 많지만, 회고에 따로 적으려고 한다. 🤠 오늘의 배움 일단 오늘 가장 크게 배운것 중 하나는 함수의 사용이다. 프로젝트를 하면서 정말 난잡하게 코드를 작성해놔서 내가 쓴 코드 조차 한번에 파악하기 어려웠다. 분명 재활용 할수 있는 같은 기능임에도 불구하고 함수로 묶어서 사용하는 것이 어려웠고, 반복문의 사용 속에 중첩 반복문, 그리고 그 안에 데이터베이스 호출 등 무겁고 어지러운 코드들로 작성했었다. 일단 프로젝트 진행중이라, 일단 기능 구현에 초점을 맞춰서 진행했는데, 진행이 되면 될수록 불편함을 느꼇다. 그러던 중 튜터님 께서 오셔서 보시고는 함수를 이용해서 기능별로 묶어서 사용해 보라고 조언을 주셧다. 예를 들면 1. 데이터를 불러오는 기능, 2. 이벤트가..

내일배움캠프 에서 토이 프로잭트를 진행중이다. 아직 다들 시작한지 얼마 안되었지만 열심히 머리 맞대고 만들고 있는데, 오늘은 게시판 글번호 기능이랑, 수정하기 기능을 만졌다. 게시판 글번호 기능 게시판에 페이지 네이션을 어찌어찌 완료 했다. 그런데, 그 기능을 완료하니까 게시판 글번호 기능이 작동되지 않았다. 글번호 기능을 구현하기 위해 이런 방법들을 시도해 봤다. ⭐️접근 방법 1.⭐️ 파이어베이스 문서 id값을 setdoc으로 설정해서 넣어준 후에, 그 값을 가져와서, +1 해준 뒤, 새로운 데이터의 문서 id 값을 +1 해준 값으로 넣어준다. 이 id 값을 이용해서 글번호를 넣어준다. 👉 setdoc으로 설정까지는 해줬는데, 이 루프를 만들 방법을 계속 고민했다. 그런데 지금 생각해 보면 훨씬 더 ..

Facts 1. 토이프로젝트 (팀 소개 페이지) 9.25 ~ 10.11 주제 : 팀 소개 페이지 자유롭게 만들것( JavaScript, Firebase ) 진행 상황 ⬇️ 게시판 기능 구현.(crud 완료. 페이지네이션, 조회수 기능, 글번호 기능, 검색기능 수정, 비번 기능 추가 예정) Feelings 게시판을 만드는게 생각보다 쉽지 않았다. 파이어베이스는 좀 쉬운 데이터 베이스로 알고 있는데, 처음 만드는 거라 쉽지 않았다. 버전에 따라 방법도 다양하고 지원하는 기능도 조금씩 달라서 많이 찾고 많이 시도해 봤다. 결과적으로 crud 기능은 잘 구현했지만, 페이지네이션은 정말 정말 어려웠다. 일단 어떻게든 구현을 해보고 싶어서 데이터를 배열에 담아서 그것을 쪼개서 보여주는 시도를 했었고, 잘 성공했다...

파이어 베이스에 저장한 데이터를 삭제하려면 어떻게 해야할까? 내가 원했던 기능은 현재 보고있는 게시글을 삭제버튼을 누르면 👉 해당 데이터가 삭제 된 후 👉 list 페이지로 넘어가는 거였다. 1. 가져온 데이터를 반복문을 통해 하나하나 가져와서, 원하는 값을 가져온다. //데이터 가져오기 let docs = await getDocs(collection(db, "board")); let query = window.location.search.substr(11); //가져온 데이터 반복문으로 하나하나 빼보기 docs.forEach((eachDoc) => { let id = eachDoc.id let which; let num = row["num"]; if (num === query) { which = id;..