AI Platform / Web

web에서 구조를 만들거나 배치를 할 때 사용되는 Grid에 대해 알아보자. Grid를 가지고 굉장히 다양한 방법을 활용하고 복잡하게 만들 수도 있다. 그러나, 이 글을 보고 있는 대부분의 사람들은 기초 수준일 것이라 판단된다. 따라서 바로 적용가능하고 쉬운 부분위주로 짧고 쉽게 적어보겠다. 0. 들어가면서 보통 Grid 요소에서는 부모요소와 자식요소로 나누어 부른다. 부모요소를 Grid Container라고 부르고, 자식 요소는 Grid Item이라고 부른다. 이렇게 나누는 이유는 부모요소에 Grid라는 틀을 부여하고, 그 틀에 맞게 자식요소가 들어간다고 생각하면 될 것 같다. 우선은 기본 셋팅부터 하자. A B C D E F 사용법은 간단히 아래와 같이 display: grid; 라고 적어주기만 하면..

리액트(.env)로 개발 시 개발 환경과 배포 환경에 대한 기본 설정을 해보자. 기본적으로 우리는 Nodejs위에서 개발을 한다. 그리고 package.json 파일에 기본 설정을 하게 된다. 하지만, 개발을 진행하다보면, 개발 환경과 배포환경을 다르게 해야하는 경우가 생긴다. 예를 들면, DB를 mysql로 진행한다고 한다면 현재 운영하는 DB와 개발 시 동작이 가능한지를 판단하는 DB는 다르게 만들어야 하기 때문에 DB id/pw가 다르게 설정을 하여 시작 시 필요한 DB를 사용할 수 있게 만드는 것이 좋다. 정리하면 개발환경과 운영환경에서의 변수 값을 다르게 설정해야 할 경우 아래의 방식을 이용하면 된다. 본 내용에 들어가기 전에 nodejs 자체에 대한 기초지식이 부족하다고 느낀다면, 아래의 ur..

React에서 사용되는 class field(클래스필드)에 대해 알아보고자 한다. 기본적으로 우리는 클래스컴포넌트와 함수형 컴포넌트에 대해 비교을 해야한다. 그렇다면, 언제 어떻게 클래스 컴포넌트를 사용하는지를 순차적으로 알아보자. 만약 비전공자라 class에 대한 개념이 없다면, 우선은 함수형 컴포넌트로 리액트를 구성해 보는것도 추천한다. 1. Class Component React를 처음 공부하면서 무작정 공식문서를 봤다. 그러다 가장 헷갈렸던 것은 컴포넌트 만들 때 언제 class를 쓰나? class에서 construct랑 super은 쓸때가 있고 안쓸 때가 있네? 2. 언제 class 쓸까? 결론부터 말하면, state와 Lifecycle 사용할 때 쓴다. 지금은 함수형 컴포넌트에서 Hook()을..

CSS 글자 폰트 스타일에 대한 기초 지식을 이 글만 보면 익힐 수 있도록 적어보겠다. 가독성을 위해 불필요한 코드는 생략하고 HTML과 CSS만 적어보고 결과를 적었다. 1. 글자 굵기 > font-weight로 설정한다. #html h1 태그 normal h1 태그 bold p 태그 normal p 태그 bold .normal { font-weight: normal; } .bold { font-weight: bold; } 결과 값은 아래와 같다. h1태그는 기본값으로 font-weight가 bold로 되어있다. 따라서 bold로 하면 변경이 되지 않는다. h1태그의 font-weight를 normal로 설정하면 굵기가 줄어든다. p태그는 기본값으로 font-weight가 normal로 되어있다. 따라..

css는 html의 태그와 연결된다. 그렇다면, html과 css를 연결하는 방법도 알아야 한다. html 태그와 css를 연결하는 여러가지 방법에 대해 알아보자. 1. 기본태그 1.1 태그 선택자 : 태그 자체를 바로 선택 # html Hanpy # css h1 { color: red; } 1.2 자손 선택자 : 모든 내부 태그에 적용 # html 빨강이다 li태그 1 여기도 빨강이다 # css div a { border: 1px solid red; } div태그 내부에 있는 모든 a 태그에 적용이 된다. 이를 자식태그라고 한다. 1.3 자식 선택자 : 바로 밑 태그만 적용 만약 바로 밑의 자식인 직계자식만 적용하고 싶다면 아래와 같이 css에 >만 추가하면 된다. # css div > a { bord..

먼저 버전 문제를 살펴 보자. 그 후에 사용법을 적어본다. router 최신버전은 여기를 눌러서 확인하자. 0. 버전 문제 해결 최근 router가 버전 6으로 업그레이드가 됐다. 따라서 옛날 강의를 보는 사람들은 멘붕에 따졌을 것이라 생각한다. 왜냐하면 아래와 같이 명령어로 설치를 하니, switch가 없다고 뜨는 등의 에러가 떴을 것이다. 이 문제는 버전을 업그레이드 하면서 기존의 방식을 호환이 되지 않게 만들었기 때문이다. $ npm install router-react-dom 간단한 해결책은 아래와 같다. (버전 6을 5로 변경해 준다.) // 삭제 $ npm uninstall router-react-dom // 재설치 $ npm install router-react-dom@5 아니면, packa..

유튜브의 영상데이터를 가지고 와서 브라우저에 보여주는 방법을 알아보자. 만약 react나 nodejs를 통해 구축환경을 고려하고 있다면, 아래의 url을 참고하자. [Web/nodejs] - nodejs 기초 총 정리 기본적으로 유튜브 영상을 넣기 위해서는 유튜브 api를 가져올 수 있어야 한다. 우선은 공식문서에 들어가 보자. 구글에서 youtube API를 검색하거나, 아래의 url을 들어가 보자. https://developers.google.com/youtube/v3/getting-started?hl=ko 시작하기 | YouTube Data API | Google Developers 시작하기 소개 이 문서는 YouTube와 상호작용할 수 있는 애플리케이션을 개발하려는 개발자를 위해 작성되었습니다...

Pakage_test 아래 url은 참고 코드이다 https://github.com/giovannipds/laravel-package $ composer create-project --prefer-dist laravel/laravel - app/ - bootstrap/ - config/ - database/ - public/ - resources/ - routes/ - storage/ - tests/ - vendor/ - composer.json ... 1. 기본 폴더 생성 pakage라는 폴더를 우선 생성한다. 그 내부에 제조사나 만든 사람의 이름(jsotf) 폴더를 만들고, 그 아래 만들 package의 이름(todolist)을 적는다. # /pakage_test/ $ mkdir packages $ ..