본문 바로가기

전체 글328

[Linux] 디렉토리 or 폴더 통째로 복사하는 리눅스 명령어 cp -R 2022. 3. 24.
[깃] 리포지토리(repository)란? git push, pull, clone 정리 ⚠️ 이 포스팅은 핵심 쏙쏙 Git을 공부하고 정리한 블로그 포스팅입니다 ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 1주차 1-8 원격 repo 사용하기 - 개념탑재 1-9 원격 repo 사용하기 - 실습 1. 리포지토리(repository) 깃으로 관리되는 프로젝트. 줄여서 리포라고도 한다. 1.1 리포지토리의 2가지 종류 1) 로컬 리포지토리(local repository) 내 컴퓨터에 저장되어 있는 깃으로 관리되는 프로젝트 2) 원격 리포지토리(remote repository) 깃허브처럼 다른곳에서 접속할 수 있는 공간에 저장되어 있는 깃으로 관리되는 프로젝트 1.2 원격 repo 와 로컬 repo가 함께 사용된다는 의미는? google drive 같은 클라우드 서비스에 있는 폴더를 내 컴퓨터.. 2022. 3. 24.
[깃/소스트리] 소스트리(Source Tree)에서 깃허브 리파지토리 클론하기 1. New > Clone from URL 클릭하기 2. Source URL에는 깃허브 리파지토리 URL을, Destination Path에는 클론한 프로젝트를 놓을 경로를 입력한다. 그리고 Name은 폴더이름에 따라 자동생성된다. 3. Clone 버튼을 누르면 프로젝트가 로컬 컴퓨터에 받아와진다. 2022. 3. 24.
[깃/소스트리] 소스트리(Source Tree)에서 깃허브 연결하는 방법 1. 깃허브에 연결하고 싶은 프로젝트를 소스트리에서 열고 > 설정 버튼 누르기 2. 원격 > 추가 버튼 누르기 3. 원격이름 origin, 호스트 종류 GitHub, 깃허브 사용자명 입력하기 4. URL/경로 옆의 지구 모양 버튼 누르기 5. 원하는 리퍼지토리 선택 > OK 버튼 누르기 6. 모든 정보가 채워졌으면 확인버튼 누르기 2022. 3. 24.
[리액트] props란 무엇일까? (부모 컴포넌트, 자식 컴포넌트) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.3 props Props props란 자식 컴포넌트의 속성을 설정할 때 부모 컴포넌트에서 전달해주는 데이터를 의미한다. 예제를 살펴보기 전에 부모 컴포넌트와 자식 컴포넌트의 개념부터 알아보자. 부모 컴포넌트: 자식 컴포넌트를 불러오는 컴포넌트 자식 컴포넌트: 부모 컴포넌트에게서 불려온 컴포넌트 부모 컴포넌트 부모 컴포넌트(App)에서 자식 컴포넌트(MyComponent)를 불러오고 자식 컴포넌트의 속성을 name={"React"} 설정하였다. 이때 자식 컴포넌트(MyComponent)에서 props 객체를 전달하게 되고 그 객체 안에 name: "Re.. 2022. 3. 23.
[리액트] 컴포넌트 선언하기, 모듈 내보내기, 불러오기 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.2 첫 컴포넌트 생성 컴포넌트 선언하기 리액트에서는 클래스형 컴포넌트와 함수형 컴포넌트로 총두가지 컴포넌트가 있다. 두 컴포넌트에 대해 더 자세히 알아보고 싶다면 👉 [리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?) 컴포넌트를 생성할때는 일반적으로 components라는 폴더안에 넣는다. src폴더 안에 components 폴더를 만든 후 FirstComponent.jsx라는 파일을 만들어보자. 컴포넌트 파일은 .js와 .jsx 둘다 가능하다. 나는 순수한 자바스크립트 파일과 JSX문법을 사용해 만든 컴포넌트파일을 구분하기 위해 파일확장자.. 2022. 3. 23.
[리액트] 리액트 프로젝트를 생성하기 전에 필요한 도구 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 1.3 작업 환경 설정 리액트 프로젝트를 생성하기 전에 필요한 도구 1. 터미널 터미널은 그래픽 유저 인터페이스(GUIs) 없이 컴퓨터에 명령을 내릴 수 있는 도구다. 여기서 그래픽 유저 인터페이스는 전자기기의 UI를 그래픽화시켜 일반 사용자들이 컴퓨터에게 쉽게 명령을 내릴 수 있게 하는 방식이다. 우리가 친구에게 메시지를 보낼때 전송버튼을 눌러 보낸다. 이때 버튼이라는 UI가 메시지를 전송하게 하는 기능을 가진 GUI 그래픽 유저 인터페이스다. 2. Node.js Node.js는 자바스크립트를 서버에서 실행할 수 있게하는 자바스크립트 엔진이다. 리액트에.. 2022. 3. 23.
[리액트] 클래스형 컴포넌트 vs 함수형 컴포넌트 (뭘쓸까?) ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 3장 컴포넌트 3.1 클래스형 컴포넌트 컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 의미한다. 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의하고 목적에 맞는 기능들을 모아놓는다. 컴포넌트는 단순한 템플릿 이상이며 데이터가 생겼을때 이에 맞춰 UI를 만들어준다. 또한 컴포넌트 내부에서 컴포넌트가 화면에 나타날때(Mount), 업데이트될때(Update), 사라질때(Unmount)의 작업을 처리할 수 있다. 리액트에서 컴포넌트는 두가지 방식으로 선언할 수 있는데 클래스형태로 컴포넌트를 선언하는 방식과 함수형태로 컴포넌트를 선언하는 방식이 있.. 2022. 3. 23.
[리액트 에러] 리액트 에러메세지 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? ⚠️ 에러내용 Warning: Invalid DOM property `for`. Did you mean `htmlFor` ❓ 에러발생이유 리액트에서는 자바스크립트과 유사한 JSX문법을 사용한다. 자바스크립트에서는 for가 반복문을 사용할 때 쓰는 예약어이므로 HTML의 속성 이름(attribute name)으로 사용할 수 없다. ❗️ 해결방법 과 같은 태그에서 for 속성 이름을 사용해야할 때는 htmlFor를 대신 사용해준다. import React from 'react'; const RadioButton = ({ foundingDate }) => { const { id, name, label } = foundingDate; return ( {label} ); }; export default Radio.. 2022. 3. 23.
[리액트] JSX 문법 9가지 완벽 정리 ⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 2장 JSX 2.1 코드 이해하기 2.2 JSX란? 2.3 JSX의 장점 2.4 JSX 문법 JSX JSX는 JavaScript XML로 HTML 문법을 사용할 수 있는 자바스크립트 파일을 의미한다. 확장된 자바스크립트 문법이지만 HTML과 비슷하게 생겼기 때문에 사용하기가 쉽다. 일반 자바스크립트가 아니기 때문에 번들링(파일을 하나로 합치는) 과정에서 바벨을 사용하여 일반 자바스크립트로 변환해야한다. JSX 문법을 사용한 코드 function App() { return ( Hello React ) } JSX를 Babel을 사용해 일반 자바스크립트로 변환한 코드 fun.. 2022. 3. 23.
[리액트] CRA(create react app)으로 리액트 프로젝트 생성하기 CRAcreate react app은리액트로 프로젝트를 시작하기 위해 필요한 환경을 모두 구축해주는 코드다. (웹팩, 바벨의 설치 등) create react app으로 프로젝트를 생성하기전에 리액트에 필요한 도구들이 설치되었는지 꼭 확인해보자 👉 [리액트] 리액트 프로젝트를 생성하기 전에 필요한 도구 create react app으로 프로젝트 생성하기 1. 설치 yarn으로 설치 $ yarn create react-app npm으로 설치 $ npx create-react-app 여기서 npx는 npm과 함께 설치 되는 노드 패키지를 실행하는 툴이다. 만약 프로젝트 이름으로 된 폴더를 이미 만들었다면 해당 폴더로 접근한 후 아래의 코드를 입력한다. $ yarn create react-app . 2. 디.. 2022. 3. 23.
[파이썬] 파이썬으로 파일 생성하고 읽고 쓰기 ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 9. 파이썬 파일 쓰기 File Write(1-1) File Write(1-2) File Write(1-3) 파이썬에서 파일 생성, 읽기, 쓰기 함수 파일 생성: open(), close() 파일 읽기: read(), readline(), seek() 파일 쓰기: write(), writeline(), writelines() 1. 파일 생성: open 함수, close 함수 open(): 파일을 여는 함수 close(): 파일을 닫는 함수 1.1 open() 함수 모드의 종류: r(read), w(write), a.. 2022. 3. 23.
[파이썬] 파이썬에서 자주쓰이는 내장함수 19가지와 사용법 ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 8. 파이썬 기본 함수 Built-in Function(1-1) Built-in Function(1-2) 파이썬 내장함수의 종류 abs(): 숫자형 데이터를 파라미터로 받아 절대값을 리턴하는 함수 all(): 반복가능한 객체안에 있는 데이터를 검사해 True 또는 False를 리턴하는 함수 (하나라도 False면 False) any(): 반복가능한 객체안에 있는 데이터를 검사해 True 또는 False를 리턴하는 함수 (하나라도 True면 True) chr(): 아스키코드를 파라미터로 받아 해당하는 문자를 리턴하는.. 2022. 3. 23.
[파이썬] 예외처리 예제 (try, except, else, finally, raise) ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 7. 파이썬 예외처리 Exception(1-1) Exception(1-2) 1. 예외처리 (exception) 1.1 예외란? 파이썬에서 에러메세지를 무시하고 싶을때 try, except 구문을 사용해서 오류를 예외적으로 처리하는것. 1.2 예외 처리 기본 구조 try: ... except: ... try문이 실행되는 중에 오류가 발생하면 except문이 실행된다 try문이 실행되는 중에 오류가 발생하지 않으면 except문이 실행되지 않는다 예제1: try 구문 실행 try문이 실행되는 중에 오류가 발생하지 않으.. 2022. 3. 23.
[파이썬] 파이썬 에러 종류 9가지 ⚠️ 이 포스팅은 인프런님의 프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)을 공부하고 정리한 블로그 포스팅입니다. ⚠️ 포스팅에 해당하는 목차는 다음과 같습니다: 섹션 7. 파이썬 예외처리 Exception(1-1) Exception(1-2) 파이썬 에러 종류 파이썬에서는 프로그램이 잘못 동작하는것을 막기 위해 에러메세지를 사용자에게 표시해준다. 아래는 우리가 흔히 볼 수 있는 파이썬 에러 종류다. SyntaxError: 파이썬 문법을 지키지 않았을때 발생하는 에러 NameError: 참조할 이름이 없을때 발생하는 에러 ZeroDivisionError: 어떤수를 0으로 나누려고할때 발생하는 에러 IndexError: 인덱스의 범위를 초과했을때 발생하는 에러 KeyError: 딕셔.. 2022. 3. 23.

티스토리툴바