제발 외우자 git 명령어 ... ㅠㅠㅠㅠ ⭐챕터 원! git 기본 명령어 ✅ 현재 상태 확인 git status ✅ 전체 로그 확인 git log ✅ 깃 저장소 생성하기 git init ✅ 저장소 복제 git clone 레포주소 ✅ GITHUB 주소 연결 git remote add origin [github 주소] ✅ 저장소 코드 추가 git add - 커밋 변경사항 모두 포함 git add -A ✅ 커밋 생성 git commit -m 'message' ✅ git 변경 사항 원격 서버 업로드 git push origin master ✅ 저장소 변경 내용 가져오기 git pull ✅ 변경 내용을 머지하기 전에 바뀐 내용 비교 git diff [브랜치 이름] [다른 브랜치 이름] ⭐ 챕터 투! git br..

참고자료: HTTP 완벽 가이드(저자: 데이빗 고을리) 웹이 어떻게 동작하는가.. 궁금한 것이 너무 많아, 다람쥐 책을 펼쳤다.. 헷갈리는 것, 기억하고 싶은 부분을 기록했다.. 뭉뚱그려 큼지막한 용어 정리부터 더 궁금한 파트까지.. 알차게 적어보았다. 하지만, 이 책을 뜨문뜨문 읽은 죄로 다람쥐로 변해버렸담... 🐿 표현한 이모지 ⭐️ : 큰 키워드 ✨: 세부 용어 정리 📚 : 파트, 소제목 ✅ : 소제목 안의 키워드 및 설명 💡 : 예시 설명 ⭐️ URI - 정보 리소스를 고유하게 식별하고 위치를 지정하는 역할. - 리소스에 대한 고유한 식별자 📚 종류 ✨ 1. URL - 특정 서버의 한 리소스에 대한 구체적인 위치 - URL의 첫 번재 부분을 스킴(scheme), 리소스에 접근하기 위해 사용되는 프..

글쓴이가 헷갈리는 부분, 중요한 부분을 담은 블로깅입니다. 모든 내용이 들어간 것이 아닌 딱 요점만! 기억해야 하는 부분만! 정리해서 업로드한 것이니 참고 바라며, 출처는 이 곳에 남기겠습니다. 😎 Learn Next.js | Next.js by Vercel - The React Framework Next.js by Vercel is the full-stack React framework for the web. nextjs.org * 사용한 이모지들의 의미 😎 ✨ : 단어 의미 📚 : 소제목 ✅ : 소제목 안의 키워드 및 설명 ❓ : '만약'이라는 의미 ‼️: 중요 ! 1. 1장 세팅 (건너뛰기) 2. 2장 css 스타일링 📚 clsx 라이브러리 사용 status 상태가 pending이거나 paid일 경..

1. 자바스크립트 비동기 처리와 콜백 함수 자바스크립트 비동기 처리와 콜백 함수(중급) 중급 자바스크립트 개발자가 되기 위한 자바스크립트 비동기 처리와 콜백 함수 이해하기. 콜백 지옥과 해결 방법 등joshua1988.github.io 콜백함수를 사용하면,다음 단계에 또 콜백, 또 콜백 이렇게 콜백함수를 계속 물게 된다. 이것을 해결한게 promise 함수 2. 두번째 - promise 자바스크립트 Promise 쉽게 이해하기(중급) 자바스크립트 입문자를 위한 Promise 설명. 쉽게 알아보는 자바스크립트 Promise 개념, 사용법, 예제 코드. 예제로 알아보는 then(), catch() 활용법joshua1988.github.io ..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫www.inflearn.com component- 레고 블록을 조립하듯 컴포넌트들을 모아서 개발 마치 자바스크립트의 함수와도 비슷해! 하지만, 다른 점은 속성(props) 을 넣으면, 화면에 나타날 엘리먼트들을 보여주는 것 마치 컴포넌트는 붕어빵 틀과도 같다. 컴포넌트라는 틀로 엘리먼트들이 다 똑같은 모양으로 만들어지는 것 1-1. component 만들기 컴포넌트는 이렇게 둘로 나뉜다. 1) 함수 컴포넌트 ..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫www.inflearn.com element:리액트 앱을 구성하는 가장 작은 블록들 DOM element라는 것도 있다!그거는 흔히 보는 , 태그 같은 html에서 주로 사용하는 것들 리액트 element는 dom element의 가상 표현 같은 느낌 리액트 element 다음 DOM element로 이어짐(렌더링) => 가장 중요한 느낌! element는 실제 화면에 보이는 것들을 기술한 것 이 간단한 코드가 바로 엘리먼트!..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫www.inflearn.com 1.JSX- 자바스크립트의 문법을 확장시킨 것-javascript + xml/html 1)jsx 역할 - 내부적으로 html 코드를 자바스크립트 코드로 변환하는 과정을 거침 그래서, 최종적으로 jsx 코드를 작성해도 자바스크립트코드가 작성되는 것 그리고 여기서,jsx코드를 자바스크립트 코드로 변환해주는 것이 'React.creatElement'라는 함수이다. 이 코드의 해석은첫번째 코드..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫www.inflearn.com form이란?양식, 사용자로부터 입력을 받기 위해 사용되는 것 여기사 html의 폼과 리액트의 폼은 좀 차이가 있다. html 폼은 사용자의 입력을 제어할 수 없음 1. form 이 예시 코드만 봐도, 단순히 type, name만 적용되지 이것이 사용자의 입력값을 제어할 수는 없다 하지만, 리액트에서는 사용자의 입력 값을 제어할 수 있다. -> controlled component 즉, compo..

참고 자료: 인프런 강의 -처음 만난 리액트 [무료] 처음 만난 리액트(React) - 인프런 | 강의자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫www.inflearn.com List란?- array로 구성되어 있음 - array란? js 함수로 변수나 객체들을 하나의 변수로 묶어 놓은 것- Key: 각 객체나 아이템을 구분할 수 있는 고유한 값. 즉, 아이템을 구분하기 위한 고유한 문자열 1. 여러 개의 component를 렌더링하기 이때 map()이라는 함수를 사용하는데, map 함수는 배열에 어떤 처리를 한 뒤 그것들을 매핑하여 리턴해주는 함수..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫www.inflearn.com Conditional Rendering: 조건부 렌더링 true면 UserGreeting, false면 GuestGreeting -> 이게 바로 조건부렌더링 참고로,Truthy: true는 아니지만 true로 여겨지고,falsy: false는 아니지만 false로 여겨짐 -엘리먼트 변수컴포넌트로 생성된 리액트 엘리먼트컴포넌트로 생성된 리액트 엘리먼트다. 엘리먼트로 만들어 조건부렌더링에 사용할 수..

참고자료: 인프런-리액트강의 [무료] 처음 만난 리액트(React) - 인프런 | 강의자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨‍🏫 리액트의 세계로초대합니다 💫www.inflearn.com Hookcomponent는 function component와 class component로 나뉜다. class component는 생성자에서 state를 정의하고, setState() 함수를 통해 state를 업데이트를 할 수 있으며, LifeCycle methods를 제공해준다. 하지만! function component에서는 이것들이 불가능! 불가능한 걸 가능하게 해주는 함수가 바로 Hook이다...

참고자료: 인프런 자바스크립트 초급강의 Javascript ES6+ 제대로 알아보기 - 초급 - 인프런 | 강의ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다., Javascript ES6+는 뭐가 다를까?www.inflearn.com 1-1. 배열 할당 var colors = ['red', 'white', 'orange']var first = colors[0]var second = colors[1]var third = colors[2]console.log(first, second, third)//해체할당const colors = ['red', 'white',..