Psychogrammer

전체 글 검색 결과

해당 글 143건

[React Hook 시리즈 2]: useEffect()

1. useEffect 란? 컴포넌트가 랜더링 이후에 실행시킬 함수를 정의한다. useEffect의 effect는 side-effect라는 뜻이며, 컴포넌트가 화면에 랜더링 된 후 (main-effect) 에 해야할 작업들을 말한다. 컴포넌트의 정보를 다른 데서 가져와 나중에 내용을 업데이트 한다거나, 네트워크 통신 등의 작업을 하는 작업들에 해당한다. DOM 업데이트, Browser Paint가 완료된 후에 UseEffect가 호출된다. 참고로 useEffect는 클래스 컴포넌트의 componentDidMount, componentDidUpdate 를 함수형 컴포넌트에서 구현한 것이다. 2. useEffect 사용하기 1) callback : render()함수가 실행될 때마다 호출되며, return ..

🌕 Front/⚛️ React JS 2021. 7. 22. 11:36

[React Hook 시리즈 1]: 쓰는 이유, useState()

1. React hook 이란? 함수형 컴포넌트는 컴포넌트 내부의 state를 만들 수 없고, 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 그저 상위 컴포넌트가 시키는 일만 처리하는 단순한 컴포넌트에만 사용됐다. 하지만 16.8 버전부터 훅(hook)이라는 개념이 도입되며, 이 둘을 해결할 수 있게 됐다. 두 가지 기능을 함수형 컴포넌트에 "hook into”, 끌어와 연결 한다고 해서 "hook"이라고 부른다. 또한 클래스 컴포넌트에서 귀찮게 사용되는 didMount, render, this 등 대신, 함수형 프로그래밍 스타일로 가독성 있게 코드를 작성할 수 있게 됐다. Class Component import { Component } from 'react';..

🌕 Front/⚛️ React JS 2021. 7. 20. 21:56

[React Router] 라우터 사용하기(react-router-dom v5)

1. SPA와 라우터의 관계 • SPA는 서버에 하나의 페이지만 요청하여 전체 웹앱을 사용하는데, 이때 리액트 라우터는 CSR, AJAX 기술을 활용하여, 페이지 이동 시 리로드 없이 라우팅할 수 있도록 한다. • MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고, 여러 페이지 간의 스타일, 컴포넌트를 재활용하여 구현한다. • 자바스크립트만을 활용해 전체 페이지를 만들기에, 첫 요청 시 빈 페이지를 받게 된며, 서버로 부터 데이터만 받아온다. SPA의 기술적 장점 • 서버에서 페이지를(서버 랜더링) 만들 필요가 없으므로 CDN에 캐싱이 가능하다. • 매번 페이지 요청을 할 필요가 없어 네트워크 요청이 줄어든다. • 마찬가지로 데이터 요청 등을 캐싱하여 재사용하는 등 제약 조건이 줄어든다. • ..

🌕 Front/⚛️ React JS 2021. 7. 20. 16:20

[Typescript] 타입스크립트 왜 써요?

