전체 글

SSR과 CSR이란? SSR(Server Side Rendering) 서버에서 웹페이지를 렌더링합니다 CSR(Client Side Rendering) 클라이언트에서 웹페이지를 렌더링합니다 SSR과 CSR 차이점 SSR과 CSR의 차이점은 페이지가 렌더링되는 위치입니다. 이 중 CSR은 브라우저(클라이언트)에서 페이지를 렌더링합니다. CSR은 사용자가 다른 경로를 요청할대마다 페이지를 새로고침하지 않고, 동적으로 라우팅을 관리합니다 SSR 사용 SEO(겅색엔진최적화)가 우선순위인 경우 웹페이지가 사용자와 상호작용이 적은경우 웹페이지 첫화면 렌더링이 빠르게 필요한 경우 (단일파일, 용량이 작은 SSR이 적합) 예시 :네이버 블로그, 뉴욕타임즈 CSR 사용 SEO(겅색엔진최적화)가 우선순위가 아닌 경우 웹페..

위의 무신사 페이지처럼 웹 페이지의 일부분만 바꾸고 싶가면 어떻게 해야할까? 그럴때 AJAX 를 사용한다 1. AJAX란? AJAX는 웹페이지의 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것입니다 구글을 열어보자. 구글에서 딱 한부분 만큼은 html 에 작성된대로 유저가 사용하는 것이 아니라, 유저의 요구에 따라 반응하며 변화하는 부분이 존재한다. 그 부분이 바로 검색창이다. 검색창에 한 글자를 입력할때마다 , 해당글자로 시작하는 단어들은 서버로부터 받아와, 아래 추천 검색어로 보여주게 된다. 다시말해, 검색창에 필요한 데이터만 비 동기적으로 받아와 렌더링 되며,여기에 ajax 가 사용된다. 또다른 예시로는 원티드가 있다 원티드에 들어가보면 사용자가 맨 밑까지 스크롤하더라..

HyperText Transfer Protocol 컨텐츠를 주고 받기 위해서는 서버와 클라이언트가 공통적으로 이해할 수 있는 메세지인 http 를 써야 한다. http는 request 와 response message 로 구분되어 있다 request 와 response message는 다음과 같은 유사한 구조를 가집니다 1. start line 2. http hesders 3. empty line 4. body 구글에 'http request format' 이라고 쳐보았다 http request 는 start line, headers, body 라는 세 부분으로 나뉜다 start line :GET 요청은 웹 서버로부터 데이터를 가져올때 쓰는 요청이다 반대로, 웹서버에서 데이터를 보낼때는 POST 요청을 ..

안에 state를 쓰려고 하는데 문제가 있음 function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( ) } function Modal(){ return ( { 글제목[0] } 날짜 상세내용 ) } 하지만, '글제목'이라는 변수가 define 되지 않았다고 에러가 뜹니다 왜냐면 글제목이라는 state 변수는 function App()에 있지 function Modal() 안에 있지 않으니까요 자바스크립트에서는 다른함수에 있는 변수를 마음대로 가져다 쓸 수 없습니다 다른 함수의 변수를 가져다 쓰려면? 컴포넌트 2개가 부모/자식 관계인 경우에 가능합니다. (한 컴포넌트가 다른 컴포넌트 안에 있는 경우) 부모 ..

모든 array 자료 오른쪽에는 map()을 붙일 수 있습니다 map 함수 쓰는법 기능1. var 어레이 = [2,3,4]; 어레이.map(function(){ // 이 안의 코드를 어레이원소 갯수만큼 실행해주세요~ console.log(1) }); 어레이에 들어있는 원소 갯수만큼 {}의 코드를 반복실행해준다 저러면 진짜로 console.log(1) 3번 실행됨 기능2. var 어레이 = [2,3,4]; 어레이.map(function(a){ // 어레이 안에 있는 원소들을 하나씩 출력해주세요~ console.log(a) }); 콜백함수 안에 파라미터(a)를 작명하면, 그 파라미터는 어레이의 원소들을 하나씩 출력해줍니다 저러면 진짜로 2, 3, 4가 콘솔창에 출력됨 기능3. var 어레이 = [2,3,4]..

리동적인 UI 가 뭐나면, 유저가 조작시 형태가 바뀌는 모달창, 탭, 서브메뉴, 툴팁, 경고문 등 그런 UI를 의미합니다. 동적인 UI 만드는 방법 1. html, css로 미리 UI 디자인을 다 해놓고 2. UI의 현재상태를 state 로 저장해두고 3. state에 따라서 UI 가 어떻게 보일지 조건문 등으로 작성 1번은 했으니 2번부터 할거임 step 2. UI의 현재상태를 state로 저장 state 하나 만들고, 거기에 현재 UI의 상태정보를 저장해두라는 소리 let [modal, setModal] = useState(false); useState 안에 무슨 자료를 넣어야 되냐면 정말 마음대로 하면됨 모달창은 열림 or 닫힘 이 두개 상태밖에 없기 때문에 그거 2종류만 표현할 수 있는 자료형이면..

리액트는 긴 html 을 한단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. 바로 Component라고 합니다. 이걸 이용하면 html을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있습니다. function App (){ return ( (생략) ) } function Modal(){ return ( 제목 날짜 상세내용 ) } 컴포넌트 만드는법 1. function 을 이용해서 함수를 하나 만들어주고 작명합니다 2. 그 함수안에 return() 안에 축약을 원하는 html을 담으면 됩니다 3. 원하는 곳에 사용하면 아까 축약한 html이 등장합니다 컴포넌트 만들때 주의할점 1. 보통 영어대문자로 작명 2.return () 안엔 html 태그들이 평행하게 여러개 XX, 대왕 태그 하나로..

글 수정버튼을 누르면, 내용이 바뀌게 만들고 싶어요. 글제목 중 '남자코트추천' => '여자코트추천'으로요 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( { ??? } }> 수정버튼 ) } 그래서 이렇게 바꿨습니다 function App(){ let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] ); return ( {글제목변경(['남자코트 추천', '강남 우동맛집', '파이썬 독학'])} }> 수정버튼 ) } state 변경함수는 ()안에 넣은 걸로 기존 state를 갈아치워주니까 저렇게 집어넣으면 됩니다. 그러면 여기서 문제, 왜 ..