전체 글89 [11주차 스터디]48장-모듈 모듈 모듈의 일반적 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리 이때 모듈이 성럽하려면 모듈 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 자신만의 파일 스코프를 갖는 모듈은 기본적으로 비공개 상태 즉, 모듈내부의 변수, 함수 객체 등 모두 캡슐화 되어 다른 모듈에서 접근할 수 없다. 그러나 모듈은 애플리케이션이나 다른 모듈에 의해 재사용 되어야 의미가 있음, 따라서 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능 하다. 이를 export라고 한다. export된 모듈은 다른 모듈에서 재사용 가능하고, 이때 공개된 모듈은 사용하는 모듈을 모듈 사용자(module consu.. 2022. 4. 8. [11주차 스터디]47장-에러 처리 에러 처리 try ... catch ... finally 에러 처리 구현하는 방법은 크게 두가지 예외 적인 상황이 발생 시 반환 하는 값을 if 문, 단축 평가, 옵셔널 체이닝 등으로 직접 확인하는 방법 에러 처리 코드를 미리 등록해 두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법 try ... catch ... finally 는 두번 째 방법 3개의 코드 블록으로 구성 try { // 실행 할 코드(에러가 발생할 가능성이 있는 코드) } catch (err) { // err 변수명은 다른 거 해도 됨 // try 코드 블록에서 에러가 발생하면 이 코드 블록의 코드가 실행 된다. // err에는 try 코드 블록에서 발생한 Error 객체가 전달된다. } finally { // 에러 발생과 .. 2022. 4. 8. [11주차 스터디]46장-제너레이터와 async / await 제너레이터와 async/await 제너레이터란? ES6에서 도입 된 제너레이터는 코드 블록의 실행을 일시 중지 했다가 필요한 시점에 재개할 수 있는 특수한 함수 입니다. 일반 함수와의 차이 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 이때 함수의 제어권을 호출자에게 넘기는 것을 양도(yield)라고 함 제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있다. 제너레이터 함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로 부터 상태를 전달 받을 수도 있다. 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다. 제너레이터 함수의 정의 제.. 2022. 4. 8. SSR CSR 차이 웹 개발을 공부하다 보면 SSR(Server Side Rendering) 과 CSR(Client Side Rendering)에 대해서 듣게 됩니다. 저는 리액트를 관심있게 공부하다 보니다 자연스레 CSR에 대한 이슈를 알게 되었습니다. CSR에 대한 이슈 때문에 Next 같은 SSR을 쉽게 할 수 있게 해주는 프레임워크도 사용되고 있습니다! CSR과 SSR의 차이를 정확하게 이해하고 어떤 장단점이 있는지 알고 있으면 도움이 많이 될 것 같아 정리해 봅니다. ✔ 브라우저 렌더링 과정 우선 브라우저 렌더링 과정을 이해 하고 있어야 합니다. 다음 게시물에 브라우저 렌더링에 관하여 정리 했습니다 2022.03.27 - [javascript/📖 study] - [8주차 스터디]38장-브라우저 렌더링 [8주차 스터.. 2022. 4. 8. react 무한스크롤 구현하기(react-intersection-observer, createAsyncThunk 사용) 리액트를 사용해 infinite scroll을 구현해 보았습니다. 그냥 구현하면 재미없으니까 얼마전에 공부한 Redux-toolkit을 활용해 비동기 요청을 보내 tmdb(https://www.themoviedb.org/?language=ko)에서 제공하는 openAPI를 사용해 영화 정보를 20개씩 불러오는 프로젝트를 만들어 보았습니다! ✔ 전체코드 https://github.com/HomieKim/React_PlayGround/tree/main/simple-infinite-scroll GitHub - HomieKim/React_PlayGround: 리액트 Toy Project 리액트 Toy Project. Contribute to HomieKim/React_PlayGround development b.. 2022. 4. 7. [10주차 스터디]45장-프로미스 프로미스 비동기 처리를 위한 콜백 패턴의 단점 함수 내부에 비동기로 동작하는 코드를 포함하는 함수를 비동기 함수라고 함 비동기 함수 내부에 비동기로 동작하는 코드가 있는 경우? -> 비동기 함수가 종료된 이후에 완료됨 즉, 비동기 함수 처리 결과를 외부로 반환하거나 상위 스코프 변수에 할당하면 기대한 대로 동작되지 않음 // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.send(); xhr.onload = () => { if (xhr.status === 200) { // ① 서버의 응답을 반환한다. return JSON.parse(xhr.response); } console.. 2022. 4. 2. 이전 1 2 3 4 5 6 7 ··· 15 다음
