영벨롭 개발 일지

[ JSX 란? ] JSX란 JavaScript + XML로 자바스크립트에 XML을 확장한 문법입니다. 기본적으로 React 에서는 JS를 사용하지만 통상적으로 JSX를 사용합니다. JSX는 굉장히 직관적이며 코드의 가독성을 높여줍니다. JSX는 JS에 기반하고 있지만 완전히 같지는 않습니다. 때문에 실행을 위해서는 JSX를 JS로 변환해야하는데 이 작업을 바벨(Babel)이 해줍니다. Hello World Hello World // JS function App() { return React.createElement("h1", null, "Hello World"); } // JSX function App() { return ( Hello World ); } [ JSX 문법 ] 1. 모든 JSX 요소들은 ..

[ React 프로젝트 생성 ] 다음 블로그 포스팅을 참고해주세요:) https://iridescent-zeal.tistory.com/192?category=1279256 [React]리액트 React란? - 개발환경 세팅 [ React 란? ] React는 페이스북에서 만든 오픈 소스 라이브러리로, 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다. ★ What is UI/UX ? UI는 User Interface 사용자 인터페이스로 어떠한 iridescent-zeal.tistory.com [ React 디렉토리 구조 ] ★ node_modules 폴더 설치된 패키지들과 이 패키지들이 활용될 때 사용되는 다른 패키지들이 함께 들어있는 폴더입니다. 설치된 패키지들은 package.json에서 확..

[ 태그의 동작 ] 우리는 특정 웹사이트에서 로그인을 할 때에나 글을 작성할 때와 같이 데이터를 입력할 수 있는 폼을 수 없이 많이 볼 수 있습니다. 이때 이 폼을 구성하는 html 요소가 태그입니다. 태그를 사용하여 우리는 사용자로부터 데이터를 입력받아 데이터베이스 서버, 즉 웹 서버에 정보를 보내 사용자와 웹사이트간의 상호 작용을 할 수 있습니다. 의 동작법은 다음과 같습니다. 1. 폼이 있는 웹 페이지에서 사용자가 정보를 입력합니다. 2. 태그는 사용자가 입력한 모든 데이터를 웹 서버로 보냅니다. 3. 웹 서버는 이 데이터를 처리하기 위해 웹 프로그램으로 넘기고, 웹 프로그램이 이 데이터를 처리합니다. 4. 웹 프로그램은 처리 결과에 따라 새로운 html 페이지를 웹 서버에 보냅니다. 5. 웹 서버..

[ 기본 세팅 ] 1. 가상환경 생성 및 활성화 $ python -m venv myvenv $ source myvenv/Scripts/activate 2. django 설치, 프로젝트 생성 및 이동 $ pip install django $ django-admin startproject myproj $ cd myproj 3. Application 생성 및 settings.py에서 application 등록 $ python manage.py startapp myapp # myproj/settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.se..

[ 웹 스토리지 Storage ] 웹 개발을 하다보면 사용자 정보나 게시글 정보와 같이 영구적으로 지속되어야 하는 데이터들은 서버의 데이터베이스(DB) 또는 클라우드 플랫폼에 저장해야합니다. 하지만 저장해야할 데이터가 그다지 중요하지 않거나 유실되도 무방한 데이터라면 클라이언트 측인 브라우저 상에서 데이터를 저장할 수 있는데, 이때 사용되는 기술이 바로 웹 스토리지입니다. 웹 스토리지는 localStorage와 sessionStorage로 구분할 수 있습니다. sessionStorage에 저장된 데이터는 웹 페이지의 세션이 끝나면, 즉 웹 페이지의 탭이나 창을 닫으면 소멸됩니다. 반면 localStorage에 저장된 데이터는 웹 페이지의 세션이 끝나도 소멸되지 않고 남게됩니다. 다만, 동일한 컴퓨터와 동..

[ JSON 이란? ] JSON(JavaScript Object Notation)은 자바스크립트의 데이터를 표현하는 텍스트 기반의 데이터 포맷입니다. .json 파일에서 데이터를 작성할 때는 자바스크립트의 객체 표기법과 유사합니다. 이때 데이터형은 undefined를 제외한 string, number, boolean, null, 객체(object), 배열(array)이 가능합니다. 이때 string은 큰 따옴표(" ")만을 사용하여 표기합니다. [ 자바스크립트에서의 JSON ] json 파일은 하나의 문자 데이터로 단순하게 하나의 메모리에 저장되어 있는 큰 덩어리라고 생각할 수 있습니다. 자바스크립트에서 이 json 파일은 자동으로 문자 데이터가 아닌 객체 데이터처럼 사용됩니다. //main.js imp..