기록의 힘

도메인 구매 및 Vercel 연결하기  2024.09.16 - [LAB/LAB 홈페이지 제작] - Vercel 프론트엔드 배포 방법 (100% 무료) Vercel 프론트엔드 배포 방법 (100% 무료)배포를 해보자 우리 랩실은 올해 11월달에 한국자기학회에 참가할 예정이다.그 전까지 홈페이지가 완성 까지는 아니더라도 소개 페이지 정도 만들어졌으면 하는 교수님의 요청이 있었고, 그 전j-codingbox.tistory.com 도메인을 구매하기 전, Vercel을 통해서 먼저 배포를 진행한 상태이다.Vercel에서 도메인을 수정할 수는 있지만 무료 버전을 계속 사용하기 위해서는 도메인 맨 뒤에 ".vercel.app"을 무조건 붙여야 한다.배포를 연습해보고 간단하게 포트폴리오 정도를 만들 때는 큰 상관이 없..

현재 만들고자 하는 UI는 다음과 같다. 멤버들 별 이름과 학력, 전공, email을 적고자 한다.위 UI를 보는 바와 같이 같은 UI가 반복되는 것을 볼 수 있다.하여 컴포넌트를 생성 후 map() 함수로 뿌려주고자 한다.   컴포넌트 생성 나는 일단 Function Component로 만들었다.그리고 컴포넌트 폴더를 따로 만들어두는 편이다.src 폴더에 components 폴더를 만들고 "MembersProfile.tsx" 파일을 생성하였다. 함수 형태로 컴포넌트를 만들기 위해서는 function 키워드를 사용해야 한다.그리고 아래 코드와 같이 const로 컴포넌트 이름을 선언해도 된다.나는 주로 아래와 같은 방식을 사용한다. 파일 생성 후 마지막에 export를 하면 다른 파일에서 해당 컴포넌트를 ..

헤더 반응형으로 만들기   접속하는 유저들 절반 이상은 모바일 환경에서 접속할 것이다.아시겠지만 모바일 버전에서는 마우스 hover 이펙트가 적용될 수 없다.그리고 화면 픽셀도 다르기 때문에 PC 버전으로 만든 웹을 모바일 환경에서 볼 때 UI가 굉장히 깨져 보일게 된다.그렇기 때문에 모바일 버전, 웹을 반응형으로 만드는 것은 필수라고 생각한다. 반응형으로 헤더를 변경하는 방법은 아래 포스팅으로 정리를 했었다.2024.09.28 - [LAB/LAB 홈페이지 제작] - 헤더 반응형으로 만들기 - React 에서 Tailwindcss 적용 헤더 반응형으로 만들기 - React 에서 Tailwindcss 적용TailwindCss로 반응형 헤더 만들기 내 목표는 교수님 명함에TailwindCss로 반응형 헤더 ..

TailwindCss로 반응형 헤더 만들기 내 목표는 교수님 명함에TailwindCss로 반응형 헤더 만들기  내 목표는 교수님 명함에 우리 홈페이지 URL이 들어간 QR 코드를 만들어드리는 것이 목표이다.그러기 위해서는 접근성이 좋은 모바일 버전의 웹 UI가 필수이다.반응형으로 만드는것은 꼭 필요한 일이지만 동시에 매우 귀찮은 일이긴 하다.그 중에서 헤더는 반응형이라기 보다는 적응형 웹 개발에 어울리다는 말이 맞는것 같다. PC 버전에서의 헤더는 메뉴들이 일자로 나열되어 있는 경우들이 많다. 화면이 그만큼 여유롭게 크기 때문이다.하지만 모바일 버전은 대부분 햄버거 모양의 이모티콘을 사용한다. 만드는 과정을 포스팅 해보고자 한다.   React 화면 크기 감지 - resize 이벤트 resize 이벤트는..

배포를 해보자 우리 랩실은 올해 11월달에 한국자기학회에 참가할 예정이다.그 전까지 홈페이지가 완성 까지는 아니더라도 소개 페이지 정도 만들어졌으면 하는 교수님의 요청이 있었고, 그 전까지 만들어보고자 한다.그래서 배포와 도메인 구매 단가를 알아보고자 하였다. 처음에는 AWS 프리티어를 이용해서 배포를 하고자 하였다.접속 시간이 최대 750시간 까지는 무료라고 하였다. 그러던 중 Vercel 이라는 무중단 배포 방법을 알게 되었었다.백엔드나 DB가 필요한 경우라면 약간의 비용이 청구될 수 있다고는 하는데 내가 만드는 웹은 프론트엔드로 다 만드는 것이라 전혀 비용이 부과되지 않는다고 한다.   배포 방법 1. 아래 Vercel 링크에서 회원가입 깃헙 계정으로 회원가입을 하면 Repositories를 바로 ..

이번 포스팅은 그림이 별로 없는 그냥 내가 주저리주저리 적어놓은 기억회상 이야기이다.조금 지루할 수도 있는 글일 수도 있지만내 삶의 전환점이 되는, 될 수도 있는 일들을 정리해보고자 한다. 내가 처음으로 코딩을 시작했었던 이야기부터프론트엔드를 시작하고 끝내는 과정을 적어보고자 한다.   개발, 한번 시작해 볼까? 나는 고등학교를 다닐 때만 하더라도 프로그래밍, 개발, 코딩이 어떤 것 인지도 몰랐다.학교에 코딩을 한다던 친구의 노트북을 들여다보면 알 수 없는 영어들이 수두룩 있는 것을 보고 대체 저런 걸로 무엇을 할 수 있는 거지? 라는 생각을 했던 게 기억이 난다.  이런 내가 개발을 시작한 시기는 3년전, 2021년 겨울이었다.내 친구 중에 엄청 열심히 코딩을 공부하고 있던 컴퓨터공학과 친구가 있다.그..

WAG - Web Appends Game  두 번째 프로젝트 시작! 이제 막 1학기가 시작된 터라 정신없이 전공 수업을 들으러 다니고 있었다. 이번학기도 어림없이 동아리에서 프로젝트를 하나 진행해야 했고, 어떤 프로젝트를 해야할지 고민하고 있었다.그러던 중 이전에 같이 프로젝트를 만들었던 친구가 이번학기 프로젝트도 같이 진행해보자고 제안하였고어떤 프로젝트를 만들껀지 알려주기도 전에 바로 진행시켜!! 이번학기도 재밌게 프로젝트를 진행할것 같은 느낌이 들었다.하지만 저번학기 프로젝트와는 조금 다른점이 있었다.저번 프로젝트는 처음 동아리에 들어와 리엑트를 어떻게 쓰는건지도 모르는 상태에서(html, css만 할 줄 알았음ㅠ) 프로젝트에 투입되어 같은 프론트앤드를 개발하는 팀원, 거의 나에겐 사부님이었다,, 그..