npm install과 npm ci 의 차이
지인과 개발을 하던 도중 프로젝트에서 알게 된 사실이다프로젝트 초기 설정시나 실서버에 배포할때 package.json 파일과 package-lock.json 파일이 존재할 경우npm install 명령어를 입력할때 package-lock.json 파일이 존재하므로 항상
Package.json과 Package-lock.json에 대해서
한마디로 정의하면 아래와 같다package.json은 설치할 패키지의 버전 범위이고package-lock.json은 실제 프로젝트에 설치한 패키지 버전이다package-lock.json의 사용이유버전 범위를 기록한 package.json만 존재한다면 해당 프로젝트를 사
flex의 flex-grow / flex-shrink / flex-basis에 대해서
flex사용이유레이아웃을 만들기 위해서요소의 배치를 쉽게 위해서flex의 컨테이너에서 사용되는 축약형flex-flow : column nowrap; /* 컨테이너 내 아이템들을 세로로 배치하고, 줄바꿈을 하지 않습니다 */flex-growcontainer에 여분의 공간
CSS의 가운데정렬(수직/수평) 방법 및 margin:auto에 대해서
아래의 1번의 예제1.transform의 transition을 이용한 방법 (수직/수평)가장 먼저 position설정후 top:50%와 left:50%를 맞춘다그러면 요소의 왼쪽모서리가 화면 정중앙에 위치하게 되지만 요소는 가운데에 정렬되지 않는다여기서 transfor
Position정리 relative / absolute / fixed / sticky
Sticky예제( 스크롤 하기전 sticky요소가 relative하게 위치한 모습 )( 스크롤 후 sticky요소가 viewport기준으로 top:10px부분 부터 fixed하게 위치한 모습 )Position 설명1.staticposition 속성을 지정하지 않으면,
파이선의 *args , **kwargs의 사용법
가변인자 (Variadic Parameters)함수로 들어오는 인자의 갯수를 모르는 경우에 사용할수있다*args : positional arguments **kwargs : keyword arguments*args는 tuple형태를 인수로 받는다**kwargs는 dic
파이썬의 List,tuple,dict,set의 차이
1. list (리스트)리스트는 순서가 있고 수정 가능한 데이터 타입입니다.여러 값들을 대괄호([]) 안에 넣어서 생성할 수 있습니다.my_list = [1, 2, 3, 4, 5] print(my_list) my_list.append(6) # 리스트에 6을 추가
DeepL에 대하여 그리고 DeepL을 사용한 PHP예제
지금까지 사용하던 파파고 API가 2024년 2월을 마지막으로 무료 서비스를 지원하지 않게 되었습니다그래서 새로운 무료 번역 API를 찾아보던중 Deepl이라는 번역 API을 알게되어서 사용해보았습니다( 현재 게시글의 일본어 / 영어버전이 DeepL로 번역되었습니다
any와 unknown의 차이 ( + never)
any보다는 unknown을 사용하는것이 좋다any모든 타입 허용컴파일러 경고 내지 않음// 아래의 any 예제는 컴파일러 경고를 표시하지않는다// 잠재적인 에러를 유발할수있다let value : any = 10; console.log(value.length); //
변수의 반응형에 대해서(Reactive)
반응형에 대해서선언된 변수가 반응형을 가지는지 아닌지를 명확하게 몰라서 정리함반응형이란 해당 변수를 변경할때, 해당 변수를 참조하는 부분(화면/로직)에서 변경되는지를 말함1. 변수의 반응형 패턴 다섯가지<template> <div> /* 패턴1 */
keyof / typeof 에대해서 ( + in , instanceof )
keyof/typeof참조Typeof아래와 같이 데이터를 타입으로 변환해주는 연산자일반 데이터 → 일반 타입으로 변환객체 데이터 → 객체의 타입으로 변환메서드 → 메서드의 타입으로 변환클래스 → 클래스의 타입으로 변환일반데이터를 일반타입으로 변환타입가드로 사용됨cons
flex와 inline-flex의 차이
차이flex를 2개 사용할때 차이를 알수있다flex를 사용한 경우아래의 경우 div가 상하로 쌓인다 (wrapper를 block처리)<div style="display:flex">1</div> <div style="display:flex">2</div>inline-