FormData HTML5의 태그로 input 값을 서버에 전송하는 것처럼 자바스크립트에서 폼 데이터를 다루는 객체. 자바스크립트에서 다룰 일은 거의 없지만, 이미지 같은 멀티미디어 파일을 페이지 전환 없이 폼 데이터를 비동기로 제출하고 싶을때나 자바스크립트로 좀 더 타이트하게 폼 데이터를 관리하려고 할때 이용한다. 폼 객체에 key와 value 값을 차례로 추가해주는 것이 input 태그에 값을 입력하는 것 같은 효과를 가진다. 중요한 점은 값이 무조건 문자열로 자동 변환 됨으로 객체나 배열같은 복잡한 데이터는 넣을 수 없다는 점이다. 도움받은 글들 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api 🌐..
study/TIL
TS Enum(열거형) 특정 값의 집합을 정의할때 사용. 숫자형과 문자형을 지원한다. enum Color { Red, Green, Blue, } 숫자형 Enum 열거형(Enum)은 디폴트 값으로 숫자형을 사용함. 각 값은 자동으로 0부터 시작해 1씩 증가한다. 또는 수동으로 값을 지정할수도 있다. enum Color { Red = 1, Green = 2, Blue = 5, } 열거형의 값에 대해 산술 연산도 가능하다. 열거형은 일반적으로 상수값을 대신하여 사용되므로, TS에서는 열거형이 많이 사용된다. 사용시 코드의 가독성이 더욱 높아지고 오타 등의 실수를 방지할 수 있다. enum Color { Red = 1, Green = 2, Blue = 4, } let c: Color = Color.Green; ..
타입스크립트 타입스크립트 프로젝트 환경 세팅 프로젝트 폴더 생성 mkdir 폴더명 cd 폴더명 npm init -y 로 새 프로젝트 초기화 npm i typescript --save-dev 로 타입스크립트 설치 프로젝트 루트 디렉토리에 tsconfig.json 파일 생성 { "compilerOptions": { "target": "ES6", "module": "CommonJS", "sourceMap": true, "outDir": "./dist" }, "include": ["src/**/*"] } src 폴더 밑에 typescript 파일 작성 가능! Typescript ESLint와 Prettier 설정 타입스크립트는 2020년까지만 tslint를 지원하고 이후부터는 typescript-eslint를 ..
Styled-components 스타일 속성은 유지하되 태그만 바꿔주고 싶을때 as='바꿔줄 태그' const BtnBlue = styled.button` background-color: blue; color: white; `; // .... // = 버튼이지만 a태그로 바꿔서 사용함 기본 속성값 설정 const Input = styled.input.attrs({ required: true })` ` 백그라운드 이미지 설정 일단 import를 한다 import Bg from './img/Bg.jpg'; 라고 한 다음. styled-components에서 export const Bgbox = styled.div` background: url(${Bg}); `
프로젝트 GitHub GitHub Repository Repository에 반드시 필요한 파일 README.md 오픈 소스 프로젝트에서 가장 먼저 확인 할 수 있는 정보 기본적인 마크다운 방법으로 작성 가능 양식은 따로 없지만 보통 해당 오픈 소스를 어떻게 활용할 수 있는지에 대한 상세한 정보를 작성함 .gitignore gitignore dotfile. git으로 관리하지 않는 파일 모음 공유할 필요 없는 파일을 기록하면 git이 이를 파악하지 않고 push할때도 Repo에 Push 되지 않음 예) 개인이 따로 관리해야하는 중요한 secret token, 다른 동료와 공유할 필요없는 설정 파일 등 LICENSE 해당 코드의 라이센스 대부분 회사에서 사용하는 코드는 private로 관리하고 외부에 공개하..
리액트에서 조건부로 이벤트 주기 조건부 렌더링 사용하듯이 코드 작성하고 false값은 undefined로 작성. undefined가 아닐경우 아래와 같은 에러 발생 styled-reset 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 styled-component를 설치해야만 사용할 수 있음 styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지 normalize.css와 동일한 역할 설치 npm i styled-reset import는 이렇게 import reset from "styled-reset"; createGlobalStyle로 전역 스타일 생성하고 거기에 넣어줌 // 글로벌 스타일 만들기 위한..
최적화(Optimization) 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것. 웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다. 최적화가 필요한 이유 1. 이탈률 감소 최적화가 잘 안되었을경우 화면을 불러오는 시간이 길어지고 사용자가 페이지를 이탈할 확률이 높아진다. 따라서 성능 최적화를 통해 페이지 로딩 속도를 줄이면 사용자의 이탈률을 효과적으로 줄일 수 있다. 2. 전환율 증가 이탈률이 줄어들면 방문자가 회원가입, 상품 구매, 게시글 조회 등의 행위를 하며 실제 서비스 이용자로 전환될 확률이 늘어난다. 전환율을 높이기 위해서는 최적화를 통해 이탈률을 줄여야한다. 3. 수익 증대 이탈률이 감소하고 전환율이 증가하면 트래픽 증대 및 회원 수의 증가로 이어..
TDD(Test-driven Development) 코드를 작성하기 전에 테스트를 쓰는 소프트웨어 개발 방법론. 작은 단위의 테스트케이스를 작성하고 이를 통과하는 코드를 작성하는 과정을 반복한다. 1. Write Failing Test : 실패하는 테스트 코드 작성 2. Make Test Pass : 테스트 코드를 성공시키기 위해 최소한의 실제코드 작성 3. Refactor : 중복 코드 제거, 일반화 등 리팩토링 테스트 코드 작성을 마치기 전에 실제 코드 작성을 시작하지 않도록 주의해야한다. 또한 실제 코드를 작성할때는 테스트 코드를 통과할 정도의 최소 코드만 작성해야한다. 장점 버그가 더 적은 코드를 작성할 수 있음 불필요한 설계를 피할 수 있음 테스트 코드의 요구사항에 집중하기 가능 TDD를 사용하..
보호되어 있는 글입니다.
컴퓨터 구조 1. 기본 구조 하드웨어와 소프트웨어가 합쳐진 형태. 하드웨어 : 전자 회로 및 기계 장치로 되어있음. 입출력 장치, 중앙처리장치(CPU), 기억장치 등으로 구성됨. 소프트웨어 : 하드웨어 위에서 하드웨어를 제어하며 작업을 수행하는 프로그램. 1) 컴퓨터의 기본 구성 요소 입력 장치 컴퓨터가 처리할 수 있는 형태로 데이터와 명령을 받아들이는 물리적인 장치 키보드, 마우스, 스캐너, 타블렛, 조이콘 등이 예시. 컴퓨터에 연결하여 무언가를 입력할 수 있다면 그것은 입력장치로 볼 수 있음 출력 장치 처리된 데이터를 사람이 이해할 수 있는 형태로 출력하는 물리적인 장치 모니터, 프린터 등 중앙처리장치(CPU) 산술/논리 연산장치(ALU), 제어장치, 레지스터로 구성됨 산술 - 덧셈 수행 제어장치 -..
