KPT 회고 작성(A반 9조) 1. 한 주의 흐름 (1) 한 일 -전인국: CRUD코드를 이해하려 노력하고, 약간의 기능구현과 약간의 CSS를 구현하였다. -이재성: 로그인,회원가입 페이지 구성 및 기능구현 -윤준호: 메인페이지 구성 -박지수: CRUD 관련 코드를 공부하고약간의 CSS 부분을 구현 -송지현: 마이페이지 전체 내용 구성/유저별 작성글 모아보기 (2)feel:느낀점 -전인국: 자바스크립트 문법기반이 약해, 타인의 코드를 이해하고 그것을 수정하거나 응용하는 과정자체가 너무 버거웠다. 진부한 얘기겠지만 자바스크립트 문법지식을 열심히 공부해야겠다는 느낌이 들었고, 팀원분에게 console.log를 활용하는 방법과 여러 좋은 공부소스(source)를 제공받아 유익한 시간이었다고 느꼈다. -이재성:..
Frontend
자바스크립트만으로는 브라우저화면을 보여주거나, 네트워크를 전송하거나 컴퓨터에 있는 파일을 읽을 수 없다. 이러한 일을 하기위해서는 자바스크립트 밖에있는(런타임환경에서 제공해주는) 호스트객체가 필요하다. 호스트객체는 브라우저환경에서 브라우저가 제공해주는 API, 노드환경에서 노드가 제공해주는 API가 있다. 래퍼 객체(Wrapper Object) 객체가 아님에도 불구하고 객체에서 함수를 호출하는것처럼, 원시값에서 메서드를 호출할 수 있게 해주는것이 래퍼객체이다. 래퍼 객체(Wrapper Object)는 필요에 따라서 원시값을 사용할때만 한시적으로 관련된 빌트인 객체로 변환한다. Wrapper객체가 유용하니까 그냥 원시타입을 그때그때마다 Wrapper객체로 변환해주지말고, Wrapper객체를 항시적으로 사용..
얻게된 것 개발자되기 쉽지않겠다는 현실감각 => 나쁜거 아님.. 원래같으면 주말에는 좀 띵가띵가하자는 마인드였는데 이번주 주말에는 나와서 공부했다. console.log로 한줄한줄 내가 원하는 바가 정상적으로 작성되었는지, 에러가 나지는 않는지 확인하는 습관 다음주 계획 리액트 들어가기전 자바스크립트 최대한 공부해놓기
클래스(Class) 클래스란 생성자함수와 마찬가지로 동일한 부류의 속성과 행동을 가지고있는 객체를 생성할 수 있는 템플릿(청사진, 틀)이다. 클래스를 통해 객체지향 프로그래밍(Object-Oriented Programming)이 가능하다. 자바스크립트는 프로토타입(prototype)을 베이스로한 객체지향언어이다. 따라서 생성자함수를 통해 객체를 찍어내는 행위가 가능했다. class가 애초에 존재하지 않았지만 class를 사용하는 여타 객체지향 언어(JAVA, Python, C++…) 에 익숙한 사람들의 수요에 의해 ES6부터 새롭게 적용 되었다. 그럼에도 불구하고 자바스크립트는 프로토타입 중심 임에는 변함 없고, class 역시도 프로토타입을 기반으로 만들어진 것이다. (syntaticsugar…) 자바..
클래스(Class) 클래스란 생성자함수와 마찬가지로 동일한 부류의 속성과 행동을 가지고있는 객체를 생성할 수 있는 템플릿(청사진, 틀)이다. 클래스를 통해 객체지향 프로그래밍(Object-Oriented Programming)이 가능하다. 자바스크립트는 프로토타입(prototype)을 베이스로한 객체지향언어이다. 따라서 이미 생성자함수를 통해 객체를 찍어내는 행위가 가능했다. 자바스크립트에서 class는 ES6이전 존재하지않았지만, class를 사용하는 여타 객체지향 언어(JAVA, Python, C++…) 에 익숙한 사람들의 수요에 의해 ES6부터 새롭게 적용 되었다. class가 도입되었음에도 자바스크립트가 프로토타입 중심 임에는 변함 없고, class 역시도 프로토타입을 기반으로 만들어진 것이다. ..
오늘도 역시 튜터님의 코드를 이해하려고 대부분의 시간을 보냈다. 우선 문법기반이 약해, 전반적인 코드의 흐름순서는 이해가 갔지만 '한걸음밟으면 모르는 문법지식이 튀어나오는 코드'를 이해하려다보니 너무 힘들었다. 특히 데드라인이 정해져있는데 계속 제자리걸음이고 결과물은 없어서 부담감과 스트레스가 극심해 사실은 그만두고싶다는 생각이 하루에도 몇번씩 들던 며칠이었다.. 모르는 부분이 대부분인 코드에서"이건뭐에요 저건뭐에요 또 저건뭐죠" 식으로 튜터님이나 팀원들에게 물어볼수도 없고, 구멍뚫린 문법지식이 한두군데가 아니다보니, 구글링을 이용하려해도 정작 앨리스의 토끼굴로 빠지는 느낌이었다. 그러다 팀원분중 준호님이 잠시 코드리뷰를 해주셨는데 초심자의 입장에서 한줄한줄 설명을 해주시니, 확실히 혼자 찾아볼때보다 좀..
JS 자체 API인 FileReader라는 클래스로 reader라는 객체를 생성 readAsDataURL이라는 reader의 method를 통해 the file을 인자로 넣으면 file객체가 DataUrl로 변환 -> onloadend event. 데이터 변환이 끝났을 때 이 이벤트가 실행이 됨 localStorage 프로필 변경을 누르기 전까지는 프로필 사진이 바뀌지 않게 imgDataUrl을 임시 보관 -> downloadrul을 얻는 중간 과정이라고 생각 disabled = true 버튼 비활성화 -> 프로필 변경 버튼을 여러번 누르게 되면 불필요하게 서버에 요청하게 됨 프로필 이미지가 폴더(authService.currentuser.uid)에 파일(uuidv4)로 저장 uuid: -> 전세계 어느..
JS 클래스를 사용할때 클래스를 사용할 때 내부의 상태값을 숨겨두고, 외부에서 함수(메소드)만을 통해 상태를 업데이트하는 것. == 캡슐화 이 상태에서는 js파일이 전역화되었기때문에 counter.js에 포함된 함수를 main.js에서도 실행할 수 있고, counter.js에 적혀진 변수의 값을 main.js에서 변경할 수 있다. 이러한 상황은 에러에 치명적이라 모듈을 사용하는 것이 현명하다. 자바스크립트파일별로 각각 캡슐화하는 것 == 모듈 export default functionName()-> import functionName from '/pages/main.js'; export default는 메서드를 딱 하나만 가져오기때문에 import상에 이름을 바꿔줘도 상관이 없다. export defau..
