반응형

전체 글 132

[React] 화살표 함수 (Arrow Functions)

화살표 함수(Arrow Funcions) Arrow 함수는 함수를 작성할때 좀 더 간결하게 해줄수 있는 함수입니다. 기본 바로 예제를 통해 확인해 보겠습니다. // Before hello = function() { return "Hello World!"; } // With Arrow Function hello = () => { return "Hello World!"; } 간결해 졌습니다. 함수에 지정문이 하나만 있고 바로 그 값을 반환 한다면 아래와 같이 더 간결하게 만들수 있습니다. // Arrow Funtions Return Value by Default // Note: This works only if the function has only one statement. hello = () => "He..

PROGRAMING/React 2024.04.18

[JavaScript] JavaScript Modules

자바스크립트에서 모듈은 단순히 파일입니다. 모듈의 목적은 더 작은 파일로 작업할 수 있는 더 많은 모듈식 코드를 갖는 것이며, 이 코드를 가져와(import) 내보냄(export)으로써 구축하는 앱을 더 사용자 정의할 수 있고 더 구성 가능한 부품을 가질 수 있습니다. 모듈은 별도의 파일에서 단일 기능만큼 간단할 수 있습니다. function addTwo(a, b) { console.log(a + b); } 위 코드만 포함된 addTwo.js라는 파일이 있다고 가정해 보겠습니다. 이 파일을 자바스크립트 모듈로 만드는 방법은 무엇입니까? 자바스크립트 모듈로 만들기 위해 해야 할 일은 내보내기 구문(export)을 사용하는 것입니다. Module Exports 자바스크립트에서 모듈을 내보내는 방법은 여러 가..

[GitHub] GitHub 계정 만들기 (Create your GitHub account)

Step 1: 웹 브라우저에서 Github 웹사이트로 이동합니다. (Go to Github in your web browser) Step 2: 오른쪽 위에 있는 Sign up 버튼을 클릭합니다. (Click the Sign-up button in the top right of the screen.) Step 3: 이메일 주소를 입력합니다. (Enter your email address) Step 4: 유추하기 어려운 패스워드를 정하여 입력합니다. (Choose a strong password) Step 5: 원하는 Username을 입력합니다. (Enter a username) Step 6: 해당 질문에 맞는 대답을 선택합니다. (Complete the security question) Step 7: C..

/Git\GitHub 2024.04.17

[Git\GitHub] What is Git and GitHub?

Git은 사용자가 프로젝트 내 파일의 변경 사항을 추적할 수 있도록 설계된 버전 제어 시스템입니다. Git은 리눅스용 운영 체제인 커널의 모든 변경 사항을 추적해야 하는 큰 문제를 해결하기 위해 설계되었습니다. 리눅스에는 매일 변경 사항과 업데이트를 커밋하는 수천 명의 기여자가 있습니다. Git은 이러한 모든 변경 사항과 업데이트를 추적하는 문제를 돕기 위해 설계되었습니다. Git은 변경 사항을 추적하는 데 도움이 될 뿐만 아니라 다른 버전 제어 시스템의 일부 단점을 해결하기 위해 설계되었습니다. Git이 유사한 시스템에 비해 제공하는 이점으로는 속도와 성능, 신뢰성, 자유롭고 개방된 소스 축, 접근 가능한 구문 등이 있습니다. 또한 Git은 주로 명령줄을 통해 사용된다는 점도 중요합니다. 개발자는 배우..

/Git\GitHub 2024.04.17

[TAX] FBAR 해외금융계좌 신고 방법

https://bsaefiling.fincen.treas.gov/NoRegFBARFiler.html 해외 금융 계좌 신고는 위의 URL을 통해서 보고 하실수 있습니다. Individuals Filing the Report of Foreign Bank and Financial Accounts (FBAR) Individuals Filing the Report of ForeignBank & Financial Accounts (FBAR) To file the FBAR as an individual, you must personally and/or jointly own a reportable foreign financial account that requires the filing of an FBAR (FinCE..

다른것/TAX 2024.04.14

[Host] Releasing a full-stack application

