기록의 힘

Front-End 이미지 로딩 최적화 React 환경에서 이미지 로딩은 꽤 오래 걸리는 작업이 될 수 있다.로딩이 오래 걸리는 경우 중 대부분이 바로 이미지 픽셀 크기 때문이다. 특히 아이폰으로 찍은 사진은 용량이 크기 때문에 홈페이지 내에 올릴 때 굉장한 로딩 시간이 걸릴 수 있다.이때 1차적으로 해줄 작업은 이미지 픽셀 크기 최적화가 답이 될 수 있다. 다른 코드를 통한 이미지 최적화 방식이 물론 존재하지만 나같은 아마추어, 취미로 프론트엔드를 하는 사람들에겐 쉽고 확실한 방식이 될 수 있다. 예를들어서 다음과 같은 5000*3535 픽셀의 이미지를 웹에 올린다고 하자.일단 굉장한 크기의 사진이다.이 정도의 크기의 사진을 아래 사진과 같이 약 300*300 픽셀 내에 두어야 한다고 한다면 픽셀 손실..

실험 시작 일단 전해연마를 사용하여 전기강판의 grain size를 측정하였다. 어떻게 측정 하였는지는 아래 글을 통해서 확인할 수 있다. 2025.01.27 - [LAB/논문 투고 회고록] - 전해연마로 grain을 관찰해보자 전해연마로 grain을 관찰해보자전해연마로 grain 관찰하기 일단 내가 작성하는 논문에 필요한 데이터 중 시편의 grain size가 있다.시편의 grain size를 알아내기 위해 전해연마로 시편을 연마한 다음 OM으로 미세구조를 확인해야 한j-codingbox.tistory.com 우리가 실험에 사용하는 전기강판의 두께가 0.1mm여서 일반적으로 사용되는 사포로 폴리싱을 하게되면 시편이 온전히 남아있지 않게 된다.그래서 우리는 전해연마를 사용하였다.그런데 전해연마 조건을 ..

전해연마로 grain 관찰하기 일단 내가 작성하는 논문에 필요한 데이터 중 시편의 grain size가 있다.시편의 grain size를 알아내기 위해 전해연마로 시편을 연마한 다음 OM으로 미세구조를 확인해야 한다.   전해연마를 사용하는 이유 일반적으로 grain을 관찰할 때는 사포를 이용해서 표면을 연마하고 나이탈 용액으로 에칭을 한다.하지만 내가 관측해야 하는 시편은 사포를 이용할 수가 없다.왜냐하면 시편의 두께가 0.1mm로 매우 얇은 시편이다.이렇게 두께가 얇으면 사포를 사용할 시 시편의 마모가 너무 심하게 일어나 갈려 나가게 되어 grain을 관찰하기 어려운 상태가 된다.교수님 말씀으로는 0.3mm 이하의 두께를 가진 시편은 전해연마를 사용하는것을 권장한다고 하신다.   전해연마의 최적점을 ..

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   이전에 아버지 회사 홈페이지를 만들었던 코드들을 이용해서 효율적으..