React
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..
typescript, react 로 만드는 slack
typescript, react 로 만드는 slack
2021.05.19front end setup 원하는 곳에 my-slack 폴더를 만들고 하위 폴더로 front 폴더를 만듭니다. 제일 처음 해줘야하는 것 npm init name 은 웬만하면 npm 에 설치한 패키지와 겹치지 않게 주의! react로 작업하기 때문에 다음과 같이 설치합니다. $ npm i react react-domtypescript 도 설치합니다. $ npm i typescript @types/react @types/react-domeslint 와 prettier setup $ npm i -D eslint $ npm i -D prettier eslint-plugin-prettier eslint-config-prettiereslint 와 prettier 를 연결 해줍니다. * rc setup .prett..
setup webpack dev server
setup webpack dev server
2021.05.19현재 hello world 문구를 수정하면 build 를 다시해야 반영이 됩니다. 매번 build를 하지 않게 hot reloading을 설정합니다. hot reloading hot reloading을 사용하기 위해서는 front 에서도 server가 필요합니다. $ yarn add webpack-dev-server -D npm 의 사소한 에러들이 있는데 아직 해결하지 못해서 yarn 으로 대체했습니다. 추후에 수정하겠습니다. webpack-dev-server 는 추후에 proxy server의 역활도 합니다. cors에러 문제 해결 등등.. $ yarn add webpack-cli $ yarn add -D @types/webpack-dev-server $ yarn add @pmmwh/react-refr..
make custom hook by react
make custom hook by react
2021.05.19front 폴더 아래 hooks 라는 폴더를 생성하고 useInput.ts 파일을 생성합니다. customhook 은 반복되는 상태 관리 코드를 줄이려고 할때 사용합니다. mkdir hooks && touch useInput.tsuseInput.ts import React, { useCallback, useState } from "react"; const useInput = (initalData: any) => { const [value, setValue] = useState(initalData); const handler = useCallback((e) => { setValue(e.target.value); }, []); return [value, handler, setValue]; }; export ..
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..
react 로 만드는 트위터 클론 코딩 - 1
react 로 만드는 트위터 클론 코딩 - 1
2021.02.19해당 프로젝트를 만들 폴더를 만들어 주신 다음 해당폴더로 이동 $ npm init -y 해당 package.json 파일을 생성합니다. 이 프로젝트에서는 next.js 를 사용할 것이고 next.js 는 9버전을 사용합니다. next.js 는 react를 사용한 프레임 워크 입니다. $ npm i next@9 "scripts": { "dev": "next" }, next를 설치하신 다음 package.json 에서 dev를 추가합니다. pages 라는 폴더를 만들고 index.js 파일을 만들어줍니다. const Home = () => { return ( Hello next ) } export default Home; index.js 파일 안의 내용을 다음과 같이 작성합니다. 보통 react에서 .jsx..
todo-app 2
todo-app 2
2021.01.11TodoTemplate.scss .TodoTemplate { width: 512px; // width 가 주어진 상태에서 좌우 중앙 정렬 margin-left: auto; margin-right: auto; margin-top: 6rem; border-radius: 4px; overflow: hidden; } .app-title { background: #22b8cf; color: white; height: 4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .content { background: white; } 레이아웃을 할 때 flex라는 display 속성을 자주 쓸 텐데요 코드에 있는 주석을..