Typescript  쓰는 이유1. 안정적이다. 높은 수준의 추상화가 필요할 때,  프로그램에 구조를 만들고 문서화할 수 있다.2. 타입 에러를 컴파일 단계에서 미리 검출하여 디버깅할 수 있다.  (런타임 단계에서 발생하는 에러로 인해 프로그램이 멈춘다면, 운영되는 서비스에 큰 차질이 생길 수 있다.)3. 타입을 하나하나 명시하기 때문에 유지 보수가 유리하다.   Typescript의 특징1. 컴파일러: 프로그래밍 언어인 동시에 Javascript로 변환해주는 컴파일러다.2. 타입 명시: 변수를 선언할 때, 타입을 명시함으로써 데이터 타입을 지정3. 타입 추론(contextual typing): 정적 타이핑을 통해 변수의 타입을 추론할 수 있다.const sum = (a: number, b: number..

🌕 Front/🎫 Typescript 2021. 7. 13. 21:38

AWS EC2 인스턴스에 파일 업로드

파일을 EC2에서 직접 만들 수도 있지만. 로컬에 있는 파일을 EC2에 직접 올려야 하는 경우가 더 많다. EC2에서 파일을 올리기 위해서는 "SFTP" 파일전송 프로토콜을 이용한다. 일반 FTP와는 다르게 보안전송이 가능한 프로토콜이고 SSH와 같은 포트(보통 22번 포트)를 이용한다. 먼저 SFTP를 지원하는 FTP클라이언트가 필요하다. FileZilla - The free FTP solution Overview Welcome to the homepage of FileZilla®, the free FTP solution. The FileZilla Client not only supports FTP, but also FTP over TLS (FTPS) and SFTP. It is open source ..

🚛 DevOps/📙 AWS 2021. 5. 20. 16:49

SPA(single page app)에서 webpack을 사용하는 이유

2000년대 초반의 웹페이지는 각 페이지마다 새로운 html을 요청해서 화면을 다시 그리는 방식이었다. 자바스크립트는 DOM을 조작하는 간단한 역할만 했었기 때문에 html의 script태그에 넣는 것으로도 충분했다. ajax가 유행했을 때는 자바스크립트의 비중이 조금 더 커졌지만 그래 봐야 페이지당 자바스크립트 파일 몇 개면 충분했다. SPA(single page app)는 하나의 html에 수십, 수백 개의 자바스크립트 파일을 포함하기 때문에 더 이상 기존 방식이 통할리 없었다. ... 위의 방식으로는 계속 늘어나는 자바스크립트 파일을 관리하기 힘들다. 또한 선언되는 순서도 신경 써야 하고, 기존에 생성된 전역 변수를 덮어쓰는 위험도 존재한다. 모듈 시스템이 필요하다. 자바스크립트는 태생이 브라우저에..

🌚 Back/🧩 Node.js 2021. 5. 20. 13:59

body-parser: HTTPpost put 요청시 request body 에 들어오는 데이터값을 읽을 수 있는 구문

Parser는 무엇을 의미하는가? 가지고 있는 데이터를 내가 원하는 형태의 데이터로 ‘가공'하는 과정을 parsing 이라 하며 그 과정을 수행하는 모듈 혹은 메소드를 parser 라 일컫는다. 내가 모르는 언어를 내가 원하는 언어의 구조로 바꿔주는 일종의 구문 해석기라고 말할 수도 있다. parser는 구문 해석을 할 뿐 번역을 하진 않는다. 번역의 역할은 compiler에서 담당한다. 내가 원하는 형식에 맞춰 해석하는 용도이므로 bodyParser 뿐만 아니라 cookieParser, JSON.parse, JSON.stringify ..등 파서의 종류는 셀 수 없이 많다. 그렇다면 bodyParser는 무엇을 파싱하는가? Contains key-value pairs of data submitted i..

🌚 Back/🧩 Node.js 2021. 5. 20. 13:13

MongoDB Atlas 등록&사용 (무료 mongoDB Cloud 서비스)

0. 회원가입 https://www.mongodb.com/cloud/atlas Managed MongoDB Hosting | Database-as-a-Service Host MongoDB in the cloud with MongoDB Atlas, the official database-as-a-service, on AWS, Azure and GCP. Try free! www.mongodb.com 1. 프로젝트명 입력 2. 공유 유저 설정 : 프로젝트 생성 이후에도 수정 할 수 있다. 3. Cluster 생성 사용될 데이터베이스를 Cluster라고 부른다. 4. User 정보 설정하기 다시 Clusters 대시보드로 넘어가서 Connect를 클릭하자. UserID를 설정하면된다. UserId와 비밀번호는 ..

🌚 Back/🍃 MongoDB 2021. 5. 18. 17:55

[바벨&웹팩] IE, Safari에서 Javascript가 작동하지 않았던 이유

최종 배포까지 완료했는데, IE와 Safari에서 javascript가 작동하지 않아 시작하기 버튼이 눌리지 않았다. 문제 원인 1. 웹팩에서 바벨 설정값으로 번들링할 때 target값을 구버전까지 명시하지 않았던 점 2. 정규표현식을 바벨이 es5코드로 변환하지 못했던 점 1번 해결책 세 가지 파일에서 수정이 필요하다. 1) .babelrc { "presets": [ [ "@babel/preset-env", { "targets": "> 0.25%, not dead", "useBuiltIns": "entry", "corejs": 3, "debug": true } ] ], "plugins": [["@babel/plugin-transform-runtime", { "corejs": 3 }]] } targets..

🌚 Back/🧩 Node.js 2021. 5. 18. 17:20

504 Gateway Timeout 오류 발생(Nginx)

504 Gateway Timeout(504 게이트웨이 시간 초과 오류) 웹 서버에서 페이지 로드시 정보를 요청한 다른 서버로부터 시기 적절한 응답을받지 못한 것을 의미한다. 가장 일반적인 두 가지 이유는 서버에 요청이 너무 많거나 유지 관리가 수행되고 있기 때문이다. 인터넷 서핑 중에 504 게이트웨이 시간 초과 오류가 한 번 이상 발생했을 가능성이 90 %입니다. 나같은 경우는 페이지를 리다이렉트 해줄 때, 스펠링 실수로 엉뚱한 곳으로 리다이렉트 해줘 발생했다. 엉뚱한 곳으로 리다이렉트 해주는데, 오류가 났을 때 error를 출력하는 것 이외에 어떠한 코드도 작성하지 않아, 계속 응답을 기다리는 상태가 되었고, 그러는 동안 timeout상태가 길어져 504오류를 발생시켰다. 일반적인 504에러는 ngi..

