div.log('Code Trail')

[GitHub] git push 오류 (error: failed to push some refs to ...)

GitHub에 업데이트된 소스파일을 push 하려는데 'error: failed to push some refs to ' 오류가 발생했다.$ git pushTo https://github.com/duski96/portfolio.git ! [rejected] main -> main (fetch first)error: failed to push some refs to 'https://github.com/duski96/portfolio.git'hint: Updates were rejected because the remote contains work that you do not hint: have locally. This is usually caused by another repository pu..

[JavaScript] 한 시간 전 날짜 구하기 (getTime() 매서드 사용)

기상 API를 사용해서 웹을 만들었는데, 지금까지 찾아내지 못했던 버그가 있었다.API를 호출하는 링크에서 현재 접속 시간에 맞게 날짜와 시간을 유동적으로 바꿔주는 코드를 작성했는데, 이게 0시 ~ 1시까지 작동하지 않는 문제가 있었다.원래부터 DB 업데이트가 정각에 이루어지지 않아서 그런지 매 시간 정각에 API 호출 오류가 있어 '현재시간 - 1'을 기준 시간으로 잡았는데, 생각해보니 0시에 접속하면 기준 시간이 -1시가 되버리기 때문에 오류가 발생할 수밖에 없었다. // 한 시간 전의 시간을 구하기 위한 기존 코드const hour=new Date().getHours-1; 즉 시간을 먼저 구하고 그 값에 -1을 주었기 때문에 오류가 발생한 것이다. 개선된 코드getTime() 매서드는 1970년 1..

