전체 글 80

S2 unit9 | Eftect Hook : Side Effect 제어

📌 Side Eftect (부수 효과) : 함수 내의 구현이 함수 외부에 영향을 미치는 것 let foo = 10; function sum(a) { foo = foo + a; } 함수 sum은 함수 외의 변수 foo를 변경시키므로 부수효과가 있는 함수이다. React에서의 Side Eftect API (setTimeout) 사용 이벤트 사용하여 DOM 직접 조작 데이터 가져오기 (fetch API, localstorage) 📌 순수 함수 : 오직 함수의 입력만이 함수의 결과에 영향을 미치는 함수, 부수효과를 가지지 않은 함수, 예측이 가능한 함수 함수 외부를 변경시키지 않음 어떠한 전달 인자가 주어질 경우 항상 같은 값을 반환함 인자로 전달된 값을 수정하지 않음 🙋‍♀️ Math.random()은 순수 ..

S2 unit9 | State 끌어올리기

react에서 데이터 흐름은 위에서 아래로 흐른다. 하지만 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달하고 싶은 상황이 생길 수 있다. 이럴 때는 State를 끌어올리면 된다. 📌 부모 컴포넌트의 setState 함수 Props로 전달 부모 컴포넌트 const Parent = () => { const [state, setState] = useState(초기 값); return ( setState를 자식 컴포넌트에 props로 전달 상태 : {state} ) } 자식 컴포넌트 const Child = ({ prop }) => { const [click, setClick] = useState(false); const handleClick = () => { click? prop(바꿀 상태) :undefine..

S2 unit8 | [HTTP/네트워크] REST API, OPEN API & API Key

📌 REST API (Representational State Transfer : 대표 상태 전송) - 로이 필딩 : 웹에서 사용되는 데이터나 자원을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식(아키텍처) ✔ REST 성숙도 모델 (RRM) - 레오나르도 리처드슨 🔴 0단계 - HTTP 프로토콜 사용 : REST API의 기본 단계, 0단계만 되어있는 API를 REST API라고 할 수 없음 요청 내용 🙋‍♀️요청 👨‍⚕️응답 예약 가능한 시간 확인 POST / appointment HTTP/1.1 [헤더 생략] { "date" : "2022-12-25", "doctor" : "허준" } HTTP/1.1 200 OK [헤더 생략] { "slots" : [ { "doc..

[6주차 주간일기] 조금 지쳤던 주😥 그래도 할 수 있다!

이번 주 목요일부터 급격하게 힘이 빠졌다. 공부하기 싫다기 보다는 뭔가 하기가 힘든...? 피곤한 느낌이었다. 자신감을 조금 잃은 것 같다. 그나마 내가 잘한다고 생각했던 알고리즘 문제도 안 풀리지... 다른 분들은 세련되게 삼항연산자랑 고차함수 메서드를 자유자재로 사용하시는데 난 뭐지... 생각이 들어버렸다. 비교하면 안되는데 자꾸 비교하게 된다. 기죽지 말고 자극 받아서 더 열심히 해야지 칭찬할 점은 이번 주에 스터디도 안 빠지고 필라테스 두 번이나 나갔다는 점이다...! 그래서인지 더 힘들긴 했지만... 앞으로는 운동해서 체력도 늘리고 코딩도 더 잘하게 될거니까 문제 없어! 파이티이잉!!!! 이번 주 주말에는 공부하지 않고 놀았다. 오랜만에 나간 밖은 크리스마스로 들떠있었다. 맛있고 귀여웠던 카페 ..

S2 unit7 | [HTTP/네트워크] HTTP Messages

📌 HTTP Messages : 클라이언트와 서버 사이에서 데이터가 교환되는 방식. 구성 파일, API, 기타 인터페이스가 자동으로 완성함. ✔ 유형 요청(Requests) 응답(Responses) 1. start line : 실행되어야 할 요청, 요청 수행에 대한 성공 또는 실패 기록. 항상 한 줄로 끝남. 응답에서는 status line이라고 부름. 2. HTTP headers : 요청에 대한 설명, 본문에 대한 설명. 3. empty line : 요청에 대한 모든 메타 정보가 전송되었음을 알리는 빈 줄(헤더와 본문 구분) 4. body : 요청과 관련된 데이터, 응답과 관련된 데이터 또는 문서. 요청과 응답의 유형에 따라 선택적으로 사용. ❗ payload 🔗: 사용에 있어서 전송되는 데이터. HT..

S2 unit7 | [HTTP/네트워크] AJAX , SSR vs CSR

📌 AJAX Asynchronous JavaScript And XMLHttpRequest의 약어 Javascript, DOM, Fetch, XMLHttpRequest, HTML 등의 기술을 사용하는 웹 개발 기법(개념) SPA를 만드는 기술 ✔ AJAX의 가장 큰 특징 : 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있음 👍 AJAX 장점 서버에서 HTML 완성하여 보내주지 않아도 웹페이지 만들 수 있음 이전 : 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링이 가능 AJAX : 서버에서 필요한 데이터만 비동기적으로 가져와 브라우저에서 화면의 일부분을 업데이트하여 렌더링 할 수 있다. 표준화된 방법 이전 : 브라우저마다 다른 방식으로 AJAX 사용 XHR 표준화 ..

S2 unit7 | [HTTP/네트워크] 크롬 브라우저 에러 의미

📌 크롬 브라우저 에러 Error Message Description "Aw, Snap!" Chrome 브라우저에서 페이지 로드하는 데 문제 발생 ERR_NAME_NOT_RESOLVED 호스트 이름(웹 주소)이 존재하지 않음 ERR_INTERNET_DISCONNECTED 사용 중인 기기가 인터넷에 연결되지 않음 ERR_CONNECTION_TIMED_OUT ERR_TIMED_OUT 페이지에 연결하는 데 시간이 너무 오래 걸림. 인터넷 연결이 너무 느리거나, 웹페이지에 접속한 사용자가 많아서 발생 ERR_CONNECTION_RESET 웹페이지 연결을 방해하는 요소가 어딘가에 발생 ERR_NETWORK_CHANGED 웹페이지를 로드하는 중에 기기의 네트워크 연결이 해제 혹은 새로운 네트워크에 연결 ERR_CO..

S2 unit7 | [HTTP/네트워크] 클라이언트 서버 아키텍처와 프로토콜

📌 클라이언트 서버 아키텍처 (2-Tiar 아키텍처) : 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것 클라이언트 : 리소스 사용하는 앱 서버 : 리소스 제공(serve)하는 곳 데이터베이스 : 리소스 저장하는 공간 (2-Tiar 아키텍처 + 데이터베이스 === 3-Tiar 아키텍처) 📌 프로토콜 : 서버와 클라이언트 사이의 통신 규약 OSI 7 Layers에 속한 다양한 프로토콜들이 있음 ✔ API (Aplication Programming Interface) : 서버가 제공하는 인터페이스 Interface : 의사소통이 가능하도록 만들어진 접점 HTTP API 디자인의 Best Practice HTTP 요청에는 메서드 개념 존재 요청 URL 디자인 사용하는 메소드 모든 사용자 조회 /us..

S2 unit6 | [React] Props & State 상태와 속성으로 이벤트 처리하기

📌 Props & State 의 개념 👩 나의 속성과 상태 속성 : 이름, 성별 상태 : 감정, 나이, 직업 Props(속성) : (1) 부모 컨포넌트로부터 전달받은 값 (2) 변하지 않는 값 (3) 변하지 않는 값이기 때문에 읽기 전용 (4) 어떤 형태도 넣을 수 있도록 객체 형태 State(상태) : (1) 컴포넌트 사용 중 컴포넌트 내부에서 변화하는 값 📌 props 전달 방법 1. 부모 컴포넌트에서 불러온 자식 컴포넌트에 key와 그 값으로 전달 const Parent = () => { const word = '나는 자식 컴포넌트'; return ( 나는 부모 컴포넌트 //word는 전해지는 props의 키이다. ) } const Child = (props) => { return ( 저는 무엇일까..

[React] React app 파일 구조

🍮 react app 파일구조 SIMPLEROUTE라는 폴더에 만든 리액트앱의 구조이다. node_modules, public, src, package.json, package-lock.json, README.md로 이루어져 있다. node_modules는 너무 많아서 펼치진 않았지만 모듈들이 들어있다. 모듈 추가할 때 게시물에 적었던 파일이다. public에는 많이 만지지 않았던... index.html과 리액트 아이콘 사진파일이 들어있다. manifest.json은 뭔지... 모르겠다. src에는 App.js이 들어있는데 여기서 주로 앱구성을 한다. src폴더가 주된 코드를 짜는 파일이 많은 폴더이다. App.js에서 export default App을 하고 있다. 이것을 index.js에서 impo..

개발/Javascript 2022.11.30