profile
선명한 기억보다 흐릿한 메모

Atomic Design

디자인시스템 내에서 관리되지 않은 버튼이 있다고 하면 폰트 크기, 배경색, 테두리 둥글기 등이 페이지마다 제각각일 수 있음. 디자이너 혹은 유관부서와 특정 페이지의 버튼에 관해 얘기할 때 “프로필 설정 페이지의 최하단 저장 버튼”과 페이지 명과 위치를 같이 얘기해야 함

2023년 3월 7일
·
0개의 댓글
·

The Twelve-Factor app

공식 웹사이트에 잘 설명되어있지만 제가 이해한 대로 한 줄 요약하면 독립적인 애플리케이션 운영을 위한 12가지 요소.독립적인은 사람, 시간, 환경 등 애플리케이션 운영 시 영향을 받는 많은 것으로부터의 독립 뜻함.12Factor는 BE(Back-end) 영역, 특히 D

2023년 3월 7일
·
0개의 댓글
·

git hook, husky

여러 사람이 참여하는 프로젝트에서 코딩 컨벤션을 만들고 하나의 일관된 코딩 스타일에 따라서 코드가 작성되는 것은 중요하다고 생각. 여러 명의 개발자가 각자 본인의 스타일에 맞춰서 코딩을 한다면 소스는 한눈에 알아보기 힘들 것. 개발자가 일일이 신경을 써서 하기에는 리소

2023년 3월 7일
·
0개의 댓글
·

yarn

npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자. 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스 (opens new window)에 올리면 npm, yarn과 같은 패키지 관리자를 통해 설치 및

2023년 3월 6일
·
0개의 댓글
·

Tailwind CSS

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있음.CSS 프레임워크로 인라인 스타일을 사용하는

2023년 3월 6일
·
0개의 댓글
·

React DOM 작동 원리

JavaScript UI Library상태값이 변경될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택함.리액트는 컴포넌트의 1) 상태값이 변경되면, 2) UI를 자동 업데이트 해

2022년 12월 22일
·
0개의 댓글
·

MySQL Data Type

char는 말 그대로 고정형ex) char(8)로 선언시 글자를 한개를 넣던 두개를 넣던 8바이트의 공간을 차지함.char는 경우에 따라 데이터가 낭비될 수 있지만 추후에 연산이 필요 없기 때문에 검색속도가 varchar에 비해 빠름.글자수가 고정되는 ex) 주민번호,

2022년 12월 19일
·
0개의 댓글
·

WYSIWYG Editor

WIZ-zee-wig(위즈윅)'으로 발음하며 'what you see is what you get'을 줄여 부른 말이다. WISIWYG는 사용자가 보는 것이 그대로 최종 산물에 나타나도록 하는 유저 인터페이스를 말한다. WISIWYG 어플리케이션에서는 사용자가 화면에서

2022년 11월 19일
·
0개의 댓글
·

Styled-Components

스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 방법입니다.styled-components, emotion, styled-jsx가 있음.기존에 웹사이트를 개발할 때는 HTML과 CSS, JavaScript는 각자 별도의 파

2022년 10월 19일
·
0개의 댓글
·

SCSS

SASS는 들여 쓰기+줄 바꿈 형식.전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많습니다.SCSS의 경우 SASS보다 뒤에 나왔고(SASS 3 버전에서 SCSS가 생겨남) CSS 구문과 완전히 호환되도록 새로운 구문

2022년 10월 19일
·
0개의 댓글
·

이벤트 버블링(Event Bubbling), 이벤트 캡처(Event Capture), 이벤트 위임(Event Delegation)

가장 기본적으로 이해하고 있어야 하는 내용은 바로 웹 애플리케이션의 이벤트 등록입니다. 웹 애플리케이션에서 사용자의 입력을 받기 위해 필요한 기능입니다. 아래와 같은 코드를 의미합니다.add one item이라는 간단한 버튼을 만들어 클릭 했을 때 addItem이라는

2022년 10월 15일
·
0개의 댓글
·

웹 해킹 공격 (XSS, CSRF, SQL Injection etc)

Cross Site Scripting의 약자로 CSS라고 하는 것이 맞지만 이미 CSS가 Cascading Style Sheets의 약어로 사용되고 있어 XSS라 합니다.XSS는 게시판이나 웹 메일 등에 JavaScript와 같은 Script code를 삽입 해 개발자

2022년 10월 13일
·
0개의 댓글
·

multer

이미지, 동영상 등을 비롯한 여러 가지 파일들을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어 입니다.멀티파트 형식이란 enctype이 multipart/form-data 인 폼을 통해 업로드하는 데이터의 형식을 의미합니다.multer 패키지 안에는 여러 종류의 미들

2022년 10월 12일
·
0개의 댓글
·

리액트 불변성(React immutability )

리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있음. 함수형 프로그램밍의 특징 중 하나가 순수함수를 사용하는 것인데, 여기서 순수함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수. 동시에 순수함수는 외부의 값을

2022년 9월 21일
·
0개의 댓글
·

FormData

HTML 단이 아닌 자바스크립트 단에서 폼 데이터를 다루는 객체서버에 데이터를 전송하기 위해서는 HTML5 의 폼 태그를 사용해 다음과 같이 메뉴를 구성하여 제출이 처럼 보통은 HTML5의 <form> 태그이용해 input 값을 서버에 전송하지만, 자바스크립트에서

2022년 9월 20일
·
0개의 댓글
·

ESLint + Prettier 설정

보통 잘못 입력한 문법 자동으로 수정하기 위해서 사용.코드 포맷터의 역할도 하지만, 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질을 개선에 중점.사용 되지 않은 변수를 오류로 분류하는 no-unused-vars 같은 코드 퀄리티 룰은 prettier 같은 포

2022년 9월 15일
·
0개의 댓글
·

리눅스 권한(permisson) 설정

Chmod 수정할려는 파일 폴더내에서 ls-al(Terminal에서)이라는 명령어 입력 위의 사진처럼 현재위치에 있는 폴더 파일들을 자세히 볼 수 있음. drwxr-xr-x 4 mark staff 128 4 3 0066. 문구 하나씩 분석 > 제일 앞에 있는 d는

2022년 9월 8일
·
0개의 댓글
·

URL

프로토콜은 컴퓨터끼리 네트워크 통신을 할 때 규격. 우리가 웹을 이용할 때는 HTTP 프로토콜을 이용. 그리고 요새는 HTTP에 보안을 더한 HTTPS 프로토콜이 많이 사용되고 있음. (실제로 HTTP 프로토콜의 규격과 동일하다고 보시면 됩니다) 이 외에도 이메일을 통

2022년 9월 7일
·
0개의 댓글
·

빌드, 배포, 컴파일

서버에 기능을 추가 하려면 개발자가 로컬 PC에서 개발을 하고 테스트까지 진행한 뒤에 문제가 없을 경우 사용자가 사용할 수 있도록 수정된 코드를 실 서버에 반영해야 함.서버에 반영을 하는 것을 "배포"라고 하고 배포(Deploy) 하기 위한 과정을 "빌드"라고 함.소스

2022년 9월 6일
·
0개의 댓글
·

JavaScript Class

Class는 객체를 생성하기 위한 템플릿.클래스는 데이터와 이를 조작하는 코드를 하나로 추상화 함. 자바스크립트에서 클래스는 프로토타입을 이용해서 만들어졌지만 ES5의 클래스 의미와는 다른 문법과 의미를 가짐.참고https://developer.mozilla.

2022년 9월 3일
·
0개의 댓글
·