개발

[SvelteKit] 스벨트 킷에 테일윈드CSS 적용하기 (SvelteKit + tailwindCSS)

스벨트를 사용하고 싶어졌다. 리액트도 있지만 최근 뜨고 있는 스벨트라는 프레임워크에 더 관심이 간다. 스벨트의 장점인 빠른 개발 속도를 살리기 위해 tailwindCSS를 적용하면 시너지가 좋을 것 같다는 생각이 들었다. 이미 만들어진 디자인을 클래스 형식으로 사용할 수 있기 때문에 간단한 페이지를 만드는데는 도움이 많이 될 것 같다. 1. Svelte 프로젝트 생성하기 스벨트는 npm을 사용해서 프로젝트를 생성할 수 있다. npm create svelte@latest 프로젝트이름 위의 명령어를 통해 프로젝트 생성을 할 수 있다. 순서가 진행되며 여러가지를 물어보는데 선호하는 옵션을 선택하면 된다. 프로젝트가 완성되었다면 해당 디렉토리로 이동하여 npm install을 입력한다. 그럼 패키지들이 자동으로..

[Python] copy와 deepcopy

파이썬에서 배열을 복사하려면 어떻게 해야 할까? arr = [1, 2, 3, 4] arr2 = arr print(arr) print(arr2) 위와 같이 작성하면 될 것 같다. 실제로 출력 해보면 같은 값이 출력된다. 하지만 위의 방법에는 문제가 있다. 💣 파이썬 배열 복사의 문제점 위의 출력 결과는 배열이 복사된 것 처럼 보인다. arr = [1, 2, 3, 4] arr2 = arr arr2.append(5) print(arr) print(arr2) 만약, 기존 배열을 복사하여 원소 하나만 추가하고 싶다면 위와 같이 작성할 것이다. 하지만 위 코드의 출력 결과는 아래와 같다. [1, 2, 3, 4, 5] [1, 2, 3, 4, 5] arr2를 바꾸기를 원했지만 arr도 함께 변경된다. 변수를 생성하고 ..

[JavaScript] 함수

console.log(add(5, 2)); console.log(sub(5, 2)); // 함수 선언문 function add(x, y) { return x + y; } // 함수 표현식 const sub = function (x, y) { return x - y; } 함수를 각각 함수 선언문, 함수 표현식으로 나타내고 있다. 함수가 선언되기 전에 각 함수들을 호출하고 있다. 결과는 어떻게 될까? 1️⃣ 함수 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 이때, 함수 내부로 입력을 전달받는 변수를 매개변수라 부르고 입력과 출력은 각각 인수, 반환값이라 부른다. 함수를 사용하는 이유 유지보수의 편의성 코드의 신뢰성 코드의 가독성 2️⃣ 함..

[JavaScript] 원시 값과 객체

// 1 var score = 80; var copy = score; score = 100; console.log(copy); // 1-1 // 2 var person1 = { name: 'Lee' }; var person2 = { name: 'Lee' }; console.log(person1 === person2); // 2-1 console.log(person1.name === person2.name); // 2-2 // 3 var person = { name: 'Lee' }; var copy = person; copy.name = 'Kim'; console.log(person.name); // 3-1 위의 예시에서 각각의 결과는 어떻게 될까? 1-1의 결과는 경험상 80이 나올 것 같고 2-1과 2..