ALL

Github Action 으로 S3 버킷 배포하기

Github Action 이란? Github이 공식 제공하는 빌드, 테스트, 배포 파이프라인 자동화를 위한 CI/CD 플랫폼이다. 어떤 이벤트가 발생했을 때 수행될 워크플로우를 .github/workflows 디렉토리에 형식으로 저장한다. yaml 이란? Yel Another Markup Language 의 약자로, 사람이 읽을 수 있는 데이터 직렬화 언어이다. JSON의 상위 격인 언어로 key : value의 계층 구조로 이루어진다. key : value 에서 value는 반드시 따옴표로 감싸야 한다. | 기호는 줄바꿈, > 기호는 줄무시를 의미한다. 간단한 예시 # Workflow 이름 name: Workflow Name # 해당 workflow 의 실행을 위한 이벤트 등록 # 현재는 push,와 ..

[TIL] 2022-1011

🐈오늘 배운 것 ✔️AWS AWS 아마존 웹 서비스는 클라우드 컴퓨팅 서비스를 제공한다. 클라우드 컴퓨팅이란 가상의 컴퓨터를 대여해주는 서비스로, 직접 서버실을 갖추고 운영,관리하는 온프레미스 방식에 비해 많은 장점을 가지고 있다. 먼저 인프라를 구축하는 초기 비용이 적게 들고, 사용한 만큼 금액을 지불할 수 있으며 컴퓨팅 능력을 필요에 맞게 탄력적으로 조절할 수 있다는 장점이 있다. 단점으로는 서비스 제공 업체의 문제로 전체 서비스가 영향을 받게 된다는 점이 있다. AWS 에서 제공하는 서비스의 종류가 많은데, 그 중 세 가지를 정리해보자. EC2 (Elastic Compute Cloude) AWS 에서 제공하는 클라우드 컴퓨팅 서비스, 가상의 컴퓨터를 한 대 빌리는 것과 같다. Elastic 이라는 ..

[알고리즘 JS] 퀵정렬 알고리즘 : Quick Sort Algorithm

퀵정렬 알고리즘이란? 하나의 기준점을 가지고 분할과 정복 방식으로 정렬하는 알고리즘이다. 최선의 경우 O(NlogN) 의 속도를 낼 수 있다. 아래 그림에서는 가장 오른쪽에 위치한 요소를 첫 번째 피봇 기준점으로 삼았지만, 전체 배열의 중간 요소를 초기 시작점으로 정하는 것이 일반적이다. 처음 정한 피봇을 기준으로 전체 배열 안에서 피봇의 위치를 확정할 수 있는데, 이 때 정렬은 피봇을 기준으로 좌측에 순서 상관 없이 피봇보다 작은 값, 우측으로 순서 상관 없이 피봇보다 큰 값이기 때문에 피봇에 대한 위치는 확정적이라고 할 수 있다. 한 번의 반복이 끝나면 피봇의 위치가 확정되고, 이 피봇의 위치를 기준으로 좌측, 우측이 분할되기 때문에 각 범위를 다시 재귀적으로 호출하여 최종적으로 정렬할 범위 안에 요..

[알고리즘] 마구간 정하기

