본문 바로가기

FrontEnd

(37)
[ CSS ] 비슷해서 헷갈리는 transform, translate, transition Style줄 때 기계처럼 적용하는 transform, translate, transition 단어들이 비슷해서 가끔 적용 시 헷갈릴 때가 있다🥲 그래서 간단히 정리하고 넘어가도록 한다 ! transform : element 변형 시 사용 translate : transform에 속해있는 translate는 transform과 같이 사용할 수 있다 ( scale, rotate 같은 애 ) transition : element 변형 시 속도, 시간, 횟수 들을 조절 transform Element를 변경시킬 때 사용 ( 위치 이동 , 회전 , 크기 조절 등 ) span{ transform : 변형속성 ( 값 , 값2 ) // 여려개 속성 변경시 transform : 변형속성1 ( 값 ) 변형속성2 ( 값 ,..
[ HTML ] 검색이 가능한 select만들기 datalist 값을 선택하도록 만들때 select만 사용했었는데, select의 일을 하면서 검색도 가능한 HTML 태그 datalist가 있어서 정리하려고 한다. 두개의 비교와 기능은 아래에 간단히 정리해서 적어두었다 : ) select 설정 해 놓은 option의 value값을 선택 할 수 있다. (선택만 가능하고 검색은 불가능) js로 검색이 가능하도록 filter등으로 적용 시켜줘야했었다 number 1 2 3 4 5 6 datalist 설정 해 놓은 option의 value값을 선택 할 수 있다. 선택도 가능하고 검색도 가능하다 numbers ✔︎ 참고 www.youtube.com/watch?v=iX_QyjdctsQ&ab_channel=WebDevSimplified
[ ESlint & Prettier ] 문법오류, 코드정리 도와주는 도구들 자바스크립트로 개발을 할때, 문법오류나, 코드 정리를 해주는 도구인 ESlint와 Prettier에 대해 정리해보았다. 1 . ESlint ES LInt는 ES + Lint의 합성어이다. ES는 Ecma Script로서, Ecma라는 기구에서 만든 Script, 즉, 표준 Javascript를 의미하고, Lint는 에러가 있는 코드에 표시를 달아 놓는 것을 의미한다. 에러와 코드를 일관되게 잡아주기 때문에 여러명이 협업시 유용하다. 코딩 컨벤션 및 안티패턴들을 자동 검출하므로 사용하는것이 좋다고 한다. ESLint 설치 $ npm init -y $ npm i -D eslint //lint 초기화 설정 $ node_modules\.bin\eslint --init ESLint 설정 설정을 전부 마치면 루트 ..
[NVM] node 이전버전 사용하기 프로젝트 파일을 npm으로 install 하는데, 오류가 났다. 내 컴퓨터의 node 버전이 최신이라 버전을 낮춰서 사용해야 한다고 해서 그 내용을 정리하려고 한다. NVM 이란? Node Version Manager 으로, 말 그대로 Node의 버전을 관리해주는 매니저이다. 여러개의 Node 버전을 설치하고 쉽게 사용할 수 있다. 01 npx 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash 참고 github.com/nvm-sh/nvm 02 설치 확인 nvm ls 03 Node 설치하기 // nvm install 원하는node버전 nvm install 10.19.0 04 Node 버전 적용 // nvm u..
[ 디자인패턴 ] FLUX와 FLUX가 생겨난 이유 뷰 내에서 Redux처럼 전역 상내 관리를 할 수 있는 기능인 Vuex를 공부하면서 Flux패턴에 대한 이야기가 나와서 정리하려고 한다. 실제로 Vuex는 Flux 패턴에 영감을 받아 만들어졌다고하며, Flux는 ReactJS의 Redux의 디자인패턴이기도 하다. 글을 읽기 전에, 일단 MVC패턴이 뭔지 알아야 하므로 전에 작성해 두었던 아래의 글을 읽고 Flux에 대해 이해하는것이 좋다. [ 디자인 패턴 ] MVC, MVP , MVVM 디자인 패턴이란 ? 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 규약을 통�� im-designloper.tistory.com Flux 모델이 생겨난 이유 MVC..
[ 디자인 패턴 ] MVC, MVP , MVVM 디자인 패턴이란 ? 디자인 패턴이란 프로그램이나 어떤 특정한 것을 개발하는 중에 발생했던 문제점들을 정리해서 상황에 따라 간편하게 적용해서 쓸 수 있는 것을 정리하여 특정한 규약을 통해 쉽게 쓸 수 있는 형태로 만든것을 의미. 1 MVC 개발할 때 3가지 형태로 구분하여 개발하는 소프트웨어 개발 방법론 중 하나 Model 데이터와 그 데이터(내부 비지니스 로직)를 처리하는 부분 → **"무엇"**을 할지 정의 View 사용자에게 보여지는 UI부분 Controller input 사용자로부터 입력 을 받고 Model 또는 View중개인 역할 → "어떻게" 처리할지 알려주는 역할 장점 단점 비지니스 처리 로직과 사용자 인터페이스 요소들을 분리시켜 서로 영향없이 개발 하기 수월하다는 장점 앱이 커지고 복잡해질수..
아키텍쳐와 클린 아키텍쳐 본문을 들어가기 전에 , 완벽한 내용의 아키텍쳐와 클린 아키텍쳐의 내용은 절대 아니다. 어려운 개념이라 간단하게 정리하기가 어렵기 때문에 일부인 개념만 정리해 둔 글이고, 직접 클린 아키텍쳐에대해 더 알고싶다면 아래 참조 블로그 여러개를 참조해서 읽으면 많은 도움이 될 것이다. 아키텍쳐란 시스템 목적을 달성하기위해 시스템의 상호작용등의 시스템디자인에 대한 제약 및 설계 시스템 구성 및 동작 원리 시스템 구성요소에 대한 설계 및 구현을 지원하는 수준을 기술 구성 요소 간의 관계 및 외부환경과의 관계 묘사 요구사양 및 시스템 수명주기 고려 시스템의 전체적인 최적화를 목표 한마디로 정리하면, 최적화를 목표로 두고 시스템 구성과 동작원리 그리고 시스템의 구성환경등을 설명 및 설계하는 청사진 또는 설계도 입니다...