728x90
반응형

분류 전체보기 36

Vercel 프론트엔드 배포 방법 (100% 무료)

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

LAB 메인페이지 제작

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

데이터융합철강재료설계연구실

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

LAB/소개 2024.09.16

프론트엔드를 그만 둔 이유

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

일상 2024.09.12

DSAC M2 데이터 사이언티스 자격 하루공부!! 합격 후기

DSAC M2 하루공부 합격 후기  이 시험이 어떤 시험인지 궁금하다면 이전에 포스팅 했던 글을 참고해보자! 2024.09.08 - [자격증] - DSAC M1 데이터 사이언티스 자격 합격 후기 DSAC M1 데이터 사이언티스 자격 합격 후기하루만에 합격!! 결과적으로 말하면 하루만에 합격!! 을 했다. 어떻게 공부했는지, 어떤 문제들이 나왔는지 적어보고자 한다.   DSAC M1이란? https://license.kpc.or.kr/nasec/qlfint/qlfint/selectDsac.do KPC자j-codingbox.tistory.com  사실 하루만에 합격한 점은 평소에 관련 지식을 이전 학과 강의에서 배운적이 있었고무엇보다 ADsP 공부를 하던 중 시험 일정이 잡혀 응시를 하게 되었다. 물론 이번..

자격증/DSAC 2024.09.08

데이터분석 준전문가(ADsP) 합격 후기

ADsP 일주일 공부 합격 비결  글을 읽기 전 글을 쓰고있는 본인은 데이터사이언스 관련 과목을 학과에서 이수했던 적이 있다.그래서 어느정도 배경지식이 있는 상태에서 일주일 정도 투자를 했다는 것을 알아줬으면 좋겠다.어떤 책을 사용했는지, 어떻게 공부했는지, 모의고사는 어떻게 풀었는지에 대해서 적어볼 예정이다.시험 후기에 대해서도 적어볼 것이다.   교재 교재는 아래 [데이터에듀] - ADsP 데이터 분석 준전문가 책을 사용했다.일명 민트책!! 책에는 시험과 관련된 모든 내용들이 다 실려있다. 내가 이 시험을 통해서 배경지식을 쌓아놓고싶다! 라고 생각하는 사람들은 이 책으로 한 단원씩 공부하는 것이 좋다고 생각한다.그리고 교재 뒷 내용에 모의고사도 있으니 한번씩 풀어보길 권한다.하지만 계획을 잘못 세운다..

자격증/ADsP 2024.09.08

양세찬 게임(WAG) - 두 번째 프로젝트

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

PROJECT/WAG 2024.09.07

변수 선언 및 함수 선언

ES2015 전에는 var를 사용하는 것이 변수를 선언하는 유일한 방법이었다. 하지만 이제는 더 나은 기능을 제공하는 몇 가지 변수 선언 방법이 추가되었다. const const는 값을 변경할 수 없는 변수이다. 우리가 작성하는 자바스크립트 코드에서는 변경해서는 안 되는 변수가 많다. const name = "JS"; name = true; console.log(name); // Error let js에서 구문적인 변수 영역 규칙을 지원한다. let은 값을 변경할 수 있는 변수이고, 지역변수로 사용 가능하다. js에서는 중괄호를 사용해 코드 블록을 만든다. const title = "js"; if (title) { let title = "python"; console.log(title); // pytho..

REACT 2024.03.07

백엔드와 연동(2)

프론트 UI가 어느정도 만들어진 후 백엔드와 연동을 해야하는 마지막 과제가 남아있다. 백엔드 연동은 .post일 때와 .get일때 과정이 달라진다. .post에 대해 알아보자. .post post는 프론트에서 백엔드로 정보를 전달할 때(서버로 데이터를 보낼 때) 쓰이게 된다. post가 쓰이는 상황을 예시로 들어보자 먼저 하고자 하는 바는 게시글을 생성하고, 해당 게시글의 데이터를 백으로 전송하는 기능을 구현하자. 성공 시에는 홈 페이지로 이동하도록 만들자. 이다. Swagger의 api는 export const PostWriteApi = async (body: FormData) => { const { data } = await defaultInstance.post('/post/create', { bod..

백엔드와 연동

프론트 UI가 어느정도 만들어진 후 백엔드와 연동을 해야하는 마지막 과제가 남아있다. 백엔드 연동은 .post일 때와 .get일때 과정이 달라진다. 먼저 .get부터 알아보자. .get get을 써야할 때는 프론트앤드에서 필요한 데이터를 백엔드에서 가져올 때 사용된다. get이 쓰이는 상황을 예시로 들어보자 먼저 하고자 하는 바는 React 컴포넌트에서 게시글을 조회하고 상태를 다룰 수 있도록 get을 이용해 게시글 정보를 불러오자 이고, 해당 게시글의 api 명세는 export interface IPostContent { author?: { nickname?: string; profileImage?: string; userId?: number; }; blogUrl?: string; content?: s..

728x90
반응형