web sprit

JSX 란?React에서 UI를 만들 때 사용하는 JavaScript + HTML 혼합 문법입다.겉으로 보기에는 HTML처럼 보이지만, 실제로는 JavaScript 코드이며 React가 이를 화면으로 변환해줍니다.JSX를 사용하는 이유 (장점)1. UI 구조가 명확하여 읽기 쉽습니다.HTML 태그를 그대로 사용하므로 직관적입니다.2. 에러를 초기에 잡을 수 있습니다.JSX는 문법이 엄격하여 실수를 빠르게 알려줍니다.3. 동적 UI를 쉽게 만들 수 있습니다.변수, 연산, 조건문 등을 {} 안에서 자유롭게 쓸 수 있습니다.4. 컴포넌트 기반 구조에 최적화되어 있습니다.UI를 작은 단위로 나누어 관리하기 좋습니다.JSX 문법 규칙1. 반드시 하나의 부모로 감싸서 반환해야 합니다.return ( Hel..

React 컴포넌트란?**UI의 작은 조각(블록)**이야. HTML의 같은 요소가 아니라, “화면에서 어떤 역할(버튼, 카드, 리스트, 모달 등)을 하는 코드 단위” 입니다.레고 블록처럼 조합해서 큰 UI를 만든다고 생각하면 쉽습니다. 각각의 컴포넌트는 **자기 책임(책임 단위: 한 가지 역할)**을 갖는 게 좋습니다.React에서는 보통 함수형 컴포넌트를 사용합니다. 그냥 함수인데, JSX(HTML처럼 보이는 문법)를 반환하면 그게 컴포넌트가 됩니다.// hello.jsfunction Hello() { return 안녕!;}export default Hello; 컴포넌트 주의할점이름은 대문자로 시작 → HTML 태그로 인식됨. → React 컴포넌트로 인식됨.하나의 컴포넌트는 하나의 JSX 요소만 ..

우리가 웹사이트를 만들려면 프론트, 백앤드, 서버 등... 이런것들이 있어야 웹사이트를 만든다는 어느정도의 개념은 있습니다. 어떻게 보면 지금 설명하려는 전체적인 흐름에서 모든것을 설명할 수 없지만 어떻게 만들어지는가의 개념의 이해를 위해 필요한 내용들을 다루려 합니다. 저 또한 이 개념을 알기위해 정리하는 부분이라 이것에 대해 많은 지식을 가지신 분이라면 댓글로 알려주시면 수정하도록 하겠습니다.1. 운영체제데이터, 서버 등을 다루기 위해 일단 하드웨어가 필요합니다. 더 단순히 말하면 컴퓨터가 필요한 거겠죠. 우리가 윈도우를 설치하여 컴퓨터에 사용하듯 웹개발을 위해 운영체제를 정하여 설치 하여야 합니다.대표적으로 운영체제는 운영체제 LinuxWindowsUnixLinux, Windows, Unix 등 ..

import 방법은 여러가지가 있지만 크게 두가지로 나누면 Named Import, Default Import 방법이 있습니다. 먼저 import 작성을 보면 이런식으로 3가지 방식으로 가져오는걸 본적이 있으실 겁니다. import 컴포넌트0 from './component.js'; import { 컴포넌트1, 컴포넌트2 } from './component.js'; import 컴포넌트0, { 컴포넌트1, 컴포넌트2 } from './component.js'; 왜 다 같은 컴포넌트인데 어떤건 대괄호 안에 넣어서 부르고 어떤건 그냥 써서 불러오고 하는걸까요? 아래의 Named Import, Default Import 보시면 왜 이렇게 불러오시는지 이해가 되실겁니다. 그밖의 나머지 불러오는 형식도 정리해 보..

퍼블리셔가 리액트 프록젝트에 참여하기 위해 필수로 알아야하는 스터디 목록을 정리하려 합니다.순차적으로 진행되는 스터디 목록은 이곳에 정리하여 나중에 확인하고 활용할 수 있도록 하겠습니다.[React] import 사용법 [React] import 사용법import 방법은 여러가지가 있지만 크게 두가지로 나누면 Named Import, Default Import 방법이 있습니다. 먼저 import 작성을 보면 이런식으로 3가지 방식으로 가져오는걸 본적이 있으실 겁니다. import 컴포kcmschool.com [React] 컴포넌트 개념 (Component) [React] 컴포넌트 개념 (Component)React 컴포넌트란?**UI의 작은 조각(블록)**이야. HTML의 같은 요소가 아니라, “화면에서..

nvm은 node 버전을 설치해서 원하는 node 버전을 선택하여 사용할 수 있습니다. 그리고 가장 중요한 부분이면서 설명이 없던 부분인데 nvm을 오류없이 사용하려면 터미널과 같은 커멘트 프로그램을 관리자 권한으로 실행해야 오류없이 사용할 수 있습니다. (관리자권한으로 실행 안하고 하면 node 버전 변경이 불가능.) 일단 기존의 node가 설치되어 있다면 node를 제거합니다. # nvm 설치 Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com위 사이트에 들어가 윈도우용 nvm 설치파일을 다운로..

Placeholder.com: Placeholder.com – The Free Image Placeholder Service Favoured By Designers Contents1 What Is Placeholder.com?2 How To Use Our Placeholders3 How To Set Image Size4 How To Set Image Formats5 How To Set Custom Text6 How To Set Background & Text Color6.1 Popular Hex Color Codes7 New! WEBP Support8 New! HTTPS Support9 NEW! Placeholde placeholder.com Dynamic Dummy Image Generator - Du..

영상 작업을 하고 아이폰(아이폰12 미니) 기기로 test를 하는중 하얀 배경으로 되어진 영상주변에 테두리 라인이 보이는 현상을 확인 하였습니다. border도 0이고 다른 라인이 들어갈만한 효과를 준 내용도 없었습니다. 같이 일하는 친구의 도움으로 아래와 같은 내용을 확인할 수 있었습니다. video { -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } video 태그에 위와 같은 css 속성을 넣으니 사라지는 것을 확인했고 이런 문제를 경험하신 분들에게 도움이 되었으면 합니다. 참고 https://stackoverfl..

1. Viewport 기본설정 width : 넓이 height : 높이 initial-scale : 초기 확대/축소 배율 minimum-scale : 최소 축소배율 (default-0.25, 0~10까지 조정가능) maximum-scale : 최대 확대배율 (default-1.6, 0~10까지 조정가능) user-scalable : 확대/축소 가능여부 (default-yes, yes | no) 2. 자동 전화걸기 태그 방지 (IOS 아이폰 전화링크 색 없애기.) 3. 홈 화면 icon(아이폰) 아이폰에서 바로가기를 추가할 경우 보여지는 아이콘 홈화면 추가 시 라운딩처리는 자동으로 처리된다. 그러므로 아이콘 작업 시 따로 라운딩 처리 하지않아도 된다.(라운딩 작업시 깨져보일 수 있음.) 반사광 효과를 설정..

Hexo Hexo is a fast, simple & powerful blog framework powered by Node.js. hexo.io hexo를 이용하여 블로그를 만들기 전 node 와 git 이 설치되어 있다는 전제하에 설명 드립니다. # hexo 글로벌 설치 npm i hexo-cli -g # hexo 디렉토리 생성 hexo init [디텍토리명] # 로컬 서버 실행 hexo server -p 3000 # github 에 올리기 repository 생성 (githun 계정명으로 입력해야 계정명으로 URL 생성) [계정명].github.io # _config.yml 파일 수정 맨 하단 deploy 부분 수정 deploy: type: '' deploy: type: git repo: repos..