TIL ▶ styled-component는 작성 위치가 정말 중요하다 [오류 증상] styled-component를 적용시키고 나서 input 박스에 입력시 속도가 매우 느리고 포커스가 나감 [확인] 개발자도구로 확인하니 콘솔창에 해당 warning 확인 [문제 파악] 찾아보니 styled-components로 만든 요소의 선언 위치 때문이라고함! Header.jsx부분이 문제인것 같아 찾아보러감 >> 아니였음 styled component안에 직접적으로 작성한 함수가 문제였음 ▼문제 코드 ▼ import React from 'react'; import styled from 'styled-components'; function WriteComments() { const StDivWrite = styled..

[오류] React has detected a change in the order of Hooks called by App. This will lead to bugs and errors if not fixed~~ [해결] App.js -> App.jsx로 변경 [참고자료] "React has detected a change in the order of Hooks" but Hooks seem to be invoked in order I am trying to use Context and Reducers via React's hooks, and running into problems with the order of the hooks not being constant. My understanding was t..

[원인] 자식 컴포넌트에서 매개변수를 구조분해할당으로 안 가져옴. (전) function AddMessage(datas, setData) { (변경 후) function AddMessage({datas, setData}) { 1.Home.jsx const initialState = [ { id: uuid(), name: '하니팬', content: '하니최고최고', idol: '하니' }, { id: uuid(), name: '혜린팬', content: '혜린최고최고2', idol: '혜린' }, ]; const [datas, setData] = useState(initialState); ▶ 여기에서 를 컴포넌트로 만들어서 사용하기 ▶ (기능) 댓글 남기기 기능과 유사 2. AddMessage.jsx i..

1. JSON이란? ▶ JS 객체 문법 기반으로 만든 데이터 교환 형식 ▶ 큰 따옴표(")만 허용 ▶ 메서드 : JSON - 문자열 형태 - 서버/클라이언트 간 데이터 전송시 사용 (★파싱 필요 ★ ) (1) JS -> JSON 형태 * JSON.stringify({js객체}) : JSON 문자열로 변환 JSON.stringify( {x:5, y:6} ) ; // "{"x":5,"y":6}" (2) JSON -> JS 형태 * JSON.parse(json형식) : 자바스크립트 객체 변환 ( ★ 네트워크 통신의 결과 ★) 2. {JSON} Placeholder = fake API (가짜 서버) JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fa..

1. REST API ▶ 어떤 자원에 대해 crud 할 수 있게 http method(GET, POST,PUT,DELETE) 사용하여 요청 보내는 것 ▶ URI를 통해 정보의 자원 표현 / 자원의 행위는 HTTP Method로 명시함 ▶자원 : URI / 행위 : Http Method / 표현 ▶ 규칙 (1) 명사 복수형 사용 / 소문자 작성 (2) 마지막에는 '/' 포함 x (3) 언더바 사용 x 하이픈 사용 (-) (4) 파일 확장자 표시 x ▶RestFul 하다 = 위의 REST API의 조건을 다 만족시킨 설계 상태 2. Path Variable vs Query Parameter ▶ 언제 왜 써야하는지 아는 것이 중요! ▶ GET method를 이용해 데이터 가져오면 (1) Path Variabl..

1. 비동기 프로그래밍이란? ▶ 동기: 현재 실행중인 코드가 끝나야 다음코드 실행 ▶ 비동기 : setTimeout, addEventListener // 요청,실행대기, 보류 등 코드 , 서버통신과 관련 로직이 대표적 (ex. 짜장면 배달: 배달 후 할일 후에 짜장면 그릇 가져감) ▶ 콜백지옥 : 비동기 시, 일어날 수 있는 문제 => 가독성+수정이 어려움 => (ES6) promise 객체가 나옴! 2. promise 객체의 handling 방법 (예외처리) ▶ promise 객체 (1) 대기 : pending / 요청하고난 직 후 상태 --> 초초 그 잡채 (2) 이행 : fulfilled / 성공적으로 전달한 상태 (3) 거부 : rejected / 이유는 모르겠지만 거절당함 ▶ handling 방..