web sprit

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] JSX (JavaScript XML)[React] 스타일을 적용하는 여러가지 방법 (cin-line 스타일, CSS 모듈, styled-..

피그마 MCP를 설치하는 방법은 몇가지가 있지만,피그마에서 공식적으로 MCP를 제공해주게 되어 아무래도 이 방법이 좋을꺼 같습니다.뭐 적용방법이 쉽기도 합니다.피그마가 설치 되거나 사용한다는 전제하에 설명 드리도록 하겠습니다.1. bunx 또는 bun 설치 및 실행터미널에서 아래와 같은 명령어를 실행해 줍니다.bunx cursor-talk-to-figma-socket만약 bunx가 설치되어 있지 않다면 위의 명령이 실행되지 않습니다. 그럼 먼저 Bun을 설치합니다. Bun은 npm or npx로 설치해 줍니다.npm install -g bunnpx cursor-talk-to-figma-socket npx cursor-talk-to-figma-socket 명령어를 터미널에 실행하면 막 쌸라쏼라(?) 영어가..

Current weather and forecast - OpenWeatherMapOpenWeather Weather forecasts, nowcasts and history in a fast and elegant wayopenweathermap.org위 사이트에 접속하면 아래와 같은 화면이 나옵니다. 표시된 부분을 클릭하여 이동해 주세요. 회원가입을 위해 아래 내용을 작성후 아래처럼 차례대로 진행해 주세요Create Account 버튼을 누르면 아래와 같이 alert 팝업이 뜨는데 내용은 API를 어떻게 어디에 사용할건지 물어보는 부분 입니다. 저는 그냥 취소 누르겠습니다. 이렇게 가입하면 아까 적은 메일주소로 메일이 와있을 겁니다. 메일 확인 하는 버튼이 있는데 아래와 같이 눌러줍니다.그러면 다시 메일..

단축키 설정위 이미지 처럼 File > Preferences > Keyboard Shortcuts 으로 클릭하여 들어가 줍니다.또는 단축키 Ctrl + M 을 누르고 다시 Ctrl + S 를 누르면 화면을 확인할 수 있습니다.이곳에서 단축키 변경을 할 수 있는데 너무 많아서 찾기 힘들면 상단에 검색영역(Type to search in keybindings)에서 검색하여 찾을 수 있습니다.단축키를 변경할 부분을 더블클릭하면 키 설정하라고 팝업이 뜨는데 바로 원하는 키를 누르고 엔터를 누르면 저장 됩니다.혹시 누르다 잘못 키를 눌렀다면 ESC를 누르면 다시 취소되니 걱정하실 필요 없겠죠?기본 단축키 모음name단축키비고오른쪽 사이드 바(Secondary Side BarCtrl + LorCtrl + Alt ..

Ctrl + K도움이 필요한 영역에 커서를 표시하고 단축키를 누르면 설명부분에 원하는 내용을 기입하면AI가 코드를 작성해 줍니다.Ctrl + L화면 좌측에 위치해 있으며 선택된 파일 또는 폴더로 선택하여 선택된 영역의 설명이나 코드 관련 내용에 대하여 AI에게 질문이나 도움을 받을 수 있습니다.또한 위 @(골뱅이) 부분을 누르면 열려있는 파일이나 폴더를 선택하여 같이 묶어서 AI에게 질문할 수 있습니다.기타 단축키Ctrl + P파일 탐색Ctrl + Shift + P명령 팔레트Ctrl + Shift + X확장 프로그램

다운로드설치를 위해 아래 사이트에 접속하여 줍니다. Cursor - The AI Code EditorBuilt to make you extraordinarily productive, Cursor is the best way to code with AI.cursor.com 접속하여 윈도우 기준 Download for Windows 버튼을 클릭하여 설치 파일을 다운로드 해주세요~설치다운로드 하면 다음과 같은 설치 파일을 확인하실 수 있습니다.다운로드 받은 기준 1.2.2 버전 이네요. 더블클릭하여 설치화면을 열어 줍니다.위 내용처럼 다음 및 설치 버튼을 눌러 설치를 완료해 주면 됩니다.셋팅cursor를 설치하면 기존 vscode 를 사용하신 사용자는 cursor에서 vscode와 환경설정을 맞출꺼냐고 화면이..

내 방은 기존 통신사 공유기가 있어서 와이파이가 잘 터집니다.거실 구석으로 가면 와이파이 게이지가 줄어들어서 집에 남는 공유기로 확장기를 만들려고 했는데요~대부분 공유기를 확장기(리피터)로 만들기를 검색하면 IP타임 관련된 내용만 나오고 다른공유기는 어떻게 해야하는지 초보자인 저로서는 참 적용하기 힘들었는데 어찌어찌 찾다보니 확장기 만드는 방법을 찾아 실행해보고 이렇게 글을 남깁니다.요즘 알리에서 구매많이 하시는데 예전에 샤오미 AX1800을 구매 했는데 공유기로 사용하다가 기존 KT 공유기를 그대로 사용중이라 집에 굴러다니게 되어 확장기를 만들어 보기로 했습니다.근데 이게 공유기가 아니라 라우터라고 하네요??라우터도 확장기가 가능하다는 것을 알고 바꿔보도록 하겠습니다.스펙집 인터넷 : KT라우터 : 샤..