Project.log

pip이란? pip은 pip Installs Packages의 약자로 파이썬(python)으로 작성된 패키지 소프트웨어를 설치&관리하는 패키지 관리 시스템이다. 쉽게 패키지 매니저라고 생각하면 된다. node에 있는 npm이나 yarn 같은 패키지 매니저이다. pip과 pip3 차이 pip은 파이썬2버전의 패키지 매니저이고 pip3는 파이썬3버전의 패키지 매니저이다. (파이썬 2.7.9버전 이후 및 파이썬 3버전 은 pip3를 사용한다) 맥북에서 pip사용법 맥북에서 파이썬을 다운로드 받을 때 주로 Homebrew나 공식파이썬홈페이지 등에서 다운받게 되는데 현재 다운받게 되면 버전을 지정해서 다운로드 받지않는한 3버전이 다운로드 되게 된다. 그래서 pip이 아닌 pip3을 사용해야 한다. 예로 matpl..

Tailwind CSS란? Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크이다. Bootstrap프레임워크와 비슷하게 생겼으며 HTML 코드 내에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크 입니다. 1. Next.js 프레임워크 환경만들기 npx create-next-app wind Next.js 프레임워크를 사용해서 이안에 적용해보겠습니다. 위코드를 입력해서 wind라는 프로젝트를 생성해서 해보겠습니다. 위 프로젝트명(wind)는 예시이므로 원하는 이름으로 만드시면 되겠습니다. 2. 시작하기 npm install -D tailwindcss postcss autoprefixer Tailwindcss와 크로스브라우징을 대응 해주는 postcss autopre..

Vercel이란? Vercel은 Next.js 에서 공식적으로 제공하는 호스팅 사이트로 빌드+배포+호스팅 서비스를 이용할 수 있습니다. 1. package.json에 deploy추가하기 "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } 배포를 위해 프로젝트의 package.json파일에 scripts부분을 위와 같이 만들어줍니다. (보통은 기본세팅으로 되어있는것 같습니다.) 2. Github에 소스코드 등록하기 먼저 빈 Repository를 만들어줍니다. 프로젝트 폴더로 이동후에 (git init, git add, git commit이 다 되있다는 전제하에) git remote add origin 깃허브reposi..

리액트를 사용하는 프로젝트들을 보면 의미없이 쓰이는 태그들이 많이 보입니다. 사용하지 않는태그를 쓰는 이유는 리액트에서는 하나의 컴포넌트가 여러 엘리먼트들을 반환(return)하게 되는데 이때 리액트에 쓰이는 문법 JSX규칙상 return 문 안에는 반드시 하나의 최상위 태그가 있어야 하기 때문인데요. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문입니다. 의미없이 쓰이는 태그예시를 보면 이러한 코드를 짜고 크롬개발자도구에 Elements를 열어보면 이런식으로 출력되게 됩니다. 위 처럼 로 묶어주는 부분이 많지 않으면 상관이없지만 많다고 가정을 해보면 여러 엘리먼트를 감싸주기 위해 별 의미없는 div태그를 남발하게 됩니다. 물론 큰 문제는 되지않지만 코드가 더러워지고 효율이 안좋아지고 불필요한 태..

대규모의 개인프로젝트를 한다고 가정합시다. 수백 수만 줄짜리 소스코드를 수정 후 저장소에 있는 최근 버전과 비교하여 어떤부분이 다른지 찾아야 한다면 여간 골치아픈일이 아닐 수 없습니다. 설령 커밋메시지를 참고한다 한들 어디가 어떻게 수정되었는지 파악이 힘들 것 입니다. 이럴때 사용하는 명령어가 git diff 명령어 입니다. git diff 명령어를 사용하면 작업트리에 있는 파일, 스테이지에 있는 파일을 비교하거나 스테이지에 있는 파일과 저장소에 있는 최신 커밋을 비교하여 수정한 파일을 커밋하기 전에 마지막으로 검토할 수 있습니다. 1. hi.txt에는 1과 2가 입력되어 있고 git log를 통해 커밋기록을 보면 두개의 버전이 저장되어 있습니다. $ git log 2. 여기서 hi.txt 내용(2를 t..

깃에서 버전을 만드는 단계[작업트리, 스테이지, 저장소] 작업트리 - 파일 수정, 저장 등의 작업을 하는 디렉토리 - 작업 디렉토리라고도 한다. - 우리 눈에 보이는 디렉토리 스테이지 - 버전으로 만들 파일이 대기하는 곳 - 스테이징 영역이라고 한다. - 버전으로 만들 파일만 스테이지로 넘겨주면 된다. 저장소 - 스테이지에서 대기하고 있던 파일들을 버전으로 만들어 저장하는 곳 *작업트리를 제외한 스테이지와 저장소는 눈에 보이지 않는다. 깃을 초기화했을 때 만들어지는 .git디렉토리안에 숨은 파일 형태로 존재하는 영역이다. 작업트리에서 빔으로 문서 수정 1. 깃 상태를 확인하기 위해서 git status명령어를 이용합니다. 그 후에 메시지를 확인해보겠습니다. $ git status On branch mas..

디렉토리에 있는 파일들을 버전관리하려면 먼저 저장소를 만들고싶은 디렉토리에 이동해서 깃을 초기화하여야합니다. 깃 초기화하기 1. 먼저 깃 저장소를 만들 디렉토리를 만들고 그 디렉토리로 이동해 보겠습니다. 2. 그후에 ls -la 명령어를 이용하여 디렉토리 내용의 리스트를 출력해보겠습니다. * ls -la : 현재 경로에 위치를 출력하는데 .(점)을 포함한 경로안의 모든파일과 디렉토리를 표시하고 지정한 디렉토리의 내용을 자세히 출력해라 $ mkdir chest $ cd chest $ ls -la 위 사진에서 끝에 마침표가 하나인것은 현재 디렉토리를 나타내고 마침표가 2개인것은 상위 디렉토리를 나타냅니다. 아직 아무것도 생성하지 않았기 때문에 파일은 존재하지 않습니다. 3. 현재 디렉토리를 저장소를 만들기 ..

깃을 사용하기 전에 먼저 사용자의 정보를 입력해야 합니다. 깃은 버전을 저장할 때마다 그 버전을 만든 사용자 정보도 함께 저장하기 때문입니다. 이를 통하여 어떤 버전을 누가 언제 만들었는가를 파악할 수 있습니다. 깃에서 사용자 정보를 설정하려면 git config 명령어를 사용합니다. 여기에 --global 옵션을 추가하면 현재 컴퓨터에 있는 모든 저장소에서 같은 사용자 정보를 사용하도록 설정합니다. $ git config --global user.name "Leejinuk" $ git config --global user.email "leejin7900@gmail.com"