분류 전체보기 (75) 썸네일형 리스트형 API , REST API, RESTfull API 가 뭐야? 헷갈려 헷갈려!!!! 나는 API, 특히 RSTFULL API가 제일 헷갈렸다. 인터넷에 서치를 해봐도 내 머리로 이해할수 있는 속시원한 답변이 없었다! 나는 진짜 간단하게 이야기 해야 이해가 되는편인데 .. ㅠㅠ 그래서 정말 많이 찾아본 결과 내가 이해한건 대충 이런 맥락이다. API - API란 애플리케이션과의 상호작용을 할수 있게 하는 소통역할을 하는것,, REST API - 구조적으로 리소스를 정의하겠다. HTTP 리소스의 설계 약속이다. 예를들면, 주소창의 /(슬래시)는 끝에 적지 않는다. PUT / POST / DELETE / GET 이런식의 내용을 적어주는 것 RESTfull API - 위의 REST 의 설계가이드를 따라서 API를 만드는것! 그럼 why? 따라하냐!! -> api 주소 자체만으로 어떤걸 만드는지.. LifeCycle이 뭐야? 생명주기가 뭔데 LifeCycle 이란 생명주기를 뜻한다. 생명주기란 컴포넌트가 처음 생길때부터 없어질때까지의 주기를 이야기 한다. 이 일련의 과정들에는 장착 (mount) 업데이트 (update) 제거 (unmount) 위 세가지의 일련의 과정들을 거친다. 근데 여기에 이게 왜 중요한데? 라고 할수있는데 이주기들을 알면 간섭을 하는 타이밍을 적절히 알수가 있다. 예를 들면 useEffect를 사용해서 간섭을 하는거다. useEffect는 mount, update 시 사용되어지는데 이 주기를 이용해서 언제 로딩되어야 하는지를 정할수있다. 그래서 로딩이 오래걸리는 것들은 useEffect를 사용해서 html이 로딩된 후 로딩되어지게 코드를 작성하면 조금더 효율적으로 사용이 가능하다. useParams 가 뭔데? 대체 뭔데! useParams는 리액트 훅중 하나이다. 이건 언제쓰냐고? 유저가 URL파라미터에 입력한걸 가져올때 사용된다. App.js안에 있는 :id (url파라미터) 이걸 가져오기 위해서 useParams를 사용해준다 let { id } = useParams(); let 찾은상품 = props.product.find((x) => x.id === id); 프롭스를 해서 find로 찾아주고 x.id 현재 html에있는 : id값과 데이터(product) 안에있는 id값이 같으면이라는 뜻 이걸 이렇게 선언해주고 {찾은상품.title} {찾은상품.content} {찾은상품.price} 이렇게 html에 작성해준다. 결국엔 몇수십개의 페이지를 만들때 사용하면 좋다. 또한 id 값을 비교하고 오류나는것을 방지해준다. styled-components 가뭐야? styled-components가 뭐냐면 css파일에 가지 않아도 react환경에서 현재 페이지 안에서 사용할수있는 CSS 라고 보면된다. 이 스타일의 장점으로는 현재 페이지에서만 작용이 된다는점이다. 다른 컨포넌트에 오염이 안된다. 그리고 또한가지의 장점으로는 로딩 시간이 향상이 된다. 그래서 어떻게 사용되냐고? let box = styled.div` backgroud: yellow; padding: 20px; color: black; ` ` 백틱을 사용해서 안에 내용을 넣어주면된다. 그리고 html안에는 로 import시켜주면 끝! .gitignore가 작동하지 않을때는 어떻게해요? 포트폴리오를 만들던 중에 .gitignore에 moules를 올리고 싶지 않은데 자꾸 안먹는 것이다. 여기에 보이는 node_modules가 안먹는데 이걸 해결하기 위해서 시간을 다 잡아먹었다... 나와같은 상황은 또 안만들어지기를 위해 작성한다. 이건 git 캐시에 문제가 생기는거라, 아래 명령어로 캐시내용을 지운다음 다시 커밋하면 된다... git rm -r --cached . git add . git commit -m "날짜" 커밋전에는 node_modules /App/node_modules /App/client/node_modules /App/client/build /App/server/config/dev.js .gitignore 파일에 node_modules가 들어있는 경로를 바르게 설정해준다음.. 반응형(모바일)웹에서 움직이는 가로스크롤 현상 없애기 index.html 라인에 태그를 추가. safari 가로스크롤 막기 body { over-flow-x : hidden; } html { over-flow-x : hidden; } JSX REACT 문법 3가지 핵짧음. JSX란 JAVASCRIPT의 라이브러리의 일종이다. 문법 1 Class 넣을땐 className=" " 이렇게 사용되어진다. 문법 2 변수를 선언하고 넣을땐 { 변수명 } 중괄호안에 넣어준다. 문법 3 style 변경시 { { fontSize: "2vw" } } 이런식으로 작성해준다. 여러개 작성시 { { fontSize: "2vw" , color: "red" } } fatal: not a git repository (or any of the parent directories): .git [해결하기] fatal: not a git repository (or any of the parent directories): .git 현재 폴더에 git에 대한 정보 담은 파일이 없기 때문에 발생하는 에러라고한다. $ git init $ git remote add origin (GitHub주소) origin 이라는 이름은 사용되었다고 다른 이름으로 하라고 하면 다른이름으로 설정하면 된다. fatal: not a git repository (or any of the parent directories): .git [해결하기] fatal: not a git repository (or any of the parent directories): .git 현재 폴더에 git에 대한 정보 담은 파일이 없기 때문에 발생하는 에러라고한다. $ git init $ git remote add origin (GitHub주소) origin 이라는 이름은 사용되었다고 다른 이름으로 하라고 하면 다른이름으로 설정하면 된다. jquery가 뭐야? 뭔데? 그럼 어떻게 사용하는데? jquery는 말그대로 javascript의 일종의 라이브러리로 조금더 코드를 간결하고 편리하게 사용할 수 있게 만드는 것이다. 그래서 addEventListner는 on으로 getElementsById는 $표시로 훨씬간결하게 만드는 일종의 도구다. 그래서 그걸 어떻게 쓰는데????? jquery CDN 에 들어가서 https://releases.jquery.com/ minified 파일을 긁어서 가져오면 된다! body안에 넣어주기! 스크립트 위에 넣어서 사용하면 된다! 이전 1 2 3 4 5 6 7 8 다음