문제 N개의 마구간이 수직선상에 있습니다. 각 마구간은 x1, x2, x3, ... , xN의 좌표를 가지며, 마구간 간에 좌표가 중복되는 일은 없습니다. 현수는 C마리의 말을 가지고 있는데, 이 말들은 서로 가까이 있는 것을 좋아하지 않습니다. 각 마구간에는 한 마리의 말만 넣을 수 있고, 가장 가까운 두 말의 거리가 최대가 되게 말을 마구간에 배치하고 싶습니다. C마리의 말을 N개의 마구간에 배치했을 때 가장 가까운 두 말의 거리가 최대가 되는 그 최대값을 출력하는 프로그램을 작성하세요. 풀이 const arr = [1, 2, 8, 4, 9]; const C = 3; function count(positions, distance) { // 말은 최소 하나 이상 들어갈 것이기 때문에 cnt 는 최소 1..

[TIL] 2022-1010

🐈오늘 배운 것 ✔️Next.js Auth : iron-session으로 유저 인증하기 Next.js 에서 iron-session 라이브러리를 사용해 유저를 인증하는 로직을 복습했다. 로직 자체는 간단하다. 1. 유저가 이메일로 받은 인증번호를 입력한다. 2. 해당 인증번호와 일치하는 유저 데이터를 찾는다. 3. 데이터를 찾는데 성공하면 쿠키를 통해 유저 아이디를 암호화하여 응답한다. 4. 다음 요청에서 쿠키와 함께 서버에 요청을 보내면, 쿠키를 확인하여 인증 여부를 결정한다. iron-session은 클라이언트쪽에 데이터를 저장한다는 점에서 토큰과 비슷하지만 payload가 암호화 된다는 점이 차이점이라고 한다. 또한 쿠키 생성 및 응답을 위한 helper 함수(withIronSessionApiRout..

[WIL] 2022 - 10 W1

💛Facts 캐럿마켓 클론코딩 복습 기초 CS GraphQL TDD 최적화, Lighthouse 사용 💛Feelings & Finding ✔️캐럿마켓 클론코딩 복습 클론코딩에서 배웠던 내용을 복습하면서 다시 만들고있다. 원래 목표는 iron session을 활용한 토큰인증과 리다이렉션까지 마무리하려고 했는데, 계획을 잘 지키지 못했다. 화면은 게시글 리스트 화면과 로그인 화면을 구현했고, 구현하면서 컴포넌트를 분리하고 커스텀 훅 작성하는 연습을 했다. 함수 짜는 연습을 하면서 아직도 fetch 나 비동기 함수를 다루는 부분이 많이 부족하다고 느꼈던 것 같다. Next.js 에서는 api 함수를 만들 때 promise 객체를 반환해야 해당 api 에서 연속적으로 함수가 실행된다는 것을 감지할 수 있다고 한..

Lighthouse 활용해보기

Lighthouse 구글의 오픈소스 품질 검사 자동화 툴이다. 검사할 페이지 url을 Lighthouse에 전달하면, 해당 페이지에 대한 여러가지 검사를 실행한다. 이 툴을 사용하면 현재 페이지의 성능, 접근성, 웹 표준 준수 여부, 검색 최적화 그리고 PWD(Progressive Web App) 현재 페이지가 모바일 앱에서도 잘 작동하는지를 확인하는 체크리스트를 리포트로 제공해준다. 해당 사항들에 대해서 문제점을 파악하고 개선 방향을 제시해준다. Lighthouse 워크플로우 검사할 페이지 url 을 라이트하우스에게 알려준다. 브라우저의 경우 url 을 입력해 페이지에 접속한 뒤 개발자 도구에서 Lighthouse를 선택하여 실행할 수 있다. Node CLI 환경에서는 Lighthouse 를 설치하고 ..

프론트엔드에서의 최적화 방법

최적화란? 주어진 조건에서 최대의 효율을 낼 수 있도록 만드는 것! 컴퓨터 공학에서는 가능한 적은 리소스를 소모하면서 빠르게 원하는 결과를 얻도록 하는 것이다. 최적화가 되어있는 웹페이지의 장점은 아래와 같다. 1. 이탈률 감소 : 로딩이 너무 길어지면 기다리다가 나가버린다. 2. 전환률 증가 : 전환율이란, 사이트 방문자가 사이트의 어떠한 기능을 이용하는 비율이다. 3. 수익 증가 : 위의 장점으로 트래픽이 증가해 결과적으로 수익 증가로 이어진다. 4. UX 향상 : 페이지 로딩이 빠를 수록 UX 는 향상된다. HTML CSS 코드에서의 최적화 리렌더링이 발생할 때 렌더트리의 크기가 크고 복잡할수록 리렌더링에 소모되는 시간이 늘어난다. 1. DOM 트리 가볍게 만들기 : 트리에서는 자식요소가 많을 수록..

[TIL] 2022-1005

🐈오늘 배운 것 ✔️Next.js API 함수에서 async await 사용 Next.js 에서 API 내부의 로직을 수행하는 함수는 프로미스를 반환하도록 해야한다. Next.js API 함수를 만들 때 이를 async await 으로 만들지 않으면 어떻게 되는지 궁금해서 직접 해봤다. export default function withHandler({method, handler}) { // 리턴되는 함수가 withHandler 함수 호출시 실행될 함수 : 이 부분이 async await 으로 작성되어야 함. return function (req, res) { handler(req, res); //... 생략 }; } 위와 같이 작성하니, 동작은 하는데 터미널에 아래와 같은 문구가 생겼다. API res..

CSR 과 SSR 알아보기! 부제 : 브라우저 렌더링은 서로 다르게 일어나는가?

오늘은 CSR과 SSR 에 대해서 개인적으로 정리한 내용을 공유하고자 한다. 궁금증을 해결하기 위해서 공부한 내용이라, 기존 나의 지식과 새로 생긴 궁금증을 바탕으로 알아가는 흐름으로 글을 진행하려고 한다. 지금까지 나는 CSR과 SSR에 대해서 정말 간략하게 클라이언트에서 페이지를 렌더링한다, 서버에서 페이지를 렌더링한다 정도로만 알고있었다. 렌더링이라는 용어 때문에 SSR 에서는 '브라우저 렌더링 과정이 일어나지 않는 것인가?!' 라는 궁금증이 생기기도 해서 조금 더 정확하게 알고싶어서 공부하고, 발표까지 하게 되었다. ✅지금까지 알고있는 것 CSR 은 서버에서 주는 데이터를 바탕으로 클라이언트에서 페이지를 렌더링 하는 것. SSR 은 서버에서 렌더링을 마친 페이지를 클라이언트에서 보여주는 것. SP..