컴포넌트? UI를 구성하는 독립적인 모듈 입니다. 재사용이 가능하며, 각 컴포넌트는 자체적인 UI와 상태(state)를 가집니다. props와 state를 가집니다. 대문자로 시작하고, return문에는 UI요소를 작성합니다. (React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리 함) props : 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 state : 컴포넌트 자체에서 관리하는 데이터, state가 변경되면 컴포넌트는 다시 렌더링 됨.(⭐️hook) 컴포넌트는 함수형 컴포넌트와 클래스 컴포넌트로 나눌 수 있습니다. 함수형 컴포넌트는 함수를 사용하여 UI를 구성하는 컴포넌트입니다. 클래스형 컴포넌트보다 간단하게 작성할 수 있으며, 최근에는 함수형 컴포넌트를 사용하는 것이 추세입니다. 그..
JSX ? JSX (JavaScript XML)은 JavaScript 언어의 확장으로, 개발자들이 JavaScript 코드 내에서 HTML과 유사한 구문을 작성할 수 있도록 합니다. 이는 사용자 인터페이스를 구축하는 인기있는 JavaScript 라이브러리인 React에서 널리 사용됩니다. JSX를 사용하면 HTML처럼 보이지만 실제로는 JavaScript와 HTML의 혼합물인 코드를 작성할 수 있습니다. JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. JSX는 하나의 파일에 자바스크립트와 ..
무언가를 배울 때는, 그것이 어디서 왔는지 파악하는 것이 중요하다. - GiangStepDEV Why React? 안정화 된지 얼마 안 된 리액트, 왜 이렇게 핫할까요? 모든 기술 트렌드는 그것이 나오게 된 배경을 거슬러 올라가면 알 수 있습니다. 한 때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가 영역을 확장하여 서버사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청난 활약을 하고 있습니다. 복잡하고 거대한 애플리케이션을 만들기 위해서는 자바스크립트만으로 관리하기에는 복잡도가 매우 증가합니다. 이를 해결하기 위해 수많은 프레임워크가 등장하였으며, 이 프레임워크들은 주로..
ES5(ECMAScript 5) 자바스크립트의 5번째 버전으로, 2009년에 발표되었습니다. ES5는 새로운 기능을 추가하는 것 보다는 기존의 기능을 개선하는데 초점을 맞췄습니다. 개선된 기능은 아래와 같습니다. JSON 객체 JSON(JavaScript Object Notation)은 데이터를 교환하는데 사용되는 경량 데이터 형식 입니다. ES5에서는 JSON.parse() 와 JSON.stringify() 메소드를 사용하여 JSON 데이터를 다룰 수 있습니다. let data = '{"name":"John", "age":30}'; let obj = JSON.parse(data); console.log(obj.name); // "John" console.log(JSON.stringify(obj)); /..
HTTP(HyperText Transfer Protocol) 인터넷에서 데이터를 전송하는 프로토콜 클라이언트와 서버간에 데이터를 주고받기 위해 사용되며, 주로 HTML, CSS, JavaScript, 이미지, 동영상 등의 리소스를 전송하는데 사용 HTTP는 요청(Request)과 응답(Response)의 구조로 이루어져 있습니다. 클라이언트는 HTTP 요청 메시지를 서버에 전송하고, 서버는 이에 대한 응답 메시지를 클라이언트에 전송합니다. 요청과 응답 메시지는 헤더와 바디로 이루어져 있습니다. 헤더에는 요청 혹은 응답에 대한 정보가 포함되어 있고, 바디에는 요청 또는 응답에 대한 데이터가 포함되어 있습니다. 서버는 클라이언트로부터 요청을 받아야만 응답할 수 있습니다. HTTP는 보안적인 이유로 HTTPS..
JSON(JavaScript Object Notation) 자바스크립트 객체를 문자열로 표현하는 데이터 포맷 JSON을 사용하면 다른 프로그래밍 언어와의 데이터 송수신이 간단해집니다. 서버와 웹 클라이언트가 데이터를 주고 받을 때 자주 사용 합니다. 특징 JSON을 사용하면 객체를 '직렬화' 할 수 있습니다. ✏️ 직렬화란? 기본 데이터는 1바이트, 2바이트 4바이트 등 타입 별로 크기가 다르기 때문에 받는 입장에서 해석하기가 어렵습니다. 이를 보완하기 위해 문자열로 변환하여 공백 없이 연달아 붙여서 전달하는 것을 의미 합니다. 원래는 자바스크립트 언어로부터 파생되었지만 현재는 언어에 독립적으로 사용 됩니다. ✏️자바 직렬화는 자바끼리만 가능함. JSON은 두 가지 기본 자료구조인 '배열'과 '객체'를 ..
정규 표현식(regExp) 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴 입니다. 기본 형태 const regexp = /World/; const regexp = new RegExp("World"); 예제 let str = "Hello World! World!"; const re = /World/; console.log(re.test(str)); // 해당 문자열의 포함 여부 확인 console.log(str.search(re)); // 해당 문자열의 시작 위치 반환 exec() : 패턴과 일치하는 문자열 반환 인수로 전달된 문자열에서 특정 패턴을 검색하여, 패턴과 일치하는 문자열 반환 만약, 패턴과 일치하는 문자열이 없으면 null 반환 let targetStr = "가장 큰 실수는 포기,..
안녕하세요. (- -)(_ _) 근 한 달만에 다시 프로젝트로 돌아왔습니다! 조가 새롭게 배정되어서 이번엔 3인 1조로 진행하게 되었습니다. 이번 과제는 프로젝트라기 보다 미니 프로젝트 준비 단계라는게 더 맞겠네요. ㅎㅎ 바로 스토리보드를 만들어 보는건데요! 스토리보드는 웹/앱 작업 전 반드시 필요한 단계로 이번엔 기획자가 되었다고 생각하고 진행하고자 합니다. 별 고민 없이 만장일치로 커뮤니티 사이트를 하기로 결정했습니다. 그 중에서도 현재 저희의 최대 관심사인 개발 IT 관련한 정보 공유 사이트를 만들어 보자고 바아로 협의 끝(? 그 밖에도 게시판과 회원 관리를 다루는 것은 전반적인 CRUD를 경험하기 좋다고 생각이 들었습니다. 헌데 기본적인 기능만 있음 심심(?)하니 부가적인 기능을 더 넣기로 했습니..
PointerEvent 속성 KeyboardEvent 객체 확인 keyCode => key const btnEl = document.querySelector("button"); btnEl.addEventListener("click", function(e) { console.log("버튼이 눌려졌습니다." + e); console.log("x좌표 : " + e.clientX); console.log("y좌표 : " + e.clientY); console.log("마우스가 클릭된 x 좌표 : " + e.pageX); console.log("마우스가 클릭된 y 좌표 : " + e.pageY); console.log("모니터의 왼쪽 모서리 기준으로 마우스가 클릭된 x 좌표 : " + e.screenX); con..
이벤트는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미 합니다. 이벤트가 발생하면 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 자바스크립트로 지정할 수 있습니다. 이벤트 종류 1. 인라인 방식 인라인 방식 // 1. 인라인 방식 function clickEvent() { alert("인라인 방식으로 구현된 함수가 호출 되었습니다!"); } 2. 이벤트 등록 메소드(addEventListener()) DOM에서 제공하는 addEventListener() 메소드를 사용해 이벤트를 등록할 수 있습니다. 가장 권장하는 방식입니다. .addEventListener("", ); // ⭐️ 2. 이벤트 등록 메소드 방식 function eventFunc() { ..