드디어 이제 블로그 앱을 호스팅할 준비가 다 되었습니다. 이 앱을 Google Cloud통해 게시해 보도록 하겠습니다. 참고로 이 과정에서는 구글 클라우드 사용에 따른 비용이 청구될 가능성 있으므로 주의해야 합니다. 첫번째 단계는 app.yaml파일을 Back End 프로젝에 생성해줍니다. 이 파일은 기본적으로 구글 클라우드에 프로젝트를 실행해야 하는 환경을 알려줍니다. 그리고 여기에 MongoDB 사용자 이름 및 비밀번호와 같은 환경 변수를 지정하기에도 좋은 위치입니다. 추가한 app.yaml파일에 node 서버의 버전정보를 등록합니다. 그리고 환경 변수 파일을 지정합니다. app.yaml includes: - prod-env.yaml runtime: nodejs20 그 다음 위에 지정한 환경 변수를 ..

[Host] Rebuild and Deploy

여기서는 Front End에서 부득히하게 코드 수정이 생겼을때 다시 배포하는 방법을 알아보도록 하겠습니다. 원격으로 접속한 데이터베이스를 연결한 블로그에 로그인을 해 보겠습니다. 로그인 정보는 Firebase Auth를 사용하고 있기에 호스팅으로 옮겨도 사용가능하므로 이전 로그인 정보로 로그인 해봅니다. 그런데 여기서 Front End에 구현이 잘못된곳이 있어서 소스를 다시 수정해야하는 일이 발생합니다. 예를 들어 여기서는 로그인을 확인하는 정보가 잘못되었습니다. 로그인을 하니 좋아요을 누르지 않았는데 이미 눌렀다고(Already Upvoted)나옵니다. 이부분을 수정한 코드는 다음과 같습니다. ArticlePage.js import { useState, useEffect } from 'react'; i..

[Host] Setting up hosting for MongoDB

앱을 게시 할 준비를 하기위해서 할일이 하나 더 있습니다. MongoDB를 개발 환경이 아닌 누구나 엑세스가 가능한 곳으로 호스팅 해야 합니다. MongoDB를 위한 다양한 호스팅 플랫폼중에 여기서는 MongoDB Atlas 소프트웨어의 무료 버전이 일반적으로 작업이 가장 쉽다고 생각하기에 이곳을 사용하겠습니다. MongoDB Atlas | MongoDB MongoDB Atlas Get started free. No credit card required. www.mongodb.com MongoDB 계정이 없다면 위의 링크를 통해 가입을 해야 합니다. MongoDB의 Atlas 대시보드에서 블로그를 사용을 위해 새로운 프로젝트를 작성합니다. 프로젝트 이름을 정해주고 Next 버튼으로 진행합니다. 여기서는 ..

[Host] Preparing an app for release

지금까지 Full stack 앱을 작성 하였고 이제 작업한 앱을 누구나 엑세스 할수 있도록 호스팅하는 방법을 알아보도록 하겠습니다. 가장 먼저 해야 할일은 Front End를 빌드 하고 Back End에서 호스팅하도록 하는것입니다. 먼저 Front End를 빌드하겠습니다. 클라이언트 폴더로 이동을 한후 다음의 명령어를 입력합니다. npm run build 위의 명령어를 통해 개발자가 친화적인 코드를 브라우저 친화적인 코드로 변경하여 build폴더안에 저장합니다. 현재 Front End를 개발하는 동안 앱을 호스팅한것은 Reacts 안의 내장 개발 서버였습니다. 그러나 실제 프로덕션에서는 노드 서버에서 호스팅 해야합니다. 그래서 Front End에서 빌드한 build폴더를 카피해서 Back End에 저장합..

[Auth] Making interface adjustments for authenticated users

이제 인증의 마무리단계를 하겠습니다. 사용자는 한번만 좋아요 버튼을 클릭 할 수 있게 버튼 이름을 변경하고 로그인 한 사용자는 이름이 가지고 있으므로 이름이 자동으로 뿌려지도록 하는 작업등을 해 보겠습니다. ArticlePage.js import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import NotFoundPage from './NotFoundPage'; import CommentsList from '../components/CommentsList'; import AddCommentForm from '../components/AddCommen..

반응형