니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] props types 자료형, 필수 값, 기본 값 지정 이번에는 crate react app에 대해 알아보겠습니다.이전 글을 보면 이전에 만든 리액트 어플리케이션은 스크립트을 직접 Import함으로 써 만들었습니다. create-react-app을 사용하면 많은 스크립트 import와 사전 설정을 알아서 해줍니다.개발 서버 접근, 자동으로 새로고침, 즉각적으로 어플리케이션 안에 css를 포함시켜 주는 등 여러 기능이 있습니다. 1. node...

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] React.memo() : 리렌더링 방지 방법이번에는 props types에 대해 알아보겠습니다. 1. 상이한 자료형 사용ReactJS자체에서는 지정한 props가 어떤 타입으로 작성을 했는지 모른다고 합니다.그래서, 이런 말도 안 되는 코드가 작동이 되죠. 버튼 1은 text를 문자형으로, fontSize를 숫자로 설정을 해서 사용하고 있는데버튼 2은 반대로 사용하고 있음에도 불구하고 오류가 나지 않습니다.function Btn({ text..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] 함수형 컴포넌트의 props 사용 이번에는 props를 조금 더 다양하게 사용해보겠습니다. 1. 주의사항!- 이 코드는 어떤 역할을 할까요? 버튼을 클릭하면 Save Changes가 Revert Changes로 텍스트가 변경되는?놀랍게도 아닙니다. 은 저희가 만든 컴포넌트로, 여기서 사용하는 onClick은 props의 명칭이지 이벤트리스너가 아닙니다.function Btn({ text }) { return ( ..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어, 이번에는 Props에 대해 알아보겠습니다. Props란 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법입니다.1. Props를 사용하지 않는 버전 - 우선 Props의 장점을 극대화하여 느끼기 위해, Props를 사용하지 않는 버전으로 각각의 버튼마다 컴포넌트를 만들고 스타일을 일일이 지정을 해줘야 합니다.function SaveBtn() { return ( Save Changes ..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] input state () - 단위변환기1 Warning : Invalid DOM property[React] 분 시, 리셋기능 - 단위변환기2 이번에는 km to miles 거리 변환기를 추가하여 단위변환기를 완성해보겠습니다. 1. 거리 변환기- 기존 시간 변환이랑 소스 형태는 거의 동일합니다.setUnit를 이용하여 km, miles의 상태를 변환시켜주고, setFlipped를 이용하여 km, miles를 전환시킬 수 있게 해줍니다.o..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] input state () - 단위변환기1 Warning : Invalid DOM property[React] 분 시, 리셋기능 - 단위변환기2 이번에는 두 개의 단위 변환기를 사용자의 선택에 따라 표출하도록 하겠습니다. 1. 코드 분리이전에는 안에 시간 변환기가 들어가있었습니다. 변환기를 하나 더 추가할 것이기 때문에 코드를 분리해주겠습니다. 2. 사용자 입력에 따라 코드 변환기 ..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] input state () - 단위변환기1 Warning : Invalid DOM property 이번에는 분을 입력하면 시로 출력,반대로 시를 입력하면 분을 출력,그리고 리셋 버튼을 붙여 단위변환기를 완성해보겠습니다. 1. 시 -> 분- 이전 글에 이어 분을 입력할 경우 hours에서는 value값을 분/60으로 변환을 하여 출력해줍니다. 소수점을 반올림하고 싶을 경우 Math.round()를 사용하면 됩니다.- 그리고 분에서는 값을 변경..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] State Functions (state 값 설정 방법 2가지)이번에는 JSX문법을 통해 단위변환기를 만들어보겠습니다. 우선 분-> 시간으로 바꾸기 위해 필요한 요소들만 먼저 추가해보았습니다. 문제 없이 이쁘게 잘 나온 것을 볼 수 있는데요, 사실 JSX문법 상 틀린 문법이 있습니다. 그 문법이 어떤 거인지 확인 하기 위해 react를 install하는 부분을 조금 수정해보겠습..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에 이어,[React] JSX문법 기초 (JS to JSX)[React] 컴포넌트 state (React.useState(), setState) 이번에는 state 값을 설정하는 방법 2가지에 대해 배워보도록 하겠습니다. 1. 직접 새로운 값 설정- 필요한 소스만 가져왔습니다. 지난 번처럼 직접 새로운 값을 설정하는 방법은 다음처럼 setCounter()함수에 0,1처럼 값을 넣거나 기존 변수에 값을 계산하여 넣는 방법이 있습니다.let [counter, setCo..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 이전글에서 만든 컴포넌트에 이벤트를 적용시켜보겠습니다.[React] JSX문법 기초 (JS to JSX) 1. state이전글에서의 공부하려고 넣은 불필요한 옵션들은 제외하고 처음에 만드려고 했던 "버튼 클릭시 카운터 증가"하는 코드를 만들었습니다. 커스텀태그를 만들고, 이벤트 함수를 연결을 하였는데요, 기존의 js문법보다 훨씬 간단하고 한 눈에 보기 편하더라구요. 핵심 코드를 보면 카운트증가랑 렌더링..

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://nomadcoders.co/react-for-beginners 버튼 클릭 시 카운터가 올라가는 코드를 짜보겠습니다.보통 html, js 이용해서 짜라고 하면 다음과 같이 짤겁니다. 1. js 문법의 버튼 클릭 시 카운터 증가 Total clicks: 0 Click me 버튼을 클릭하면 이미지처럼 카운트가 아주 잘 됩니다. 개발자도구로 자세히 보면, 버튼 클릭시 span 자체가 다시 랜더링 되는 것을 확인 할 수 있습니다. 2. React js, Dom을 이용하여 createElemen..

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ Array 자료형 변수에 여러 자료형 사용 // 여러 자료를 한 곳에 보관하기 위해 array 자료형 사용, 자료형 섞어서 사용 가능 let a = ['Tomatoes', 'Pasta', 'Coconut', 20, 30] array에서 데이터 하나만 꺼내기 위해서는 인덱스 사용 console.log(a[0]) array 데이터 수정은 등호 사용 a[0] = 30 html에 적용 상품목록 {상품[0]} $40 {상품[1]} $40 {상품[2]} $40

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ 장바구니 페이지 제작 /list로 접속 시 상품목록페이지 보여주기 url 만드는 기준은 개발자 마음 Routing (라우팅) : url로 페이지를 나눔 일반적인 웹서버 프레임워크에서는 라우팅을 하려면 어떤 사람이 /list를 접속하면 ~~.html을 보내주는 코드를 짬 하지만 Next.js는 자동 라우팅 기능이 있음 -> 파일, 폴더 하나 만들면 라우팅 끝 app/폴더생성/page.js생성 폴더명이 url이 됨 /list로 접근 시 page.js 내용 보여..

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ 리액트에서 쓰는 html문법을 JSX라고 함 html을 넣을 때 유의 사항이 있음 1. return()안에 html 넣을 때 하나의 html태그에서 하나의 html태그로 끝내야 함 1-1. 옳은 예시 - page.js return ( 안녕! ) 1-2. 올바르지 않은 예시 - html 태그를 두 개 이상 넣지 못함 2개 태그 넣고 싶으면 로 감싸거나 이렇게 무의미한 태그로 묶어도 됨 return ( 안녕! ) 2. css를 적용하기 위해서 클래스를 만들때 ..

코딩애플 선생님의 'Next.js로 웹서비스 만들기' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! (무료인 부분만 올리겠습니다) 출처 : https://codingapple.com/course/next-js/ https://nodejs.org/ko LTS로 설치 (신버전 Next.js를 사용할 것이므로 18버전 이상으로 설치) 계속 진행 에디터는 vscode 사용 프로젝트 폴더 만들고 vscode에서 열기 nextJs 프로젝트 생성 터미널 -> new Terminal npx create-next-app@latest --experimental-app 프로젝트명은 쿠팡프레시를 유사하게 만들 것이므로 fresh typescript는 사용 안함 tailwind css도..

Vue 서버를 실행하자마자 브라우저를 함께 여는 방법vue project - package.json"scripts": { "serve": "vue-cli-service serve --open --host localhost", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },host의 디폴트는 0.0.0.0이나 localhost인데 난 0.0.0.0이 제대로 동작되지 않아 명시적으로 입력하였다.

1. 파일 - import2. Gradle - Existing Gradle Project3. next4. vue 프로젝트 경로 설정5. 완료6. 터미널 열기7. 실행 - npm run serve

유튜브 아프리카 도서관님의 'Vue 3 강의 - 스프링부트 REST API를 이용하여 쇼핑몰 만들기(JPA, MariaDB, JWT)' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://www.youtube.com/watch?v=htYYSszfzv01. 프로젝트 폴더 생성2. 경로 이동 윈도우 - powershell - cd 경로cd C:\project\gallery 3. vue 프로젝트 생성vue create 프로젝트명vue create frontend4. 키보드 화살표 이용하여 Vue3 선택5. 생성한 프로젝트로 이동cd 프로젝트명cd frontend 6. 서버 실행npm run serve7. 윈도우 + r에서 local 경로 넣기8. 프..

유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://www.youtube.com/watch?v=b0ImUEsqaAA아직 설치를 하지 않으신 분들은 아래 링크 참고바랍니다.https://0206cho.tistory.com/196 [Vue] vue 설치 with vscode유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0I0206cho.tistory.comhttps://0206cho.tistory.com/19..

유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://www.youtube.com/watch?v=b0ImUEsqaAA아직 설치를 하지 않으신 분들은 아래 링크 참고바랍니다.https://0206cho.tistory.com/196 [Vue] vue 설치 with vscode유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0I0206cho.tistory.comhttps://0206cho.tistory.com/19..

유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://www.youtube.com/watch?v=b0ImUEsqaAA아직 설치를 하지 않으신 분들은 아래 링크 참고바랍니다.https://0206cho.tistory.com/196 [Vue] vue 설치 with vscode유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0I0206cho.tistory.comhttps://0206cho.tistory.com/19..

유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://www.youtube.com/watch?v=b0ImUEsqaAA아직 설치를 하지 않으신 분들은 아래 링크 참고바랍니다.https://0206cho.tistory.com/196 [Vue] vue 설치 with vscode유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0I0206cho.tistory.comhttps://0206cho.tistory.com/19..

유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://www.youtube.com/watch?v=b0ImUEsqaAA아직 설치를 하지 않으신 분들은 아래 링크 참고바랍니다.https://0206cho.tistory.com/196 [Vue] vue 설치 with vscode유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0I0206cho.tistory.comhttps://0206cho.tistory.com/19..

유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다.부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!출처 : https://www.youtube.com/watch?v=b0ImUEsqaAA아직 설치를 하지 않으신 분들은 아래 링크 참고바랍니다.https://0206cho.tistory.com/196 [Vue] vue 설치 with vscode유튜브 개발자의 품격님의 '4시간만에 완벽하게 끝내는Vue.js입문' 보면서 공부한 내용입니다. 부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다! 출처 : https://www.youtube.com/watch?v=b0I0206cho.tistory.comhttps://0206cho.tistory.com/19..