본문 바로가기

분류 전체보기

[React.js] 리액트 프로젝트 초기 세팅하기 리액트 프로젝트를 생성하고 개발에 필요한 초기 세팅 과정을 알아봅니다. 1. Node.js / npm 설치 2. create-react-app을 이용해서 작업 환경 구축 3. 추가 라이브러리 설치 4. 프로젝트 폴더 구조 세팅 5. +@ 프로젝트 루트 설정, ESLint와 Prettier 추가 Node.js / npm 설치하기 Node.js는 자바스크립트 런타임입니다. 이를 이용하면 웹 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있습니다. npm은 node.js와 함께 설치되는 패키지 매니저입니다. 이를 사용하여 패키지 설치 및 관리할 수 있습니다. 노드제이에스 홈페이지에서 다운로드하여 설치할 수 있습니다. brew가 설치된 맥을 이용한다면 다음과 같은 커맨드로 설치할 수도 있습니다. brew i.. 더보기
[React.js] 리액트 시작하기: 리액트란, Virtual DOM, JSX 처음 리액트 학습을 시작하는 입장에서 학습한 내용을 간단히 정리했습니다. React란 React는 페이스북이 만든 Javascript 라이브러리로 UI를 만들기 위해 사용됩니다. 리액트는 다음과 같은 장점을 갖습니다. - 바닐라 자바스크립트보다 더 속도가 빠른 웹 애플리케이션을 만들 수 있다. (Virtual Dom) - 재사용 가능한 UI 단위로 코드 블록을 만들어 효율적으로 화면을 구성할 수 있다. (Component) - 풍부한 생태계를 갖추고 있다. 프론트엔드 프레임워크 3 대장 중 가장 많이 사용되고 있기 때문에 커뮤니티가 활발하다. MVC, MVW 패턴을 사용하는 프레임워크와 리액트의 차이점 리액트의 가장 큰 특징은 보여지는 화면(View)에 특화된 것입니다. 이 점이 MVC(Model-Vie.. 더보기
웹은 어떻게 동작하는가? (URL을 입력하면 일어나는 일) 크롬, 익스플로러와 같은 웹 브라우저를 켜서 주소창에 URL을 입력하면 무슨 일이 일어나는 걸까요. 어떻게 해서 우리가 원하는 웹 페이지까지 이동할 수 있게 되는 것인지 알아보겠습니다. 브라우저에 화면이 보이기까지 일어나는 일 1. 브라우저의 주소창에 URL을 입력하면 2. 브라우저는 DNS(Domain Name System)을 운영하는 서버를 통해 IP주소를 받아옵니다. 3. 브라우저는 IP주소를 이용해서 서버에 요청을 보냅니다. 4. 서버는 요청에 대한 응답을 보내줍니다. (HTML, CSS, JS) 5. 브라우저는 응답 결과를 렌더링 합니다. 아래 영상은 사용자의 URL 입력부터 브라우저에 화면이 뜨기까지의 과정을 애니메이션으로 보여줍니다. 용어 설명 · 호스팅(웹 호스팅): 사용자가 정상적으로 웹.. 더보기
[Git] Git과 GitHub Git은 분산 버전 관리 시스템입니다. 버전 관리란 파일의 변경 사항을 시점마다 기록해서 나중에 특정 시점의 버전을 다시 불러올 수 있는 시스템입니다. 쉽게 이야기하면 깃은 코드 변경 사항을 추적해주는 프로그램입니다. 깃을 사용하지 않는다면 아마 아래 사진처럼 파일을 관리하게 될 겁니다. 모두 경험해봐서 알겠지만 이렇게 관리를 하다 보면 결국에는 관리를 포기하게 됩니다. 어느 파일이 최종본인지, 어떤 부분이 변경된 것인지 파악하기 너무 어렵기 때문입니다. 깃을 사용하면 이런 문제를 겪을 필요가 없습니다. 버전 관리를 하기 때문에 ①변경 이력을 확인할 수 있고 ②특정 시점의 버전으로 돌아갈 수도 있기 때문입니다. 깃의 또 다른 장점은 바로 협업 기능입니다. 깃을 이용하면 여러 개발자들이 작업한 코드를 합쳐.. 더보기
[JS] 객체 지향 프로그래밍과 Class Class에 대해서 이야기하려면 객체 지향 프로그래밍(Object Oriented Programming)을 빼놓을 수 없습니다. 객체 지향 프로그래밍은 프로그램을 여러 개의 독립된 객체들의 모임으로 나누고 이 객체들 간의 상호작용으로 표현하는 프로그래밍 패러다임입니다. 여기서 객체는 모든 것이 될 수 있습니다. 실제 하는 것이든 개념적으로 존재하는 것이든 속성과 행동(기능)을 떠올릴 수 있다면 객체로 표현할 수 있습니다. 예를 들어 사람 객체의 속성과 행동을 생각해보겠습니다. 속성으로는 키, 몸무게, 피부색 등이 뽑아볼 수 있습니다. 행동으로는 걷기, 뛰기, 엎드리기 등을 뽑을 수 있을 겁니다. 이렇게 객체에게서 뽑아낸 속성과 행동은 클래스(class) 안에 프로퍼티(property)와 메서드(metho.. 더보기
[JS] 화살표 함수(arrow function) ES6부터는 () => 표기법(notation)을 이용하여 함수를 간결하게 표현할 수 있습니다. 화살표 함수는 함수를 표현하는데 function 키워드가 필요 없습니다. 대신 함수의 파라미터가 들어갈 괄호((): parentheses)와 함수의 바디를 가리킬 화살표(=>)를 사용합니다. // ES5 익명 함수 function() { // {}: 함수 바디 }; // ES6 익명 함수 () => { // {}: 함수 바디 } 화살표 함수를 만드는 몇 가지 방법과 화살표 함수를 사용을 피해야 하는 경우를 알아보겠습니다. 화살표 함수를 만드는 방법 1. 파라미터가 없는 경우 // 매개변수가 없는 경우 const funcName = () => {}; 2. 파라미터가 하나인 경우 매개변수가 하나인 경우라면 괄호의.. 더보기
[JS] 함수의 기본적인 사용 방법과 동작 방식 함수는 하나의 단위로 실행되는 블록으로 특별한 목적의 작업을 수행하도록 설계됩니다. 이번 포스팅에서는 함수의 기본적인 사용방법과 동작 방식을 알아봅니다. function sayHi() { // 함수의 바디(body)는 여는 중괄호( {: curly bracket)로 시작합니다. // 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기를 하였습니다. console.log("Hi"); // 닫는 중괄호( }: curly bracket)로 끝납니다. } 위의 코드는 함수 선언의 예입니다. 함수를 선언할 때는 다음과 같은 조건을 지켜야 합니다. - function 키워드로 시작하여 - 함수 이름을 지어주고 - 함수를 알리는 괄호( (): parentheses)를 여닫고 - 중괄호 사이(바디)에 함수 호출.. 더보기
[CSS 레이아웃] float와 clear float 프로퍼티는 특정 요소의 배치 및 페이지 레이아웃을 설정하는데 사용됩니다. 프로퍼티의 값은 다음과 같습니다. - left: 요소가 소속된 컨테이너의 왼쪽에 자신을 위치시킵니다. - right: 요소가 소속된 컨테이너의 오른쪽에 자신을 위치시킵니다. - none: 요소는 부유하지 않습니다. 기본 값입니다. float를 이용하면 아래와 같이 손쉽게 이미지 주위를 텍스트로 감싸도록 만들 수 있습니다. See the Pen float by hogni-seoul (@hogni-seoul) on CodePen. 그런데 뭔가 이상합니다. 사진이 부모 요소의 영역을 넘어갔습니다. 사실 이렇게 float 프로퍼티를 사용할 때 한가지 알아두어야 할 것이 있습니다. float 프로퍼티를 가진 요소는 부모가 높이를 .. 더보기

티스토리툴바