Frontend

코드를 짜다보면 비동기함수를 동기처리하여 순차적으로 실행시켜야할 일이 생기기 마련이다. 내가 구현하려했던 동작은 이거였다. //timeout 완료 (1초뒤...) //timeout 완료 (1초뒤...) //timeout 완료 (1초뒤...) //하이 반복문으로 짤수도 있지만, 고차함수로 짜는것이 좀더 가독성이 좋다고 생각해서 처음에는 forEach문을 활용해서 비동기함수를 동기처리해주고자 했다. forEach내부에서 await의 문제 초기 코드를 비동기처리 함수를 기다렸다가 동기적으로 진행하기위해 이런식으로 짰다. const timeout = () => new Promise((resolve) => { setTimeout(() => resolve('timeout 완료'), 1000); }); Array.f..

https://blog.cau-likelion.org/ LikeLionCAU Blog this This 키워드동작은 나타내는 메서드는 자신이 속한 객체의 상태, 프로퍼티를 참조하고 변경이 가능해야 한다.그러기 위해서는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. blog.cau-likelion.org tistory, velog, 네이버 블로그등 동아리원들의 블로그를 모아 우리 동아리만의 피드를 제공하는 서비스를 제작했다. Next13으로 진행한 첫 프로젝트다. 배포는 vercel로 진행했다. 로직 1. rss를 받아온다. 2. 해당 rss를 rss-parser를 통해 파싱한다. 3. 불필요한 광고 태그를 제거한다. 4. content에서 제일 처음 만나는 img태그를 끌고와서 썸네일로 ..

https://www.youtube.com/watch?v=KMJE9FIDZl8&t=27s 멋쟁이사자처럼 11기에서 진행한 세션 실습내용입니다. 노션 https://energetic-palm-634.notion.site/JWT-da4634014dab4eb58445bf3bf1ed94c1?pvs=4

생애주기 카테고리 1. 마운트 2. 업데이트 3. 언마운트 라이프사이클 메서드 총 9개의 메서드로 구성 Will : 어떤 작업을 하기 전에 실행되는 메서드 Did : 어떤 작업을 완료한 후에 실행되는 메서드 마운트 Dom이 생성되고, 웹브라우저상에 처음 나타나는 것 과정 컴포넌트 생성 constructor 실행 getDerivedStateFromProps 부모로 부터 받은 props를 자신이 가진 state에 넣을때 사용하는 메서드 render componentDidMount 업데이팅 업데이팅은 다음의 네 경우에서 일어남 props가 바뀔때 state가 바뀔때 부모 컴포넌트가 리렌더링될때 this.forceUpdate로 강제 렌더링을 트리거할때 과정 업데이트 trigger getDerivedStateFr..

프로젝트에 소셜로그인을 구현했다. 로컬에서 테스트를 하고, 배포에서 실제 사용해야하니 로컬환경과 배포환경에서 동일한 작동을 구현하는데 문제가 생겼었다. 별거 아닌 문제였지만 이거 하는데 정말 하루는 온전히 갈아넣었던 것 같다. 배포된 백엔드에서 로그를 확인하며 진행해야했기 때문이다. (처음엔 심지어 이 생각도 하지 못했다.) 우리 문제는 redirect_uri였다. 그전에 우리 로그인 로직에 대해 설명하자면 우리 로그인 로직 로컬환경 구성 구글 client id와 redirect_uri, google_scope를 env형태로 관리해주었다. client_id와 google_scope는 변하지 않는 값이므로 따로 github에서 분기처리를 해주지 않았다. 배포환경 구성(Github action) .githu..

소셜로그인을 통해 토큰을 관리해야되는데, 어지러운 경우가 많다. access_token을 보냈는데 만료된 경우라면? => refresh_token을 통해 access_token을 갱신해야한다. 이를 위해 axios에서는 인스턴스 커스텀 방법을 제시한다. https://yamoo9.github.io/axios/guide/api.html#%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EC%83%9D%EC%84%B1 API | Axios 러닝 가이드 API 구성(configuration) 설정을axios()에 전달하여 요청할 수 있습니다. axios(config) axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred',..

두가지 페이지에서 효과는 다르지만, 동일한 로직으로 슬라이더를 구현할 일이 생겼다. 원래는 하나의 페이지마다 코드를 작성했지만, 반복되는 영역이므로 이를 Hook으로 처리해 주자. const useSlider = ( data: T[], duration?: number, moveScale?: number, opacity?: boolean, type?: 'spring' | 'linear' | 'tween' | 'inertia', ): [index: number, direction: number, increase: () => void, decrease: () => void, animationVariant: Variants]=>{ ... } 나중에 슬라이더의 애니메이션을 커스텀 할수 있도록, duration(지..

48 모듈 모듈이란 애플리케이션을 구성하는 개별적 요소로 재사용 가능한 코드조각을 말한다. 이는 파일 단위로 분리한다. 모듈이 성립하기 위해서는 모듈 자신만의 파일 스코프를 가져야 한다. JS와 모듈 파일마다 독립적인 파일 스코프를 가지지 않음 파일을 분리해서 script로 로드해도 독자적인 스코프를 가지지 않음 ⇒ 변수 중복 등의 문제 발생 CommonJS와 AMD진영해서 각각 해결 방안을 제시함 NodeJS는 CommonJS를 택하여 기본적으로 NodeJS에서는 파일별로 독립적인 파일 스코프를 가짐 ES6 모듈(ESM) 브라우저에서도 동작하는 모듈 기능을 추가함 브라우저script 태그에 type=”module”이라는 어트리뷰트를 추가하면, 해당 스크립트는 모듈로 작동한다. 다만, 일반적인 js파일이..

46 제너레이터와 async/await 제너레이터란? ES6에 도입됨 코드 블록 실행을 일시중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 일반함수와의 차이 함수호출자에게 함수 실행 제어권을 양도할 수 있음함수를 부른 함수는 함수 실행을 제어할 수 없다.함수 호출자가 일시중지, 재개가 가능하다는 것 제너레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 일반함수를 호출하면 제어권은 해당 함수에게 넘어간다. 제너레이터 함수는 함수 호출자와 함수 상태를 주고받을 수 있다. 제너레이터 함수를 호출하면 제네레이터 객체를 반환한다. 제네레이터 함수를 호출하면 함수 코드를 실행하는게 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환함 제너레이터 함수의 정의 function*로 선언하며, ..

45 Promise 비동기 함수는 동기함수가 끝나야 테스크 큐에서 콜스택으로 푸쉬에서 실행되므로, 반환 결과를 외부에서 확인할 수 없고, 상위 스코프 변수에 할당할 수도 없다. 따라서 비동기 함수의 처리결과에 대한 후속처리는 비동기함수 내부에서 수행해야한다. 에러처리의 한계 콜백 패턴으로 비동기 처리를 하면, 에러처리가 곤란하다. try{ setTimeout(()=>{throw new Error()}, 2000); } catch(err){ console.log(err); } 에러가 잡히지 않는다. 에러는 호출자 방향으로 전파된다. 즉, 콜스택에 위에 있는 함수에서 아래에 있는 함수로 전파된다. 이때 비동기 함수는 콜스택에 없으므로 에러가 전파되지 않는것이다. 프로미스의 생성 const promise=ne..