본문 바로가기
728x90
728x90

분류 전체보기191

[Typescript/타입스크립트] declare 모듈 타입 & 전역 타입 typeRoots 와 paths 0. 목차 1. 개요 2. 모듈 타입 3. 전역 타입 1. 개요 typescript를 쓰면서 가장 불편한 부분은 외부 라이브러리를 설치해서 사용 할 때이다. 사용하려는 라이브러리의 사용도가 높다면 사실 크게 문제가 되지 않는다. @types/[라이브러리] 를 통해 타입을 사용할 수 있기 때문이다. 그런데 사용도가 낮은 라이브러리이거나, 기능이 약한 라이브러리라면 모듈 정의가 안되어 있는 경우도 빈번하다. 또한 여러 문서에서 반복적으로 사용되는 타입을 매번 import로 가져오는 것도 매우 번거로운 일인데, 이 모든것을 해결할 수 있는 것이 declare 와 *.d.ts 파일이다. 2. 모듈 타입 위에서 말했든 사용도가 높다면 크게 고민할 필요가 없다. 하지만 그렇지 않은 라이브러리 일수록 모듈정의가 안되.. 2022. 6. 9.
[React-native/Expo]Expo에서 Kakao(카카오) 로그인 구현(Webview) 0. 목차 1. 개요 2. Front-end 3. Back-end 1. 개요 Dodol 프로젝트를 진행하면서 가장 많이 고생했던 부분인 카카오 로그인에 대해 포스팅 해보려 한다. 기존의 Web에서 구현 할 때는 Rest API를 이용해서, 어렵지 않게 구현 할 수 있었지만, Native 환경에서는 sdk를 이용하여 구현한다는 점을 깨달았다. 문제는 expo 환경에서는 위의 방식을 사용할 수가 없었다. 구글링을 통해 블로그 하나를 발견 할 수 있었고, 해당 블로그 내용과 직접 구현을 해보면서 알게된 조금 더 상세한 내용을 적어보려한다. 참고한 블로그 2. Front-end 위에서 expo환경에서는 sdk 사용이 불가능 하다고 적었다. 그리고 우리가 결국 사용한 방식은 기존에 사용했던 방식, 즉 rest A.. 2022. 6. 8.
[Block-chain/블록체인] Block의 구조와 생성(javascript/typescript) 0. 목차 1. 개요 2. Block의 구조 3. Block의 생성 1. 개요 드디어 시작하는 블록체인 블록체인은 결국 블록을 체인을 통해 연결 시켜 놓은 것인데, 오늘은 그중에서 블록의 구조와 class를 이용해 블록을 생성하는 방법에 대해 알아보려한다. 블록을 생성함에 있어 체인으로 연결된 이전 블록의 정보를 가져오는 부분은 현 상황에서는 체인에 대한 기술지식이 없으므로, 기술부채로 남겨두고 우선은 제네시스 블록(최초의 블록)을 만드는 형태로 만들어 보려한다. 2.Block 의 구조 블록은 크게 두가지로 구성되어 있다. 헤더 : 블록에 대한 정보가 담겨있음 version: 블록헤더의 버전을 의미 height: 해당 블록의 인덱스 previousBlockHash hash: 해당 블록의 이름이 되는 암호.. 2022. 6. 8.
Dodol 프로젝트 회고록 Dodol Client GitHub Repository Dodol Server GitHub Repository Dodol 시연 영상 Dodol 회고록 어느하나 쉽게 되지 않았던 3주간의 리액트 프로젝트가 끝이났다. 조금 욕심을 부린 덕에 수업 때 다루지 않았던 react-native 와 expo 그리고 typescript 까지 써서 프로젝트를 진행하였다. 1Week 첫 주에는 프로젝트의 개요를 잡는데 제법 많은 시간을 썼다. 처음 기획했던 OTT 채팅서비스는 Tech Issue로 인해 접어야 했고, 그다음 생각했던 자격증 정보 사이트는 대부분의 작업이 데이터를 긁어 모으는 작업이 될 것 같았고, 결정적으로 만드는 재미가 없을 것 같았다. 그리고 마지막으로 생각해낸것이 타입캡슐 어플리케이션 Dodol 이었.. 2022. 6. 7.
[Javascript] Linked List( 링크드 리스트) 자바스크립트 구현 0. 목차 1. 개요 2. 노드 구현 3. 링크드 리스트 구현 1. 개요 링크드 리스트란? 링크드 리스트(Linked List)란 노드(Node)들로 이어진 리스트를 말한다. 노드는 보통 데이터를 저장하는 부분과, 다음 노드를 가리키는 부분으로 구성된다. 때문에, 배열(Array)에 비해 Node의 삽입과 삭제에 용이 하다 2. 노드 구현 class Node { constructor(data, nextNode = null) { this.data = data; this.nextNode = nextNode; } 노드 구현은 매우 간단하다. 입력받은 data를 Node 의 데이터로 넣어주고, nextNode는 입력받지 못한경우에는 null을 넣어준다. 3. 링크드리스트 구현 블로그를 몇개 뒤져보니 링크드 리스.. 2022. 5. 8.
[React] Redux combineReducers 0. 목차 1. 개요 2. combineReducers 1. 개요 어제 포스팅했던 내용에서 이어진다. // ./reducer/index.js const initialState = { number: 0, }; const rootReducer = (state = initialState, action) => { const { type } = action; switch (type) { case 'increase': return { ...state, number: state.number + 1, }; case 'decrease': return { ...state, number: state.number - 1, }; default: return state; } }; export defa.. 2022. 5. 3.
[React] router & redux 0. 목차 1. 개요 2. router 3. redux 1. 개요 이전 node.js 프로젝트때 hash(#)를 이용해서 주소값을 변경하고 그에 따른 화면을 보여주는 작업을 했었다. hash 뒤의 값이 바뀔 때 마다, 그걸 확인하고 그에따른 화면을 만들어주는 작업을 했었는데, 리액트에서는 react-router-dom을 통해 이를 쉽게 구현할 수 있다. .. 진짜 쉬운지는 사실 잘 모르겠다.. 그리고 useContext 와 reducer 이용해 상태를 전역에서 관리할수 있게끔 해주는 작업을 redux 와 redux와react 를 연결해주는 라이브러리인 react-redux를 이용해서 해보려 한다. 2. router 우선 세팅을 해보자. $ npm install react-router-dom 그리고 사용할.. 2022. 5. 3.
[React] state, event, 조건에 따른 render 0. 목차 1. 개요 2. state 3. event 4. 조건에 따른 render 1. 개요 어제에 이어서 react 기초 개념에 대한 내용이다. state,event 그리고 ternary operator를 이용해 조건에 따른 render를 하는 방법에 대해 공부했다. 2. state 어제 공식문서를 보고 따라 쳐보긴 했지만 정확한 개념이 이해가 안돼서 state에 대한 내용을 정리하지 못했는데, 오늘 수업을 통해 state 와 조금 친해진 기분이다. 우선, state가 뭔지 정확하게 개념을 정리하는게 중요할 것 같다. react 에서 state란, component 안에 저장 되어 있는 데이터이다. 어제 정리했던 props 와는 분명한 차이가 있다. props는 부모 컴포넌트로 부터 자식 컴포넌트에게.. 2022. 4. 13.
[React] 첫걸음(JSX, Babel, Component, Props) 0. 목차 1. 개요 2. React 세팅 3. Component 4. Props 1. 개요 드디어 리액트다. 개발 공부를 시작하기 전에도 이미 몇번 들어본적 있고, 프론트 쪽에서 가장 핫한 기술 중 하나이다보니, 걱정도 되고, 설레기도 한다. 천천히 해보려고 한다. 우선 리액트가 뭐하는 앤지 알아봐야 할듯 하다. 리액트 공식 홈페이지에 들어가보면 리액트는 라이브러리 입니다 라고 소개가 되어있고, 공식홈페이지를 제외한 다른 곳에서는 리액트는 프레임워크 입니다 라고 소개가 되어있다. 음.. 사실 프레임워크라고 칭하는게 의미상 맞긴 한듯한데, 만든 사람들이 라이브러린데요 ㅡㅡ 라고 하는데 아님 프레임워크임 이라고 하는 것도 좀.. 애매하다. 결론은 뭐라 불러도 상관없을듯 하긴 하다. 프레임워크는 디렉토리 구.. 2022. 4. 13.
(22.03.21-22.04.08)3주간 진행한 Carrot_world 프로젝트 회고록 Carrot_world 프로젝트 Github GitHub - green-kong/carrot_world Contribute to green-kong/carrot_world development by creating an account on GitHub. github.com Prologue 길다면 길고, 짧다면 짧다. 너무나 많이 쓰이는 형용어지만, 3주라는 기간에는 이마만큼 찰떡일 수가 없다. 말그대로 3주라는 기간 동안 진행 되었던 프로젝트에 대한 회고를 적어보려 한다. 이번에도 팀장이라는 과분한 역할을 맡게 되었다. 사실 내가 하고 싶다고 지원함. 저번 프로젝트 이후에 "나 이제 팀장 안해" 를 외쳤지만, 팀장 할 사람~? 이란말에 홀린듯이 지원해버렸다. 감투는 마약과 같다... 나를 포함해 팀원은 .. 2022. 4. 12.
[node.js] kakao(카카오) OAuth 2.0 로그인 기능 0.목차 1. 개요 2. 카카오 디벨로퍼 3. 기능개발 1. 개요 드디어 OAuth 2.0 을 기반으로 한 소셜로그인 기능을 구현 해본다. 제일 해보고 싶었던 것 중에 하나라 하는 내내 재밌게 할 수 있었다. 2. 카카오 디벨로퍼 우선 카카오 디벨로퍼 사이트에 들어가서 카카오 로그인을 한 뒤, 커다란 시작하기 버튼을 눌러주자. 애플리케이션을 추가하기를 누른뒤에 필요한 정보들을 입력해주자 그리고 생성한 애플리케이션을 클릭하면 이런 애가 나온다. 여기서 기억해야될 내용은 REST API 키 이다. 소중하게 잘 보관하자. 여기로 들어오면 이런내용이 보인다. 수정 버튼을 눌러서 카카오 로그인 이후 이동할 페이지를 적어주자 그리고 저 redirect URI 도 잘 보관해두자. 이번엔 일로 가면 된다. 여기가면 이.. 2022. 3. 16.
[node.js] 백엔드 서버에 저장된 이미지 프론트 서버에 전달 0. 목차 1. 개요 2. 백 서버에 저장 3. 프론트 서버에 전달 1. 개요 이거 하다가 의문이 들었다. 서버컴퓨터에 파일을 저장은 했는데 프론트 서버에서 '님 아까 저장한 파일 좀 써야됨 그거 어딧음?" 이라고 요청을 보내면.. 나는 이거 어떻게 전달을 해줘야되지...? 라는 의문이 생겨서 이것저것 해보았다. 2. 백서버에 저장 // routes/upload/upload.js router.post('/', upload.single('imgUpload'), (req, res) => { const { filename } = req.file; const { subject } = req.body; const filePath = `http://localhost:4001/${.. 2022. 3. 15.
[node.js] multer 이용해서 파일 업로드 파일업로드 1. 개요 2. FRONT 3. BACK 1. 개요 파일 업로드를 하는 방법을 알아볼거다. 그런데 직접 구현 하는건 거의 불가능에 가까우ㄴ니 외부 라이브러리를 사용하자 사용할 라이브러리의 이름은 multer 이다. 2. FRONT 우선 서버에다 파일을 보낼 HTML을 만들어준다. 전송 기본적은 form 태그이다. 그런데 기존에 만들던 form 태그와 다른점은 form 태그의 enctype이란 속성이 들어가있다. form태그로 전달해줄 Content-type을 지정해주는 역할을 한다. 파일 업로드에 사용되는 Content-type은 multipart/form-data 이다. (default는 x-www-form-urlencoded 이다) 그리고 한가지 더 input type에 file을 이용해준.. 2022. 3. 15.
[node.js] jwt, jsonwebtoken 라이브러리 이용해서 로그인하기 0.목차 1. 개요 2. 세팅 3. 토큰생성(sign) 4. 디코드 payload(veryfy) 1. 개요 2022.03.03 - [경일/nodejs] - [node.js] 쿠키와 세션, 그리고 JWT [node.js] 쿠키와 세션, 그리고 JWT 0. 목차 1. JWT가 뭔데. 2. JWT 구현 3. JWT로 로그인 해보기 1. JWT가 뭔데 JSON Web Token 의 약자다. 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. 그런데 우리 이런 역할을 하 kong-dev.tistory.com 위 포스팅에서 jwt 방식으로 로그인을 구현했었다. 그리고 crypto 를 사용해서 직접 토큰을 암호화 하고, 64진수로 변환했던 payload를 다시 복호화 해서 사용했었다. 내용이 어렵.. 2022. 3. 9.
[node.js] CORS 해결 방법 (SOP와 CORS) 0. 목차 1. 개요 2. SOP와 CORS 3. 해결방법 4. CORS 외부 라이브러리 1. 개요 개발자들은 참 신비로운 존재다. 뭘 그렇게 쪼개는걸 참 좋아한다. 그리고 코드가 중복적으로 사용되는걸 겁나 싫어한다. 그리고 이젠 하다하다 서버도 둘로 쪼갠다. 프론트서버랑 백서버 백서버에서는 주로 db와 통신을 하고, 프론트에서는 db와 통신한 데이터를 이용해 화면을 구성한다. 아 그렇구나.. 라고 받아들이기 직전에 ..이게 되나? 라는 생각이 든다. 서버가 두개라는 거는 서로다른 포트를 통해 통신을 한다는 건데, A라는 포트에서 열린서버가 B라는 포트에서 열린서버에 요청을 보내는게 된다고? 당연히 안된다. 근데 되게 만든다. 왜 안되는지와 어떻게 되게하는지에 대한 포스팅이다. 2. SOP와 CORS 실.. 2022. 3. 7.
[node.js] axios를 이용한 비동기 통신 0. 목차 1. 개요 2. axios 설치 3. get 요청 4. post요청 1.개요 비동기 통신을 하는 방법에는 크게 3가지 방법이 있다. 1. XMLHttpRequest 2. fetch 3. axios 1번은 한번 쳐보고 데이터가 어떻게 전달되고 전달 받는지만 보면 충분한 것 같고, 2번은 실제로 사용해을 해보았다. 2022.02.17 - [경일/nodejs] - [node.js] ajax, fetch, async, await, 로그인 기능 구현 [node.js] ajax, fetch, async, await, 로그인 기능 구현 0. 목차 1. 개요 2. 해결 3. 후기 1. 개요 2022.02.15 - [경일/nodejs] - [node.js] fetch(async, await)로 로그인기능 만들.. 2022. 3. 7.
첫 팀플 토이프로젝트 회고록 https://github.com/green-kong/team6_login_board GitHub - green-kong/team6_login_board Contribute to green-kong/team6_login_board development by creating an account on GitHub. github.com 2월 21부터 시작해서 2월 26일 까지 진행한 첫 팀프로젝트에서 팀장을 맡았다. 첫 팀플, 첫 팀장 사실 조금 부담스럽기도 했는데, 간단한 프로젝트를 진행할 때 팀장을 해봐야, 나중에 큰 프로젝트에서 팀장역할을 하게 됐을 때 도움이 될것같아서 자원했다. 그래서 이번 프로젝트에서 내가 맡은 역할은 팀장+ 프론트엔드 였다. (26일에는 혼자서 게시판의 댓글기능을 만들기도 했다) .. 2022. 3. 3.
[node.js] 쿠키와 세션, 그리고 JWT 0. 목차 1. JWT가 뭔데. 2. JWT 구현 3. JWT로 로그인 해보기 1. JWT가 뭔데 JSON Web Token 의 약자다. 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. 그런데 우리 이런 역할을 하는 다른애들을 이미 알고 있다. 바로 쿠키와 https://kong-dev.tistory.com/129 [nodejs] 쿠키 먹는거 말고 0.목차 1. http 통신 2. 브라우저 3. 쿠키 1. http 통신 서버에 요청을 보낼때는 일정한 규격에 따라 요청을 해야한다. 그런데 이 규격만 맞춰 준다면 새로운 내용을 작성해서 보내줄 수도 있다. 이제 kong-dev.tistory.com 세션이다. https://kong-dev.tistory.com/131?category=9.. 2022. 3. 3.
[node.js] mysql2, connection pool, async, await 으로 사용 0. 목차 1. 개요 2. 일단 한번 써보기 3. mysql2 async, await 깔끔 ^^ 4. db.js 파일 분리 1. 개요 [mysql] connecting pool (feat.node.js) 0. 목차 1. 개요 2. connecting pool 쓰는 이유 3. node.js connecting pool 생성 1. 개요 https://kong-dev.tistory.com/125?category=998366 [nodejs] node에서 mySQL 연결(Error: connect ECONNREFUSED ::1:330.. kong-dev.tistory.com 이어지는 글이다. 수업에서 connecting pool 을 사용하면 코드가 더러워진다고 했다. 그런가.. 그렇기때문에 코드를 조금이라도 깔끔.. 2022. 2. 18.
[mysql] connecting pool (feat.node.js) 0. 목차 1. 개요 2. connecting pool 쓰는 이유 3. node.js connecting pool 생성 1. 개요 https://kong-dev.tistory.com/125?category=998366 [nodejs] node에서 mySQL 연결(Error: connect ECONNREFUSED ::1:3306) 매우 간단하다. 우선 npm 을 통해 mysql 라이브러리를 다운 받아주자. $ npm init -y $ npm install mysql 다운 받은 라이브러리를 require를 통해 땡겨오고, const mysql = require('mysql') 이제 연결설정을 만.. kong-dev.tistory.com 이런걸 한적이 있다. 사실 그냥 저 포스팅 이후로 db 연결할 때는 계속.. 2022. 2. 17.
728x90
728x90

티스토리툴바