전체 글

[TIL] Github Actions 기초

[TIL] Github Actions 기초 날짜 2022.07.03 목표 새로운 프로젝트 준비 내용 GitHub Actions 개념 Events - Git에서 발생하는 머지, 커밋 등에 따라 발생하는 이벤트 Workflows - 발생한 Event에 따라 진행하려는 작업 흐름 Jobs - 기본적으로 병렬로 작업을 수행하는 하나의 작업 단위 Step - Job의 순서대로 여러 명령어 사용 Actions - Github에 누군가 잘 정의해놓은 라이브러리 같은 것 Runners - Jobs들을 각각 실행 VM 또는 Docker 컨테이너와 유사 작성법 # /.github/workflows/workflow.yml 생성 name: my-github-actions # 깃헙 액션 이름 지정 on: [push] # pus..

[Project] Web2.0 Blockchain Community

Web2.0 Blockchain Community 팀명 - SevenDAO 팀 구성 및 나의 역할 팀원 구성 - 4명 Front-end : 2명 Back-end : 2명 나의 역할 팀장 역할 수행 프로젝트 일정 관리 Front-end 포지션 게시글 및 댓글 쓰기 및 조회 마이페이지 Front-end, Backend, Blackchain 전체 기능 연동 및 테스트 프로젝트 배포 프로젝트 목표 인센티브 기반 커뮤니티를 구현 인센티브 시스템의 동작 원리를 이해하고, 서버기반 지갑 서비스를 구현 Web2.0 기반 커뮤니티 사이트의 아키텍처를 이해 ERC-20 스마트 컨트랙트 이해 및 새로운 형태의 함수 구현 프로젝트 기간 프로젝트 일정 2022년 6월 20일 ~ 7월 1일 ( 약 2주 ) 회의 시간 - 매일 오..

[TIL] 무한 스크롤

[TIL] 무한 스크롤 날짜 2022.06.30. 목표 없음 내용 React - 무한 스크롤 Scroll Event 브라우저 크기와 스크롤 위치에 따라 스크롤 const { innerHeight } = window; // 브라우저창 내용의 크기 (스크롤을 포함하지 않음) const { scrollHeight } = document.body; // 브라우저 총 내용의 크기 (스크롤을 포함한다) const { scrollTop } = document.documentElement; // 현재 스크롤바의 위치 // scrollTop과 innerHeight를 더한 값이 scrollHeight보다 크다면 if (Math.round(scrollTop + innerHeight) >= scrollHeight) { 결론 ..

[TIL] React/Next 로딩 화면 및 클립보드 구현

[TIL] React/Next 로딩 화면 및 클립보드 구현 날짜 2022.06.29. 목표 로딩 및 클립보드 기능 구현 내용 Next.js - 로딩 화면 구현 // _app.tsx import Router from "next/router"; import {useState, useEffect} from 'react' export default function App({ Component, pageProps }) { const [loading, setLoading] = useState(false); const start = () => { setLoading(true); }; const end = () => { setLoading(false); }; useEffect(() => { Router...

[TIL] React - Hydration Error

[TIL] React - Hydration Error 날짜 2022.06.28. 목표 SDAO 프로젝트 디버깅 내용 React - Hydration Error 원인 - 렌더링하는 동안 pre-rendering React 트리와 브라우저의 첫 번째 Rendering와 차이로 인해 발생 해결 - useEffect를 사용하여 상태를 변경해준다. import { useEffect, useState } from 'react' function MyComponent() { const [color, setColor] = useState('blue') useEffect(() => setColor('red'), []) return Hello World! } 참조 react-hyd..

[TIL] TDD vs BDD

[TIL] TDD vs BDD 날짜 2022.06.27. 목표 없음 내용 Redux vs Context API 공통 - 전역 상태 관리 Redux Context API를 기반으로 제작 디버깅이나 로깅 등의 상태 관리 이외의 여러 기능이나 미들웨어 지원 Context APi 단순 전역 상태 관리 React 자체 내장되어 있어 바로 사용 가능 TDD vs BDD TDD(Test Driven Development) 테스트 작성 후 정상적으로 돌아갈 때까지 테스트하면서 코드를 작성하는 작업 모듈과 계층 간의 커플링 최소화 프로젝트의 유지보수와 확장에 용이 BDD(Behavior Driven Development) - TDD에서 파생된 개발 방법론 사용자의 행위를 포함한 테스트 작성 후 정상적으로 돌아갈 때까지 ..

[TIL] 배포하는 길을 멀고도 멀다.

[TIL] 배포하는 길을 멀고도 멀다. 날짜 2022.06.24. 목표 프로젝트 기본 기능 구현 내용 Docker - node 이미지 오류 아직 완벽하게 해결하지 못했지만 node 이미지 오류가 있어서 dockerfile이 실행되지 않았었다. Access 패턴이란? 사용자들이 일정 양의 토큰을 네트워크에 예치해야만 서비스가 이용 가능한 패턴 AirSwap : 거래자와 판매자들의 희망 판매 정보를 탈중앙화된 방식 관리 기존 중앙화된 거래소의 중앙화된 한계점을 극복 판매자와 구매자들의 거래정보를 각각 Off-chain에 기록하고 체결된 거래만을 블록체인 상에 기록 결론 새로운 도커 이미지를 통해서 배포해보자!

[TIL] 커밋되지 않은 모든 파일 삭제

[TIL] 커밋되지 않은 모든 파일 삭제 날짜 2022.06.23 목표 게시글 조회와 작성에 대한 UI, API 구현 이미지 파일 URL 저장 안되는 오류 해결 이전 프로젝트 정리 내용 Git - 커밋되지 않은 모든 파일 삭제 $ git reset $ git checkout . $ git clean -fdx Blockchain - 소울바운드 팔수 없는 NFT Blockhcain - 디스카운트 토큰 ‘특정 재화나 서비스에 대한 할인’이라는 효용을 제공해주는 토큰 결론 깃 관리 너무 어렵다..

[TIL] caver-js 버전 1.4.2로 다운그레이

[TIL] caver-js 버전 1.4.2로 다운그레이 날짜 2022.06.22. 목표 로그인 및 회원가입 API 구현 KIP7 컨트랙트 실행하기 내용 Klaytn - Kaikas와 사용시 caver-js 버전 1.4.2로 다운그레이 필요 1.5.0 이상 버전은 Kaikas와 호환성 오류 있음 결론 caver 버전을 낮춘다고 1.5.0을 쓰고 있었는데, 이마저도 호환이 잘 되지 않았다. 1.4.x 버전을 설치하니 잘 동작했다.

[TIL] 프론트 환경 구축과 배포

[TIL] 프론트 환경 구축과 배포 날짜 2022.06.21. 목표 DeSo 프로젝트 Front 환경 구축 내용 Next.js - getStaticProps vs getServerSideProps 공통점 - pre-render가 필요한 경우 사용 getStaticProps - 빌드 시 한번 호출 정적(고정된) 데이터 성능 우수 getServerSideProps - 페이지 요청마다 호출 동적 데이터 동적 수정 가능 npm ci npm ci(Continous Integration, 지속적인 통합) 장점 - 빠른 설치 속도 package.json 파일보다 package-lock.json 파일을 우선 기존의 node_modules 폴더를 삭제하고 package-lock.json 파일을 기준으로 package를 ..