분류 전체보기 검색 결과

해당 글 442건

[Javascript] Callback, Promise 그리고 async/await의 차이점

Callback, Promise, 그리고 async/await은 모두 JavaScript에서 비동기 작업을 다루는 방식입니다. 이번 글에서는 각각의 차이점에 대해 포스팅해 보겠습니다. 비동기 작업을 다루기 전에 동기와 비동기의 차이점부터 작성하였으니 참고해 주세요. 1. Synchronous, Asynchronous - 동기 (Synchronous) 동기 작업은 순차적으로 진행되며, 하나의 작업이 완료될 때까지 다음 작업이 시작하지 않습니다. 동기 코드는 작업이 순서대로 진행되기 때문에 간단하게 이해할 수 있고, 디버깅하기 쉽습니다. 하나의 작업이 끝날 때까지 다른 작업을 수행하지 않기 때문에 성능 문제가 발생할 수 있습니다. 특히 긴 시간이 걸리는 작업은 애플리케이션을 블록 시킬 수 있습니다. - 비동..
1. 웹개발/1_1_1 JavaScript 2023. 10. 29. 10:05

[HTTPS] Let’s Encrypt로 SSL 인증서 자동 갱신 방법

[HTTPS?] 이번 글에서는 HTTPS를 적용해 보겠습니다. 왜 HTTP가 아닌 HTTPS가 필요한 걸까요? HTTPS가 아닌 HTTP는 암호화되지 않은 프로토콜로 데이터가 암호화가 되어있지 않은 채로 네트워크를 통해 송수신합니다. 혹시나 제 3자가 가로채는 공격이 일어나면 민감한 정보가 그대로 노출되고 메시지가 위변조 될 수 있습니다. HTTP의 보안 버전인 HTTPS는 SSL/TLS를 사용하여 데이터를 암호화하고 보안 연결을 할 수 있게 합니다. 또한, 웹 사이트에서 HTTPS를 사용하려면 CA(인증 기관)에서 인증서(파일 유형)를 가져와야 합니다. 우리는 Let’s Encrypt를 이용하여 인증서를 가져와서 HTTPS를 적용해보겠습니다. 이제 Let’s Encrypt가 뭔지 알아봅시다. [Let’..
1. 웹개발/1_2_1 AWS 2023. 10. 17. 19:39

[AWS] EC2 고정 IP 생성 및 설정

[Elastic IP란?] 이번 글에서는 고정 IP를 생성하고 세팅하는 방법에 대하여 알아보도록 하겠습니다. 저희가 흔하게 부르는 고정 IP는 AWS에서는 AWS Elastic IP(탄력적 IP)라고 부르기도 합니다. 이러한 AWS Elastic IP는 EC2 인스턴스에 고정 IP를 설정할 때 사용됩니다. EC2에서 기존에 할당받은 IP는 인스턴스 상태가 중지되어 다시 실행될 때 IP의 값이 변경됩니다. 실제로 사용중인 아이피의 주소가 갑자기 변경된다면, 페이지를 찾을 수 없을 것입니다. 따라서, 원활한 서비스를 위해서라면 고정 IP를 꼭 사용하셔야 합니다. [탄력적 IP 생성 및 연결] 1. 네트워크 및 보안 탭에서 탄력적 IP를 클릭합니다. 2. 본인에게 맞는 네트워크 경계 그룹을 선택하고 할당 버튼..
1. 웹개발/1_2_1 AWS 2023. 10. 7. 00:06

[AWS] EC2 인스턴스 생성 & 연결

프로젝트를 배포하는 방법에는 여러 가지 방법들이 있습니다.먼저 대표적인 방법으론 AWS EC2를 통한 배포가 있습니다.그 외는 주로 정적인 콘텐츠를 배포할 때 사용되는AWS S3와 CloudFront, Amplify, nginx가 있습니다. * EC2란?EC2는 Elastic Compute Cloud의 줄임말입니다.Amazon Web Sevices(AWS) 에서 확장 가능한 컴퓨터를 제공하는 서비스입니다.즉, EC2란 사용자에게 맞는 가상의 컴퓨터를 제공해 주는 서비스라고 할 수 있습니다. 이번 글에서는 AWS에서 EC2 인스턴스를 생성하고 연결하는 방법에 대하여 알아보겠습니다.우선 AWS에 로그인을 한 뒤 EC2에 들어가주세요. 지역은 아래와 같이 서울(ap-northeast-2)로 지정합니다.   인..
1. 웹개발/1_2_1 AWS 2023. 8. 15. 17:25

[React] 카카오 로그인 구현하는 방법

안녕하세요. 이번 글에서는 카카오 로그인을 구현하는 방법에 대하여 알아보도록 하겠습니다. 요새 로그인이 필요한 웹, 앱이라면 너무 쉽게 접근할 수 있는데요, 널리 사용되는 만큼 어렵지 않은 것 같습니다. 예전에 안드로이드로 카카오 로그인을 구현한 적이 있었는데, 그 당시는 자료도 적고 개발 문서만 보고 작업하기에는 어려움을 느꼈었는데 요새는 개발 문서도 잘 나와있고 정리를 잘해주신 분들이 너무 많이 계시네요. 저도 개발자분들께 도움이 되고자 이번 글을 써봅니다. [개념] 카카오 로그인은 OAuth 2.0 기반의 소셜 로그인 서비스입니다. 카카오 로그인을 사용하면 사용자가 카카오톡 또는 카카오계정으로 손쉽게 서비스에 로그인할 수 있습니다. 서비스는 서비스 ID 및 비밀번호를 입력받고 검증하는 과정을 직접 ..
1. 웹개발/1_1_5 React JS 2023. 5. 22. 20:58

[React] S3를 이용한 파일 업로드 구현하기

이번 글에서는 React로 파일 업로드를 하는 방법을 알아보도록 하겠습니다. 저는 파일을 업로드하기 위해 AWS S3를 이용하였습니다. S3는 Simple Storage Service의 약자로 인터넷용 스토리지 서비스입니다. S3를 선택한 이유는 일반적인 파일 서버는 트래픽이 증가함에 따라서 장비를 증설하는 작업을 해야 하는데 S3는 이러한 작업을 대행해 줍니다. 트래픽에 따른 시스템적인 문제를 걱정할 필요가 없어지는 거죠. 또 접근 권한도 설정할 수 있어서 외부에서 사용하는 것도 방지할 수 있습니다. 이러한 S3에서 사용되는 주요 용어들은 다음과 같습니다. 객체(object), AWS는 S3에 저장된 각각의 데이터를 객체라고 명명하는데, 하나 하나의 파일이라고 생각하시면 됩니다. 버킷(bucket), ..
1. 웹개발/1_1_5 React JS 2023. 3. 8. 19:48

Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. 해결 방법

MUI의 DataGrid를 활용한 토이프로젝트 진행 도중 다음과 같은 에러가 발생하였습니다. Uncaught Error: MUI: The data grid component requires all rows to have a unique `id` property. MUI DataGrid 컴포넌트를 사용하실 땐 MUI 자체에서 행에 고유한 id Props를 설정해줘야 합니다. MUI DataGrid에 고유 id props를 추가해 보겠습니다. MUI DataGrid API 레퍼런스에 가서 보시면 getRowId 프롭스가 있습니다. 바로 이것을 설정 해주시면 됩니다. getRowId 프롭스를 통해 해당 행의 ID를 반환할 수 있습니다. getRowId 타입은 Function이여서 함수형태로 주셔야 합니다. 인..
1. 웹개발/1_1_8 Error Handling 2023. 2. 10. 21:35

[React] useRef() 여러 개를 한 개로 관리하기

이번 글에서는 여러 개의 useRef를 사용했을 때 효율적으로 useRef를 관리하는 법에 대하여 알아보도록 하겠습니다. 우리는 보통 DOM요소에 접근하거나 저장공간으로 활용하기 위해 useRef를 사용하곤 합니다. 그런데 useRef()가 여러 개인 경우는 어떻게 사용하시나요? 한 개씩 추가하면서 사용하시나요? 아래를 한 번 보겠습니다. [문제 상황] useRef()를 일반적으로 사용하는 아래 코드입니다. input 폼요소에 각각 useRef로 선언을 해서 사용하였습니다. 이때는 사실 개수가 적어 별로 문제가 안된다고 생각이 드실 수 있습니다. const refTel = useRef(null); const refName = useRef(null); 하지만 아래처럼 폼요소가 많거나 계속해서 추가해야될 상..
1. 웹개발/1_1_5 React JS 2023. 2. 2. 20:40

[React] 파일업로드 이미지 미리보기 구현하기

이번 글에서는 React로 이미지 업로드를 하고 업로드한 파일을 미리 보기로 화면에 렌더링 하여 사용자에게 보여주는 작업을 구현하도록 하겠습니다. 간단하게 미리 보기를 구현할 수 있기 때문에 이 글만 읽어도 기능을 구현하고 이해하는 데는 어렵지 않을 것으로 생각이 듭니다. 이 기능은 실제로 정말 많이 사용되고 있고 저 같은 경우는 개인적으로 개발하고 있는 사이드 프로젝트에서 아래와 같이 사용해 봤습니다. 이번 글에서는 단순히 미리보기 기능만 있는 간단한 화면 하나를 개발하고 해당 코드를 보면서 미리 보기를 구현하겠습니다. [구현하기] 파일을 업로드하는 인풋버튼을 하나 만들고, 바로 올린 파일의 이미지를 미리보기로 보여주고 있습니다. 파일을 선택하여 업로드하는 경우, 선언한 FileReader로 업로드한 ..
1. 웹개발/1_1_5 React JS 2023. 1. 28. 19:32

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 해결 방법

React로 파일 업로드 작업을 구현하기 위해서 AWS의 S3(Simple Storage Service)를 사용하려고 하였습니다. 제가 생성한 버킷의 경로에 파일 이미지를 추가하려고 하는데 아래와 같은 에러가 발생하였습니다. 저와 같은 에러가 발생하였다면 이 글을 보고 시간 절약해서 빠르게 해결하셨으면 좋겠습니다. has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.    [에러 원인]위에서 발생한 에러는 Cors에러로 현재 도메인의 권한이 허용이..
1. 웹개발/1_1_8 Error Handling 2023. 1. 22. 22:17

[React] MySQL, Node.js 연동하여 Insert, Update, Delete 구현하기

지난 글에서는 React, MySQL, Node.js를 연동하여 데이터를 조회하는 글을 작성했었습니다. 이번 글에서는 데이터를 추가, 수정, 삭제해 보도록 하겠습니다. 지난번 데이터 조회때와 마찬가지로 시작하기에 앞서 MySQL이 설치되어 있어야 합니다. 이 글에서는 MySQL 설치, 세팅 방법에 대해서는 다루지 않겠습니다. 다운로드 링크만 적어놓을 테니 설치가 안되신 분은 설치 후 세팅하시기 바랍니다. 아래 경로에서 PC 운영 체제에 맞게 다운로드하여 설치 진행하시면 됩니다. 첫 번째 다운로드 링크는 MySQL 설치 파일이고, 두 번째 다운로드 링크는 MySQL을 편리하게 사용할 수 있는 툴입니다. 마지막 링크는 데이터 조회하는 방법입니다. https://dev.mysql.com/downloads/my..
1. 웹개발/1_1_5 React JS 2023. 1. 15. 21:55