개발자연습노트

일단 글수정 버튼 만들기  설명하다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { ??? } }> 수정버튼 )}대충 아무데나 버튼하나 만들고 이거 누르면 첫 글이 수정되는 기능을 만들어봅시다.저기 물음표안에 뭘 넣어야하죠?      설명하다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { 글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학']) } }> 수정버튼 )}이러면 숙제 끝입니다. 버튼누..

JSX 문법 1. html에 class 넣을 땐 className 잘보면 평소에 짜던 html/css와 다른 부분이 있습니다.스타일을 주기 위한 class명을 넣을 때 class=" " 가 아니라 className=" " 이렇게 쓰는 부분이 좀 다른데 왜냐면 실은 App.js에 짜고 있는건 html이 아니라 JSX라고 부르는 이상한 언어라서 그렇습니다.   원래 리액트환경에서 하나 만들고 싶으면 자바스크립트로React.createElement('div', null) 이딴 식으로 어렵게 코드짜야합니다. 근데 그러면 유저들 다 도망가기 때문에 JSX라는 언어를 대신 사용합니다.JSX는 html과 사용방식은 비슷합니다.  근데 JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class라는 키..

방법 1: 시작 메뉴에서 관리자 권한으로 PowerShell 실행Windows 시작 메뉴를 엽니다."PowerShell"을 검색합니다.검색 결과에서 "Windows PowerShell"을 마우스 오른쪽 버튼으로 클릭합니다."관리자 권한으로 실행"을 선택합니다.방법 2: 파일 탐색기에서 PowerShell을 실행한 후 관리자 권한으로 승격파일 탐색기를 엽니다.D:\취학사\apple\리액트 폴더로 이동합니다.탐색기 상단 주소 표시줄에 powershell을 입력하고 Enter를 눌러 PowerShell을 엽니다.열린 PowerShell 창에서 다음 명령어를 입력하여 PowerShell을 관리자 권한으로 다시 실행합니다:sh코드 복사Start-Process powershell -Verb runAs이 명령어를 실..

개발환경 셋팅 1. 구글에 Nodejs 검색해서 LTS라고 써있는 버전을 설치합시다. - 남자답게 숫자 높은 최신버전 써도 되는데 그로 인한 버그와 배포시 에러는 알아서 감수해야함- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋습니다.- 설치 중 chocolatey 어쩌구는 설치 안하셔도 됩니다. 2. Visual Studio Code 에디터도 구글에 검색해서 설치합니다.(기존 에디터 쓰셔도 되지만 터미널을 기존에 안다뤄본 분들은 필수) Q. 맥북은 다른가요? A. 다른거 없음    리액트 프로젝트 생성은    1. 작업용 폴더를 하나 만들어줍니다찾기좋게 바탕화면에 만드는게 어떨까요.     2. 폴더에 shift + 우클릭해서 여기서 powershell 열기를 누릅니다.맥북은 손..

▲ 오늘 만들어볼 간단한 애니메이션   transform을 쓰면 3D 스타일 회전이 가능합니다. transform : rotateX(180deg);transform : rotateY(180deg);transform : rotateZ(180deg);  각각 X,Y,Z축 회전이 가능합니다. X축은 가로줄입니다. 그래서 rotateX()는 가로줄을 축으로 회전이 들어갑니다.뭔소린지 모르겠으면 연필을 모니터에 가로로 대보십시오.그리고 그 연필을 돌돌 말아봅니다. 그게 X축 회전, rotateX() 입니다.아니면 직접 CSS로 박스나 글자를 rotateX() 줘보면 알 수 있습니다.  Y축은 세로줄입니다. 모니터에 연필을 세로로 놓고 돌돌 말면 그게 Y축 회전입니다. Z축은 여러분 얼굴과 모니터 간의 가상의 선을..

간단한 Grid 레이아웃 만들기  Grid 레이아웃은 말그대로 격자를 만드는 레이아웃입니다.  설명하다  설명하다 .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; grid-gap: 10px;} 부모에 display : grid를 주면 자식 들은 전부 격자처럼 진열됩니다. grid-template-columns는 격자의 열 너비와 갯수grid-template-rows는 격자의 행 높이와 갯수를 설정하는 속성입니다.fr이라는 단위는 몇배만큼 차지할지를 나타내는 값입니다.그런데 격자를 왜 만드냐고요? 격자..

transform 관련 CSS 속성들  설명하다 .box { transform : rotate(10deg); transform : translate(10px, 20px); transform : scale(2); transform : skew(30deg); /*transform 두개 이상을 한꺼번에 쓰려면*/ transform : rotate(10deg) translateX(30px);}transform 은 어떤 요소를 독립적으로 움직이게 만들고 싶을 때 사용합니다.본인 원래 위치에서 자유롭게 (다른 요소에 영향 없이) 이동하게 됩니다.rotate는 회전, translate는 좌표이동, scale은 확대축소, skew는 비틀기 입니다. 특히 애니메이션을 동작시킬 때 transform 속성을..

비디오를 넣고 싶으면  우선 비디오 파일을 작업폴더안에 준비합니다. 그리고 이렇게 쓰면 비디오가 보입니다.     비디오 태그에 넣을 수 있는 속성  muted는 음소거상태autoplay는 자동재생 (muted와 함께 넣어야 동작함)poster는 썸네일이미지preload는 영상을 먼저 다운을 받을지 말지를 선택가능합니다 (auto, metadata, none 사용가능)      비디오를 '배경'으로 쓰고싶다면  유행은 지났지만 어떻게 하는지 알아봅시다. 일반적인 Youtube 비디오 넣는 방법처럼 코드 복붙 이런게 아니라비디오 파일을 직접 다운받아서 같은 폴더에 준비하고다음처럼 레이아웃 짜면 됩니다.  설명하다  Buy Our Shoes! source 파일형식을  여러개 준비할 경우..

Sass 문법 4. 코드를 한단어로 축약하는 @mixin 저번 시간에 배운 변수랑 매우 유사합니다.변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데 @mixin은 스타일 여러줄을 한 단어로 치환해서 사용가능합니다.  설명하다 @mixin 버튼기본디자인() { font-size : 16px; padding : 10px;}.btn-green { @include 버튼기본디자인(); background : green;}1. @mixin이라고 쓰고,2. 이름을 하나 지어주고 ( ){ } 붙이고,3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열하시면 됩니다.그럼 이제 밑에서 자유롭게 @include mixin이름 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙됩니다.아무튼 여러줄을 한 단..

VScode를 이용하려면 1. 일단 VScode 에디터를 설치하시고  2. 좌측에 보면 extension 메뉴가 있습니다. 눌러서 Live sass compile 검색해서 높은 버전을 설치합니다 (5.0.0 버전 이상 제발)  (검색하면 두어개 나올텐데 5.0 버전 이상 설치안하면 큰일남)  3. 그럼 이제 하단에 Watch Sass 버튼이 생기는데 누르면현재 작성한 SASS 파일을 자동으로 CSS 파일로 변환해줍니다.하단 바가 안보이면 View - Appearance - Status bar 켜면 됩니다.     [collapse]아니면 VScode 안쓸거면 이런 프로그램도 있습니다     SASS 문법 1 : 값을 저장해놓고 쓰는 '변수'  프로그래밍 배울 때 시험대비하듯 문법만 쭉 가르치는 나쁜 놈들..