포트폴리오 제작 중 CSS 애니메이션을 활용해 문장이 물결치는 듯한 효과를 내고 싶었다.예전에 물결 효과를 구현할 땐 HTML에서 모든 글자를 하나하나 span 태그로 감싸서 각각 애니메이션과 딜레이를 적용했는데, 이러면 두 가지 문제가 있었다.HTML 코드가 너무 길어져 비효율적임텍스트가 바뀌면 수정이 번거로움따라서 HTML에 span 태그를 사용하지 않고 JS로 구현할 방법을 찾아보았는데, 애니메이션을 적용할 요소의 내용을 span 태그로 감싼 상태로 바꿔주면 된다. Hello Words!/* CSS */h1 span{animation:wave_animation 1s ease-in-out infinite;}@keyframes wave_animation{ 0%, 50%{transform: tran..

리액트 프로젝트를 진행하다보면 여러 상태를 선언하고 사용하게 된다.TS를 활용한다면 이런 상태에 대한 타입까지 명확하게 정의해 관리할 수 있다. useState 활용 시 타입 지정 : 제네릭 타입// App.jsx// useState 활용 시 타입 지정type WeatherType={[key: string]: string[]}// 날씨 정보 초기값const weatherInfoInit: WeatherType={ T1H:[], RN1:[], SKY:[],}function App(){ // 날씨 정보를 관리할 상태 선언 const [weatherInfo, setWeatherInfo]=useState(weatherInfoInit);}export default App; 날씨의 정보를 ..

더보기 그동안 포스팅 업로드가 뜸했는데 미루고 있던 TypeScript 프로젝트를 진행중이었다.3월까지 진행했던 MINI 중고차 홈페이지 제작은 입문용 프로젝트였던 만큼 시행착오가 많았지만 그만큼 리액트 활용법이나 웹 개발의 전반적인 프로세스에 대한 이해도를 올릴 수 있었던 것에 의미를 두고 있다.물론 여전히 보완할 점이 계속해서 보이지만 우선순위에서는 잠시 미뤄두었다. 새로운 프로젝트 : 해변 날씨 예보 기능 구현이번 프로젝트를 시작하기 전에 몇 가지 규칙을 정했다.DB는 사용하지 말 것공공 API를 활용해볼 것any 타입을 사용하지 말 것이전에 게시판을 구현해본 결과, DB를 활용한 프로젝트는 비용 문제도 있고 포트폴리오 방향성에 혼동을 줄 수 있을 듯 하여 우선은 배제하였다.그래서 이번엔 개발자라면..

백엔드 서버 패포용으로 Railway를 선택한 이유 중 하나는 MySQL DB를 지원하기 때문이다.원래는 로컬에서 직접 만든 DB와 똑같은 속성을 갖도록 만들고 싶었는데 아무래도 무료 서비스라 그런지 기능이 너무 제한적이라 아쉬웠다. DB 생성하기 이전 포스팅에서 서버를 만들었던 프로젝트와 동일한 위치에 MySQL DB를 추가할 것이다.우측 상단의 Create 버튼을 클릭하고 Database 서비스를 생성하면 PostgreSQL, Redis, MongoDB, MySQL 중 선택이 가능하다. 테이블 생성하기 DB를 선택하고 조금만 기다리면 서버와 같은 위치에 DB가 생성되고 자동으로 배포되는데 이제 테이블을 추가해주면 된다. 여기서 당황했던 점은 분명히 MySQL DB를 생성했는데 컬럼의 type은 다른 ..

이전 포스팅에서 예고했던대로 이번엔 'Railway'를 이용한 백엔드 서버 배포 과정을 포스팅할것이다.이 과정에서 시행착오가 꽤 많았기 때문에 생각보다 시간이 오래 걸렸다. Railway란?Railway는 개발자들이 코드를 간편하게 배포할 수 있도록 지원하는 클라우드 플랫폼으로, 자동 배포, 다양한 서비스 관리, 사용자 친화적인 인터페이스를 제공한다.팀 협업이 가능하고 컨테이너 기반의 인프라 사용하여 스케일링이 용이해 안정적인 앱 운영을 돕는다. https://railway.com/ RailwayRailway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally..

리액트 프로젝트를 배포하기 위해선 단순히 호스팅 서버에 소스파일을 파일을 올리기만 해선 안된다.프로젝트 빌드 과정을 거치고 라우터 에러를 방지하기 위해 서버 설정 파일을 손보는 등 추가적인 여러 절차가 필요하다.서버 설정에 관한 공부가 개인적으로 필요하다면 시도해봐도 좋지만, 지금은 프론트엔드 하나로도 충분히 벅찬 상황이라 이번엔 조금 쉬운 방법을 택했다. Vercel이란?프론트엔드 개발자가 쉽게 웹 애플리케이션을 배포할 수 있도록 해주는 클라우드 서비스이다.글로벌 CDN 사용으로 콘텐츠를 빠르게 전송할 수 있고 Git 저장소와 연동해 자동 배포가 가능하며, 개인 프로젝트같은 소규모 앱을 배포한다면 무료로 사용 가능하다. Vercel 가입하기가입은 hobby 플랜으로 진행하면 되고, GitHub 계정과 ..

최근엔 제작중이던 홈페이지의 게시판을 구현하고 있다.하나의 페이지에 총 5개의 게시판이 등장하는 형태이고, 각각의 게시판마다 더보기 버튼을 클릭하면 해당 게시판의 전체 글을 볼 수 있도록 계획했다. 처음엔 완성하는데 1주일 정도 걸릴 것이라 예상했지만 게시판이라는 것이 생각보다 신경써야 할 부분이 많았고, 시간이 꽤 많이 지나버렸다. 😂아직까지도 디테일한 기능은 부족하지만 이 부분은 계속 보완할 예정이다.그리고 이번 포스팅은 지금까지 구현한 모든 내용을 다 다루면 너무 길어지기 때문에 위 이미지의 '정기 모임' 게시판에 글을 올리고 수정, 삭제하는 것을 중점으로 다루려 한다. 게시판의 기본 기능게시판의 필수적으로 CURD 기능이 구현되어야 한다. 작성자가 글을 쓰고(Create), 수정(Update)을..

홈페이지 방문자가 회원 가입을 진행한다면 입력한 데이터는 DB에 저장된다.이번 포스팅은 DB에서 데이터를 불러오지 않고 반대로 데이터를 추가하는 방법을 다룰 것이다.사실 이 부분은 SQL문만 알고있으면 어려울 부분이 전혀 없다.// authRouter.jsrouter.post('/register_submit', (req, res)=>{ // 클라이언트로부터 전달받은 input 값 const {regId, regPw, regNickname, regEmail, regCar}=req.body.registerSubmit; // DB에 데이터를 추가하기 위한 쿼리문 const sql='insert into users (user_id, user_pw, nickname, email, car) ..