hanol hanol

html이 길어져서 복잡할 땐 컴포넌트 만들어 사용하기 컴포넌트를 작성할 때는 약간의 규칙을 지켜야 한다 ❗ 함수 작명은 대문자로 시작해야함 ❗ retrun 안에 html은 하나의 태그로 감싸져야 함 function Modal() { return ( 제목 날짜 상세내용 ) } 원하는 위치에 태그형식으로 사용하면 됨~ 컴포넌트는 언제 만들어 쓰면 좋을까? 1. 반복적인 html 축약할 때 ( ex. map함수 사용 가능한 것들..) 2. 큰 페이지들 😈 😈 1. html 미리 완성하기 2. UI 현재상태 state로 저장 3. state에 따라 UI 변화주기 => 어렵게 생각하지말고 차근차근 step밟아나가자! 😈 모달창 구현하기 1. Modal 컴포넌트 만들기 const Mod..

잠시 저장할 때는 let, const에 변수를 담아주지만 중요하고 자주바뀌는 html부분은 useState에 state 변수로 담기!! 😈 let [ state , state 변경 함수] = useState(); 😈 let post = "Ariana Grande"; let [title, setTitle] = useState("Daydreamin'"); //😈let [ state, state 변경 함수] = useState(); array자료형 (변수 2개일 때) => 인덱스[ ]로 가져올 수 있음! let num = [1,2]; let a = num[0]; // 1 let b = num[1]; // 2 // 한번에 2개변수를 담을 때 let [ a, b ] = [1, 2]; => 이것을 Destructu..

코딩을 배운지 어언 3개월 반... 깊게 아는 것이 없어서 이걸 언제쓰고 왜쓰며 왜 좋은지 원리도 이해 못하고 쓰고 있는 나를 보며 다시 초심자의 마음으로 돌아가서 정리하고 내것으로 만들어야겠다는 생각이 들었다. 꾸준히 포스팅하면서 리액트에 깊게 알아보는 시간을 가져볼것이다.! 우선 시작하기 전에 개발환경 셋팅부터 해주자!! 1. Node.js 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. vscode 에디터 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Rede..

리액트 훅이란? 함수형 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수 state의 변화 ⇒ 렌더링 ⇒ 컴포넌트 내부 변수들 초기화 Ref의 변화 ⇒ No 렌더링 ⇒ 변수들의 값이 유지됨 state의 변화 ⇒ 렌더링 ⇒ 그래도 Ref의 값은 유지됨 😈 useEffect 어려운 연산 서버에서 데이터가져오는 작업 타이머 장착하는 거 useEffect(()=>{ // mount, update ( =재렌더링 )시 코드 실행해줌 console.log('안녕') }) useEffect(()=>{ console.log('안녕') }) for (var i =0; i버튼 상품명 상품설명 120000원 주문하기 )} export d..

CRUD Create Read Update Delete = 유저 인터페이스가 가져야할 기능을 가리키는 용어 CRUD개념이 기획에서 중요한가? 서비스 기획시 기초 필수 개념으로 꼭 이를 염두에 두고 기획 및 디자인을 해야함, 우리가 서비스를 운영하는 데 있어 필수적인 최소기능임 => 사용자 경험과 데이터 보호를 위해서 시스템 작동원리를 파악할 수 있기에 중요! 이름 기능 SQL문 Method(호출방식) Create 생성 Insert Post Read 읽기 Select Get Update 갱신 Update Put Delete 삭제 Delete Delete

1. HTML작성하기( form태그 사용 ) 2. 태그 기능개발 => 폼전송시 POST요청함 서버 요청방식(method형식) GET POST (글쓰기) PUT DELETE body-parser라는 라이브러리 설치 설치 후 사용할 때는 require 해주어야 함~ URL-encoded(주소 형식으로 데이터를 보내는 방식) 방식으로 보내겠다 : true = 폼 전송은 URL-encoded 방식을 주로 사용함 JSON()은 JSON 형식의 데이터 전달 방식 body-parser (보통 form 데이터나 ajax 요청의 데이터를 처리함) = 미들웨이 -jQuery와 같이 사용 - 단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, - 페이지 전체를 새로고침하지 않..

API (Application Programing Interface) 비유를 하자면! 우리는 맛집을 갔다 내가 맛있는 랍스타를 고르면, 직원이 주문을 받아 요리사에게 요청을 한다 그러면 요리사는 랍스타를 요리해서 직원에게 주고, 나는 직원이 가져다준 랍스타를 먹을 수있게된다. 나 (=클라이언트) 직원 (=API ) 요리사 (=리소스(서버)) 즉, API는 프로그램이 요청할 수 있게 명령목록을 정리하고 명령을 받으면 응용프로그램과 상호작용하여 요청된 명령 값을 전달한다. 쉽게말해, API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 볼 수 있다!

코딩을 배우면서 느끼는 거지만 뭐든 시작은 세팅부터 하는 것 같다... 젤 귀찮은 작업이지만 한번 잘 설치해주면 우리가 무료로 쓸수 있으니까 좋은 마음으로 설치를 시작해보자..! 기본 세팅부터 하자!! 1 . express 라이브러리 설치하기 (라이브러리 : 코드를 쉽게 짜기 위해 빌려쓰는 코드 모음집! => 도서관에서 책을 빌려서 쓰듯이) ⇒ 해당 폴더에서 터미널 열기 상단 바 terminal => new terminal ⇒ 원하는 폴더로 이동 cd ( change directory ) 원하는 위치 ex) cd 01.Basic cd .. (상위폴더로 이동) 2. npm init -y (초기화하고 라이브러리를 설치하겠다!) (npm init만 쓰면 일일이 엔터키를 눌러서 넘어가야하지만 -y를 쓰게되면 한..