AI Platform / Web

라라벨을 처음 시작하는 사람을 위한 설치 방법을 이야기 해보려한다. 찾아보면 composer나 npm이니... php니 설치해야할게 너무 많다.ㅣ 그래서 우리는 XAMPP를 설치해서 laravel을 시작해 보자. XAMPP란, 가장 인기있는 PHP의 개발 환경이다. apache 서버까지 설치가 된다. https://www.apachefriends.org/index.html XAMPP Installers and Downloads for Apache Friends What is XAMPP? XAMPP is the most popular PHP development environment XAMPP is a completely free, easy to install Apache distribution conta..

더미데이터를 fetch로 받아와서 화면에 보여주는 실습을 해보자. 데이터는 상위 컴포넌트에서 받는다. 그리고 받은 데이터를 prop로 내려준다. 이 때 반복되는 부분을 컴포넌트로 쪼개서 화면을 랜더링 시켜준다. 만약 아래의 내용이 어렵거나 다른 정보가 필요하다면, 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 0. 데이터 셋팅 기본적으로 데이터는 아래의 사이트에서 가지고 온다. https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowD..

Links( tag) 링크를 달 때는 a 태그를 주로 사용한다. 는 "anchor"의 줄임말이다. 구글 이때 핵심은 https://를 꼭 적어줘야 한다. href 안에 이동할 주소를 적어준다. 위의 내용은 우리는 href를 통해 기존의 존재하는 네이버나, 구글과 같은 페이지 이동을 위해 사용한다. django, larabel, sping, react 등의 내부 view를 사용하는 경우에는 달라 질 수 있다. title 속성 구글 title에 적은 글에 마우스를 가져다 대면 정보가 뜬다. href="#" 링크 링크 설정은 귀찮은데 관련 모양은 잡아야 하는 경우에 #을 붙여준다. 눌러도 페이지 이동이 일어나지 않는다. 아래는 h1, img a 태그를 넣은 코드이다. Hanpy a tag에서 알 수 있듯이 공..

초기화 하는 방법은 다양하다. 자주 쓰이는 것들 위주로 알아보자. # 구성 index.html css/style.css html에 css 연결 head의 title 밑에 link 태그를 넣어준다 link 태그의 href는 css 파일의 경로를 넣어준다. : html과 css 연결 경로가 ./css/styles.css 이다. css 초기 설정 @charset "UTF-8"; * { margin: 0px; padding: 0px; } ul, ol { list-style: none; } a { text-decoration: none } @charset "UTF-8" : UTF 설정해야 한글이 꺠지지 않게 인코딩 방식으로 utf-8로 설정한다. 구문 끝에는 ;(세미클론)을 붙여준다. * : 모든 것들을 선택이라..

설치하는 방법은 아래의 url에서 설치를 하면 된다. https://www.postman.com/downloads/ Download Postman | Get Started for Free Try Postman for free! Join 17 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster. www.postman.com key 등록 우선적으로 새로운 컬랙션을 만들자. 그러면 첫화면이 아래와 같이 나온다. 나는 key=value 형식으로 url에 넣을 예정이다. 따라서 아래와 같이 설정을 변경해 준다. 기본적으로 써야되는 url을 간단히 적을 수 있게 만..

html의 form tag에 대해 알아보자. 어려운 내용은 아니니 중요 개념 위주로 적겠다. 기본 부터 확인하자. 기본 form 결과값은 아래와 같다. action="/" : 현재 페이지로 이동한다는 말이다. method="get" : get방식으로 보낸다는 말이다. type: reset : 은 적힌 값들이 사라진다 type: submit : 값들을 전달한다. 이때 name 값을 안적으면, 값이 전달하지 않는다. abc/123을 누르고 제출을 누르면 결과값은 아래와 같다. name을 꼭 적어줘야 값들이 위와 같이 key value 형식으로 들어간다. checkbox와 radio 축구 음악 게임 여성 남성 우선 결과 값 부터 확인하자. 아주 깔끔하게 잘 나왔다. 네모가 checkbox이다. 복수 선택이 가..

카카오 로그인을 진행해 보자. 기본적인 작동 방식은 여기를 눌러서 확인하자. 기본 셋팅은 할수 있다 판단하고 글을 적어보겠다. 사실 쉽게 사용하기 위해 만들어진 라이브러리도 많다. 그러나 딱히 난이도가 있지 않기 때문에 react-kakao-login 같은 라이브러리는 사용하지 않고 만들어 보겠다. 만약 nodejs에 대한 기초지식이 부족하거나, frontend, backend 구축에 대한 기초내용을 알고 싶다면 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 [Nodejs/react] 깃헙(github)으로 로그인 / 깃헙(github) API로 데이터 불러오기 https://developers.kakao.com/docs/latest/ko/kakaologin/common..

html으로 표만드는 방법에 대해 알아보자. table 부분은 쉽지만, 어렵다. 관련 부분을 잘 확인하고 이해해 보자. : 행 table row : 각각의 칸 table data : thead와 tbody로 제목줄과 데이터 줄을 분리 시, thead 부분에 들어가게된다. colspan : 열을 합친다.(가로로 합치기) rowspan : 행을 합친다.(세로 합치기) : columns 라는 것을 아타내기 위해 thead 내부에 tr과 td 를 넣어준다. 이때 td 부분을 th로 변경해준다. th는 table header라는 뜻이다. 그러면 굵어지고 가운데 정렬로 변경된다. : thead에 대한 data 부분을 나타내 준다. : table 제목이 생성된다. 셀 병합 속성: colspan, rowspan sco..