🌚 Back/🧩 Node.js 2021. 5. 18. 16:27

AWS Route53 도메인 환불 가능할까?

스펠링 실수로 도메인을 2개 구입했다. 테스트용으로 사용하자니, 도메인이 하나 더 남는게 있기 때문에 환불받아야 했다. 엄연히 사용자 측 실수이기 때문에 큰 기대없이, 일단 문의했다. 그리고 2-3일이 지난 후 답변이 왔다. 1. 원래 도메인은 환불받을 수 없다. 2. 하지만 한 번 예외로, 도메인을 삭제하면 우리가 환불해주겠다. 3. 도메인을 삭제하고 답장을 보내달라. 그리고 10분도 안되어, 환불 메일이 왔다. 결론: 도메인 환불은 가능하다. (조건: 1번만, 도메인 삭제하면)

🚛 DevOps/📙 AWS 2021. 5. 17. 10:24

AWS EC2인스턴스 미국 오하이오 주 -> 한국으로 지역 변경

문제 발생 1. 이미지 로딩 속도가 느렸다. 2. 카카오톡 공유하기 버튼과 같은 API통신이 버벅거렸다. 유로 인스턴스로 속도를 올릴 의향이 충분히 있었다. 하지만 인스턴스 성능 차이는 해당 네트워크 속도 문제의 직접적인 원인은 아닌 것 같았다. 찾아보니, 문제는 지역이 default값인 미국 오하이오 주에 있었다. 아래 사진과 같이 지역이 서울로 나와야한다. 문제 해결 기존 지역에 존재하던, 인스턴스를 이미지화 하여 다른 지역에 복사해야 한다. 1. 아래 "작업" -> "이미지" -> "이미지 생성" 을 클릭 2. 이미지 생성 -> 이름 입력-> "이미지 생성" 클릭. 3. AMI(아마존 머신 이미지)를 들어가서, 생성한 이미지가 있는지 확인해 본다. 바로 들어가면 , 상태가 "Pending"으로 나오..

🚛 DevOps/📙 AWS 2021. 5. 16. 23:45

모바일에서 CSS hover 적용할 때 효과가 지속되는 문제 해결!

모바일 터치 후 호버 효과가 사라지지 않을 때 프론트엔드 개발하다 보면 한 번쯤은 겪는 문제다. 데스크톱에서는 멀쩡하게 작동하던 버튼이 모바일에서는 터치 후에도 호버 상태가 계속 유지되는 현상 말이다.처음에는 "뭐지? 왜 버튼을 눌러도 색깔이 안 돌아와?" 하면서 당황했는데, 알고 보니 모바일과 데스크톱의 상호작용 방식이 근본적으로 다르기 때문이었다. 문제의 핵심모바일에서는 "마우스를 올린다"는 개념 자체가 없다. 터치스크린에서는 터치하는 순간 hover 상태가 활성화되고, 다른 곳을 터치하기 전까지 그 상태가 유지된다. 그래서 버튼을 터치한 후 다른 영역을 터치하지 않으면 호버 효과가 계속 남아있게 된다. 최신 CSS 미디어 쿼리로 해결하기예전에는 @media (max-width: 768px) 같은..

🌕 Front/✨ CSS 2021. 5. 10. 22:55

BEM은 CSS표기법

BEM이란(Block Elements Modifier) BEM은 CSS 개발 방법론, 네이밍 컨벤션이다. html 요소들을 각각 Block, Element, Modifier 세 가지로 분류해 작명한다. Block 다음에 Element(내부요소) 혹은 Modifier(상태)순으로 네이밍 한다.각각의 BEM은 각자의 역할이 따로 있으므로 역할에 알맞은 클래스를 붙여야 한다. .block {} // 더 높은 단계의 추상(abstraction) 혹은 구성요소(component)를 나타낸다. .block__element {} // block의 자식 | 구성요소 .block--modifier {} // block의 다른 상태 | 버전 | 종류를 나타낸다. 사용 예시 .person {} .person__hand {}..

🌕 Front/✨ CSS 2021. 5. 3. 13:50

Helmet: contentSecurityPolicy(외부 js스크립트) 오류 해결

오류1. 카카오 SDK 스크립트 파일 import 실패 오류2. 구글 애드센스 스크립트 파일 import 실패 Refused to load the script 'https://developers.kakao.com/sdk/js/kakao.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. result:1 Refused to run the JavaScript URL because it violates the following Cont..

🌚 Back/🧩 Node.js 2021. 4. 30. 11:05

