기록의 힘

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

프론트 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..

스웨거를 통해 백엔드와 통신을 해보자!! 스웨거는 우리가 코드로 구현하기 전에 미리 정보를 주고 받을 수 있는 사이트이다. 무슨 resport가 나오는지, user 정보가 잘 전달되는지 확인할 수 있다. Swagger 사용 swagger를 사용하는 예시를 들어보자. 회원가입시 데이터를 주고받을 때 오른쪽 위에 try it out을 눌러 예시 데이터에 원하는 값을 넣을 수 있다. 이렇게 원하는 값을 바꿔 넣으면 201 코드가 뜨면 오류 없이 값을 줬다는 의미이다. 위의 정보들은 response.data에 넘어오게 되는데 예를들어, username을 알고 싶다면 객체를 타고 들어가 response.data.username 으로 찾으면 되는 것이다. 또 다른 예시로 로그인을 요청할 때를 예시로 들어보면 로그인..

Map은 반복문이다. array 자료 앞에 map을 붙일 수 있다. 함수 안에서 card라는 파리미터는 array의 자료가 순서대로 받아지게 된다. 그러면 Card라는 서브컴포넌트가 card를 받고 순서대로 div 태그를 출력하게 된다. 위의 코드가 출력되면 이렇게 출력된다. 만약 이런 사이드바를 제작해야한다고 치자 이러한 객체를 받아왔을 때 이렇게 객체를 받아와서 map에 뿌리면 바로 제작 가능이다!! 마지막 연습으로 게시물 객체를 map으로 받아와서 하드코딩 없이 만들어보자 객체 : const backendInformation = [ { title: "HTML", content: "HTML은 어쩌고 저쩌고...", image: "#", }, { title: "CSS", content: "CSS는 어쩌..

Subcomponent mui 서브컴포넌트는 주로 mui 컴포넌트의 속성(props)으로 전달되며, 필요한 경우 커스터마이즈 하거나 조정할 수 있다. 쉽게 말해 반복되는 코드가 있을 때 짧게 줄여주는 역할을 한다. 이런 반복적인 div 태그들이 반복될 때 컴포넌트를 사용하게 되면 이렇게 사용할 수 있다. 오른쪽 코드는 Subcomponent 라는 이름을 가진 Subcomponent를 정의하고있고, 왼쪽에서 는 오른쪽에서 정의된 Subcomponent를 가져오는 역할을 한다. 이렇게 이름을 Card라고 변경하게 된다면 더욱 명시적은 코드를 작성할 수 있게 된다. div라고 적혀있으면 무슨 기능을 하는지 한눈에 보기 어렵지만, Card 라고 적어놓으면 바로 어떤 역할을 하는지 알 수 있게끔 작명할 수 있게된..

State state는 React에서 정말 많이 쓰이는 문법이다. state는 변수에 값을 할당해주고, 유동적으로 값을 변환시켜주기 때문에 코드를 동적으로 사용해야할 때 매우 유용하게 쓰인다. 이때 하나의 의문점이 들 수 있다. 왜 일반변수를 사용하지 않고 state를 쓰는걸까? 그 이유는 동적으로 사용할 수 있는지의 유무에서 온다. 일반변수는 html 코드 안에서 값을 변환할 수 없다. 하지만 state는 일반 변수와 달리 자동으로 값을 변환할 수 있다. const [textValue, setTextValue] = useState(""); state 선언은 이렇게 한다. textValue : state의 값을 가져오게 한다. setTextValue : state의 값을 바꿔주는 함수 역할을 한다. 코드..

팀 결정 팀이 정해졌다. 동아리 내에 10개 이상의 팀이 있었고 그중 웹 개발 팀은 총 6팀이 있었다. 동아리 개총을 하기 전 팀들이 하나의 작은 부스를 만들어서 신입부원을 모집하고 있었다. 많은 팀 중 나는 분위기가 좋은, 배울점이 많을듯한 사람들이 있는 팀을 찾고 있었고 다행히 좋은 사람들이 있는 팀을 찾아 들어갔다. 팀 이름은 GLOG 개발자를 타겟으로 하는 블로그를 만드는 프로젝트를 진행할 예정이고 백앤드 3명, 프론트 2명으로 구성되어져 있다 (나는 프론트) 이전에 진행되어진 프로젝트가 있었지만 구현되지 않은 기능들이 많아 새로 코딩을 해서 기본 ui는 대부분 가져가지만 코드를 효율적으로, 새로운 기능들을 추가할 예정이라고 한다. 우리 글로그 만의 고유 기능들은 요런것들이 있다. Github과 ..

난 이때까지 혼자 코딩을 해왔었다. 내 주전공은 신소재공학과라 내 주변에 코딩을 하는 사람이 아무도 없었다. 최선을 다했다고 말하긴 어렵지만 그래도 나름 열심히 혼자 하고있었다 평소에 프론트앤드쪽 공부를 하고있어서 요런것들을 만들어 볼 수 있었다 아버지가 자기 회사 홈페이지를 만들어달라고 하셔서 좋은 기회다 생각하고 혼자 만들어보고 있었다. 하지만 여기까지였다. 더이상의 발전이 나 혼자서 해나가기가 어려울거 같았다. 정보의 한계, 프로젝트의 부재, 커뮤니케이션의 부족 등이 있었다. 다행히 학교에 좋은 코딩 동아리가 있었다. 한 학기동안 팀원들끼리 프로젝트를 진행하고, 발표한다는 동아리 계흭이 마음에 들었다. 좋은 팀원들을 만나서 좋은 프로젝트를 함께 해보면서 협업이 이루어지는 과정, 백앤드와 프론트의 연..