개발 (48) 썸네일형 리스트형 [React] 리액트 설치 방법 npm create-react-app app-name 가장 기본적인 설치 방법이다. 정말 기본적인 리액트 앱만 설치된다. vue는 vite를 이용해서 typescript라든지 pinia라든지 router까지 한 번에 설치할 수 있었는데...하면서 vite로 리액트 설치를 해봤다. npm create vite@latest 상태관리, 라우터는 몰라도 typescript까지는 같이 세팅이 가능하다. [프로그래밍 패러다임] 객체지향, 함수형 프로그래밍 패러다임(programming paradigm)은 프로그래머에게 프로그래밍의 관점을 갖게 해주는 역할을 하는 개발 방법론이다. 예를 들어 객체지향 프로그래밍은 프로그래머들이 프로그램을 상호 작용하는 객체들의 집합으로 볼 수 있게 하는 반면에, 함수형 프로그래밍은 상태 값을 지니지 않는 함수 값들의 연속으로 생각할 수 있게 해준다. 여러 패러다임을 지원하는 언어로는 C++, 파이썬, 자바스크립트가 있으며 자바의 경우 jdk 1.8부터 함수형 프로그래밍 패러다임을 지원하기 위해 람다식, 생성자 레퍼런스, 메서드 레퍼런스를 도입했고 선언형 프로그래밍을 위해 스트림(stream) 같은 표준 API 등도 추가했다. 프로그래밍 패러다임은 크게 선언형, 명령형으로 나누며, 선언형은 함수형이라는 하위 집합을.. [디자인 패턴] MVC, MVVM, Singleton 등 디자인 패턴에 대해 디자인 패턴이란 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호 관계 등을 이용하여 해결할 수 있도록 하나의 ‘규약’ 형태로 만들어 놓은 것을 의미한다. - Singleton(싱글톤) - Factory Method(팩토리 패턴) - Strategy(전략 패턴) - Observer - MVC - MVP - MVVM 등의 패턴이 있다. 싱글톤 패턴 싱글톤 패턴(singleton pattern)은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 그렇게 하지 않고 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는 데 쓰이며,보통 데이터베이스 연결 모듈에 많이 사용한다. 하나의 인스턴스를 만.. [Pixi.js] Vue3를 곁들인 PixiJS설치법 npm install pixi.js CDN 설치는 내가 별로 안좋아하니까 npm으로 설치함 import * as PIXI from 'pixi.js'; 사용할 파일에 import해서 쓰면 됨 예를 들어서 코드를 이렇게 짜면 이런식으로 화면이 나오게 된다. 오늘은 여기까지. [Routing] Vue-Router 없이 라우팅하기 화면이 좌/우로 트랜지션(?)되는 라우터를 만들어보자. App.vue 각 컴포넌트의 표시 여부를 관리하는 showComponent2, showComponent3, showComponent4 변수를 선언했다. 전환 효과를 위한 transitionName 변수를 선언했다. 초기 화면에는 Component1만 보이게 하고 Component1에서 이벤트를 발생시키면, Component2가 나타나고, Component1은 사라진다. Component2에서 이벤트를 발생시키면, Component3 또는 Component4가 나타나고, Component2는 사라진다. Component3에서 이벤트를 발생시키면, Component2가 다시 나타나고, Component3은 사라진다. Component4에서 이벤트를 발생.. [CSS] linear-gradient 예제와 함께 알아보자 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다. 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있다. 즉, background-color 또는 color 와 같은 속성에는 사용할 수 없다. 사용법 linear-gradient() 함수 사용법은 다음과 같다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달한다. 이는 선택사항이나, 지정하지 않을 경우 'to bottom'이 기본값으로 적용된.. [CSS] 애니메이션, 트랜지션, 트랜스폼의 차이 뜬금없지만 프론트엔드 개발자이지만 CSS를 잘 다루지 못하는 상태로 취업해서 밑바닥부터 구르고 있다. 통장 잔고를 보면 눈가가 뜨거워진다. 애니메이션, 트랜지션, 트랜스폼의 차이. 매번 단편적으로 보고 넘어가버리니 다시 보면 헷갈려서 정리해 보려고 한다. CSS의 Animation, Transition 및 Transform은 모두 웹 페이지에서 요소를 시각적으로 개선하기 위해 사용되는 CSS 속성이다. 애니메이션 (Animation) CSS3에서 새롭게 추가된 기능으로, 특정 요소에 대해 애니메이션 효과를 부여하는 방법이다. 요소에 복잡한 시각적 변화를 부여하는 데 사용되며, 일반적으로 사용자가 상호작용하지 않아도 자동으로 실행한다. @keyframes 규칙을 사용하여 정의하며, 시작 상태와 끝 상태를 .. [MD5] md5로 암호화해보자 MD5(Message-Digest algorithm 5)는 암호화 해시 함수이다. npm install md5 하면 쉽게 사용 가능하다. 설치 후 md5() 함수를 사용하면 된다. 괄호 안에 문자열을 입력하면 리턴값으로 암호화된 값을 내놓는다. 예를 들어 md5("Hello World")는 리턴값으로 b10a8db164e0754105b7a99be72e3fe5가 나온다. 그럼 의문이 들 수 있다. 그럼 md5 코드를 역으로 인코딩하면 원문이 나오는 거 아님? 이라고 생각할 수 있다. MD5는 해싱 알고리즘이므로 일방향 함수이다. 입력 값을 출력 값으로 변환할 수는 있지만, 출력 값을 입력 값으로 변환할 수는 없다. 이러한 특성 때문에 비밀번호와 같은 중요한 데이터를 저장할 때 사용하는 암호화 방식이 아니라.. 이전 1 2 3 4 5 6 다음
