본문 바로가기

Web36

[백엔드 스터디] 1. 익스프레스 찍어먹기 동아리에서 프로젝트장을 맡아 프론트엔드 및 백엔드 스터디를 이끌고 있습니다. 백엔드는 저도 초보이다 보니 공부하면서 스터디원들에게 전달하기 위해 만든 자료입니다. VSCode, Node 등의 설치는 이미 되어있다고 가정합니다. 공부할 것 서버, 데이터베이스에 대한 개념 알아오기 CORS란? SQL 문법 대충이라도 익혀보기 GET, POST, PUT 등 Rest API와 각 메소드에 대해 우선 Node.js Typescript 보일러플레이트를 갖다 써봅시다. git clone 으로 푹찍해옵니다. yarn add express 및 yarn add @types/express로 express와 타입 파일을 설치합니다. src/index.ts 에 다음과 같은 코드를 입력해봅니다. import express, { .. 2022. 9. 26.
[Strapi] Strapi 설치부터 배포까지 사내 위키에 작성한 글의 초안입니다! Strapi란? Strapi는 NodeJS 기반 헤드리스 CMS입니다. 헤드리스 CMS는 콘텐츠 저장소 역할을 하는 백엔드 전용 콘텐츠 관리 시스템입니다. 프론트엔드만 가져다 붙이면 컨텐츠에 접근할 수 있는 시스템이라고 생각하시면 될 듯 합니다. Strapi, Ghost 등이 있습니다. 그 중 가장 깃허브 스타 수가 많은 것이 Strapi입니다. 기본 admin 패널에서 설정하는 것 이외에 데이터를 주물주물 하는 등의 작업 또한 커스텀 코드 작성을 통해 자유롭게 할 수 있습니다. 이 글에서는 그 부분에 대해서는 다루지 않겠습니다. 프로젝트 세팅하기 npx create-strapi-app 프로젝트명 --quickstart 혹은 yarn create strapi-app .. 2022. 8. 23.
[리액트] 지뢰찾기 만들기 우선 맵을 만들어봅시다. const sz = 9; const [mp, setMp] = useState(Array.from({ length: sz }, () => Array.from({ length: sz }, () => 0))); const [ms, setMs] = useState(Array.from({ length: sz }, () => Array.from({ length: sz }, () => 0))); 지뢰가 있는 위치를 설정할 mp변수와 근처 지뢰의 개수를 설정할 ms변수를 만들었습니다. const setMap = () => { const initMp = Array.from(mp); initMp[0][2] = 1; initMp[2][1] = 1; initMp[2][2] = 1; initMp[1][.. 2022. 7. 31.
[Figma] 좌충우돌 Figma i18n 플러그인 제작기 회사 블로그 blog.promedius.ai/figma-i18-plugin/ 에 올린 글입니다. 아카이브용으로 가져왔어요. 개발팀 인턴의 좌충우돌 Figma i18n 플러그인 제작기 Figma를 아시나요? Figma Figma는 UI 프로토타이핑 툴인데요. 위처럼 단순히 와이어프레임을 만들 수 있을 뿐 아니라, 이렇게 요소들의 상호작용도 표현할 수 있습니다. 무엇보다 이렇게 여러 사람이 blog.promedius.ai ▲ 글 열심히 꾸며 놓았으니 요 링크에서 봐주세요. 🤗 Figma를 아시나요? Figma는 UI 프로토타이핑 툴인데요. 위처럼 단순히 와이어프레임을 만들 수 있을 뿐 아니라, 이렇게 요소들의 상호작용도 표현할 수 있습니다. 무엇보다 이렇게 여러 사람이 함께 수정도 가능합니다. 게다가 웹 기.. 2021. 5. 4.
[HTML] 티스토리 사이드바에 프로필 넣기 제 블로그에는 프로필 란이 있는데요, 이미지를 넣고 싶어서 직접 만들었습니다. 이 부분의 코드를 공유합니다. 티스토리 블로그 관리 > 스킨 편집 > html 편집에서 ctrl+F로 를 찾아줍니다. ID 자기소개를 넣어주세요. 제목1 내용1 제목1 내용1 제목1 내용1 해당 부분에 위 코드를 붙여넣기 해주세요. 부분에는 블로그 프로필 사진이 들어가는데, 다른 사진을 넣고 싶다면 '해당 이미지 주소' 로 대체해주시면 됩니다. 도 기본적으로 아이디가 들어가는데 이름이나 등등으로 대체할 수 있습니다. 자유롭게 수정해서 사용해주세요! 2021. 2. 27.
[Next JS] Next JS 시작하기 React는 CSR(클라이언트 사이드 렌더링) 방식으로 SPA(싱글 페이지 어플리케이션)를 만들 수 있는 프레임워크입니다. (오늘부터는 존댓말을 쓰기로 했습니다.) CSR 방식인 그냥 리액트의 경우 브라우저가 서버에서 html과 정적 파일을 받아온 후 데이터를 요청해서 받아와 렌더링합니다. 초기에 정적 파일을 다 받아오기 때문에 데이터 요청이 있을 때만 서버에 요청하면 됩니다. 또, JS로 화면에 렌더링되기 때문에 JS를 크롤링 할 수 없는 검색엔진에서는 검색엔진 최적화가 어렵습니다. Next JS는 React 기반으로 만들어진 프레임워크입니다. Next JS를 이용하면 리액트에서 SSR(서버 사이드 렌더링) 방식으로 렌더링을 할 수 있습니다. SSR은 초기에 필요한 데이터를 미리 가져와 데이터가 채워진.. 2021. 2. 6.
[GCP] 구글 클라우드 플랫폼에 Nginx로 리액트 프로젝트 배포하기 도메인을 산지 4달이 됐는데 아직 배포를 안 했다. 그래서 배포를 해보려고 한다. 구글 클라우드 플랫폼에서 새 VM 인스턴스를 만들어준다. 리전 / 영역은 적당히 서울로... HTTP / HTTPS 트래픽을 허용해준다. 눌러서 콘솔 들어간다. sudo apt-get update sudo apt-get upgrade 물어보면 그냥 Y 해준다. 설치 끝. sudo apt-get install nginx sudo systemctl enable nginx sudo systemctl restart nginx sudo systemctl status nginx 잘 설치가 됐다는 뜻인 것 같다. sudo apt install git git clone (깃 링크) 깃을 설치하고, 배포할 프로젝트를 클론해온다. cd ./.. 2020. 11. 29.
[리액트] Scroll indicator 만들기 코드 | import React, { useState, useEffect } from "react"; import * as S from "./styles"; function ScrollTracker() { const pageHeight = document.body.scrollHeight - document.body.clientHeight; const [scrollY, setScrollY] = useState(0); useEffect(() => { const onScroll = () => { const s = window.pageYOffset; setScrollY(s); }; window.addEventListener("scroll", onScroll, true); onScroll(); return () .. 2020. 10. 31.
[리액트] 토스트 메세지 만들기 game-jam-2020.kucc.co.kr/의 참가 신청 버튼을 누르면 '신청이 마감되었습니다.' 라는 토스트 메세지가 뜨도록 만들었다. 일단 토스트 컴포넌트에서 고려해야 할 것들을 먼저 생각했다. 버튼을 누르면 보이기 일정 시간이 지나면 숨겨지기 보이고 숨겨질 때 애니메이션 넣기 토스트 컴포넌트 자체에 isActive (지금 메세지가 보이고 있는지) 라는 state를 넣으려고 했는데, 버튼으로 조작해야 하고, 이 페이지에서 토스트 메세지는 여기에서만 쓰니까 일단 페이지에 state를 만들었다. const [isActive, setIsActive] = useState(false); {setIsActive(true);}}> 참가 신청 토스트 컴포넌트에는 페이지에서 만들어준 state랑 state 세팅 함.. 2020. 10. 26.
[인증] JWT로 로그인 인증 1. 쿠키에 저장하기 로그인에 JWT를 사용할 경우, 아래와 같은 시나리오를 생각할 수 있다. 클라이언트에서 ID, Password로 로그인 요청을 보내면 서버에서 확인 후 토큰을 발급한다. 이 토큰이 "이 클라이언트가 로그인에 성공했음을 증명함" 증명서같은 역할을 하는 것이다. 그 이후에 클라이언트에서 요청을 할 때는 요청 헤더에 발급받은 토큰을 붙여서 보내면 서버에서는 해당 토큰이 유효한지만 검사하면 정보를 확인할 수 있다. 클라이언트에서 요청을 보낼 때 헤더에 토큰을 넣어서 보내려면, 토큰을 가지고 있어야 한다. 그러니까 어딘가에 저장해놓아야 한다는 뜻이다. 브라우저 메모리(react에서는 state)에 저장하면 한 번 렌더링될 때마다 다시 로그인을 해야 한다. local storage에 저장해놓으면, 따로 지우기 전까.. 2020. 8. 28.
[JWT] JSON Web Token JWT(JSON Web Token)은 JSON 객체로 정보를 암호화해 전달해준다. 구조 | Header, Payload, Signature의 세 부분으로 이루어져 있고 .으로 구분된 xxxxx.yyyyy.zzzzz의 형식이다. - Header { "alg": "HS256", "typ": "JWT" } 토큰의 타입 (일반적으로 JWT)과 JWT가 토큰에 서명할 때 사용하는 알고리즘(RS256, HS256)의 종류로 이루어져 있다. RS256은 SHA-256 함수를 이용한 RSA 암호화 방식을 의미한다. 즉 공개 키 암호화이다. HS256은 비밀 키 암호화이다. - Payload key-value의 한 쌍을 claim이라고 하는데, Payload에는 이런 claim들이 들어있다. Registered clai.. 2020. 8. 19.
[CSS] 스크롤바 커스텀하기 스크롤바 커스텀을 적용하고 싶은 CSS에 아래를 추가해주면 된다. ::-webkit-scrollbar { //width: 스크롤바 너비; } ::-webkit-scrollbar-track { //스크롤 영역 스타일 } ::-webkit-scrollbar-thumb { //스크롤 막대 스타일 } 예시 | ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #eeeeee; } ::-webkit-scrollbar-thumb { background: linear-gradient(#c2e59c, #64b3f4); } 이런 식으로 그라디언트를 넣어줄 수도 있다. ::-webkit-scrollbar { width: 10px; } :.. 2020. 8. 5.

티스토리툴바