기록의 힘

1. 이미지 불러오기 이미지를 불러올 때는 File > Open 메뉴를 클릭하거나, 이미지 파일을 드래그&드롭하여 불러올 수 있다   2. Scale 설정 1) 정렬된 아이콘 중 직선 아이콘을 클릭 후 하단의 scale bar에 맞춰 선을 그어준다. 2) Analyze > Set Scale을 클릭한다. 직접 그어준 선의 실제 길이(Known distance)와 단위(Unit of length)를 설정해준다.   3. Grain 면적 측정 1) Wacom pen을 이용해 결정립계를 따라 빨간색으로 그린다(색은 상관 X) 2) Image > Type > 8-bit 클릭 +) 만약 사진 가장자리의 grain boundary가 선명하지 않거나 원하는 부분만 측정하고 싶을 경우, scale bar 영역을 없애고 ..

도메인 구매 및 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를 바로 ..

LAB 홈페이지 제작 어떻게 보면 교수님이 나에게 단독으로 맡기는 첫 번째 과제가 되는것 같다.우리 랩실은 신설 랩실이다.그래서 아직 우리 랩실을 소개해주는 홈페이지가 제작되지 않았다. 내 지도교수님은 내가 학교에서 어떤 활동을 했는지, 어떤 공부를 했었는지 잘 알고 계셨다.그 스토리가 궁금하다면 이 포스터를 읽어보길 바란다. 2024.09.12 - [일상] - 프론트엔드를 그만 둔 이유 프론트엔드를 그만 둔 이유이번 포스팅은 그림이 별로 없는 그냥 내가 주저리주저리 적어놓은 기억회상 이야기이다.조금 지루할 수도 있는 글일 수도 있지만내 삶의 전환점이 되는, 될 수도 있는 일들을 정리해보고자 한j-codingbox.tistory.com   이전에 아버지 회사 홈페이지를 만들었던 코드들을 이용해서 효율적으..

신소재공학과  +  data science  이 두 조합에 대해서 어떻게 생각하는가?처음 들었을 때는 어떤 연관성이 있는지 다들 궁금해 할 것이다. 우리 랩실에서는 두 가지의 분야를 다룬다.   철강 먼저 우리 랩실은 철강을 다룬다.철강 중에서도 전기강판, AM 적층소재, 자성재료를 다루고 있다.  쉽게 설명하면 Si의 함유량에 따라서 강판의 연성의 정도가 달라지고C의 함유량에 따라서도 강판의 자성 정도가 달라진다.또한 강판을 만드는 제조 공정을 어떻게 설계하냐에 따라서도 강의 성질이 달라지게 된다.밀링을 할 때 강의 두께를 어떻게 조정하는가에 따라서도 성질이 달라진다. 이러한 여러 변수들을 통제하여 사용자가 원하는 최적의 조건을 가진 강을 만드는 것이 궁극적인 목표이고, 연구 분야가 된다.  사실 나는..