짧은코딩

이번 wayc 이커머스 프로젝트를 리팩터링 하는 과정에서 Redux Toolkit을 적용하기로 했다. 그 과정에서 통신을 어떤 방식으로 할지 많이 고민을 했다. 요즘 유행하는 것이 React Qeury, RTK Query, SWR 등이 있다. React Query는 팀원 모두가 다른 프로젝트에서 사용해 봤고, SWR은 맨 처음에 만드는 과정에서 사용했다. SWR은 Next JS에 좀 더 잘 어울린다는 말이 있기에 이번에는 RTK Query를 사용해 보기로 했다! (이번 글은 https://www.youtube.com/watch?v=pnpO3o8mLBU&t=1626s 생활코딩님의 유튜브 강의를 보고 작성한다. 생활코딩님께 감사드린다!!) 실습 코드 링크 https://codesandbox.io/s/rtk-..

타입스크립트에는 자바스크립트에는 없던 연산자들이 있다. 처음 봤을 땐, 나름 쉬워 보여서 그냥 넘어갈 수도 있지만 타입스크립트를 지속적으로 사용하다 보면 은근히 헷갈릴 때가 있었다. 그렇기에 이 글을 통해 정리하고자 한다. 연산자 유니언(|): 유니언 타입은 OR의 역할을 한다. 즉, 합집합의 역할을 한다. 인터섹션(&): 인터섹션 연산자는 AND의 역할을 한다. 즉, 교집합의 역할을 한다. 공집합(never) type nev = string & number; // never 인터섹션 연산자를 이용하여 위 코드를 작성하면 nev의 타입은 never가 된다. 즉, 타입스크립트에서 가장 좁은 타입이다. 전체집합(unknown) 전체집합은 unknown이며, 타입스크립트에서 가장 넓은 타입이다. 대입 원칙 타..

이번 글은 CI/CD 마지막 글이다! URL 카톡 공유 카톡에 URL을 공유하면 대부분 사이트 이름, 설명, 사진이 같이 나온다. 우리 사이트에도 한 번 적용해 보겠다. 우선 리액트 폴더에서 index.html을 찾아야 한다. -index.html -카톡 공유 이렇게 등록하면 된다! 카톡에 공유했을 때, 잘 적용된 것을 볼 수 있다. AWS 과금 알람 Route53으로 도메인을 설정했을 때, 과금이 조금 나왔다. 지금은 모두 무료 서비스로 바꿨지만 혹시 모르니 AWS 과금 알람 서비스를 등록했다. AWS Billing -> 예산 -> 예산 생성에 들어갔다. 그리고 1달러가 넘어가면 이메일에 알람이 오도록 설정했다. 이렇게 하면 설정이 완료된다!! CI/CD 적용 후기 프로젝트 기간 중에 Kakao I C..

우선 도메인 연결을 위해 가비아에서 도메인을 구입했다. 그리고 처음엔 AWS의 Route53을 활용하여 DNS 연결을 했다. 하지만 Route53은 과금이 나왔다. 그렇기에 나중에 가비아에서 DNS 연결하는 것으로 바꿨다. 2가지 방식을 다 기록했기 때문에 모두 기록하겠다. 탄력적 IP 연결하기 도메인을 연결하려면 고정된 IP가 필요하다. 하지만 AWS는 인스턴스를 종료했다가 시작하면 IP가 지속적으로 바뀐다. 그렇기에 탄력적 IP를 발급받아야 한다. 주의할 점으로는 탄력적 IP는 인스턴스와 연결되어야지만 무료이다! 만약 인스턴스를 중지하거나 삭제하면 과금이 발생한다!!! 인스턴스에 가서 탄력적 IP를 할당받았다. 그리고 프론트엔드 인스턴스와 할당받은 탄력적 IP를 연결했다. 도메인 설정하기(Route5..

이번 글은 AWS CodeDeploy와 EC2에 코드를 올리는 법에 대해 다루겠다. 전반적인 흐름 git에서 main 브랜치에 push -> S3에 파일이 올라감 -> CodeDeploy를 통해 EC2에 파일 업로드 즉, S3 -> CodeDeploy -> EC2 이렇게 코드가 올라가는데, Github Actions를 통해 바로 EC2에 접근할 수 없고, CodeDeploy는 저장 공간이 없기 때문에 저런 단계를 거쳐야 한다. EC2에 CodeDeploy agent 설치 EC2에 CodeDeploy가 접근하여 파일을 업로드 할수 있도록 code deploy agent를 설치해야한다. sudo apt-get update sudo apt-get install ruby sudo apt-get install w..

이제 Kakao I Cloud를 이용하지 못하기 때문에 AWS EC2 프리티어로 UpLog 프론트엔드 CI/CD를 구현해 보겠다. 아키텍처 설계도 우선 설계도는 이러하다. -개발자 먼저 개발자가 코드를 수정하고 main 브랜치에 push를 한다 -> Github Actions에서 이를 감지하고 S3에 React 코드를 Build 하여 올린다 -> S3에 올라간 코드를 CodeDeploy를 통해 EC2로 전달한다 -클라이언트 사용자는 uplog.store에 접속한다 -> https가 적용되어서 80 포트로 접근하면 443 포트로 리다이렉팅 시킨다 -> Nginx를 리버스 프록시로 활용하여 EC2 public Ip에서 받고 이를 리액트가 실행 중인 3070 포트로 리다이렉팅 시킨다 전체적인 흐름은 이러하다...

이번 프로젝트는 6/28~8/18 동안 진행되었다. 사실 긴 시간은 아니었다고 생각한다. 학기 중에 했던 설문 조사 플랫폼 만들기 프로젝트가 개인적으로 아쉬웠었다. 그렇기에 이번 기업 실무에서는 좀 더 열심히 해서 완성도 있게 프로젝트를 진행하고 싶었다. 그렇기에 우리 팀은 프로젝트에 대한 전반적인 기능과 디자인을 다 정해두고 시작하려고 했다. 이로 인해 기본적인 설계만 2주가 걸렸지만, 이렇게 정해두고 개발을 시작하는 게 옳았다고 생각한다. 사실 학기 중에 진행했던 프로젝트에서는 정해둔 게 많지 않아서 중간중간 멘탈적으로 힘들었다..! 그래도 이번엔 미리 정해둔 것이 많아 확실히 덜 힘들었다. 개발 이야기 우리 팀은 프론트엔드 2명이 진행을 하였다. 피그마 작업을 처음에 했어야 했는데, 같이 틀만 잡고..

변수 호이스팅 모든 프로래밍 언어를 배울 때, 가장 먼저 배우는 것 중에 하나가 변수 선언일 것이다. JavaScript는 변수 선언이 좀 특이하다. 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아닌 그 전 단계에서 먼저 실행된다. console.log(score); //undefined var score; 이 코드에서 console.log의 결과는 undefined가 나오게된다. 보통의 프로그래밍 언어라면 에러가 났을거지만, JS 엔진은 런타임 전에 소스코드의 평가 과정을 거치면서 런타임 준비를 한다. JS 엔진은 모든 선언문(변수, 함수 등)을 찾아 런타임 전에 먼저 실행한다. 변수 선언이 소스코드의 어디에 위치하든 어디서든지 변수를 참조할 수 있다! => 이렇게 변수 선언..

다크 모드가 실행되는 에디터 컴포넌트 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; import colorSyntax from '@toast-ui/editor-plugin-color-syntax'; import 'tui-color-picker/dist/tui-color-picker.css'; import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-synta..

문제 상황 이번 프로젝트를 하면서 위 사진과 같은 화면을 구현을 했어야 했다. Feature, Changed 등 Type 마다 색을 다르게 지정했어야 했다. 코드는 map 함수로 돌아가고 있고, tailwind.json에 사용해야 하는 색들은 모두 지정되어 있었다. {arry.type} 따라서 나는 이렇게 코드를 줘서 배경색을 지정하려고 했다. 하지만 이 코드는 적용되지 않았다..! 코드가 문제가 있나 싶어서, 개발자 도구에서도 봤었지만 class는 잘 적용됐다. 해결 방법 나는 도저히 이해가 안 되가지고 구글링을 하였다. https://forsaken.tistory.com/entry/tailwind-template-literal-%EC%82%AC%EC%9A%A9-%EC%8B%9C-%EC%8A%A4%ED..