본문 바로가기

분류 전체보기

 (134)
2021-07-06 :: 메뉴와 모달 만들기2 모달 만들기 workspace.tsx 팝업, 사용자 초대기능 추가 fetch한 자신의 데이터 안에 workspace에 대한 정보도 저장 해 두어, 하나로 처리한다. import의 as, 비구조화 할당의 : 기호를 사용해 변수 이름을 사용자 지정할 수 있다. 백앤드 개발자가 전송하는 데이터에 대한 타이핑 역시 해준다. 브라우저의 dev툴에 리렌더링 시 하이라이트 여부에 대한 체크박스가 있다. 나중에 최적화할 때 참고할 자료가 된다. 워크스페이스 추가 모달; 해당 코드는 workspace 컴포넌트 안에 있다. show props에 대항하는 isOpen state를 둔다. 데이터를 다루는 사람이 백앤드이기 때문에 데이터에 대한 권한 자체는 백앤드가 더 크다. 모달은 전체 팝업 창처럼 가운데 뜨는 페이지를 의미..
2021-07-05 :: React Native 함수 컴포넌트와 리액트 훅 04-1 리액트 훅 맛보기 기존 클래스 컴포넌트를 구현할 때의 복잡함을 덜고자 컴포넌트를 함수 형태로 만들 수 있게 하였다. 또한, 함수 컴포넌트가 어떤 값을 유지할 수 있도록 새로운 개념의 데이터 캐시 시스템을 만들었다. 그리고 개발자로 하여금 이 새로운 데이터 캐시 시스템을 쉽게 사용할 수 있도록 접두사 use로 시작하는 여러 개의 API를 제공하며, 이 API를 리액트 훅 함수라고 이름 붙였다. 클래스 컴포넌트는 너무 많은 기능이 숨겨져 있고, 라이프사이클 매서드 역시 복잡하다. 이를 극복하고자 리액트 훅이 탄생했다. 리액트 훅을 사용하여 어떤 컴포넌트를 구현한 다음 구현 로직을 커스텀 훅으로 만들면 비슷한 기능이 필요한 다른 컴포넌트를 구현할 때 그냥 가져다 쓰면 된다. 리액트 훅 사용시 주의해야..
2021-07-05 :: React Native 개발환경 + 기본 01 리액트 네이티브 개발 환경 갖추기 모바일 앱 개발에서 네이티브라는 단어는 운영체제를 만들 때 사용한 프로그래밍 언어와 똑같은 언어로 만든이라는 뜻이다. 안드로이드는 자바로, iOS에서는 Objective-C로 만든 앱을 네이티브 앱이라고 한다. 리액트 네이티브는 크로스플랫폼 개발 프레임워크이며, 네이티브 파트와 자바스크립트 파트로 나누어진다. 브릿지 방식 안드로이드 앱은 자바로 구현된 안드로이드 프레임워크를, iOS 앱은 Objective-C로 구현된 iOS UIKit 프레임워크를 사용하여 만든다. 두 프레임워크 모두 'View'자가 들어간 많은 클래스를 제공한다. 리액트 네이티브는 웹 브라우저에서 자바스크립트 엔진 부분만 떼어 내어 자바스크립트 코드로 구현된 'View' 클래스를 네이티브 쪽 안드..
2021-07-04 :: 메뉴와 모달 만들기1 워크스페이스 만들기(gravatar) node에서는 app.tsx와 app폴더 안의 index.tsx를 거의 동일하게 처리한다. gravatar에서 랜덤으로 아바타를 만들어준다. github 이미지 프로필의 다양함과 같음. types용 패키지를 설치할 때, @types/packageName이런 식으로 할지 아니면 그냥 패키지만 다운받으면 되는가에 대해 npm 공식 홈페이지에 페키지 이름 옆에 DT라는 마크가 있으면 따로 설치를 해주어야 하고, TS라고 되어 있으면 설치해줄 필요 없다. 가끔 types를 지원 안하면 직접 typing 작업을 해주어야 한다. 이러한 작업은 typing이라는 폴더에 따로 작업해서 넣어둬야 한다. 워크스페이스 만들기(중첩 라우터) 페이지 간 공통인 부분이 layout이고 바뀌는..
2021-07-04 :: 로그인, 회원가입 만들기3 swr 활용법(optimistic ui) mutate revalidate()함수의 단점은 요청을 한번 더 보낸다. swr의 단점은 요청을 너무 많이 보낸다는 점. 그러므로 설정을 통해 요청을 조절해주어야 한다. 이 문제를 해결하기 위해 revalidate 대신에 사용하는 함수가 mutate이다. revalidate는 서버에 다시 요청을 보내서 데이터를 받아온다. mutate는 서버에 요청 없이 값을 변환한다. 로그인 로그아웃 할 때 값을 불러오고 업데이트하는 과정을 최적화 해보자. 이미 있는 로그인 정보를 그대로 활용하고 싶으면 mutate를 사용한다. mutate는 기존에 있는 데이터를 이용. mutate(res.data); mutate의 두 번째 인자가 서버요청을 통해 데이터 검증여부에 대한 설정이다..
프론트 비동기 작업 이해하기(feat. React) 프론트 단에서 데이터를 랜더링할 때, 데이터를 먼저 패치받아야 한다. 따라서 위의 작업은 비동기 방식으로 진행 되어야 한다. 자바스크립트에서 비동기 작업을 처리하는 방법에는 여러가지가 있다. 그 중 몇 가지 방법에 대해 설명하겠다. 콜백함수 function increase(number, callback) { setTimeout(()=> { const result = number +10; if(callback) callback(result); }, 1000); } increase(0, result => { console.log(result); }) 하지만 만약 비동기적으로 처리해야할 작업의 수가 많아진다면 어떻게 될까? 작업의 수만큼 콜백의 깊이가 깊어지고 가독성이 매우 나빠지게 될 것이다. 우리는 이러한..
2021-06-28 :: 로그인, 회원가입 만들기2 로그인 페이지 만들기 리액트 라우터(react-router-dom)에서 {Link}라는 컴포넌트를 가져와서 테그로 사용한다. SPA에서는 Link를 사용한다. 기존 는 새로 고침이 발생한다. 화면 깜빡이 발생하며 기존 state가 손실된다. 가장 쉬운 로그인 구현 방법은 백앤드 서버 재실행이다. 혹은 브라우저에 저장되어 있는 로그인 정보를 삭제하면 된다. 개발자모드 application 탭에 가서 쿠키나 세션가서 로그인 정보(passport에서는 connect.sid)를 삭제해주면 된다. CORS에러를 백앤드에서 해결한 경우 여전히 cross origin통신이므로 option 요청이 발생한다. 또한, proxy 서버를 사용하지 않는 경우 api 통신 경로에 http://localhost:3000 이거 다..
2021-06-28 :: github관련 작업들 github Readme.md 마크다운 문법 https://hongsii.github.io/2017/06/01/How-to-Write-with-Markdown/ 마크다운 문법 마크다운 문법 숙지 hongsii.github.io slack github 연동하기 https://sepiros.tistory.com/37

티스토리툴바