티스토리

끄적끄적

검색하기

블로그 홈

끄적끄적

studyingych.tistory.com/m

Chanho. 님의 블로그입니다.

구독자: 3

방명록 방문하기

주요 글 목록

React Hooks 란 React Hooks React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다. 예를 들면 function component에서 state을 가질 수 있게 된 것 만일 앱을 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻이다. 모든 것은 하나의 function이 되는 것 함수형 프로그래밍이 가능해지는 것 React Hokks를 사용 했을 때와 안했을 때의 차이를 간단한 예제로 살펴보도록 하겠습니다. class component import React, { Component } from 'react'; class App extends Component { s.. 공감수 5 댓글수 2 2021. 5. 2.
비동기처리, Promise, async/await 이해 동기(synchronous) vs 비동기(asynchronous) 동기와 비동기를 나누는 큰 차이점은 실행 순서입니다. 동기는 요청을 보낸 후 해당하는 응답을 받아야만 다음으로 넘어갈 수 있는 실행방식이고 반대로 비동기는 요청을 보낸 후에 응답과 관계없이 다음 동작을 실행할 수 있는 방식입니다. 간단하게 동기와 비동기방식을 생활에 적용한 예를 들어보도록 하겠습니다. 동기적 방식 병원 진료를 볼때에 창구에 접수를 하기 위해서 번호표를 뽑습니다. 저의 번호표는 3번으로 저의 앞에는 1번 2번 번호표를 가진 분이 존재합니다. 1번 손님 접수요청 -> 창구에서 응답 -> 접수완료 -> 2번 손님 접수요청 -> 창구에서 응답 -> 접수완료 -> 3번 손님 접수요청 .... 위의 예시와 같이 동기적 방식은 순서가 .. 공감수 3 댓글수 1 2021. 5. 2.
React useEffect 사용 title 변경하기 실습은 codesandbox를 이용했습니다. app.js import React, { useState, useEffect } from "react"; import "./styles.css"; export default function App() { return ( Home Content Setup ); } 예시로 각각의 button 을 클릭했을 시 그 페이지로 이동했다고 가정하고 웹 title을 변경하도록 하겠습니다. const useTitle = () => { const [title, setTitle] = useState(null); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerH.. 공감수 3 댓글수 2 2021. 4. 25.
React FadeIn 함수 만들기 (useRef, useEffect) 실습은 codesandbox를 이용했고, 노마드코더님의 인강을 참조하고 공부 및 복습 목적으로 작성했습니다. 실습을 시작하기에 앞서 css 트랜지션을 사용하도록 하겠습니다. transition-duration : 트랜지션이 일어나는 지속 시간을 명시하는 속성입니다. transition-delay : 속성이 변하는 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다. export default function App() { return ( hello! fadeIn Training ); } 시작은 화면에 h1과 p태그에 fadeIn 효과를 주도록 하겠습니다. 먼저 useFadeIn 함수를 만들고 인자값으로는 duration 과 delay 값을 받도록 하겠습니다. const useFadeIn .. 공감수 1 댓글수 0 2021. 4. 25.
리덕스 간단한 주요 개념 리덕스(Redux) 란 Redux는 여러 컴포넌트에 사용되어지는 state를 분리 통합하여 관리할 수 있게끔 하고 이로 인한 안정성을 향상 시킬 수 있는 라이브러리입니다. React의 state와 비슷하지만 사용하는 방식에 있어서는 React의 state에 비해 복잡한 편입니다. Redux도 state를 관리하기 때문에 React의 state를 사용하지 않아도 됩니다. 하지만 상황에 따라 틀린 것이지 무조건 적으로 사용하지 않는 것은 아닙니다 주요 개념 Action 리덕스에서의 Action은 React state처럼 state를 바꾸는 방식입니다. 액션 객체를 가지고 있으며 반드시 type 필드를 가지고 있어야 합니다. const LoggedIn = () => ({ type: "LOGIN" }); con.. 공감수 1 댓글수 2 2021. 4. 25.
React 할 일 목록 만들기 ( TodoList ) 추가,수정,삭제,검색 실습은 npx react-creat-app [projectname] 으로 실습환경 구축 기능은 추가, 수정, 삭제, 검색을 만들도록 하겠습니다. 프로젝트 구조 실습코드 app.js import React, { Component } from 'react'; import ToDoForm from './component/ToDoForm'; import ToDoList from './component/ToDoList'; import './App.css'; class App extends Component { id = 4; state = { toDoList: [ { id: 1, text: '러닝 뛰기', }, { id: 2, text: '공부하기', }, { id: 3, text: '독서하기', }, ], sea.. 공감수 3 댓글수 6 2020. 11. 22.
React , Next.js를 사용하는 이유? 프론트 서버와 백엔드 서버를 분리하는 이유 프론트에 요청이 많아지면 프론트 서버만 늘려주면 되고 백엔드 서버에 요청이 많아지면 백엔드 서버만 늘려주면 된다. 단점으로는 복잡도가 증가한다. Next.js 란 next.js는 리액트를 서버사이드 렌더링 방식(SSR)으로 쉽게 구현할 수 있도록 환경을 제공해주는 프레임워크입니다. 서버사이드 렌더링이란? 공감수 0 댓글수 0 2020. 5. 21.
React window.confirm 기능 구현 실습은 codesandbox를 이용해서 실습했습니다. window.confirm() 메소드는 위와 같이 메시지와 함께 확인 , 취소 버튼으로 구성되어있고, boolean 값을 return합니다. 확인 => true 취소 => false 를 반환하도록 되어있습니다. 실습은 가상으로 게시글을 삭제한다고 했을 때를 생각했습니다. export default function App() { return ( 게시글 삭제 ); } 위와 같이 게시글을 삭제한다고 가정하고 버튼을 클릭했을 시에 confirm으로 반환된 값들을 console.log창에 띄워 주는 함수를 작성하도록 하겠습니다. 우선 useConfirm 함수를 작성하도록 하겠습니다. const useConfirm = (message = null, onConfi.. 공감수 3 댓글수 0 2020. 5. 15.
React 간단한 tab 만들어보기 (hook 활용) React hook을 활용하여 탭 기능을 만들어보도록 하겠습니다. 실습은 codesandbox를 활용했습니다. app.js import React, { useState } from "react"; import "./styles.css"; const content = [ { tab: "react", content: "컴퓨팅에서 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다." }, { tab: "Node.js", content: "Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로.. 공감수 5 댓글수 0 2020. 5. 13.
React shouldComponentUpdate 컴포넌트 최적화 앞서 실습한 TodoList에서 shouldComponentUpdate를 사용해서 컴포넌트 최적화를 하도록 하겠습니다. 우선 앞서 실습한 코드에서 ToDoList.js 와 ToDoInfo.js 에서 console.log()를 각각 찍어보도록 하겠습니다. ToDoList.js / render 부분 render() { const { data, onUpdate, onRemove } = this.props; console.log('ToDoList가 렌더링!'); return ( {data.map((data) => ( ))} ); } ToDoList 컴포넌트가 렌더링 될 때를 알기 위해 console.log 추가 ToDoInfo.js / render 부분 render() { const { data } = this.. 공감수 0 댓글수 0 2020. 5. 12.
Array 메소드 slice, filter slice 메소드 Array.slice() 메소드는 배열의 일부분, 부분 배열을 반환한다. slice()메소드에 2개의 인자를 전달해야 하는데 하나는 반환될 시작과 끝을 명시해야 한다. slice 예시 array는 index 0부터 시작하고, 시작지점부터 끝지점 전까지의 배열을 반환한다. 아래와 같이 응용해서 사용이 가능하다. Array.concat() 메소드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환한다. filter() 메소드 filter() 메소드는 주어진 함수의 조건을 통과한 요소들을 모아 새로운 배열로 반환하는 메소드이다. filter() 예시 화살표 함수를 사용하여 배열에 들어있는 각각의 값들을 n으로 전달받아 짝수인 경우에만 새로운 배열로 반환 공감수 0 댓글수 0 2020. 5. 10.
React에서 map 메소드를 사용하여 배열 렌더링 위와 같이 배열을 출력하는 방법으로는 while, for, forEach문과 같은 반복문으로 출력을 할 수 있다. 하지만 자바스크립트에서 map 메소드를 사용한다면 아래와 같이 더욱 더 간편하게 배열을 출력할 수 있다. 실습은 기존에 실습하던 코드에서 조금 수정을 하였습니다. App.js import React, { Component } from 'react'; import JoinForm from './components/JoinForm'; import './App.css'; import MemberInfoList from './components/MemberInfoList'; class App extends Component { id = 0; state = { memberInfo: [], }; han.. 공감수 0 댓글수 0 2020. 5. 9.
React 자식 컴포넌트에서 부모로 데이터 보내기 앞서 포스팅한 React input 상태관리를 그대로 이어서 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내는 것을 복습겸 정리하도록 하겠습니다. App.js import React, { Component } from 'react'; import JoinForm from './components/JoinForm'; import './App.css'; class App extends Component { id = 0; state = { memberInfo: [], }; handleCreate = (data) => { const { memberInfo } = this.state; this.setState({ memberInfo: memberInfo.concat({ ...data, id: this.id++, .. 공감수 0 댓글수 0 2020. 5. 9.
React input 상태관리 실시간 패스워드 체크하기 velopert님의 React 인강을 보고 React input 상태관리에 대해 복습하는 의미에서 연습삼아 간단한 실시간 패스워드 체크해보는 것을 만들어보았다. 우선 프로젝트는 npx create-react-app으로 간단하게 실습환경을 구성하였다. 프로젝트 파일 구조 프로젝트 소스 파일 index.js 와 App.js 내용은 생략하도록 하겠다. JoinForm.js import React, { Component } from 'react'; class JoinForm extends Component { state = { name: '', firstPassword: '', lastPassword: '', checkPassword: '📝패스워드 입력📝', }; //input onChange 이벤트 handl.. 공감수 0 댓글수 0 2020. 5. 8.
React Props, State 이해 및 사용법 Props / State props 와 state는 React에서 데이터를 사용할 때 다루는 개념이다. 실습 코드샌드박스(https://codesandbox.io/s/dank-pond-pfyvq) 를 사용하여 실습 Props props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다. 읽기 전용 src 폴더 구조 CodeSandBox에서 리액트를 실행 시키면 MyName.js를 제외한 파일은 기본적으로 생성이 된다. MyName.js는 props 예제를 위해 만든 파일 App.js import React, { Component } from "react"; import "./styles.css"; import Name from "./Name.js"; class App extends Com.. 공감수 3 댓글수 0 2020. 5. 8.
React Class Component / Function Component React 는 Class Component 와 Fucntion Component가 있다. 함수형 컴포넌트 ( function component ) import React from "react"; function Name({ first, last }) { return ( 이름 : {first} {last} ); } export default Name; 클래스형 컴포넌트 ( class component ) import React, { Component } from "react"; class Name extends Component { render() { const {first, last} = this.props; return ( 이름 : {first} {last} ); } } export default Na.. 공감수 0 댓글수 0 2020. 5. 7.
webpack 자주 사용하는 플러그인 BannerPlugin 웹팩에서 제공하는 플러그인으로 결과물에 빌드 정보나 커밋 버전, 만든이 등과 같은 정보를 추가할 수 있다. webpack.ocnfig.js plugins: [ new webpack.BannerPlugin({ banner: `build time : ${new Date().toLocaleTimeString()}`, }), DefinePlugin 웹팩에서 제공하는 플러그인으로 모든 자바스크립트 코드에서 접근이 가능한 전역 변수를 선언하기 위해 사용된다. 기본적으로 DefinePlugin을 빈 객체를 전달하여도 노드 환경정보인 process.env.NODE_ENV에 값을 넣어준다. console.log(process.env.NODE_ENV) 했을 경우 해당 webpack.config.js.. 공감수 0 댓글수 0 2020. 5. 6.
webpack 기초 입문 ( entry, output ) webpack ? webpack은 Node.js 환경에서 실행되고 npm으로 설치할 수 있다. 웹팩은 자바스크립트, HTML, CSS, 이미지와 같은 여러개의 assets (js, css,png,jpg 등)을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러로 의존성이 있는 모듈을 취하여 해당모듈을 대표하는 정적 자산들을 생성한다. 정적 자산들이란 말 그대로 움직임이 없이 고정된 자산들을 말하며 webpack은 예를들어 여러가지의 모듈을 main.js 에 통합 해준다. webpack 실습 전 디렉터리 구조 // bye.js function webpackTest2() { console.log('bye webpack!'); } webpackTest2(); // hi.js f.. 공감수 1 댓글수 0 2020. 4. 20.
socket.io 이용한 채팅 socket.io를 이용한 채팅 기능을 만들면서 복습겸 정리, 아 이런거구나 감을 잡는데 도움이 되었으면 좋겠습니다. // home.pug html(lang="ko") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="styles/styles.css") title Chat body #jsNotifications // 유저입장시 입장알림 .loginBox // 닉네임 입력 안했을 때 보이는 창 form#jsLogin input(placeholder="닉네임!", type="text") .chatContainer#jsChat // 닉.. 공감수 0 댓글수 0 2020. 4. 2.
socket.io 원리 socket.io란 socket.io는 웹소켓을 이용해 클라이언트에 실시간으로 데이터를 전송한다. socket.io는 Socket을 구현한것으로 WebSocket 개발을 쉽게 하기 위한 것이다. 클라이언트에서 Event Listener로 새로운 정보를 받아 정보를 업데이트할 수 있다. socket.io 활용되는 곳 실시간 분석, 메시지, 채팅 바이너리 스트리밍, 문서 공동작업 등 socket.io 사용 yarn add socket.io // home.pug html(lang="ko") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", hre.. 공감수 0 댓글수 0 2020. 3. 31.
passport-local, passport-local-mongoose 회원가입, 로그인 Passport는 NodeJS 의 사용자 인증 미들웨어이다. Express 기반으로 local 인증( 사용자 ID, PW ) , GitHub, FaceeBook, Google, Twitter를 이용한 사용자 인증을 지원한다 Express 와 Express-Session 미들웨어를 연동함으로 더 유연한 기능을 제공함 passport-local-mongoose는 passport를 사용한 사용자 이름 및 비밀번호 로그인을 단순화하는 Mongoose 플러그인 이다. form 부분 구성한 환경이 틀려 복붙하시면 에러날 가능성이... // login form form(action=routes.login, method="post") input(type="email", name="email", placeholder=.. 공감수 2 댓글수 0 2020. 3. 21.
자바스크립트 비디오 파일 길이 구하기 비디오 플레이어 컨트롤러 부분을 커스텀으로 만들고 재생시간과 재생길이를 ex) 00:00 / 01:36 이런식으로 표현하게 하는데 비디오 파일의 전체 길이를 가져오는데 제대로 값을 가져와 표현해줄 때가 있고 반대로 아무값도 못가져 올때도 있었다. 위와 같이 npm package 인 get-blob-duration을 이용해서 비디오의 전체 길이를 가져오는 소스를 작성하고 전체 길이를 가져와 formatDate(seconds) 함수에서 시 분 초를 나눠서 표현한다. 문제가 발생했던 코드 // 비디오 링크를 클릭하여 해당 비디오 페이지에 들어왔을때 const videoContainer = document.getElementById('jsVideoPlayer') // 초를 시,분,초로 변환 function fo.. 공감수 2 댓글수 0 2020. 3. 19.
Node.Js에서 AWS S3버킷에 파일 업로드 및 삭제 AWS S3란? Simple Storage Service의 약자로 간단히 "저장서비스"라고 부를 수 있다. AWS라는 클라우드 서비스를 하나의 컴퓨터라고 했을 때 S3는 저장장치라고 할 수 있다. HTTPS 형태의 API로 데이터를 저장하거나 추출하게 해주는 웹서비스 ( S3에 파일 업로드시 해당 파일에 키 값, 객체 URL이 부여된다) AWS S3의 구성요소 버킷 : 하나의 프로젝트를 하나의 버킷이라고 생각하면 된다. 폴더 : 버킷 내부에는 폴더가 존재하고 , 그 폴더 안에 파일(오브젝트)가 있다. 오브젝트 : 폴더 내부에 존재하고 파일 및 파일에 설정된 내용 AWS S3 Class https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#del.. 공감수 0 댓글수 0 2020. 3. 19.
자바스크립트 li태그 선택 - 실시간 댓글 삭제 // template pug 사용 // comment.pug 예시 ul#jsCommentList // ul태그의 id는 jsCommentList each comment,index in video.comments // db에서 comment(댓글) 가져옴 li(data-index=index) // index를 줄 수도 있음 span = comment.text // comment db에 저장된 댓글 내용 button.comment-delete 삭제 button.comment-modify 수정 // 위의 each문으로 생성된 comment 예시 문 ul#jsCommentList li span = "첫 번째 댓글" button.comment-delete 삭제 button.comment-modify 수정 li s.. 공감수 0 댓글수 0 2020. 3. 18.
이중 연결 리스트 - python3 이중 연결 리스트 이중 연결 리스트는 이전 노드를 가리키는 포인터, 다음 노드를 가리키는 포인터를 가지고 있다. 양방향으로 연결되어 있어 노드를 탐색하는데 있어 양쪽 모두 가능하다. 이중 연결 리스트 실습 - 노드 삽입 class Node: # 이전 노드를 가리키는 prev, 다음 노드를 가리키는 next def __init__ (self,data,prev=None,next=None): self.prev = prev self.data = data self.next = next class NodeModule: def __init__ (self,data): self.head=Node(data) self.tail = self.head def add(self,data): # node에 head가 없다면 if s.. 공감수 0 댓글수 0 2020. 3. 5.
단일 연결 리스트 - python3 연결 리스트(Linked List) 란 연결 리스트 == 링크드 리스트 각 노드가 데이터와 포인터를 가지고 연결되어 있는 구조 연결 리스트 연길 리스트에서는 노드와 포인터가 있다. 노드 : 데이터의 값과,포인터로 구성되어 있음 포인터 : 각각의 노드 안에서 다음 노드로 가거나 이전 노드와의 연결 정보를 가지고 있음 연결 리스트 특징 배열과는 다르게 크기가 고정되어 있지 않아 삽입/삭제가 용이하다. 탐색시 모든 노드를 처음부터 탐색하기 때문에 탐색시간이 길어질 수 있다. 데이터의 추가 삭제가 많을 경우에는 연결 리스트를 사용하는게 유리하고, 검색/정렬을 자주할 땐 배열이 유리하다. 중간 데이터를 삭제시에, 삭제한 노드의 전 노드와 앞 노드를 다시 연결해줘야하는 과정이 필요 연결 리스트 종류 단일 연결 리스.. 공감수 1 댓글수 0 2020. 2. 27.
Node.js Express 라우팅, 라우트 메소드 (GET,POST 요청 처리하기) 라우팅 URI(경로) 및 특정한 HTTP(Hyper Text Transfet Protocol) 요청 메소드(GET,POST)의 클라이언트 요청에 응답하는 방법을 결정 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있고, 라우트가 일치할 때 실행된다. 라우트 구조 GET, POST 방식의 method app.get( PATH(경로), HANDLER ) app.post( PATH(경로), HANDLER ) 여기서 app은 express 객체 METHOD에는 HTTP 요청 메소드로 GET, POST 방식이 있다 PATH는 해당하는 프로젝트 내의 서버 경로 HANDLER는 라우트가 일치할 때 발생하는 함수이다. 라우트의 사용 //GET 방식의 METHOD app.get('/', function (req, re.. 공감수 0 댓글수 0 2020. 2. 27.
Stack(스택) - python3 스택이란 데이터를 제한적으로 접근할 수 있는 구조 한 쪽에서만 데이터를 put(넣기), pop(빼기)할 수 있는 구조 가장 마지막에 들어온 데이터가 가장 먼저 나가는 구조 스택구조 스택은 LIFO(Last-In, First-out) , FILO(First-In, Last-out) 데이터 관리 방식을 이용 LIFO : 마지막에 넣은 데이터가 가장 먼저 나감 FILO : 처음 넣은 데이턱 가장 나중에 나감 주요기능 push() : 데이터를 스택에 삽입 pop() : 데이터를 스택에서 추출 스택의 장점과 단점 장점 구조가 단순, 구현이 쉽다. 데이터의 저장/읽기 속도가 빠름 단점 데이터 크기를 미리 지정해야한다. 위와 같은 이유로 인해 저장공간이 낭비가 발생할 수 있다. 파이썬 pop() 함수를 사용해서 스택.. 공감수 0 댓글수 0 2020. 2. 26.
Passport 구글 로그인 인증 (oauth20) - nodeJS Passport 란? passport는 인증 절차 로직을 편하게 작업할 수 있게 도와주는 Node.js 미들웨어 입니다. Strategy ? passport에서 사용하는 인증 방식으로, passport-local, passport-google 등이 있다 oauth ? oauth는 사용자의 비밀번호를 묻지 않고 인증하려는 웹의 계정 정보를 받아 접근권한을 얻는 인증 방식 google, naver, github, facebook 등으로 인증하는 경우 Install npm install passport-google-oauth20 Google Developers Console 에 접속하여 Application 생성 우선 https://console.developers.google.com/apis 접속해서 cli.. 공감수 3 댓글수 0 2020. 2. 26.
Queue(큐) - python3 큐 구조 먼저 들어간 데이터가 먼저 나오는 선입선출 자료구조를 큐라고 한다. 예를 들어 먼저 줄을 선 사람이 먼저 물건을 사고 나오는 것과 같다 FIFO(First-In, First-Out) 방식으로 스택(Stack)과 반대 큐 용어 put(insert) : 큐에 자료를 넣는 것 get(delete) : 큐에서 자료를 꺼내는 것 front(head) : 데이터를 get할 수 있는 위치를 가리킴 rear(tail) : 데이터를 put할 수 있는 위치를 가리킴 큐 => 오버플로우(Overflow), 언더플로우(Underflow) 오버플로우 : 큐가 꽉 차있는 상태에서 데이터가 들어오면 오버플로우 발생 ( put을 할 수 없는 상태 ) 언더플로우 : 오버플로우의 반대되는 개념으로 큐가 비어있을때 get을 하게.. 공감수 0 댓글수 0 2020. 2. 25.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.