TIL/멋쟁이사자처럼 FE스쿨 2기
-
Firebase v9로 이메일 로그인, 회원가입 기능 구현하기TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 7. 4. 17:07
최근에 파이어베이스가 v9로 업데이트하면서 문법이 많~이 바뀌었다고 한다. 그래서 새로 업데이트된 버전으로 로그인, 회원가입 기능을 구현해보는 시간을 가졌다. [과정 개요] - cra 생성, npm i firebase - 파이어베이스 홈페이지에서 프로젝트 생성 - 콘솔에서 앱 등록 - firebase SDK 복붙 - src폴더에서 fBase.js생성 - app.js에서 fBase.js에서 생성한 authService 임포트 후 authService.currentUser 값을 useState를 이용해 isLogin에 할당 - env 파일 생성하여 환경변수 설정 후 fBase.js에서 process.env 붙여서 값 숨기기 - Router.js(HashRouter import), Auth.js, Main.j..
-
[Day 40] 알고리즘- 몸풀기 & 스택TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 26. 23:00
기다리고 기다리던 알고리즘 수업.. 아직 배열 메소드들이 익숙하지 않아 더욱 어려웠던 것 같다.. 메소드 많이 써보면서 연습하기...! //빈 배열 만들기 Array(10) //0으로 채우기 Array(10).fill(0) //1부터 100까지의 배열 Array(100).fill(1).map((value,index)=>value+index) //1부터 100까지 숫자 중 8이 몇 개? (Array(100).fill(1).map((value,index)=>value+index)+'').split('8').length-1 // https://codingdojang.com/scode/408?langby=javascript#answer-filter-area // 1차원의 점들이 주어졌을 때, 그 중 가장 거리가..
-
[Day 35] JS 클로저 활용 & ClassTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 18. 23:55
클로저를 이용한 모듈패턴, 사용자 정의 타입 패턴, 혼합 패턴 1. 모듈패턴 function Person(){ let age=15; //외부에서 접근할 수 없는 값 return { getAge: function(){ return age }, setAge: function(updatedAge){ age = updatedAge } } } const person = new Person(); console.log(person.getAge()); //15 console.log(person.age);//undefined person.setAge(40) console.log(person.getAge());//40 2. 사용자 정의 타입 패턴 function Person(){ this.age=13; } Person.p..
-
[Day 34] JS 객체지향프로그래밍; 생성자함수, 프로토타입, 객체 상속TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 17. 23:36
본 내용으로 들어가기 전, 나의 todo list 1. 오늘 저녁에는 부대찌게를 끓여 먹겠다.삭제 2. 후식으로 슈팅스타를 먹겠다.삭제 3. 자기 전에 반드시 내일 아침 메뉴를 생각해두겠다.삭제 preventDefault() stopPropagation()의 차이에 대해 코드로 간단 정리~ 생성자함수(Constructor)에 대해 이전에 포스팅한 글이 있다:) https://daheejo.tistory.com/45?category=1258675 [JS] Constructor Function *freecodecamp 를 기반으로 작성하였다. Constructor Function 컨스트럭터(Constructor)는 새로운 객체를 만드는 함수이다. 이것은 새로운 객체에 속하는 프로퍼티나 기능을 정의한다. fu..
-
[Day 33] JS 로 만드는 3D 캐러셀TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 17. 22:01
https://daheejo.github.io/FrontendSchool_2/carousel/index.html Today's Color: 오늘 당신에게 맞는 색깔은? What's the color of the day? STOP REPLAY daheejo.github.io 일단 만들어본 3d 캐러셀! 계속 회전하는데, 버튼으로 조정할 수 있는 캐러셀을 만들어보고자 했다. (근데 아직 버튼 기능과 카드 뒷면 기능은 미완이다) css에 키프레임 애니메이션을 적용하였는데, 문제는 가운데 정렬한 캐러셀이 애니메이션만 적용하면 자꾸 가운데를 벗어나곤 했다 ㅠ 그래서 멘토님께 여쭤본 결과, @keyframes movingCarousel { from{ transform: translate(-50%, -50%) rot..
-
[Day 31] JS DOM & 이벤트TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 12. 23:16
DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 한다. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 한다. 돔 트리에 접근 document.getElement~ document.querySelelector(All)~ (*querySelector() 는 코드 초단에만 사용하는 것이 좋다. 실행 시 코드 전체에서 요소를 찾아 실행하기 때문에 메모리 효율이 낮고 코드처리 속도가 느리다.. 그래서 함수 안에서 반복적인 사용은 지양된다.) 돔 제어 1. 이벤트 삽입 .addEventListener() 2. 클래스 제어 .classList.[add/remove/toggle/contains] 3.요소 제어 document.creat..
-
[Day 29] 함수 & call by valueTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 11. 01:46
원래 모르는 내용 위주로 슥샥 정리하는 식으로 TIL을 적었지만, 자스 진도 들어간 이후로 익숙하지 않은 내용이 점점 많아지기에.... TIL의 내용이 점점 부실해져가고 있는걸 체감한다...ㅜㅜ 나의 일기장(그만큼 막쓰는)인 걸 인정하고..ㅎ 이제 배운 내용은 그냥 핵심 코드만 쏙쏙 기록하는 식으로 간략히만 적는 방식으로 바꾸려고 한다..! 함수를 배우고 푼 오늘의 과제 //화살표함수를 그냥 함수로 바꾸기 let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let newData = arr.map(function(a){ a.map(function(n) { return n*2 }) }) //평균 구하는 함수 만들기 let data = [10,20,30,40]; function a..
-
[Day 28] 3번째 스프린트 회고 & JS 반복문 - for, whileTIL/멋쟁이사자처럼 FE스쿨 2기 2022. 5. 10. 01:56
2주마다 돌아오는 스프린트 회고! 벌써 세번째 회고시간을 맞이했다 +.+ 오늘 회고시간의 주제는 '똑똑한 토이프로젝트 선정과 확장 방법'이었다. 토이프로젝트.. 막상 시작하려고하면 제일 먼저 드는 고민은 '뭘 하지...?' '어떻게 구현하지...?' '어디까지 구현하지...?' 등이 있었다ㅠ 오늘 이 고민들에 대한 해답을 찾기 위해 메이커준님께서 다양한 질문들을 던져주셨는데, 일단 내가 흥미롭게 느끼는 도메인을 찾고, 내가 가진 기술을 활용하여 일단은 최소한의 핵심 기능만 갖춘 버전을 만드는 것이 핵심이다. 저번에 종찬님과 첫 수업 때 만든 투두리스트 과제에서 단순히 마크업과 css만 해놓고 자바스크립트 기능은 넣지 않았는데, 오늘 시간을 계기로 자바스크립트, 더 나아가 리액트를 첨가해 좀 더 고도화 해..