개발새발 로그

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을 가져와야한다.(예를 들어 삭제활동을 하는지, 아니면 토..

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

📝오늘 배운 것 1.컴포넌트 방식으로 생각하기 2. 컴포넌트끼리 데이터를 주고받아야할 때 의존성 없이 해결하는 방법 - 이벤트 콜백 3. setState로 상태 변환하기 4. Client Side에서 데이터를 저장하는 방법 2가지 5. Cookie 유효기간 지정방법 6. Cookie 사용시 주의 사항 7. Local Storage 사용법 💡알게된 점 1. Cookie 주의사항 HTTP 요청시 헤더에 쿠키가 같이 나가기 때문에 쿠키사이즈가 커지면 HTTP요청 크기도 커집니다. 사이즈에 제한이 있습니다. 여러가지 보안 취약점을 조심해야합니다. 2. Local Storage를 사용할 때는 setItem메서드를 사용하는 것이 권장된다. 3. Local Storage에 데이터를 저장할 때는 string만 넣을 수..

📝오늘 배운 것 1. 명령형 프로그래밍과 선언형 프로그래밍 💡알게된 것 1. 명령형 프로그래밍과 선언형 프로그래밍의 정의 선언형 프로그래밍 - 무엇을 해결해야 할지에 집중하고 해결방법은 컴퓨터에게 위임하는 방법 명령형 프로그래밍 - 문제를 어떻게 해결해야 하는지 컴퓨터에게 명령을 내리는 방법 2. 명령형 프로그래밍 보다는 선언형 프로그래밍을 지향해야한다. - 보기쉽고 코드가 간결하니까 3. 명령형은 순서대로 코드작성, 선언형은 고차함수 사용 👁‍🗨선언형 프로그래밍 예시 // ------------------------선언형 프로그래밍 방식. 4--------------------------- //버튼의 그룹을 만들어서 외부에서 개입할 수 있는 요소를 최소한으로 하는 독립적인 UI // 궁극적으로 이런 추..