웹 개발
-
[ReactJS] React 기본 코드 구조 및 component 생성웹 개발/ReactJS 2021. 4. 15. 03:49
React를 공부하며 정리한 내용입니다. React 언어는 JSX (Java script 확장판)이다. - 중괄호 내에 모든 java script 코드를 넣을 수 있으며 중괄호를 사용해 attribute를 정의한다. const element = ; -사용자의 입력을 삽입할 수 있다. const title = response.potentiallyMaliciousInput; // 이것은 안전합니다. const element = {title}; -jsx는 태그를 꼭 닫아줘야하는데 태그 내에 아무것도 없다면 self-closing을 이용한다. React의 가장 작은 단위는 컴포넌트를 이루는 앨리먼트(element)이다. - 두 가지 예시는 동일한 React element 객체를 생성한다. 공식 다큐먼트는 아래의..
-
[ReactJS] React 배포웹 개발/ReactJS 2021. 4. 14. 12:21
React 배포 1) create-react-app을 build하는 명령어 -> public 폴더가 실행됨 -> create-react-app 개발환경은 개발의 용이성을 위해 기능을 많이 추가했기 때문에 파일의 무게가 무거움 npm run start 2) 실제 product 환경에서 사용하는 웹을 build하기 위한 명령어 -> build 파일 생성 후 사용 (create-react-app의 불필요한 용량을 줄였음) -> root에 build 안에 있는 디렉토리를 위치시키면 된다. npm run build 3) 웹 서버 설치 npm install -g serve 4) 웹 서버의 document root를 build 폴더로 설정해 실행 npx serve -s build opentutorials.org/mo..
-
[HTML/CSS] Tstory - story 페이지 클론웹 개발/HTML & CSS 2021. 4. 11. 23:49
노마드 코더님이 웹 프레임워크를 사용하기 전에 html css javascript 기초를 탄탄하게 쌓아두어야 한다고 하셨다. react 깔아보니 결국 javascript 기반이라 그런 말을 하셨구나 하는 생각이 들었다. react 공부하면서 틈틈히 공부해둬야겠다며 다짐함과 동시에 시작한 웹 페이지 클론! html css 를 사용하여 티스토리 웹 페이지 클론을 해보았다. 디테일한 디자인 구현보다 레이아웃 잡는 연습을 했는데 (나름 hover도 넣음)flex를 이용해서 컴포넌트 정렬이 확실히 편해졌다. 처음에는 익숙하지 않아서 일일히 컴포넌트 하나하나 다 만들다가중복되는 component은 디자인 적용만 하고 따로 div로 싸서 padding이나 margin을 주는 등 레이아웃을 적용하는 방식으로 리팩토링을..
-
[HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex)웹 개발/HTML & CSS 2021. 4. 8. 17:18
flutter에서는 수직을 column 위젯으로, 수평을 row 위젯으로 정의해 레이아웃을 만들었다. css에서는 flutter와 달리 float, display 등 레이아웃을 위한 다양한 방법이 있었는데 그 중 display property! 대부분의 요소들이 수직으로 display되는 block 구조이고 inline, inline-block처럼 수평으로 display되는 구조도 있다. 하지만 block 구조는 계속해서 수직으로 쌓이고 inline은 수평으로 쌓여서 내가 원할 때 줄바꿈을 어떻게 해야할지, 다른 방법은 있는지 고민이 많았다. 그래서 정리해보았다! float 속성을 이용한 수평 정렬 - clear property float을 이용해 수평구조를 만든 후 float의 적용을 없애고 수직으로 ..
-
[ReactJS] npm과 npx의 용어정리 및 차이점웹 개발/ReactJS 2021. 4. 8. 14:15
react를 설치하다보니 npm , npx 두 가지 방법으로 패키지를 설치할 수 있다는 것을 알게 되었다. 낯익은 용어지만 제대로 공부한 적이 없는거 같아 차이점을 알기 위해 정리해보았다. 기본용어정리 package.json : 모듈 설치시 자동으로 생성되는 node.js 버전 관리 파일node_modules : 모든 모듈의 저장공간 React : 많은 모듈들로 구성된 라이브러리로 이들 간의 상호작용이 중요하다. 따라서 npm으로 모듈 설치, node.js로 개발 작업환경을 구성한다. npm이란 npm은 node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다. 1) 패키지 설치 프로젝트를 할 때 필요한 모든 의존성 패키지는 package.json 파일 안 에서 지정할 수 있다.npm i..
-
[ReactJS] ReactJS 설치 및 개발환경 구축 (mac)웹 개발/ReactJS 2021. 4. 7. 19:33
1) 원하는 위치에 프로젝트 폴더 생성 2) node.js 설치 nodejs.org/ko/download/다운로드 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org설치 여부 확인 (노드의 버전확인) node -v 3) ReactJS 설치 설치 전 아래 링크를 꼭 참고할 것 [ReactJS] npm과 npx의 용어정리 및 차이점 - https://seizemymoment.tistory.com/m/106[ReactJS] npm과 npx의 용어정리 및 차이점react를 설치하다보니 npm , npx 두 가지 방법으로 패키지를 설치할 수 있다는 것을 알게 되었다. 낯익은 용어지만 제대로 공부한 적이..
-
[HTML/CSS] CSS 기본 레이아웃 요소 정리웹 개발/HTML & CSS 2021. 2. 17. 14:37
display란 요소를 어떻게 보여줄지를 결정한다. - block : 줄바꿈 - inline : 줄 바꾸지 않고 오른쪽에 표시 / width와 height를 지정 할 수 없음 - inline-block : 줄 바꿈이 되지 않지만 크기를 지정 할 수 있음 / 마진값이 붙어있기 때문에 inline처럼 보인다. - vertical-align : 인라인 요소의 수직정렬 ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1 CSS display 속성 - ofcourse 개요 display 속성은 요소를 어떻게 보여줄지를 결정합니다. 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다. none : 보이지 않음 block : 블록 박스 inline : 인라인 박스 inli..
-
[Flutter] After Effects로 작업한 애니메이션을 flutter에 적용하는 방법 (Lottie)웹 개발/Flutter 2021. 2. 17. 13:53
캐릭터 디자이너와 프로젝트를 하면서 움직이는 애니메이션 캐릭터를 어플리케이션에 적용해야했다. Rive를 사용하려 했지만 Rive는 아직 베타버전이기 때문에 다른 방안을 찾다 Lottie 프로그램을 알게 되었다. Lottie는 애니메이션 모션을 gif로 저장할 필요 없이 코드로 적용할 수 있는 오픈소스 라이브러리이다. Android와 iOS, 웹에서 Adobe After Effects에서 작업한 애니메이션을 Bodymovin이라는 플러그인을 사용하여 json 파일로 생성해준다. 코드를 바로 적용하기 때문에 해상도 걱정은 안해도 된다는 장점이 있다고 한다! Lottie를 위해 Flutter에서 사용할 수 있는 패키지가 있어 사용해보았다. 1-1) After Effects에서 중간 플러그인인 Bodymovin..