본문 바로가기
분류 전체보기86
CSS - 3D 윷 제작 css로 3D 윷 제작 시작은 이러하다. 윷 이미지를 가져와야 하는데 맘에드는 이미지가 없었다. css로 만든 건 있을 까 하고 찾다가 비슷한 주사위를 3D로 만드는 내용을 찾았다.(3d 주사위) 주사위를 위아래로 늘이고, 점 대신에 X를 그리니 직육면체의 윷 모양이 완성되었다. 코드를 살펴보니 transform과 rotate 를 사용하여 구현하였으며, 관련 css태그를 좀 더 공부해 보고자 한다. 트랜스폼 translate : 이동효과 scale : 확대/축소 효과 rotate : 회전 효과 skew : 비틀기(기울임) 효과 transform 효과는 translate 과 같이 사용해야 효과가 잘 느껴진다. translateX() translateY() 이동 translate 효과는 원래의 위치를 기반으.. 2021. 6. 21.
GitHub push 명령어 오류 [2021-03-31] 깃 허브 오류 내가 만든 브랜치 전에다가 push 한다니까 오류 메시지가 떴다. 찾아보니 일부러 데이터 손실 방지를 위한 메시지라 하며, + 기호를 통해 해결이 가능하다. 가능하면 강제로 업데이트 하는 것이라 안쓰는 것이 낫다. 깃허브 공식 문서 git push 설명 2021. 6. 20.
Web-RTC 정리 WebRtc 1. webRtc 화상채팅, 음성채팅 비대면 사회에 많이 사용되는 소통 방법이다. 이번에 제작할 프로젝트 게임에 음성채팅 기능이 들어가기에 서버 트래픽(비용)이 적은 방법을 찾고자 했다. webrtc(web real-time communication)는 웹 브라우저간에 플러그인의 도움 없이 서로 통신할 수 있도록 설계된 API이다. webRtc는 peer to peer지만 서버가 필요하다. 방화벽이 있거나 NAT상황에서 직접적인 시그널링이 불가능하기에 연결하기 위해서는 각 peer의 정보를 교환 해줄 수 있는 서버가 필요하다. 이 서버를 시그널링 서버라고 부른다. NAT 종류에 따라 시그널링 서버가 해야하는 역할이 다를 수 있는데 먼저 NAT의 정의와 종류를 설명하고자 한다. 2. NAT N.. 2021. 6. 20.
React Hook react hook의 지원은 클래스보다 함수를 선호하는 사람에게 좋은 일이다. 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 훅을 사용할 수 있다. 그렇기에 훅이 당장 필요하지 않다면 사용할 필요는 없다. 이전 버전과 100퍼센트 호환성을 가지고 있다. useState useState는 state를 함수 컴포넌트 안에서 사용하게 해준다. 1 2 3 4 5 6 7 8 9 10 11 12 13 class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } import React, { useState } from 'react'; function Example() { // .. 2021. 6. 20.
CSS Flexbox 정리 1. Flex가 필요한 이유 일반적으로 웹페이지의 레이아웃은 display, float 등과 같은 속성을 사용해 구현한다. 하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는데 한계가 있었다. css3에 추가된 레이아웃인 flexbox를 이용하면 가로 및 세로의 사이즈를 따로 계산하지 않고도 간결하게 레이아웃을 표현할 수 있다. 2. flex 기본 요소 2.1 Container와 Items flex는 크게 Container와 Items로 나뉜다. 2.2 주축(main-axis)과 교차축(cross-axis) 주축과 교차 축으로 설명하는 요소들이 많으므로 알아두는것이 좋다. 2.3 flex-start 와 flex-end 주 축이나 교차 축의 시작하는 지점과 끝나는 지점을 지칭한다. 3. F.. 2021. 6. 20.
소프트웨어 공학 정리 소프트웨어 공학 목차 1. 소프트웨어의 정의 소프트웨어 공학을 검색해보면 프레스만이라는 사람이 자주 등장한다. 프레스만의 정의에 따르자면 소프트웨어는 실행 시 원하는 기능과 성능을 제공하며, 프로그램이 정보를 적절하게 조작할 수 있도록 해주는 자료구조이다. 프로그램 운영 및 사용을 기술하는 문서 이다. 프레스만이 저술한 소프트웨어의 특징은 다음과 같다. 유형성 : 설계도안 등은 시각적 형태를 가진다. 무형성 : 완제품의 구조가 코드 안에 숨어 있어 파악하기 힘들다. 동적 행위성 : 하드웨어 상에서 동작하는 프로그램이다. 상품성 : 사용자가 구매 의사에 따라서 구매할 수 있다. 견고성 : 구조 변경이나 수정이 용이하지 않다. 비제조성 : 제조되는 것이 아니라 개발된다. 복제성 : 프로그램은 쉽게 복제할 수.. 2021. 6. 20.
브라우저 기초 지식 [2021-03-18] 브라우저 기초 지식 추가 공부해야할 것react를 렌더링 부분을 보고 있으니 브라우저 기초지식이 부족하다고 느꼈습니다. 각 브라우저의 구조와 브라우저 렌더링 엔진이 어떻게 작동하는지, 각 브라우저의 호환성에 관해 설명하였습니다. 1. 브라우저 기본 구조 사용자 인터페이스 : 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어. 렌더링 엔진 : 요청한 콘텐츠를 표시. 예시) HTML과 CSS를 파싱하여 화면에 표시함. 통신 : 네트워크 호출에 사용됨, 플랫폼과 독립적인 인터페이스며 하부에서 실행됨. UI백엔드 : 콤보 박스와 창 같은 기본적인 장치를 그림. OS 사용자 인터페이스 체계를 사용. 플랫폼에서 명시하.. 2021. 6. 20.
Github 정리 [2021-03-17] 목차 1. Github의 정의 git은 형상관리도구 중 하나이며, 버전 관리 시스템이라고도 한다. 2. Git을 사용하는 이유 무료이며 여러사람과 함께 병렬 작업이 가능하게 만들어준다. branch merge 를 통해 버전을 여러 갈래로 나누었다 합칠 수 있게 만들어준다. 분산 버전 관리 방식이기에 중앙 저장소가 지워져도 복구 할 수 있다. 3. Git 원리 Git으로 관리되는 폴더에는 .git이라는 숨김 폴더가 생긴다. .git 폴더에 작업 하고 있는 상태가 저장되어 있다. index 에는 현재 commit하기위해 준비된 내용이 저장되어있다. 4. Git의 기본 명령어 git commit : 소스코드는 버전으로 관리된다. 소스코드를 저장소에 저장하는 행위를 commit이라고 한다.. 2021. 6. 20.
REACT 공식 문서 정리 - 9. 리스트와 Key 9. 리스트와 Key 9.1 map()의 정의 먼저 Javascript에서 리스트를 어떻게 변환 하는지 살펴보자. 아래는 map() 함수를 이용하여 numbers 배열의 값을 두 배로 만든 후 map()에서 반환하는 새 배열 doubled 변수에 할당하고 로그를 확인하는 코드이다. 1 2 3 4 const numbers = [1, 2, 3, 4, 5]; // 배열 생성 const doubled = numbers.map((number) => number * 2); // 배열 횟수만큼 콜백 함수를 호출해서 돌리고 결과를 배열로 반환함. console.log(doubled); // 출력 결과는 [2, 4, 6, 8, 10] cs map()은 배열의 각 요소에 대해 제공된 callback 함수를 순서대로 호출하.. 2021. 6. 20.
REACT 공식 문서 정리 - 8. 조건부 렌더링 8. 조건부 렌더링 8.1 조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있다. 이렇게 하면 어플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있다. 예시는 아래와 같다. props.isLoggedIn 에 따라서 다른 인사말을 렌더링 한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function UserGreeting(props) { // 사용자에게 인사 return Welcome back!; } function GuestGreeting(props) { // 게스트에게 인사 return Please sign up.; } function Greeting(props) { const isLoggedIn .. 2021. 6. 20.
REACT 공식 문서 정리 - 7. 이벤트 처리하기 7. 이벤트 처리하기 7.1 이벤트 처리방식의 차이 React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 비슷하며, 차이는 다음과 같다. React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다. JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. 1 2 3 // 버튼이 눌렸을 때 해당 함수 작동 Activate Lasers Colored by Color Scripter cs 1 2 3 // 버튼이 눌렸을 때 해당 함수 작동 Activate Lasers Colored by Color Scripter cs React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault를 명시적으로 호출해야 한.. 2021. 6. 20.
REACT 공식 문서 정리 - 6. State 와 생명주기 6. State 와 생명주기 6.1 State의 정의 State는 React Component Class의 instance이다. Component의 동작을 제어하는 관측 할 수있는 속성 집합의 개체로 정의 된다. Component의 State는 Lifetime에 따라 변경될 수 있는 정보를 보유한 객체이다. 6.2 Props와 State의 차이. Props는 변하지 않는 속성을 가지고 있다. State는 시간이 지남에 따라 변경 될 수 있는 데이터를 가지고 변경 후 동작을 제어하는데 사용되는 관찰 가능한 개체이다. State는 컴포넌트 안에서만 사용할 수 있는 반면 Props는 제한이 없다. 6.3 생명주기(Life Cycle) 클래스 컴포넌트와 함수형 컴포넌트의 생명주기는 동일하게 동작한다. 6.3.1.. 2021. 6. 20.

티스토리툴바