9.9

본문 바로가기

🖐️

Hello, Tistory 🖐 more

⚡React

[React] 카카오 로그인 연동하기 전공 동아리 웹을 개발하고 있는데, 아직 백엔드의 역량이 Auth를 만들 정도는 아니어서 일단 카카오 로그인으로 대신하기로 했다. 다음에도 사용할 일이 있을 수 있으니 정리해두는 게 좋을 것 같아 작성한다. 1. Kakao developers에 내 애플리케이션 등록 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 추가하기 누르면 위의 팝업이 뜨는데 개인에 맞게 적으면 된다. 그리고 지금은 개발할 때 쓰이기 때문에 웹사이트 주소는 http://localhost:3000/ 으로 설정했다 참고로 지.. 댓글 0 2022.06.15
[React] setInterval, setState를 같이 쓸 때 오류 해결 ㅇ...이게 머노...? 3초마다 배경색을 바꿔주려고 했는데 처음엔 잘 되다가 몇 분 지나면 광란의 파티가 된다...... 왜 그런지 Console 창에 color를 띄워보니 막무가내로 바뀌었다가 유지되다가 난리였다... const [color, setColor ]= useState("#F9CC82"); const colorChange = useRef(null); useEffect(() => { setInterval(() => { console.log(color); if(color === "orange") setColor("pink") else if(color === "pink") setColor("purple") else if(color === "purple") setColor("orange"); co.. 댓글 0 2022.05.30
[React] CORS 문제 해결 1. 백엔드한테 해결해달라 하기 2. 프론트 안에서 해결하기 -> webpack.config.ts에서 proxy를 설정해준다. devServer: { historyApiFallback: true, port: 3090, devMiddleware: { publicPath: '/dist/' }, static: { directory: path.resolve(__dirname) }, proxy: { '/api/' : { // 프론트에서 api로 보내는 요청은 주소를 3095로 바꿔서 보냄 target: 'http://localhost:3095', changeOrigin:true, } } }, 프론트엔드에서 api로 보내는 요청은 주소를 3095로 바꿔서 보내겠다는 뜻이다 -> http://localhost:309.. 댓글 0 2022.05.27
[React] forceUpdate(), PureComponent, shllow-equal, hook(useState, useEffect), map(), reactstrap forceUpdate() constructor(props) { super(props); this.state = { StateString:'react', } } StateChange = () => { this.state.StateString="리액트"; this.forceUpdate(); } render() { return ( this.StateChange('direct', e)}>direct {this.state.StateString} ) } -> this.state.StateString='리액트'와 같이 직접 state를 변경하면 render() 함수를 호출하지 않으므로 화면의 state 값은 바뀌기 전 상태로 남아있다. 이때 forceUpdate() 함수로 화면을 새로고침하면 render() 함수를 .. 댓글 0 2022.02.16
[React] JSX 기본 문법 맛보기 서론 리액트 한 책을 다 보고 이제 강의를 보고 있는데, 책에서 배우지 못했던 JSX 문법들을 배울 수 있어서 오늘이 끝나기 전에 간단히 정리해보려고 한다. JSX란? React에서 사용되는 문법이다. 보기엔 HTML이랑 비슷해보이지만 JSX는 몇몇 규칙들이 존재한다. JSX 문법의 규칙 1. 태그는 꼭 닫혀있어야한다. 위 코드를 JSX에서 쓴다면 오류가 뜬다. // 1 // 2 따라서 모든 태그를 />나 로 태그를 닫아줘야 한다. 2. 두 개 이상의 엘리먼트는 하나의 엘리먼트로 감싸줘야 한다. Hello React 이런 식의 코드는 JSX에서 오류가 발생하기 때문에 이 두 엘리먼트를 하나의 엘리먼트로 감싸준다. Hello React 만약 스타일이 복잡해지고 table 관련 태그를 쓸 땐 Fragment.. 댓글 0 2022.01.21
[React] 로딩 중 화면 구현 서론 이번 글은 저번 글에 이어 페이지가 로딩이 될 때 로딩 중이라는 것을 보여주는 화면을 만들어볼 것이다. 홧팅홧팅 지금 로딩 안 느린데요? 그래서 개발자 도구를 켜서 일부러 느린 통신망을 시뮬레이션해보자. 사진대로 느린 3G를 선택하고 새로고침을 하게 되면 엄청 느려지는 걸 확인할 수 있다. 답답ㅎㅎ,,, 로딩 중 메세지 표시하기 App.js 코드의 내용을 이렇게 수정하자. class NowLoading extends Component { render() { return Now Loading... } } class App extends Component { state = { article:{ item:{title:'Welcome', desc:'Hello, React & Ajax'}, isLoading.. 댓글 0 2022.01.18
[React] Ajax 찍먹하기 2, 디커플링, 프레젠테이셔널/컨테이너 컴포넌트 서론 저번 글과 이어서 진행된다는 점 유의. 이번 글에선 각 리스트 항목을 클릭했을 때 그 항목의 정보를 부분에 출력하는 기능을 구현할 것이다. 저번 글 링크 https://k99hyerin.tistory.com/23 Ajax로 컴포넌트 상태 변경하기 class Article extends Component { render() { return ( {this.props.title} {this.props.desc} ); } } class App extends Component { state = { article:{title:'Welcome', desc:'Hello, React & Ajax'} } render() { return ( WEB ); } } 먼저, 저번 코드에서 Article 컴포넌트를 생성해준다... 댓글 0 2022.01.17
[React] Ajax 찍먹하기 서론 글을 시작하기 전 Ajax는 처음 접해보는 거라 설명이 많이 부족할 수 있다! 이제 공부하는 책의 막바지여서 신난다. 얼른 끝내서 강의 보고싶당 ㅎㅎ 실습 준비 npx create-react-app react-ajax Ajax를 해보기 전 먼저 프로젝트를 만들어준다. 프로젝트만 몇 번째 만드는지 모르겠지만 책이 하라는대로 해보자. 그리고 원활한 이해를 위해 index.css, App.css를 모두 지워준다. 마지막으로 index.js와 App.js를 다음과 같이 정리(수정)한다. 위와 같이 나온다면 잘 된 것이다. 이제 public 폴더 안에 list.json을 생성하고 사진과 같이 작성해보자. [ {"id":1, "title":"HTML"}, {"id":2, "title":"CSS"}, {"id".. 댓글 0 2022.01.17
[React] React Router 사용하기 서론 저번 내용보단 쉬웠지만, 내가 공부중인 책과 현재 React Router v6이차이가 있어서 구글링하면서 공부해야했다. 생활코딩 아주조코.. ㅎ Routing이란?? 사용자가 접속 중인 URL에 따라 UI를 달라지게 하는 것이다. 매우 유용하게 쓰인다고 한다. React Router를 써보자! 일단 새로운 프로젝트를 만들고, index.css의 내용을 모두 지운다. 모든 코드는 index.js에서 구현될 예정이므로 주의할 것! import { BrowserRouter, Route, Routes} from 'react-router-dom'; 먼저 Router를 import해준다. 원래 React router는 그냥 써도 됐는데, router v6이 되면서 routes를 꼭 쓸 수 밖에 없어졌다. 이건.. 댓글 2 2022.01.17
[React] 함수형 컴포넌트로 라이프 사이클 구현하기 - useEffect hook 서론 이번 글의 내용은 나도 이해를 잘 못한 부분이라 설명이 난해할 수 있다. 라이프사이클이란 생명주기를 뜻하는데, 쉽게 말하면 컴포넌트가 렌더링되고 삭제되는 과정을 뜻한다. 참고로 이때까지 만든 컴포넌트들은 라이프사이클이 없는 컴포넌트들이었다... 무튼 만들어보자! 클래스형으론 어떻게 만들까? 클래스형으로 만들 때에는 componentWillMount -> render -> componentDidMount - > componentWillUnmount 메서드들이 이러한 순서를 가진다. * mount : 어떤 컴포넌트가 생성된다. = 화면에 그려지다. componentWillMount라는 메서드를 구현해서 그 안에 필요한 코드를 가져다 놓는 식으로 마운트되기 직전에, 즉 render 메서드가 호출되기 전에.. 댓글 0 2022.01.15
[React] 클래스 스타일 vs 함수 스타일 서론 저번 글까지 CRUD를 구현하면서 컴포넌트를 class 스타일로 만들었었다. 하지만 최신 리액트에서 함수 스타일에도 훅(hook)이라는 개념이 도입돼 클래스 스타일과 대등한 존재로 격상했다. 대부분의 리액트 자료는 클래스 스타일로 설명돼있기 때문에 배우는 것이 좋다고 한다. 과거엔 함수형 스타일에서는 state값을 가질 수 없었음. 프로젝트 만들기 npx create-react-app create-react-app func-class-style cmd 창에 이렇게 입력해주고 새로 만든 프로젝트의 필요없는 index.css, App.css를 모두 주석처리 해준다. 클래스형 스타일에서 state를 사용하는 방법 function App() { return( Hello World ) } 예시로 ClassC.. 댓글 0 2022.01.14
[React] CRU 기능 보완, delete 기능 구현, Redux의 개념 서론 저번 글만 해도 create, read, update 이 세 가지의 기능만 구현했었다. 그래서 오늘은 이전 기능을 조금 보완하고, 마지막 delete 기능을 구현할 것이다. 또, 책에서 배운 redux의 개념을 적어놓으려고 한다! 무엇을 보완할까? 원래 내가 만든 웹에서 create를 하거나 update를 해서 submit 버튼을 누르면 페이지가 그대로 create/update 화면을 보여줬었다. 근데 이러기보다 create/update를 하고나서 바로 그 content를 보여주는 게 훨씬 편할 것이다. 그래서 이번 글에선 create/update를 하고, create/update가 된 content를 보여주는 것을 구현할 것이다. 먼저 mode가 create일 때 setState 함수를 이용해 c.. 댓글 0 2022.01.11
[React] state값 수정, 저장하고 읽기 서론 저번 글은 적게 공부하기도 했고 폰으로 적어서 매우 정리가 안 됐을 것 같다. 그래서 복습하는 겸 되짚어보면서 이번 글을 적어볼 예정이다. state를 form 태그로 수정하려면? 먼저 이해를 위해 간단히 read의 순서를 요약해보겠다. 이 모든 과정은 getContent 함수 안이라는 걸 유의하자. content 중 하나를 클릭하면 mode가 'read'로 바뀌고, selected_content_id가 클릭된 content의 id로 바뀐다. mode가 read일 때(if문) _content 변수에 getReadContent함수의 반환값을 할당한다. -> getReadContent 함수 : while문으로 data 변수에 contents[i]를 할당하고 data의 id가 선택된 id와 같으면 dat.. 댓글 0 2022.01.10
[React] App state값으로 input value값 수정하기 서론 저번 글은 CRUD 중 create 기능을 만들어보았었다. 그래서 이번 글은 U(update)를 만들기 위한 첫 번째 단계가 되겠다. App.js App 컴포넌트에 render 함수 밖에 이 함수를 선언해준다. 이 함수는 사용자가 선택한 content의 id, title, desc 등의 data를 반환해주는 함수이다. 만약, HTML을 눌렀다면 id:1 title:HTML desc:HTML is Hyper Text Markup Language 이 반환될 것이다. 그리고 render 함수에 있던 모든 코드를 getContent함수로 바꾼다. 금방 만들었던 getReadContent 함수로 선택된 content의 data를 끌어와서 사용하는 형식이다. mode가 read일 땐 getReadContent.. 댓글 0 2022.01.09
[React] state에 데이터를 추가하고, 읽기 서론 저번 글은 create, update, delete 버튼을 눌렀을 때 mode값이 바뀌는 기능을 만들었었다. 그래서 이번 글엔 create를 누르고 제목과 글을 적고, 작성된 글을 볼 수 있는 기능을 만들 예정이다. 중요하다고 알려진 CRUD 중 C(create)를 만드는 것이다! Content.js 먼저 Create, Update, Delete와 구분하기 위해 기존에 만들었던 Content.js를 ReadContent.js로 변경한다. CreateContent.js 그리고 CreateContent.js를 만들어 위 코드를 작성한다. onSubmit은 리액트 문법이 아니라 html 문법임을 주의하고, 사용자가 데이터를 추가, 수정하거나 삭제할 때는 method를 post로 해야 한다. form은 a.. 댓글 0 2022.01.07
[React] create, update, delete 버튼을 누르면 state 값 변경하기 서론 이번 글은 오늘 데이터톤도 있고, 시간이 없어서 다음 글을 위한 작은 기능을 만들어보겠다. 일단 이제 저번 글까지 만들었던 웹 페이지에 create(생성), update(수정), delete 버튼(삭제)을 만들어 HTML, CSS, JavaScript li에 create로 추가하고 update로 수정하고 delete로 삭제하는 기능을 만들 예정이다. 그래서 이번 글은 create, update, delete를 눌렀을 때 mode의 state값이 각각 create, update, delete로 바뀌게끔 만들 것이다. App.js 일단 create, update, delete 버튼이 들어가있는 Control 컴포넌트를 만든다. 그리고 각각을 눌렀을 때 Control 컴포넌트에서 넘겨준 _mode값을 s.. 댓글 0 2022.01.06
[React] 컴포넌트 이벤트 만들기 복습/응용 서론 저번엔 WEB을 클릭하면 state의 mode값을 welcome으로 바꿔 TOC 내용을 바꿔보았었다. 그래서 이번 글은 저번 글에서 배웠던 컴포넌트 이벤트를 복습하고, 응용하는 글이 되겠다. 목표 동영상처럼 이때까지 구현한 웹 페이지에서 HTML, CSS, JS 를 누르면 각각의 정보를 밑에 보여주는 것이 이번 글의 목표임 한 번 만들어봅세. 일단 state에 클릭된 content(html, css, js)가 무엇인지 알기 위해 일종의 id 역할을 하는 프로퍼티를 만든다. selected_content_id와 contents의 id를 비교해서 그 id의 content를 보여주는 것이다. 그리고 TOC 컴포넌트에 data 속성을 만들어 state의 contents를 할당해준다. 또, onChangeP.. 댓글 0 2022.01.05
[React] 컴포넌트 이벤트 만들기(onChangePage) 서론 {this.state.subject.title} {this.state.subject.sub} 저번 글에선 위 코드의 태그를 App.js 컴포넌트에 옮겨 놓았었는데, 이 글에서는 태그를 주석 처리하고 주석 처리했었던 컴포넌트를 다시 쓰겠다. 이제 Subject 컴포넌트에 태그를 클릭하면 onChangePage 이벤트를 발생시키는 기능을 만들어보자! 컴포넌트 이벤트 만들기 일단 App 컴포넌트에서 Subject 컴포넌트에 onChangePage 함수를 추가한다. 그리고 테스트용으로 onChangePage 함수는 alert("hi")를 실행하게 된다. class Subject extends Component { render() { console.log('Subject render'); return( {t.. 댓글 0 2022.01.05
[React] bind 함수와 setState 함수 이해 bind 함수란 ? : this 값이 없을 때 강제로 this 값을 주입하는 방법이라고 할 수 있다. 여기서 this는 render 함수 안에서 해당 render 함수가 속한 컴포넌트 자체를 가리킨다. bind 함수를 이해하기 위해 예시를 들어보겠음 App.js class App extends Component { constructor(props) { super(props); this.state = { mode:'read', subject:{title:'WEB', sub:'World Wide Web!'} } } render() { console.log("render", this); } } console.log("render", this)로 this값을 콘솔로 출력하고, 이 코드에서 this는 App 컴포.. 댓글 1 2022.01.03
[React] event, render 함수, state 값 변경 방법 이벤트(event)란? 저번 글에서 배웠던 state와 props를 동적으로 움직이게 하는 거임 이해를 위해 예시로 배워보겠다 App.js class App extends Component { constructor(props) { super(props); this.state = { mode:'welcome', subject:{title:'WEB', sub:'World Wide Web!'}, welcome:{title:'Welcome', desc:'Hello, React!!'}, contents:[ {id:1, title:'HTML', desc:'HTML is for information'}, {id:2, title:'CSS', desc:'CSS is for design'}, {id:3, title:'Ja.. 댓글 3 2022.01.03
[React] state, props, key props props가 뭔데 씹덕아 React에서 props는 속성값을 나타내는 키워드임. 아니 그래서 그게 뭐냐고 ; 일단 이런 식으로 Subject 컴포넌트를 두 개 생성하면 오른쪽 사진과 같이 된다. Subject는 무조건 WEB world wide web이라는 값만 가지게 되는 건데, props는 이런 값들을 사용자가 마음대로 바꿀 수 있게 해줌!! 이렇게 Subject의 title과 sub를 설정해주고, Subject.js에서 {this.props.title} / {this.props.sub}로 바꾸면 App.js에서 보내준 title값과 sub값으로 적용된다. State는 또 뭔데...? 리액트에서의 state는 구글에서 말해준 '상태'와 비슷하다. props가 컴포넌트에 대한 UI, 즉 사용자가 제품을.. 댓글 1 2022.01.03
[React] React 프로젝트 생성, 컴포넌트화 React 프로젝트 생성 설치돼있어야 할 프로그램, 지식 Node.js, npm Visual Studio Code HTML, CSS, JS 기초 지식 React 프로젝트 생성 방법 Windows -> cmd npm -v : npm 버전 확인 -> 무슨 버전인지 출력된다면 npm이 다운된거임 ( 예 : 6.14.13 ) cd '프로젝트 폴더 경로' : 프로젝트 폴더로 이동 npm install -g create-react-app create-react-app "프로젝트명" 이런 식으로 출력되고, 폴더가 생성됐다면 성공 npm 실행은 어케 함? vs code 터미널창에서 npm run start 를 해보면 localhost로 웹 서버를 열 수 있다. 웹을 build 하려면 (프로덕션 모드의 애플리케이션을 만.. 댓글 0 2021.12.28

⚡Java Script

⚡Type Script

⚡Coding Test

⚡️ Other record

[AWS] AWS로 내 웹 사이트 배포하기 (1) 이번에 '강서구 알리기' 웹 구현 경진대회에 참가하면서 개발한 웹을 배포해야 하는 일이 생겼다... 백엔드도 모르는데 배포까지 해야 하니 막막했지만 구글의 힘을 빌려 해보기로 결정했다. 나도 잘 모르는 채로 시작했기 때문에 횡설수설할 수도 있음!! 그리고 이미 개발이 다 된 프로젝트가 있다고 가정한 후 봐주면 좋을 것 같다. 1. aws 가입하기 가입은 순서대로 하면 된다. 카드 정보 입력하는 부분도 있는데, 나는 돈 안 드는 것을 쓸거라서 적어도 돈은 안 빠진다. 2. 인스턴스 만들기 왼쪽 위 서비스 -> 컴퓨팅 -> EC2 를 선택해 준다. 종류별로 특징이 다르다고 들었었는데, 일단 보편적이고 사람들이 많이 쓰는 EC2로 인스턴스를 만들 것이다. * 인스턴스는 그냥 가상 서버라고 생각해도 무관하다. .. 댓글 0 2022.07.22

티스토리툴바