전체 글
-
display: flex를 이해&연습하기 좋은 유용한 사이트 "Froggy"공부 기록/프로그래밍 2023. 8. 20. 19:57
https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 내용 기억을 위해 메모메모! justify-content justify-content 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬합니다: flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items align-items 속성은 다음의 값들을 인자로 받아 요소..
-
템플릿 리터럴공부 기록/React 2023. 8. 20. 18:57
from chatGPT 템플릿 리터럴(Template Literals)은 JavaScript의 문자열 표기법 중 하나로, 백틱(backtick) 문자( ` )를 사용하여 문자열을 생성하는 방법입니다. 템플릿 리터럴 문법의 주요 특징은 다음과 같습니다: 다중 줄 문자열(Multi-line Strings): 템플릿 리터럴을 사용하면 여러 줄로 이루어진 문자열을 간편하게 생성할 수 있습니다. 일반 문자열에서는 줄 바꿈 문자(\n)를 사용해야 했지만, 템플릿 리터럴에서는 그냥 줄 바꿈을 입력하면 됩니다. javascriptCopy code const multiLineString = ` This is a multi-line string. `; 표현식 삽입(Expression Interpolation): ${} 구..
-
props에 대한 이해공부 기록/React 2023. 8. 13. 16:13
코드를 직접 작성할 때 props를 어디에 어떻게 설정해야하는지 헷갈렸는데 이 글을 일부 보니 이해가 된다. https://www.robinwieruch.de/react-pass-props-to-component/ How to use Props in React Everything you need to know about props in React. How to pass props to components, how to set default props, how to know the difference between props and state, and how to pass components or functions as props, ... www.robinwieruch.de 데이터를 하나의 컴포넌트에서 다..
-
전개연산자공부 기록/React 2023. 8. 13. 14:15
from chatGPT 전개 연산자({ ...todo })는 객체나 배열의 요소를 새로운 객체나 배열로 확장(전개)하는데 사용되는 문법입니다. 이를 통해 기존 객체나 배열의 속성을 유지하면서 일부 속성을 추가, 수정 또는 덮어쓸 수 있습니다. 객체에서 전개 연산자를 사용하는 경우, 기존 객체의 속성을 복사한 뒤 새로운 속성을 추가하거나 기존 속성을 수정하여 새로운 객체를 생성합니다. 기본적으로 얕은 복사(shallow copy)를 수행합니다. 예를 들어, 다음과 같이 객체 person이 있다고 가정해보겠습니다: javascriptCopy code const person = { name: 'John', age: 30 }; 이제 전개 연산자를 사용하여 기존 객체의 속성을 유지하면서 새로운 객체를 만들어 보겠..
-
비구조화(destructure)공부 기록/React 2023. 8. 12. 15:35
https://www.robinwieruch.de/react-pass-props-to-component/#react-component-props-by-example How to use Props in React Everything you need to know about props in React. How to pass props to components, how to set default props, how to know the difference between props and state, and how to pass components or functions as props, ... www.robinwieruch.de + from chatGPT 리액트에서(그리고 일반적인 자바스크립트 프로그래밍에서)..
-
[문제해결] Error: error:0308010C:digital envelope routines::unsupported공부 기록/React 2023. 5. 23. 00:17
에러 사건의 발단. react router 설치하다가 여러 종류의 에러메시지를 만났다. The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 어떻게 업데이트 하는지 몰라 이거 참고해서 다시 설치를 하려해도 에러가 나고.. https://points.tistory.com/90 -> 이렇게 해보려했으나 잘 안되서 헤매다가 npm run start 해봤더니 다음 에러 발생 Error: error:0308010C:digital envelope routines::unsupported Starting the development server... Error: error:0308010C:digital envelope rou..
-
[노마드코더] ReactJS로 영화 웹 서비스 만들기 - Basic of React공부 기록/API 2023. 4. 16. 15:26
React는 UI 요소를 더 interactive하게 만들어주는 JavaScript library다. https://nomadcoders.co/react-for-beginners/lectures/3260 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요! nomadcoders.co 1. react import: reactJS가 element를 생성하고 event lister를 추가할수있도록 해준다. 2. react-dom import : react-dom은 모든 react element를 html body에 두도록 해주는 library or package다. 즉, elemen를 가져다가 html으로 바꿔준다. render() shows i..
-
[노마드 코더] GraphQL로 영화 API 만들기공부 기록/프로그래밍 2023. 4. 8. 19:04
https://nomadcoders.co/graphql-for-beginners/lobby graphQL이란? graphQL은 하나의 스펙이다. 사람들이 원하는 방식대로 구현할 수 있도록 하는 언어. 동일한 개념을 다른 환경에서 이용할 수 있음. 예: graphql-js는 graphQL로 JS를 구현하기 위한 코드. 같은 개념얼 다른 언어로 사용하기 위함 GraphQL 서버(graphql spec.을 따르는 서버)도 제공하고 있음 장점 REST API 문제점을 보완할 수 있음 (아래 설명) 요청 URL로 데이터를 즉시 받지 않음. 대신 필요한 data만 곧바로 요청 즉, 하나의 API로 원하는 정보만 얻을 수 있는 장점이 있다. REST API 문제점: over-fetching: 나에게 필요없어도 모든 ..