[React]JSX와 JSX문법 이해하기 ep.01
2023. 7. 5. 02:47
IT/프론트엔드
JSX란? JSX는 Javascript XML의 약자로, 리액트에서 사용되는 javascript의 확장 문법이다. JSX는 JavaScript 코드 안에서 XML 형태로 마크업을 작성할 수 있게 해준다. 이전 게시물과 이어지는 내용이니 참고하세요. https://bbingbbong.tistory.com/9 [React] 리액트 시작하기, 설치하기 ep.00 리액트를 시작하기전, 먼저 리액트가 무엇인가 알아보고자 한다. 리액트란 ? 웹프레임 워크중 하나로, 자바스크립트에서 사용할 수 있는 라이브러리이다. 페이스북에서 효율적이고 편리한 UI를 bbingbbong.tistory.com 이전 게시물에서 리액트를 시작해 보았다. 리액트 시작하면, src 폴더의 App.js 파일을 살펴보겠다. import logo..
[React] 리액트 시작하기, 설치하기 ep.00
2023. 7. 5. 00:32
IT/프론트엔드
리액트를 시작하기전, 먼저 리액트가 무엇인가 알아보고자 한다. 리액트란 ? 웹프레임 워크중 하나로, 자바스크립트에서 사용할 수 있는 라이브러리이다. 페이스북에서 효율적이고 편리한 UI를 만들기 위하여 만들었다고 한다. 리액트를 시작할때 등장하는 단어들을 간단히 정리해 보겠다. [Component] 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드블록이다. 컴포넌트는 자체적으로 상태(state)와 속성(props)을 가질 수 있으며, 화면에 표시될 내용과 동작을 정의하는 역할을 한다, 리액트는 작고 재사용 가능한 컴포넌트를 조합하여 구성된다. 예를들어 버튼, 목록 등의 요소들은 각각 개별적인 컴포넌트로 구현할 수 있다. [Rendering] 렌더링은 리갱트 컴포넌트의 'render()' 메서드가 호..
[React]크롬 도구를 활용해서 개발자도구에서 리액트 쉽게 확인하기
2023. 3. 14. 21:07
IT/프론트엔드
오늘은 리액트 관련된 크롬 확장 도구를 설명하려한다. 구글에 React developer tools를 검색... 하면 되지만 쉽게 링크를 걸어두겠다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 1a88fbb67 on 2/16/2023. chrome.google.com 해당 사이트에 들어가서 크롬에 리액트 추가하기를 눌러 다운받아 주면 된다. 그다음. 주소창에 chrome://extens..
[React]리액트 시작하기
2023. 3. 9. 16:21
카테고리 없음
React를 시작하려면 먼저, https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Node.js를 설치해줍니다. 설치후 모니터 하단의 윈도우 아이콘을 클릭하여 검색창에 cmd (명령 프롬프트)를 입력 또는 Window + R 버튼을 누른후 cmd라고 입력하여 cmd창을 불러옵니다. cmd 창에서 react 파일을 생성하고 싶은 경로로 이동해줍니다. 경로이동없이 기본 경로에서 만들어도 문제없습니다. !---중요---! cmd창에서 하면 오류가 날 수 있으니 git bash에서 해주세요~ vscode에서 실행할 경우 터미널이 기본적으로 powershell ..
[jquery기초]jquery를 활용하여 width,height 변경하기(클릭할때마다 커지는 my-div)
2023. 1. 13. 00:21
IT/프론트엔드
안녕하세요 오늘은 jquery를 이용하여 클릭할때마다 화면이 바뀌는 상황을 연출해볼게요. 매우 간단한 코드이니 설명은 주석으로 대체합니다. 내 div 클릭
[jquery기초]jquery적용법(src,download)
2023. 1. 13. 00:04
IT/프론트엔드
안녕하세요 오늘은 간단하게 jquery적용법을 알아볼게요~! jquery를 적용하는건 기본중 기본이지만 ~ 그래도 한번 알아볼게요 1.src로 주소지정해주기. 요렇게 src로 주소를 지정해주면 jquery를 사용할 수 있습니다. 매우 간단하고, 용량을 차지 하지 않는 장점이 있지만, 인터넷이 연결되지 않은 환경에서는 사용할 수 없습니다. 웹디자이너기능사 시험에서는 서버연결이 안되어있기때문에 사용할 수 없다고합니다~! 2.download하여 적용 시키기 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js 해당주소에 들어가서 Ctrl + s 키를 눌러서 내 pc에 저장해줍니다. 적용할때는 html코드와 같은 위치에 있어야하고 그렇지 않으면 s..
[JavaScript]라이브러리 모음,사용법
2022. 12. 29. 20:51
IT/프론트엔드
JavaScript 라이브러리 다운/사용 법 링크에 들어가 js파일을 다운받고 파일이 있는 위치를 src로 지정하여 불러온 뒤 사용하면 됩니다. [날짜 포맷] momen.js https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD" mome..
Yolo 커스텀 학습시키기(실시간 객체 인식,데이터셋 수집하는법, 데이터 라벨링 하는법)#1(feat.로보플로우(Roboflow) 사용법)
2022. 11. 23. 19:52
IT/인공지능
안뇽하세용~! 티스토리 개설 기념 첫글을 작성해보려구합니당 초 간단 초등학생도 따라할 수 있는 나만의 학습 인공지능 모델 만들기!! 처음부터 천천히 알려드릴게용 모든 과정은 노트북환경에서 진행됩니다 가장먼저해야할것은 데이터셋 수집입니다!! Yolo를 사용하여 학습시키기 위해선 데이터셋만 있으면 안돼요!! 만약 텐서플로우만 사용하여 학습하신다면 데이터셋(이미지)만 있어도괜찮습니당. 하지만 Yolo를 사용하는것이 더 좋을때가 있지요... 저는 개인적으로 텐서플로우만 사용해서 학습했을때보다 Yolo를 사용해서 학습 했을때 더 만족스러운 결과물을 얻었습니당 ㅎ 그러니! 라벨링 작업이 조금 귀찮아도 천천히 따라오셔요. 깃허브또는 yolo 자체에서 이미 학습된 욜로 모델들을 많이 찾을 수 있으니, 직접 학습이 너무..