모닝코딩

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

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

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..

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