전체 글

Open API , Rest API 등등 여기저기서 API 이야기 하는데 뭔소린지 잘 모르겠죠? 저랑 같이 정리해봅시다 API 란? Application Programming Interface 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법 쉽게 말해서, 메뉴판이다! 우리가 식당에서 주문을 한다고 가정해보죠. 중국집가서 치킨 먹고 싶다고 치킨을 시킬수는 없죠? 우리의 선택권을 한정시켜주는 '메뉴판'이 필요하겠죠. 주인이 메뉴판을 만들면, 그 안에서 우리가 음식을 고르게 되죠. 메뉴판이 식당의 API 가 되는 겁니다. 식당과 손님이 음식을 주고받기 위한 방법으로 사용되니까요 프로그램 측면에서 생각해보죠. 영화를 보여주는 프로그램이 있습니다 여기서 내가 마음대로 '아는형님'을 요청하면 어떻게..

Input box 종류 ​ 이거 말고도 다양한 종류의 인풋 박스가 많으니 필요할 때 찾아쓰기 에 뭔가 입력하면, 코드가 실행되도록 이럴땐 onChange 아니면 onInput 이벤트핸들러를 부착하면 됩니다 {실행할 코드}}/> 이벤트 핸들러는 많다 onMouseOver={ } 이건 이 요소에 마우스를 댔을 때 안의 코드를 실행해줌 onScroll={ } 이건 이 요소를 스크롤 했을때 안의 코드를 실행해줌 입력값을 가져오는 법 {console.log(e.target.value)}}/> e라는 파라미터를 추가하고, e.target.value를 쓰면 사용자가 입력한 값을 가져올 수 있음 참고로 e말고 작명 자유롭게 해도됨 e.target => 이벤트가 발생한 html e.preventDefault()=> 이벤..

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종류만 표현할 수 있는 자료형이면..