우기의 알 블로그 저자 한승욱이라고 합니다.
스스로 알을 깨고 나오는 새처럼
언젠가 알을 깨고 온전한 나 자신이 되었을 때, 그때를 기다리며 제 속에서 솟아 나오는 것을 글로써 표현하고자 합니다.
'개발 기술블로그'를 위주로 저 한승욱의 다양한 관심사, 생각, 철학 등을 포스팅합니다.
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. 부트스트랩 Bootstrap Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. https://getbootstrap.com/ 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS ..
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. app.js를 app.jsx로 수정 jsx란 javascrpit xml 확장자이다. javascrpit안에 html 코드를 작성했으므로 정상적인 js에서는 동작이 안되는 문법이다. 확장된 버전의 파일로 수정해준다. react routing 사용을 위한 모듈 설치 npm install --save react-router npm install --save react-router-dom 디렉토리 생성 → src 디렉토리 안에서 실제 페이지들이 들어가는 pages 라우터가 들어가 config 화면 레이아웃이 들어갈 components pages config/page-route.jsx # /config/page-route..
본 포스팅은 https://www.youtube.com/watch?v=WkILRTAcRdU 영상을 보면서 공부한 자료 입니다. eslint 추가 vscode extension에서 설치 린터로써 오류를 잡아주는 것 ecma script 코드의 문법을 사전에 검사해줌 npx install-peerdeps --dev eslint-config-airbnb 에어비앤비에서 만든 linter를 추가 # package.json에 추가된 것 확인 가능 "devDependencies": { "eslint": "^7.2.0", "eslint-config-airbnb": "18.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslin..
리액트 앱 생성 npm install -g create-react-app 글로벌로 create-react-app 모듈 설치 npx create-react-app myfirstapp npx 즉 1회성으로 리액트 앱 생성 뒤에 . 을 붙이면 현재 디렉토리에 생성될 것임 yarn start or npm start 앱 실행 3000번 포트로 생성된 리액트 앱 확인 가능 app.js에 있는 html 코드가 public의 index.html의 div id로 엮여서 렌더링 되는 것임 # src/app.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn ..
기술개발/React, Frontend 2021. 3. 3. 23:22
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. 부트스트랩 Bootstrap Quickly design and customize responsive mobile-first sites with Bootstrap, the world's most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. https://getbootstrap.com/ 부트스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 HTML, CSS, JS ..
기술개발/React, Frontend 2021. 3. 2. 18:51
(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다. app.js를 app.jsx로 수정 jsx란 javascrpit xml 확장자이다. javascrpit안에 html 코드를 작성했으므로 정상적인 js에서는 동작이 안되는 문법이다. 확장된 버전의 파일로 수정해준다. react routing 사용을 위한 모듈 설치 npm install --save react-router npm install --save react-router-dom 디렉토리 생성 → src 디렉토리 안에서 실제 페이지들이 들어가는 pages 라우터가 들어가 config 화면 레이아웃이 들어갈 components pages config/page-route.jsx # /config/page-route..
기술개발/React, Frontend 2021. 2. 26. 14:10
본 포스팅은 https://www.youtube.com/watch?v=WkILRTAcRdU 영상을 보면서 공부한 자료 입니다. eslint 추가 vscode extension에서 설치 린터로써 오류를 잡아주는 것 ecma script 코드의 문법을 사전에 검사해줌 npx install-peerdeps --dev eslint-config-airbnb 에어비앤비에서 만든 linter를 추가 # package.json에 추가된 것 확인 가능 "devDependencies": { "eslint": "^7.2.0", "eslint-config-airbnb": "18.2.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jsx-a11y": "^6.4.1", "eslin..
기술개발/React, Frontend 2021. 2. 25. 15:44
리액트 앱 생성 npm install -g create-react-app 글로벌로 create-react-app 모듈 설치 npx create-react-app myfirstapp npx 즉 1회성으로 리액트 앱 생성 뒤에 . 을 붙이면 현재 디렉토리에 생성될 것임 yarn start or npm start 앱 실행 3000번 포트로 생성된 리액트 앱 확인 가능 app.js에 있는 html 코드가 public의 index.html의 div id로 엮여서 렌더링 되는 것임 # src/app.js import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn ..