본문 바로가기

Programming 개발은 구글로/Web[프론트엔드&백엔드]47

[CSS] z-index position 속성 사용 z-index position 속성 position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치(z축)를 z-index 속성으로 정합니다. 정수 값이 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다. 참고 글: CSS / z-index / 요소의 수직 위치 정하는 속성 https://www.codingfactory.net/10878 2022. 9. 26.
[Javascript] 삼항 연산자 사용 방법 Javascript 삼항 연산자 기본적인 사용법은 아래와 같습니다. const value = data ? '참일 경우 값' : '거짓일 경우 값' 아래 처럼 축약으로도 사용할 수 있습니다. const value = a?.b?.c ? '참일 경우 값' : '거짓일 경우 값' ※ a.b.c의 값을 체크하기 전 a와 b에 값이 존재하는 지를 먼저 확인할 수 있습니다. 추가로 ?? 를 사용하여 undefined와 null 을 체크할 수 있습니다. const value = data ?? '' // data 가 undefined 또는 null이면 ''로 대치함 2022. 9. 22.
[CSS] 무료 icon 이미지 다운로드 사이트 무료 icon 이미지 다운로드 사이트 ICONS https://icons8.com/icons 2022. 9. 7.
[Javascript] 랜덤(Random) 숫자 가져오기 랜덤(Random) 숫자 가져오기 최소부터 최대까지 숫자를 랜덤하게 가져오는 경우 아래의 공식? 처럼 하면 됩니다. function generateRandom(min, max) { return Math.floor((Math.random() * (max - min + 1)) + min); } ※ 소수점으로 반환이 되기 때문에 내림 함수인 Math.floor를 사용합니다. 2022. 9. 6.
[CSS] .svg(Scalabe Vector Graphic) Image SVG(Scalabe Vector Graphic) : SVG 이미지는 XML 문법을 기본으로 로고나 아이콘, 그래프 등 널리 사용하는 이미지 파일입니다. SVG 이미지는 크기를 줄이거나 늘리더라도 화질에 영향을 받지 않습니다. 원하는 색상으로 자유롭게 적용가능합니다. 참고 글: [CSS] - SVG 이미지 사용 방법[CSS] - SVG 이미지 사용 방법 https://mingoogle.tistory.com/9 2022. 9. 1.
[CSS] position(static, relative, absolute, fixed) 속성 정리 position(static, relative, absolute, fixed) : 레이아웃을 배치하거나, 객체를 위치 시킬 때 사용되는 속성입니다. static(기본값): 객체에 대한 위치를 지정하지 않을 때 사용됩니다. relative : static이 가지고 있는 위치를 시작점으로 위치를 지정할 수 있습니다. absolute : 가장 가까운 상위 요소를 기준으로 원래 위치와 상관없이 위치를 지정할 수 있습니다. fixed : 브라우저 화면의 상대 위치를 기준으로 원래 위치와 상관없이 위치를 지정할 수 있습니다. 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치에 지정할 수 있습니다. 참고 글: [css] position (static, relative, absolute, fixed).. 2022. 9. 1.
[CSS] display 속성 정리 display : 요소의 크기를 결정하는 속성입니다. 🟦 display 속성 display: none : 화면에 보이지 않으며 영역도 차지하지 않습니다. display: block : width가 100%의 영역으로 설정이 됩니다. (div 기본값과 동일) - 가로 한 줄 모두 차지 display: inline : 컨텐츠의 크기만큼의 영역만 설정이 됩니다.(width를 변경해도 영역이 변하지 않음) display: inline-block; : inline과 block의 특성이 모두 있습니다. inline의 속성이 있지만, width로 크기를 설정할 수 있습니다. 참고 글: [CSS] display란? / display 속성 / display 종류 https://programming119.tistory.c.. 2022. 8. 25.
[CSS] Input or textarea에 안내문구 추가 - placeholder 색상, 폰트 변경 placeholder는 HTML5에서 새로 나온 속성(attribute)으로 input이나 textarea에 안내문을 추가합니다. 기본 색상은 회색으로 배경색이 어두운 색이거나 화려한 색일 경우 ::placeholder 선택자로 색상 및 폰트를 변경할 수 있습니다. placeholder를 사용하여 안내문구를 추가합니다. ::placeholder 선택자(Selecter)로 글자 색과 모양을 변경합니다. input::placeholder { color: red; font-style: italic; } textarea::placeholder { color: blue; font-weight: bold; } 만약 적용이 되지 않는 브라우져가 있다면 아래와 같이 수정하면 됩니다. // Chrome/Opera/Saf.. 2022. 8. 19.
[Web] 네트워크 - 통신 프로토콜 MQTT 기본 개념 웹앱에서 다른 앱이나 서버 등과 통신할 수 있는 다양한 프로토콜 서비스가 있지만, Restful, 웹소켓, MQTT가 자주 사용됩니다. 그중에서 MQTT 관련해서 정리를 해보면, MQTT는 웹앱뿐만 아니라 광범위하게 사용됩니다. MQTT(Message Queuing Telemetry Transport) : 누군가 어떤 주제(topic)로 메시지를 발행하면 해당 주제를 구독 중인 디바이스들만 메시지를 받게 됩니다. 발행(Publish)-구독(Subscribe) 구조로 이루어져 있으며, 메시지를 전달해주는 메시지 브로커(MQTT Broker)가 있습니다. ※ 발행자가 MQTT-Broker에 토픽(TOPIC)과 메시지(Message)를 전달하면 해당 토픽을 구독하는 구독자가 메시지를 받을 수 있습니다. MQT.. 2022. 8. 17.
[React] redux-toolkit 설치 및 사용방법(ConfigureStrore, createAsyncThunk) redux-toolkit : redux에서 공식적으로 지원하는 redux 개발 도구입니다. 아래의 4개의 함수에 대해서 정리합니다. createAction createReducer createSlice creatAsyncThunk 참고 글: Redux Toolkit https://redux-toolkit.js.org ■ 설치방법 1. 프로젝트 생성 시 설치하기 - create-react-app 으로 프로젝트 생성 시, template 옵션에 redux를 추가하면 됩니다. npx create-react-app my-app --template redux 2. 기존 프로젝트에 추가하기 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit ■ .. 2022. 8. 9.
[React] React 에러 처리 - unable to resolve dependency tree React 에러 처리 unable to resolve dependency tree npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: ################# npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! react@"^18.1.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4 n.. 2022. 8. 5.
[Typescript] 2. 타입스크립트 변수 선언 정리 타입스크립트 변수 : var, const, let 3개의 변수 Type이 있습니다. 1. var var는 할당을 먼저 하고 나중에 선언하는 코드입니다. 아래와 같은 현상으로 인해 var를 사용하지 않는 것이 좋습니다. if 문 내에 있는 변수에도 영향을 줄 수 있습니다. 동일한 이름을 가진 변수를 유저가 실수로 중복 선언할 수도 있습니다. // var는 함수 레벨 스코프를 지원 var myName = "copymaster"; function change() { var myName = "militarymaster"; // 스코프가 달라 변경이 되지 않음 } change(); console.log(myName); Result: copymaster ==================================.. 2022. 7. 29.
728x90

티스토리툴바