본문 바로가기
  • 실행력이 모든걸 결정한다
반응형

Frontend26

[Bootstrap] Bootstrap 소개와 간단한 이용법 1. Bootstrap이란? 웹 디자인 프레임워크이며, 반응형 웹 사이트를 쉽게 제작할 수 있도록 도와준다. ※ 반응형 웹사이트 : 웹의 스크린 환경에 따라 반응하는 페이지 2. Bootstrap을 쓰는 이유 CSS, Javascript 코드를 직접 작성하지 않아도 Bootstrap에서 소스파일을 제공해주기 때문에 필요한 디자인을 바로 적용시킬 수 있다. Bootstrap에서 제공하는 CSS, Javascript파일은 웹 디자인에 약한 개발자에게는 최고의 도구가 될 것이다. 게다가 Bootstrap 공식 웹사이트에서 적용 코드와 각종 예제까지 제공한다. 다음 절에서 이 가이드를 참고하여 소스코드를 사용해볼 것이다. getbootstrap.com/docs/5.0/getting-started/introduc.. 2021. 3. 2.
Ajax(2) - jQuery로 사용하기 1. $.ajax() 메소드 jQuery로 Ajax를 사용하기 위해 $.ajax() 메소드를 사용한다. 여기서 $는 jQuery 객체를 의미하는데, jQuery에서 ajax() 메소드를 제공한다고 해석할 수 있다. ajax 메소드의 인자로 url주소와 추가 옵션들을 정할 수 있다. 사용 예시 $(function() { $("선택자").on("click", function() { //해당 요소를 [클릭]시 호출 $.ajax({ url: "/path.php", //요청을 보낼 서버의 URL주소 data: { name: "jooyeok", age: "24"}, //서버로 보낼 데이터 type: "GET", // 요청 방식 dataType: "json" // 서버에서 보내줄 데이터 타입 }) .done(func.. 2021. 2. 26.
Ajax(1) - 기본 개념 소개와 동작 원리 1. Ajax란? Ajax(Asynchronous Javascript and xml) 자바스크립트의 라이브러리중 하나이며, 비동기식 자바스크립트와 xml을 뜻한다. Ajax를 사용하면 페이지 새로고침 없이 페이지 일부의 데이터를 바꿀 수 있게 된다. 데이터 로드를 위해 XMLHttpRequest 객체를 이용하는 것이 특징이다. 2. Ajax의 동작 원리 사용자에 의해 이벤트가 발생하면 핸들러에 의해 바로 자바스크립트를 불러온다. 그 후 자바스크립트에서는 XmlHttpRequest 객체를 이용하여 서버로 요청을 보내는데, 그동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행할 수 있다(비동기 방식). 서버측에서 처리를 마치고 XmlHttpRequest 객체를 전달 받으면 이를 토대로 Ajax요청.. 2021. 2. 25.
[React] Router 실습 (+배포 완료, 소스코드 공유) React로 간단한 웹을 만들어보았는데, 제작하면서 확연히 느낀 React의 특징이 있었다. 가독성이 좋음 - 컴포넌트들을 여러 파일로 쪼개서 조립하는 원리여서 소스코드가 복잡하지 않다. 유지보수에 좋음 - 위의 이유로 중복 코드도 많이 줄일 수 있고, 좋은 가독성에 따라 물론 유지보수도 훌륭하다. 속도가 매우 빠름 - 일반 웹사이트들끼리 링크로 넘나들때의 로드 시간은 1초정도 걸리는데에 반해, React Router은 컴포넌트만 가져오는 식이라 눈깜짝할새에 로드된다. 웹사이트 주소 jooyeokkim.github.io/React-SimpleProject-Algorithm/ React App jooyeokkim.github.io 깃허브 소스코드 github.com/jooyeokkim/React-Simpl.. 2020. 10. 7.
[React] JSX expresstion must have one parent element 오류 해결 JSX expresstion must have one parent element 해당 오류는 return할 요소가 2개 이상일 때 주로 발생하는 오류이다. javascript에서 return은 하나의 요소를 리턴 할 수 있다. 여러 요소들을 리턴하고 싶다면 태그로 감싸서 하나의 요소로 묶으면 된다. 오류 메세지가 사라진 모습을 볼 수 있다. 2020. 9. 29.
[React] Component 단위로 요소 검사하기 chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision fed4ae024 on 7/15/2020. chrome.google.com Chrome 에서 이 툴을 추가한다. 요소 검사에 들어가면 Components 라는 메뉴가 추가 되었음을 알 수 있다. 본인은 Subject 라는 이름의 컴포넌트를 만들었고 Components에 들어가니 App에 Subject라는 하위 컴포넌트가 추가 된 것을 볼 수 있.. 2020. 9. 23.
JSON의 정의와 그 사용법 1. JSON이란? JSON은 웹과 컴퓨터 프로그램에서 용량이 적은 데이터를 교환하기 위해 데이터 객체를 속성-값의 쌍 형태로 표현하는 형식으로, 이 형식은 사람과 기계에게 모두 쓰기 용이하다. JSON은 자바스크립트를 토대로 개발되었지만 언어로부터 독립적이며, C, C++, Java, Python, PHP 등 에서 JSON 형식으로 데이터를 주고 받는다. 단, 표기법은 자바스크립트 객체 표기법을 따른다. 특히 서버와 통신을 해야하는 작업에 매우 유용하다. 2. JSON의 구조 {"데이터 이름" : 값} 쌍으로 구성되어 있는 구조이다. 데이터 이름은 반드시 문자열 형식이어야 하며, 큰 따옴표를 사용해야 한다. 값으로는 숫자, 문자열, 불리언(boolean), 객체, 배열, null가 올 수 있다. 이미지.. 2020. 9. 19.
JavaScript와 php와의 통신 php와 통신할 XMLHttpRequest 객체 생성 및 동작 설정 var xhr = new XMLHttpRequest(); xhr.open('GET', 'uri'); xhr.onreadystatechange = function(){ //상태의 변화가 나타났을 시 함수 실행 if(xhr.readyState === 4 && xhr.status === 200){ //4=연결완료, 200=요청한 문서가 서버에 존재 // 동작 console.log(xhr.responseText); //php파일에서 php코드영역()의 echo값과 php코드영역 외의 내용을 반환 } }; xhr.send(); //GET 방식은 인자가 없다. 요청 방식별 send 함수의 형식 Get 방식 : send() 함수에는 인자가 들어가지 .. 2020. 9. 18.
id를 이용하여 속성 적용 제외하기 w3school 이라는 사이트에서 jQuery의 css함수에 대해 조사해보았다. css함수는 선택된 모든 대상을 지정된 속성대로 모두 바꿔주는 편리한 함수이다. 그런데 특정 대상을 제외하려면 어떻게 해야할까 궁금증이 몰려와서 임의로 소스코드를 바꾼뒤 여러번 테스트 해봤다. 가장 가독성 좋고, 간단하게 구현할 수 있는 방법은 id인 것같다. 3,5번째 paragraph에는 dont include라는 이름의 id를 설정해주고 아래에 밑줄 친 내용처럼 해당 객체의 id가 dont include가 아니라면 지정된 속성을 적용해주는 것이다. this는 p객체들 중 현재 순회중인 p객체를 의미한다. 여기서 css의 인자는 속성, 속성 값인데 속성 값의 경우에는 정수값을 리턴하는 함수로 대체 한 것이다. 속성 값으로.. 2020. 9. 3.

티스토리툴바