본문 바로가기

전체 글99

리액트 Props 정리 Props JSX 문법에서 컴포넌트를 작성할 때 컴포넌트에도 속성을 지정할 수 있는데요. 리액트에서 이렇게 컴포넌트에 지정한 속성들을 Props라고 부릅니다. Props는 Properties의 약자인데요. 컴포넌트에 속성을 지정해주면 각 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다. App.js import Dice from './Dice'; function App() { return ( ); } export default App; Dice.js import diceBlue01 from './assets/dice-blue-1.svg'; function Dice(props) { console.log(props) return ; } export default Dice;.. 2023. 11. 22.
JSX 문법 설명 JSX란? JSX는 자바스크립트의 확장 문법인데요. 리액트로 코드를 작성할 때 HTML 문법과 비슷한 이 JSX 문법을 활용하면 훨씬 더 편리하게 화면에 나타낼 코드를 작성할 수가 있게 됩니다. import ReactDOM from 'react-dom/client'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( 안녕 리액트! ); JSX 문법 JSX는 자바스크립트로 HTML과 같은 문법을 사용할 수 있도록 만들어주는 편리한 문법이지만, 그만큼 꼭 지켜야 할 규칙들도 있습니다. HTML과 다른 속성명 1. 속성명은 카멜 케이스로 작성하기! JSX 문법에서도 태그에 속성을 지정해 줄 수 있습니다. 단, 여러 단.. 2023. 11. 21.
비동기 실행 관련 3가지 문법 정리 비동기 실행의 정의는 아래와 같이 다양한 방식으로 표현될 수 있습니다. 특정 작업이 시작되고, 그 작업이 모두 완료되기 전에 바로 다음 코드가 실행되는 방식의 실행, 나머지 작업은 나중에 콜백을 통해 수행되는 방식의 실행 특정 처리를 나중으로 미루는 방식의 실행 콜백을 등록해두고, 추후에 특정 조건이 만족되면 그 콜백으로 나머지 작업을 수행하는 방식의 실행 이렇게 다양한 표현으로 그 정의를 써볼 수 있는데요. 특정 처리를 담당하는 존재(콜백)의 실행을 나중으로 미룬다는 점만 잘 기억하시면 딱히 어려울 게 없습니다. 비동기 실행 관련 문법 중 3가지 (1) 파라미터로 바로 콜백을 전달하는 형태의 전통적인 비동기 실행 함수 (2) Promise (3) async/await 에 대해 정리하겠습니다. 1. 파라.. 2023. 11. 16.
비동기 실행의 개념과 관련 함수들 비동기 실행의 개념에 대해 알아보겠습니다. console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 지금 이 코드에는 다음과 같은 2개의 콜백이 있습니다. (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행되는데요. 이 사실을 바탕으로, 전체 코드의 실행 순서를 다시 정리하자면 console.log('Sta.. 2023. 11. 15.
'0x80080005' 윈도우 업데이트 오류 코드 간단 해결 방법 우선 Window키 + R 버튼을 누르면 나오는 창에서 winver 라고 친다. 그러면 윈도우 정보창이 나오는데 버전이 22H1 인 경우 윈도우 업데이트를 수동으로 진행해 줘야 한다. Windows 10 다운로드 (microsoft.com) Windows 10 다운로드 Windows 10용 ISO 파일을 다운로드한 경우, 해당 파일은 선택한 위치에 로컬로 저장됩니다.컴퓨터에 타사 DVD 굽기 프로그램이 설치되어 있으며 해당 프로그램을 사용하여 설치 DVD를 만들려는 경우, www.microsoft.com 윈도우 다운로드 창으로 가서 업데이트 버튼을 누르면 문제 해결된다. 이거 업데이트 하면 윈도우 스토어 다운로드 안되는 문제도 다 해결된다. 2023. 11. 14.
Content-Type 정의와 정보 1. Content-Type 헤더 Content-Type 헤더는 현재 리퀘스트 또는 리스폰스의 바디에 들어 있는 데이터가 어떤 타입인지를 나타냅니다. 실무 개발에서는 리퀘스트 또는 리스폰스의 바디에 정말 다양한 종류의 데이터들을 넣게 됩니다. 텍스트부터 시작해서 이미지, 영상까지 정말 많은 것들이 들어갈 수 있습니다. 바로 이런 데이터들의 타입 정보가 Content-Type 헤더에 담겨있는 겁니다. Content-Type 헤더의 값은 '주 타입(main type)/서브 타입(sub type)'의 형식으로 나타나는데요. 흔히 만나게 되는 Content-Type 헤더의 값으로는 다음과 같은 것들이 있습니다. 주 타입이 text인 경우(텍스트) 일반 텍스트 : text/plain CSS 코드 : text/cs.. 2023. 11. 14.

티스토리툴바