개발새발 로그

server Template HTML을 생성하는 주체가 서버였다.( 여러가지 조건과 로직에따라 HTML을 생성해서 내려주는 방식) 자바스크립트 없이 Form기반의 데이터를 전송 HTML은 서버에서 내려주고 브라우저에서 렌더링 인터렉션을 넣으려면 자바스크립트를 클라이언트에서 실행 뷰 로직이 서버에서도 구현되어야했고, 클라이언트에서도 구현되어야했다. 차라리 렌더링을 전부 클라이언트에서 하는 것은 어떨까? 브라우저 스택이 올라가면서 렌더링을 클리언트에서 해버리자 라는 것이 나옴 Client side Rendering - 브라우저 성능의 발전과 JS 스펙의 고도화로 렌더링을 cluent에서 모두 처리하자는 움직임이 등장 - API와 웹 애플리케이션이 완전히 분리 - 웹 애플리케이션은 HTML, CSS, JS만 ..

📝배운 것 1. 이벤트 델리게이션 기법(이벤트 위임) 2. 로딩 중 기능 3. 낙관적 업데이트 4. localStorage를 이용한 입력 값 자동저장 5. History API 6. SPA 7. 새로고침이나 뒤로가기에도 초기화되지않도록 historyAPI와 url에서 필요한 querystring값 가져오기 💡알게된 것 1. 이벤트 위임 방법 과정 - 1. 어떤 e.target이 되든 closest()를 통해서 상위 요소를 고정시킨다.(예를들어 무엇을 클릭하든 상위 li요소를 반환함) - 2. 상위요소가 있다면 그 요소의 dataset값을 불러온다(미리 dataset에 ID값과 같은 것을 지정해준다.) - 3. 그리고 target의 className을 가져와야한다.(예를 들어 삭제활동을 하는지, 아니면 토..

바닐라 자바스크립트를 공부하면서 선언형 프로그래밍적으로 생각하는 방법을 배우게 됐다. 이러한 형식을 맞춰서 프로그래밍을 하게 되니까 코드 가독성도 좋아지고, 다른 비슷한 코드를 리뷰했을 때도 잘 읽을 수 있어서 좋은 것 같았다. Todo 앱을 만들면서 순조롭게 기능을 이해하고, 상태가 어떻게 관리되어 컴포넌트간의 의존성을 없애는 것을 배웠다. 나는 Todo앱을 만들고 앱에서 상태관리라던지 컴포넌트간의 상호작용이라던지 그걸 그림으로 한번에 보고 싶어서 작성하고 있었다.. 코드를 다시 한번 보면서 각 기능들의 수행과정이나 컴포넌트가 가지는 상태들을 정리하는데 갑자기 이상한 점(?)이 생겼다. productOption이라는 생성자에서 콜백함수 onSelect가 있는데 onSelect가 실행되면 클릭한 데이터를..

📝배운 것 1. history API 2. hashbang 3. SPA 4. url routing 💡알게된 것 1. 세션 히스토리 - 브라우저에서 페이지 로딩을 하면 갖는 것 - 페이지를 이동할 때마다 쌓임, 이를 통해 뒤로가기시 이전페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능 2. pushState, replaceState pushState : 세션 히스토리에 새 url을 쌓는다 replaceState : 세션 히스토리에 새 url 상태를 쌓지 않고, 현재 url을 대체한다. 3. pushState, replaceState 이점 - 화면에 이동없이 url을 업데이트할 수 있게하는 함수들이다. - 실제로 이동이 일어나지 않지만 히스토리에는 쌓이거나 현재 url을 바꿀 수 있다. - ..

📝배운 것 1. fetch API 사용법 2. innerHTML 사용을 지양해야한다? 3. data 어트리뷰트를 사용할 때 주의점 4. API를 여러개 사용할때 서버의 도메인을 환경변수로 5. 중첩 fetch 6. Promise.all 사용 7. 방어코드(isArray사용, if($li) 8. 클릭한 target의 상위 부모를 찾는 closet() 함수 💡알게된 것 1. innerHTML을 사용하는 이유? innerHTML이 성능이 좋지않는 것은 사실이지만 성능이 안좋을 정도가 되려면 innerHTML 렌더가 1초에 수십번이 되어야한다. 그런데 웬만한 규모가 되지 않는한 innerHTML때문에 성능에 문제가 생기지않는다. 오히려 상태가 바뀌고 그것으로 화면이 바뀌는 것이 보장이 되는게 좀 더 버그가 덜 ..

📝배운 것 1. Promise 2. then 이용 3. Promise 내장함수 4. async await 5. fetch API 💡알게된 것 1.Promise는 콜백헬에서 어느정도 벗어날 수 있게 해준다. - Promise로 정의된 작업끼리는 연결할 수 있어 코드의 Depth가 크게 증가하지 않는다. 2. Promise 사용법 const promise = new Promise((resolve, reject) =>{ // promise 내부에서 비동기 상황이 종료될 때, resolve 함수 호출 // promise 내부에서 오류 상황일 때, reject 함수 호출 }); 3. Promise의 then내에서 promise를 return할 경우 이어진다. (promise chain) //promise의 the..

1. 자바스크립트는 강력한 객체지향 프로그래밍 능력을 지니고 있는 프로토타입 기반의 객체지향프로그래밍 언어 - ES6에서 클래스가 도입 2. 추상화의 정의? 3. 객체의 정의 - 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조 4. 객체 상태 데이터 = 프로퍼티, 동작 = 메서드 5. 프로토타입 기반으로 상속을 구현하면 이점은? ( ~~.prototype.get() ) - 자바스크립트는 프로토타입을 기반으로 상속을 구현한다. - 상속을 통해 불필요한 중복 제거 -> 코드 재사용 인스턴스를 생성할 때마다 동일한 메서드가 중복생성하고 모든 인스턴스가 중복 소유하는 것을 방지해줌 6. 프로토타입 원리 - 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입, 즉 상위 개체 역할을 하는 생..

📝배운 것 1. 모듈 사용법과 장점 2. 스크립트 src 방식을 모듈로 불러오는 방식으로 변경하는 방법 3. 비동기처리 4. 비동기[async]처리 하는 이유 (동기[sync]처리 방식을 쓰지 않는 이유) 5. 비동기 API 호출하는 방법 6. 작업 순서 생각하는 방법 7. XMLHttpRequest() 사용방식 💡알게된 것 1. API 호출하는 작업은 파일 하나에서 진행함으로써 코드 중복을 방지 - api.js 파일을 하나 만들어서 API 호출 함수를 하나씩 export해서 사용한다. 2. API로 받아온 데이터를 map으로 뿌릴 때 사용하는 join('')의 이유 - API로 데이터를 받아오면 마크업 뒤에 ,가 계속 붙는다. 3. API를 호출하기 전에 더미데이터를 직접 만들어서 데이터를 렌더링 해보..