개발새발 로그

1. 소스코드의 타입 종류 4가지는? - 전역 코드 -> 전역 실행 컨텍스트 - 함수 코드 -> 함수 실행 컨텍스트 - eval 코드 -> eval 실행 컨텍스트 - 모듈 코드 -> 모듈 실행 컨텍스트 2. 자바스크립트 엔진은 소스코드를 2개의 과정으로 나누어 처리한다. 이에 대해 설명하세요 - 소스코드의 평가와 소스코드의 실행 과정으로 나누어 처리한다. - 평가 : 선언문만 먼저 실행, 실행 컨텍스트 생성, 생성된 변수나 함수 식별자를 키로 만들어 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다. - 실행 : 소스코드가 순차적으로 실행된다. 소스코드에 필요한 정보(변수나 함수의 참조)를 실행 컨텍스트가 관리하는 스코프에서 검색해 취득한다. 3. 실행 컨텍스트가 어떻게 평가되고 실..

오랜만에 TIL을 쓰게 되었다. 너무 바쁜 나머지 밀린 TIL이 너무 많다...히히 오늘부터 다시 배운 것들을 정리하고, 어려웠던 부분을 적어놓으면서 다시 실수하지 않도록 할 것이다. 📝오늘 배운 것 1. 검색어 추천 기능(API로 기능함) 2. 검색기능(API로 기능함) 3. 상,하 방향키로 검색어 추천 텍스트를 고르는 기능(변수 cursor 값 이용) 4. 너무 잦은 API요청은 SessionStorage 이용 5. 다바운싱 기법 모듈 사용 💡알게 된 것 1. 검색어 추천 기능을 배우면서 프론트 쪽에서 구현하지않고, 서버를 통해 API 요청으로 가능하다는 점을 알게 되었다. - 나는 원래 검색어 추천기능은 프론트쪽에서 모든 검색어 데이터를 들고와서 예전에 배운 트라이를 이용하는 것인가 생각했는데 서버..

📝오늘 배운 것 1. API 요청에서 limit와 start을 활용해 데이터를 누적해서 불러오는 방법 2. isLoading 변수 활용 - API요청을 여러번 하는 버그 해결 3. 총 데이터 갯수를 이용해서 모든 데이터를 불러왔다면 API요청을 그만두는 방법 4. 더보기 버튼으로 데이터 불러오는 방법 5. 스크롤 이벤트를 이용한 무한 스크롤 방법 6. 디바운스 기법과 쓰로틀링 기법 7. 스크롤 이벤트가 계속해서 발생하는 문제를 쓰로틀링 방법으로 해결하는 방법 8. InterSection Observer 기능 9. 이미지 렌더링이 되기 전에 observe가 되는 현상 해결 방법 10. 현재 렌더링 된 이미지를 제외하고 새로운 데이터만 렌더링하는 방법(스크롤이 초기화 되지 않음) 💡중요하다고 생각하는 것 1..

한국에 서버가 있는 vercel로 배포해보자 vercel도 기본사용자는 공짜다! 1. 로그인을 한 후에 자신의 repository에서 배포하고싶은 repository를 선택하자 아래 프레임워크 설정은 해당 프레임워크의 빌드환경을 자동으로 만들어주는데 현재는 별도에 프레임워크가 없기때문에 Other을 선택한다. 또한 빌드옵션, 환경변수 다 안쓰기때문에 넘어간다. 마지막으로 Deploy를 누르면 아래와 같이 배포가 완료된다! History API 사용으로 인한 SPA 404에러 해결하기! (fallback) 하지만 만약에 이전 포스팅과 같이 SPA를 만들기 위해 history API를 사용했다면 url 경로에 index.html이 없어 생기는 404에러를 예외로 처리해줘야한다. 해결 방법은 구글링으로 검색하..

배포가 간단하고 쉬운 장점이있다. https://www.netlify.com/ Scale & Ship Faster with a Composable Web Architecture | Netlify Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now! www.netlify.com netlify는 기본적으로 깃허브 repository와 연동으로 올린다. 그래서 깃허브로 로그인하고 내 repository에 있는 프로젝트를 바로 배포할 수 있다. 이거는 빌드가 있는 경우의 세팅이다. 추후에 알아보자 환경변수나 별도의 ..

일정 트래픽 이상이 될 때 비용이 생긴다. 작은 규모의 프로젝트를 올릴 때 유용하다. 1. 프로젝트 만들기 2. 구글 애널리틱스는 데이터분석기능이므로 스킵해도됨 3. Hosting 탭 4. CLI를 이용해야함 5. npm install -g firebase-tools 6. firebase login - 크롬창에서 구글 로그인하면됨 7. firebase init - firebase.json 생성 - 아래처럼 옵션 설정해야함 SPA를 위한 설정인데 url경로가 아까처럼 에러가 생기면 index.html로 돌릴거냐고 묻는 것이다. 우리는 필요하니까 yes로 한다. github과 연동해 github가 업뎃되면 자동으로 업뎃하는 기능인데 필요없으므로 NO를 한다. 아까 설정했던 rewrite 확인(404에러 처리..

정적블로그와 같은 것을 깃허브 페이지로 많이 만든다. https://pages.github.com/ GitHub Pages Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live. pages.github.com 기본적인 정직인 사이트를 올리게 적당하다. 두 가지 방법이 있다. 1. 레포지토리의 이름을 " ".github.io로 작성하는 방법 2. gh-pages라는 브랜치를 따로만들어서 배포하는 방법 브랜치 이름을 꼭 gh-pages로 해야한다. gh-pages 모듈을 이용해야함 https://www.npmjs.com/package/gh-p..

hash bang이나 단일 페이지만 있는(url이동이 필요없는) 프로젝트는 상관이 없지만 history API 기반의 SPA를 배포하려면 해당 서비스에서 404 에러에 대해 처리할 수 있는 옵션이 필요하다. SPA로 하면 index.html을 한 개인데 여러가지 경로로 오기 때문에 해당 경로에 해당하는 index.html이 없어서 404에러가 나는 상황을 대응해야한다. 서버에서 직접 호스팅하기 서버 업체한테 서버를 빌려서 그 서버에다 올려서 사용자들이 쓸 수 있게하는 것 가장 난이도가 높은 편 인프라 지식이 필요 하지만 이걸 알아야 다른 배포서비스를 사용했을 때 문제를 해결할 수 있다. EC2 구글 컴퓨터 엔진 Azure 네이버 클라우드 플랫폼 cafe24 iwinV Oracle ...등등 많다. 매달 ..