오픈 그래프(open graph): 링크의 미리보기를 결정하기

페이스북, 네이버 블로그, 카카오톡에서 링크에 대한 미리보기 제목, 설명, 이미지를 표현할 때 사용한다. HTML 문서의 head와 메타정보 메타 데이터들은 HTML 태그에 담겨있습니다. 크롤러도 하나의 소프트웨어 프로그램인지라 HTML 문서를 보면 자동으로 무엇이 제목인지, 무엇이 내용에 대한 3줄 요약인지, 무엇이 대표 이미지인지 100% 자동으로 판별하기 아주 어렵습니다. 따라서 웹사이트가 직접 저렇게 적어서 알려줘야 하는 것입니다. (아무리 머신러닝, 딥러닝, 자연어처리 기술이 발전해도 웹문서와 같이 비정형적인 정보에 대한 100% 정확도의 의미 인식은 불가합니다.) 이런 메타 데이터를 표기하는 방법에 대한 기본 방법(기본 HTML5 title, description 태그 등)을 제외한 제 3의 ..

🌕 Front/📑 Web Theory 2021. 4. 28. 12:01

EC2와 ROUTE 53 도메인 연결

사전 준비 1. ec2 인스턴스와 elastic IP 연결 되어있다. 2. 도메인을 구입했다. 호스팅 설정 시 Route53 사용 시 무료 인증서 발급 과정에서 인증서 검증방법은 이메일 인증 혹은 CNAME 인증을 선택할 수 있습니다. 그런데 DNS 서비스로 Amazon Route53을 이용할 거라면 CNAME 인증을 선택하는 것이 편리합니다. 검증방법은 인증서 발급 신청 시 선택하게 되고 나중에 변경이 안되므로 처음부터 고려해야 합니다. CNAME 검증방법의 또다른 장점은 추후 인증서를 갱신할 때 자동으로 갱신해 주므로 갱신 주기마다 검증을 해야 하는 이메일보다 편리한 점입니다. 레코드 추가 A레코드 추가: example.com A레코드 추가: www.example.com 값 칸에 할당받은 'elast..

🚛 DevOps/📙 AWS 2021. 4. 12. 11:28

AWS 인증서: AWS Certificage Manager

ELB, 로드밸런스를 이용할 경우만 사용할 수 있다. If you want to install an SSL certificate directly on your EC2 instance, you cannot use ACM. Instead, you will need to obtain an SSL certificate through a third- arty (such as Lets Encrypt, GoDaddy, ec.) and install it following the instructions for your web server. SSL/TLS 인증서 발급 및 관리에 대한 많은 작업을 자동화 하고 단순화 하기 위해 시작되었습니다. ACM에서 제공되는 인증서는 Amazon의 인증 기관(CA)인 Amazon Tr..

🚛 DevOps/📙 AWS 2021. 4. 12. 11:23

Elastic IP 탄력적 IP 설명, 비용

탄력적 IP가 뭔가요? EC2 인스턴스를 생성하여 구동시킨 서버의 IP는 고정 IP가 아닙니다. 따라서 탄력적 IP(Elastic IP)를 이용해 고정 IP를 할당 받아서 사용할 수 있습니다. 탄력적 IP를 이용하지 않으면, 인스턴스(서버)를 중지하고 다시 실행시키면 IP가 변경되어 버리는 대참사가 일어납니다. 실제로 운영 중인 서버인 경우, 서버를 중지(STOP) 했다가 다시 켰을 때 IP가 변경되어 버리면 매우 귀찮은 일이 발생할 수 있습니다. 따라서 일반적으로 고정 IP를 할당 받기 위해서 탄력적 IP라는 것을 이용합니다. 탄력적 IP는 비용이 드나요? 탄력적 IP는 무료입니다. 단, '인스턴스에 의해 실행될 때만' 이라는 조건이 붙습니다. 할당만 받아놓고 사용하지 않으면 $0.005/hr 이 과금..

🚛 DevOps/📙 AWS 2021. 4. 12. 10:44

[Ubuntu] NGINX 설치 + LetEncrypt 설치

1. NGINX as a Reverse Proxy root권한으로 application을 실행하는 건 권장하지 않는다. NGNIX를 이용해 프록시 서버를 두자. # default로 설치 된 apache2 제거 sudo apt remove apache2 sudo apt purge apache2 sudo apt install nginx # 포트 허용 sudo ufw allow ssh sudo ufw allow http sudo ufw allow https # 방화벽 활성화 sudo ufw enable sudo ufw status 2. NGINX 설정 파일 변경 sudo vi /etc/nginx/nginx.conf user www-data; worker_processes auto; pid /run/nginx...

🚛 DevOps/📙 AWS 2021. 4. 9. 11:46