본문 바로가기

분류 전체보기

(81)
코드캠프 4기 - 4일차 - 프로젝트 오류 해결기 오류 1 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? JSX는 자바스크립트이기 때문에 for는 반복을 의미한다. for가 아닌 htmlFor을 써준다. 유튜브 사진 오류 2 Unhandled Runtime Error Error: Failed to fetch 서버 충돌 문제였다. 그래서 코드를 아무리 수정해도 (프로젝트 파일 코드에는 문제가 없었음) 오류를 잡을수 없었던 것이다. next.js는 기본적으로 포트 3000를 쓰는데, 3000은 어디선가 사용중이었고, 그러다 3001를 만들어 쓰다보니 서버가 꼬였던것. 그래서 이런경우 강제로 포트를 종료시켰다. 명령어 : npx kill-port 3000 3001이 아닌 기본포트 3000을 계속 ..
코드캠프 4기 - 4일차 React 4강 비동기/동기 통신 서버와 데이터를 주고 받는 방식 동기? 비동기? 동기(응답이 모두 끝난 후 요청) 자바스크립트 자체는 동기 대부분 외부 요청 라이브러리 디폴트는 비동기 (기다리지 않고 불러오기) 비동기는 오래걸릴때 사용한다 (예 : 이메일 전송하기) 비동기를 동기로 바꿔주는 연습 비동기를 동기로 바꿔주는 명령어 async / await apolllo 가 axios보다 좋은점 : 임시저장이 가능하다 const [실행함수] = useMutation() apollo에서 가져오기 import {useMutation} from '@apollo/client' graphql를 요청할수 있는 기능을 만들어 준다 오늘의 공부 팁 apollo사이트 들어가서 docs 보는 연습하기 오타는 더블클릭해서 확인..
코드캠프 4기 - 3일차 두 컴퓨터간 데이터 전송 API 요청을 받아주는 담당자 게시물 데이터 -> 요청 -> 게시물 저장 API (함수) 응답 데이터
코드캠프 4기 - 2일차 Javascript 배열 데이터 조회 indexOf 데이터의 index 값 반환 includes 데이터의 존재 여부 반환 true/false includes는 데이터가 있는지 없는지 확인할 때 쓴다. 객체 데이터 추가 const Obj = { } Obj.name = “철수” 이미 key값이 있으면 value만 변경 객체 데이터 변경 delete Obj.name React에서 Const, 다르게 쓰인다 import {useState} from 'react' // react에서 useState 기능을 사용할수 있도록 불러오기 const [fruit, Setfruit] = useState() fruit는 변수이름 Setfruit는 변수를 바꾸는 기능 useState() 괄호안 값은 초기값 작성법은 기존 JS방..
코드캠프 4기 - 1일차 이전에 썼던 코딩과 전혀 다른방식으로 UI를 만들었다. Html, css파일에서 했던 작업들이 아닌, js파일안에 html, css까지 해결할 수 있는 새로운 코딩법을 배웠다. Npm, Emtion 등을 설치하고 파일을 용도에 맞게 바른 폴더 안에 넣는게 중요했다. Pages 안에 각 웹페이지들 Public 안에 쓸 이미지들 Styles 안에 js를 입힌 스타일들 새로운 코딩법에선 원하는 이름의 태그로 한데 모아둘 수 있다. 페이지가 어떻게 구현됐는지 직관적으로 알수있어, 코드 찾기와 수정이 이전과정보다 훨씬 수월했다.
Section 9: The Spread Operator (...) const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], order: function(starterIndex, mainIndex) { return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]]; } orderDeliv..
Section 9: Destructuring Objects const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], order: function(starterIndex, mainIndex) { return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]]; } orderDeliv..
Section 9: Data Structures, ModernOperators and Strings - Destructuring Arrays const [x, y, z] = arr; arr는 detrcuturing를 원하는 Array variable 이름에 [x, y, z] 는 array가 아니라 arr를 detructuring 해주는 것이다. original arry에 아무런 영향을 주지 않는다. const arr = [2, 4, 5] const a = arr[0] const b = arr[1] const c = arr[2] const [x, y ,z] = arr; console.log(x, y z) 2 4 5 , , 건너뛰기 main과 secondary 순서 바꾸기 const restaurant = { name: 'Classico Italiano', location: 'Via Angelo Tavanti 23, Firenze, Italy',..
pug에서 html or scss에서 css로 변환해주는 사이트 https://pughtml.com/ PugHtml - Pug and HTML online converter in realtime Hi friends,is Pug-HTML helping you? I need your HELP!!! I am surprised that last year I received only $3 from a good man to support. It is not enough, and I need you help to pay domain, hosting, and maintain fees of this service. pughtml.com https://jsonformatter.org/scss-to-css Best SCSS to CSS Converter Online Secure and ..
front-end 개발을 돕는 무료 CSS Effects 사이트 https://freefrontend.com/ 82 CSS Text Effects Collection of free HTML and CSS text effect code examples. Update of May 2020 collection. 11 new items. freefrontend.com