전체 글

[React] 리액트로 프로젝트 만들기

이 블로그는 한입 크기로 잘라먹는 리액트 강의를 듣고 복습하기 위해 작성되었습니다! 목차 1. 리액트 프로젝트 초기화 2. useState로 사용자 입력 처리 3. 여러 state 한번에 관리하기 1. 프로젝트 초기화 프로젝트를 처음 만드는 과정입니다. 1. 만들고 싶은 위치에 프로젝트 이름으로 폴더 만들기 2. Create-React-App으로 초기화하기 npx create-react-app [프로젝트 이름] (npx가 설치되어있지 않다면 아래 명령어로 따로 설치해야 합니다) npm install npx -g 3. 디렉토리, 파일 정리 위의 명령어로 설치할 경우 [프로젝트명]->[프로젝트명]->[파일들] 이런식으로 디렉토리 구조가 생기므로, [프로젝트명]->[파일들] 이렇게 되도록 파일들을 옮기고, 디..

[MERN] MERN이란?

오늘은 MERN에 대해 다뤄보도록 하겠습니다. 목차 0. MERN이란? 1. React 2. Node.js 3. Expess 4. MongoDB 5. MERN의 구조 0. MERN이란? MERN이란 MongoDB, Express, React, Node 4가지 기술을 합친 것을 말합니다. MERN을 이루는 각 요소에 대해 알아봅시다. 1. React 리액트는 반응형 UI(User Interface)를 지원하는 클라이언트 라이브러리입니다. 리액트의 주요 기능은 다음과 같습니다. 1. 동적 데이터로 UI 렌더링하기 2. 사용자 입력 처리 3. 백엔드 서비스와 통신하기 (백엔드: 사용자의 브라우저에서 실행되지 않는 서비스나 기술) 그래서 React가 프론트엔드 기술이 되고, 나머지 Node, Express, M..

[html/css] 100일 코딩 챌린지 - css position

css로 아이템을 배치하는 방법 중 하나는 position 속성을 이용한 것입니다. 오늘은 position 속성에 대해 알아봤습니다. 목차 1. relative 2. absolute 3. fixed relative position: relative; position 속성을 relative로 바꾸면 주변 요소로부터 간격을 자유롭게 조정할 수 있습니다. position이 static일 때는 이렇게 생겼던 화면입니다. Element 2의 position을 relative로 바꾸고 top:20을 주면 position: relative; top: 20px; 이렇게 Element 2가 20px 아래로 밀리는 것을 볼 수 있습니다. 아래로 밀렸지만, 나머지 요소들은 그 위치 그대로 있습니다. Element2와 3 두..

[html/css] 100일 코딩 챌린지 - flex 박스

목차 1. flex-direction 2. flex-wrap 3. flex-row 4. align-items 5. justify-content css에서 정말 유용하게 쓰이는 중 하나가 flex박스입니다. display 속성을 flex로 하게 되면, 주축을 설정해 편리하게 아이템을 배치할 수 있습니다. header{ display: flex; } 위는 예시로, 헤더 박스의 display를 flex로 설정한 css 코드입니다. Mozilla 공식 사이트에서 flex박스의 정보를 더 확인할 수 있습니다. 다음은 display:flex;를 설정했을 때 같이 사용할 수 있는 여러 부가적인 속성들입니다. 1. flex-direction flex-direction: row; 주축의 방향을 설정하는 속성입니다. 주축..

[Git/Github] 100일 코딩 챌린지 - 깃허브란?

저번 글에서는 로컬에서 깃을 다뤄보고, 로컬에서 쓸 수 있는 여러 깃 명령어를 써보았습니다. 이번에는 깃허브를 이용해, 로컬에서 벗어나 깃허브 클라우드에 우리의 레포지토리를 올려봅시다. 목차 1. 깃허브를 쓰는 이유 2. 깃허브 시작하기 3. 깃허브에서 프로젝트 불러오기 4. 다른 프로젝트에 기여하기 깃허브를 쓰는 이유 1. 우리의 프로젝트를 클라우드에 저장 가능 만약 다른 컴퓨터의 코드를 이용해 작업한다면 클라우드 환경은 큰 장점이 됩니다. 원격 레포지토리에 우리의 진행상황을 업데이트하므로, 쓰던 환경이 아니어도 클라우드에서 코드를 가져와 작업이 가능합니다. 또한 우리 컴퓨터가 고장났을 때, 데이터 손실이 일어나도 클라우드에는 데이터가 남아있어 작업 재개가 가능합니다. 2. 개인 포트폴리오 제작 가능 ..

[Git] 100일 코딩 챌린지 - Git 기본 명령어

Git은 내 프로젝트가 수정될 때마다 버전을 저장해 관리할 수 있게 하는 프로그램입니다. 코드는 add 명령어를 통해 staging area에 들어가, 변경사항이 트래킹됩니다. 트래킹 완료된 파일들은 commit 명령어를 통해 버전이 저장됩니다. git init 깃 저장소를 초기화하는 명령어입니다. 프로젝트 폴더를 워킹 디렉토리로 바꾸고 코드 파일을 깃으로 관리할 수 있게 됩니다. git add . git commit -m "커밋메세지" 이렇게 add와 commit이 가능합니다. 커밋메세지는 이전 버전과 비교해 어떤 부분이 수정되고 추가되었는지를 간략하게 작성하면 됩니다. git status git status는 현재 staged되지 않은(즉 add되지 않은) 파일들, 그리고 staging area에서 ..

[React] React 입문

이 블로그는 유데미 "한입 크기로 잘라먹는 리액트" 강의를 듣고 복습하고자 작성되었습니다! 목차 1. React가 필요한 이유 2. React App 만들기 3. JSX(Javascript Extension) 4. State 5. Props React가 필요한 이유 저번 글에서 말했듯이 리액트가 브라우저에서 복잡하게 동작하는 JS 코드들을 단순화해준 프로그램입니다. 리액트를 사용한 JS 파일들은 마치 한 프로그램처럼 유기적으로 동작해 Web Application이라고도 부릅니다. 그렇다면 리액트가 왜 필요한지, 어떻게 유기적으로 동작하는지 알아봅시다. 1. 여러 페이지에서 중복되는 부분 재사용 웹사이트를 보다 보면, 네비게이션 바 등이 페이지가 바뀌어도 계속 보일 때가 있습니다. 이렇게 여러 페이지에서 ..

[Node.js] Node.js 기초, 실행환경 구성

이 블로그는 유데미 "한입 크기로 잘라먹는 리액트" 강의를 보고 복습하고자 작성되었습니다! 이번 글은 본격적으로 리액트 프로젝트를 만들기 전, 실행환경을 구성하는 부분입니다. 목차 1. Node.js 배경 2. Node.js 기초 & Common JS 모듈 시스템 3. Node.js 패키지 생성, 외부 패키지 사용 Node.js 배경 우리가 작성한 자바스크립트 파일을 실행할 때는, 브라우저마다 내장된 JS 엔진을 이용합니다. 각 브라우저마다 내장된 엔진 또한 다른데, 사파리는 Nitro, 파이어폭스는 SpiderMonkey, 크롬은 V8, MS Edge는 Chakra라는 JS 엔진이 내장되어있습니다. 이처럼 보통 웹브라우저의 JS 엔진을 사용하기 때문에, JS는 웹브라우저에서만 실행이 가능했습니다. 하지..