devlog20 개발일지 #15 - 리액트03 저번 일지에서는 터미널을 통해 리액트 프로젝트 생성까지 알아봤다. 오늘은 리액트에서 html 레이아웃을 구축하는 방법에 대해서 공부했다. 리액트는 기본 html 마크업과 다르게 html 파일에서 코드를 짜는 것이 아니다. 리액트는 프로젝트를 생성한 뒤, 만들어진 'src'폴더 있는 App.js 파일을 주축으로 코드를 작성해 나간다. index.html = App.js 리액트에서는 위 개념을 가지고 코드를 작성하면 된다. 나중에 npm run build를 하게 되면 App.js에 작성한 파일과 그 외의 파일들이 하나의 index.html 파일로 변환되기 때문이다. npm run build까지 도달하기 위해 필요한 리액트의 코드 작성 방법을 정리하려고 한다. vscode와 비슷한 환경으로 이루어진 stack.. 2022. 7. 29. 개발일지 #14 - 리액트02 오늘은 리액트 개발환경 세팅부터 시작해서 프로젝트 생성까지를 복습했다. 리액트를 사용하기 위해서는 몇 가지 세팅이 필요하다. 우선 node.js를 구글에서 검색해서 설치를 한다. 최신 버전 버전보다는 조금 더 안정적인 LTS버전 설치를 추천한다. (npm명령어를 사용하기 위해서 설치가 필요하다) 그리고 프로젝트를 생성할 폴더를 생성하고 사용하는 에디터를 실행시키면 개발환경 세팅이 끝이 난다. 이후 생성한 폴더에서 터미널을 실행시킨다. 나는 맥북 유저이기 때문에 맥북 사용법을 위주로 기록하겠다. 터미널을 실행한 후 아래의 명령어를 입력시킨다. npx create-react-app projectName 만약 에러가 발생한다면 다음 명령어를 입력해보자. sudo npx create-react-app proje.. 2022. 7. 27. 개발일지 #13 - 리액트01 버전 관리 깃을 다 공부하고 이전에 배워두었던 리액트(React)에 대해서 다시 복습하려 한다. 리액트는 SNS로 유명한 페이스북, 메타로 최근에 이름이 바뀐 회사에서 개발을 했으며 운영 및 후원 중인 자바스크립트 라이브러리이다. 이러한 라이브러리를 사용하는 이유는 사이트에서 새로고침이 없이 사용자에게 많은 페이지를 보여주기 위해서이다. 페이지 이동을 하는 데 있어서 새로고침이 계속된다면, 사용자 입장에서는 사용하는 데 있어서 끊김이 있다고 느껴지기 때문에 그 점을 없애기 위한 것이라고 볼 수 있다. 아마 우리가 스마트폰에 익숙해져서 이런 느낌을 받지 않을까 싶다. 이렇게 앱에서처럼 새로고침 없이 많은 동작들이 이루어지는 것을 웹에서는 싱글 페이지 애플리케이션(Single Page Application).. 2022. 7. 26. 개발일지 #12 (깃) 드디어 깃에 대한 마지막 일지다. 깃허브를 통해 많은 개발자들이 협업을 할 때, 아무런 계획 없이 브랜치를 생성해서 개발을 하고 병합을 하게 되면 나중에 깃 로그로 확인하면 엉망이 된다. 이런 상황을 대비할 수 있는 방법이 있다. (조금이라도 병합, 브랜치 관리를 깔끔하게 할 수 있다.) 흔하게 알려진 방법으로는 GitFlow, Github Flow, Gitlab Flow, Trunk-based가 있다. 가장 유명한 것은 'GitFlow'다. main, develop, feature, release, hotfix 이렇게 5개의 브랜치를 운영하는 것이다. 1.[develop] 개발 전용 브랜치라고 생각하면 된다. 그렇다고 해서 무작정 기능을 만들기 위해서 develop 브랜치에 개발한 내용을 커밋하면 안 .. 2022. 7. 23. 이전 1 2 3 4 5 다음
