React
React 에서 라이브러리 없이 이미지 슬라이드 구현하기
React 에서 라이브러리 없이 이미지 슬라이드 구현하기
2021.12.13다이나믹 한 이미지 배열 사이즈를 슬라이드로 만들기 서버에서 이미지 URL 이 담긴 배열을 data 로 받아 이미지 슬라이드로 만드는 예제 입니다. 슬라이드를 만들기 위해서는 3개의 div 태그가 필요합니다. container main 이 전체를 감싸는 wrapper 이고 이미지 전체의 길이를 담당합니다. wiper inner 태그는 하나의 이미지를 보여주는 구간 입니다. .swiper-container-main { // width: 300vw; 동적으로 구현할 것임 transition: transform 0.5s; } .swiper-inner { width: 100vw; display: flex; } .swiper-inner img { width: 100%; } .non-scroll { overflow..
Typescript + Next.js 에서 Test 환경 설정하기
Typescript + Next.js 에서 Test 환경 설정하기
2021.12.04조금씩 덩치가 커져가는 프론트 엔드 환경에서 이제 테스트 코드는 선택이 아닌 필수가 되어 가고 있습니다. 그렇다 보니 end to end 테스트 unit 테스트 같은 많은 테스트 가 쏟아지고 있는데요 오늘 설정 할 환경 설정은 unit test 입니다. Jest + Enzyme 조합을 사용 해서 테스트를 해볼 예정입니다. Jest + React Test Lib 을 더 많이 사용 하시는 것 같지만 저는 공부 목적으로 Enzyme 을 선택 하였습니다. Enzyme 과 rtl 의 차이점이 궁금하신 분은 아래 블로그를 참고해주세요 https://medium.com/xebia-engineering/react-testing-library-rtl-vs-enzyme-14b12b4136ed React-Testing-Li..
Firebase 로 소셜로그인 연동하기
Firebase 로 소셜로그인 연동하기
2021.08.15Firebase 로 Google 과 Github 로그인을 연동해보자 Feat(React) https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 제일처음 필요한것은 firebase google console에 오셔서 project를 만들어야 합니다. 앱을 다 만드셨다면 Firebase 의 Authentication 기능을 활성화 해줘야 합니다. Project Overview 로 오셔서 Authentication 을 눌러줍니다. 사용하고싶은 Provider 를 Disabled 에서 Enabled 로 활성화 해야합니다. Google Auth 활성화 구글은 Proj..
React 로 Youtube api 연동하기
React 로 Youtube api 연동하기
2021.08.14Youtube api key 생성하기 https://developers.google.com/youtube/v3 YouTube Data API | Google Developers Add YouTube features to your application, including the ability to upload videos, create and manage playlists, and more. developers.google.com Getstarted 를 누르신다음 Goole Developer console 에 들어 오신다음 API 및 서비스 사용 설정으로 이동합니다. Yotubue Data Api v3 를 선택해주세요 완성 하셨다면 사용자 인증 정보로 들어 오신다음 API key 를 복사해주세요 ! Rea..
React 에서 서버 없이 인스타그램 API 연동하고 피드 가져오기
React 에서 서버 없이 인스타그램 API 연동하고 피드 가져오기
2021.08.08들어가며 제가 이글을 쓰게 된 이유는 Facebook dev가 정책이 바뀌면서 유효한 redirect url 에대해 Https 만 허용하였고 개발하는 과정에 있어서 로컬에서 굉장히 삽집을 많이 했습니다.. 더이상 삽질 하지 않기 글을 작성합니다. 페이스북 Dev 에서 앱 만들기 https://developers.facebook.com/ Facebook for Developers 비즈니스, 크리에이터 및 사용자의 Instagram 경험을 개선할 수 있는 도구를 개발하세요. developers.facebook.com 로 들어오셔서 앱 만들기를 선택합니다. 유형은 본인의 앱에 맞게 선택하시면 됩니다. 앱을 다 만드신뒤 대시보드로 들어오셔서 인스타그램을 추가해주셔야 합니다. 추가 해주셨다면 Instagram 기..
React 주요 명령어 알아보기
React 주요 명령어 알아보기
2021.07.19Https 로 리액트 실행하기 mac: HTTPS=true npm start window: set HTTPS=ture && npm start build 하기 npm run build 명령어로 정적 파일을 생성한다. 로컬에서 정적 파일로 웹서버를 띄워서 확인하기 npx serve -s build serve 패키지는 노드 환경에서 동작하는 웹 서버 애플리케이션이다. 정적 파일을 서비스 할때 간단하게 사용하기 좋음 test npm test npm test는 watch 모드로 동작하고 있기 때문에 테스트가 성공하는 것을 바로 확인할 수 있다. CI 와 같이 watch 모드가 필요없는 환경에서는 명령어로 테스트 코드를 실행한다. Mac CI=true npm test Window set "CI=ture" && np..
react 로 만드는 트위터 클론 코딩 - 7(Chorme)
react 로 만드는 트위터 클론 코딩 - 7(Chorme)
2021.02.22chrome.google.com/webstore/category/extensions Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com 크롬 웹스토어 를 들어가 리액트에 도움되는 Dev Tools 를 설치합니다. react라고 검색하시고 React Developer Tools 를 설치합니다. 설치가 완료되면 Components 와 Profiler 가 생성됩니다. 설치하는 김에 Redux도 추가합니다. Redux를 사용하지 않으시는분들은 설치 안하셔도 됩니다.
react 로 만드는 트위터 클론 코딩 - 6(더미데이터 로그인)
react 로 만드는 트위터 클론 코딩 - 6(더미데이터 로그인)
2021.02.22로그인 회원가입 Button 에서 submit 이 발생하면 Form 에서 onFinish 가 발생합니다. const onSubmitForm = useCallback(() => {}, []); onFinish 는 자동으로 e.preventDefault() 가 적용이 되어 있습니다. 그래서 따로 해주실 필요가 없습니다. const LoginForm = ({ setIsLoggedIn }) => { const [id, setId] = useState(''); const [password, setPassword] = useState(''); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const onChangePassword = u..
react 로 만드는 트위터 클론 코딩 - 5 (로그인폼, 리렌더링)
react 로 만드는 트위터 클론 코딩 - 5 (로그인폼, 리렌더링)
2021.02.22아직 백엔드 서버가 없기 때문에 로그인 폼을 만들고 더미데이터를 이용하여 로그인을 하겠습니다. import React, { useState } from 'react'; - ./components/AppLayout.js const AppLayout = ({ children }) => { const [isLoggedIn, setIsLoggedIn] = useState(false); 상태를 저장할수 있는 isLoggedIn 이라는 걸 만들어 줍니다. {isLoggedIn ? : } {children} Made By hajongyn Login 이 되어있을땐 프로필을 보여주고 로그인이 안되어있으면 로그인 폼을 보여줍니다. 그리고 UserProfile.js 와 LoginForm.js 파일을 AppLayout.js ..
react 로 만드는 트위터 클론 코딩 - 4 (반응형 그리드)
react 로 만드는 트위터 클론 코딩 - 4 (반응형 그리드)
2021.02.21메뉴 아이템에 해시태그 를 검색할 수 있는 Input 태그를 넣어줍니다. import { Menu, Input } from 'antd'; 버튼이 위에 딱 달라붙어 있어서 버튼의 색상을 변경하고 중간으로 배치하기 위해서 수정합니다. 다음은 그리드를 사용하려고 합니다. antd 에서는 Row 와 Col 이라는걸 지원합니다. import { Menu, Input, Row, Col } from 'antd'; 보통 CSS 디자인을 하실때 크게 2분류로 나뉘는데 반응형과 적응형 반응형: 모바일 부터 시작해서 데스크탑 까지 점점 크기를 늘려가며 크기에 맞게 컴포넌트를 배치 적응형: 모바일 따로 태블릿따로 데스크탑 따로 어떤걸 선택하시든 모바일 부터 디자인 하는걸 추천드립니다. import React from 'rea..
react 로 만드는 트위터 클론 코딩 - 3 (Antd, Styled Component)
react 로 만드는 트위터 클론 코딩 - 3 (Antd, Styled Component)
2021.02.21react 에는 미리 컴포넌트에 CSS 스타일을 적용한뒤에 사용하기 위한 Styled Component 라는 기능이 있습니다. 이와 유사한 것으로는 Emotion 이라는게 있습니다 ZeroCho 님의 강의를 듣는도중 실무에서 굳이 고르자면 Emotion을 더 추천하신다고 하네요 서버 사이드 렌더링에서 더유리하다고 하셨습니다. emotion.sh/docs/introduction Emotion - Introduction Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer exper..
react 로 만드는 트위터 클론 코딩 - 2
react 로 만드는 트위터 클론 코딩 - 2
2021.02.19저번시간에 이어서 이번시간에는 각종 page를 만드는것부터 시작하겠습니다. 저는 회원가입 페이지와 프로필 페이지를 만들었습니다. -signup.js const SignUp = () => { return 회원가입 } export default SignUp; -porfile.js const Profile = () => { return 내 프로필; }; export default Profile; $npm run dev 를 하시면 localhost:3000 에서는 index.js 가 렌더링 되고 localhost:3000/profile 에서는 profile.js 가 렌더링 됩니다. pages 폴더 안에서 하위 폴더도 생성이 가능합니다 about 이라는 폴더를 만들고 제이름으로된 js 파일을 만들겠습니다. -pa..