TypeScipt -> Redux/Redux toolkit 이후에 Next.js를 하려고 했는데.. Sass공부를 하고 있네요...
Sass 공부 후.. next와 TypeScipt를 사용해서 블로그 만드는 공부를 좀 해볼까 합니다..
그 후에.. Redux공부를 조금 더 해봐야겠어요.. toolkit은 뭔가 스무스하게 써지는데 리덕스가 부족한 듯... 싶네요
이전 프로젝트 팀원 분들이랑 카톡을 하다 보니 곱창 이야기가 나왔는데..
생각해 보니 저는 대창이랑 막창은 먹어본 적 있고, 소곱창을 먹어본 적이 없네요..?
소곱창 먹어봐야겠다
| 다시 공부시작.. (0) | 2024.01.17 |
|---|---|
| 오타 (0) | 2023.04.09 |
| 미니 프로젝트 끝 기업프로젝트 시작 (0) | 2023.04.07 |
| 코로나 격리해제 후.. (0) | 2023.03.03 |
| 개발 블로그 시작! (0) | 2023.02.27 |
<html>
<head>
<meta charset="UTF-8">
<title>출력결과</title>
</head>
<!-- N개의 문자열이 입력되면 중복된 문자열은 제거. (원래의 입력순서를 유지). -->
<body>
<script>
let arr = ["good", "time", "good", "time", "student"];
function solution(arr) {
let set = new Set(arr)
return [...set];
}
function solution2(arr) {
const set = new Set();
arr.forEach(el => set.add(el));
return [...set];
}
function solution3(arr) {
let answer = arr.filter((el, i) => arr.indexOf(el) === i)
return answer;
}
console.log(solution(arr));
</script>
</body>
</html>solution과 solution2의 차이는
두번째의 방법이 메모리 소모가 더 적습니다.
solution 함수는
set 자체에는 중복이 제거된 상태의 Set 객체가 들어가있지만
new Set으로 객체를 생성할때 중복을 포함한 요소가 Set 객체에 추가가 되어
배열 전체를 사용하기 때문에, 중복 제거전부터 불필요한 메모리를 소모합니다.
('중복이 제거된 배열', '중복 포함 배열' 두 가지의 배열이 메모리에 저장됩니다)
solution2의 경우는 빈 Set객체를 생성후 forEach를 통해 하나씩 추가합니다
이 경우 Set 객체 자체에는 할당된 배열이 없으며, 배열의 요소를 하나씩 Set에 추가하면서 Set 객채의 특성을 이용해
중복을 제거하는 함수입니다. 이 경우 배열의 중복 개수 크기에 상관없이 필요한 메모리만 사용합니다.
다만 forEach는 새로운 배열을 생성하지는 않지만, 반복문을 돌며 배열의 요소를 처리하는데 메모리를 사용합니다.
(그래도 1번보다는 좋다!)
크기가 작은 배열의 중복제거의 경우, 두 함수는 큰 차이를 보이지 않지만, 배열의 크기가 커질경우 성능차이가 발생합니다.
(2번이 효율적)
solution3의 경우, filter 함수가 새로운 배열을 반환하기 때문에 메모리 양이 더 많아집니다.
중복이 포함된 배열과 같은 크기를 가지고있어 메모리 사용량이 증가합니다.
filter 함수 내에서 새로운 배열을 생성하기 때문에 중복을 제거한 새로운 배열과 원래의 배열 두 가지가 메모리에 할당됩니다.
(따라서 1번과 마찬가지로 메모리 사용량이 높습니다)
| [Algotithm] 큰 수 출력하기 (0) | 2023.04.26 |
|---|---|
| [Algorithm] 보이는 학생 (0) | 2023.04.26 |
| [Algorithm] 문자열 중복제거 (뭔가 이상함) (0) | 2023.04.24 |
| [Algorithm] 가운대 문자 출력하기 (0) | 2023.04.24 |
| [Algorithm] 가장 긴 문자열 찾기 (0) | 2023.04.23 |
Sass 팀은 @import 규칙을 계속 사용하는 것을 권장하지 않습니다.
Sass는 @import를 향후에 제거할 계획이라고 합니다. @use를 권장하는 이유입니다.
1. @import는 모든 변수, 믹스인 및 함수를 전역적으로 엑세스할 수 있도록 합니다. 어떠한 것이 어디에 정의된건지 알기 어려워집니다.
2. 모든 것이 전역적이기 때문에 라이브러리는 이름 충돌을 피하기 위해 모든 맴버에 접두사를 붙여야 합니다.
3. @extend 규칙도 전역적이므로 어떤 스타일 규칙이 확장될지 예측하기 어려워집니다.
4. 각 스타일시트는 @imprted할 때마다 실행되고 CSS가 내보내지므로 컴파일 실력이 늘어나고 출력이 부풀려집니다.
- 퍼포먼스적으로도 문제가 있습니다..
5. 새로운 모듈 시스템과 @use 규칙은 이러한 모든 문제를 해결합니다.
그냥 import 를 use로 바꿨더니 에러가 발생했습니다.
예시는 예시일뿐 저런 이름 사용하지 않기..
네임 스페이스를 사용하고싶지 않을 경우 as *을 사용하면 생략 가능합니다
1. @use는 가장 앞에 쓰여야 한다.
맨 위로 올렸더니 에러가 사라졌습니다.
2. 다른 파일에서 사용 하려고 할 때
위와같이 선언을 하더라도 다른곳에서 다른곳에서 사용할 때 에러가 발생합니다
위의 사진처럼 직접 또 선언을 해줘야합니다..
이렇게 계속해서 반복 사용을 하는건 소스코드도 지저분 해지고 번거롭기 때문에
@forward를 사용합니다.
여러번 내보낼껄 하나의 파일에 모아서 한번에 내보낼 수 있습니다.
abstract의 경우 다른곳에서도 쓰이기 때문에
다 넣어줘야합니다.
| Sass의 특징 (0) | 2023.04.22 |
|---|---|
| Sass에 대해서 (0) | 2023.04.22 |
<html>
<head>
<meta charset="UTF-8">
<title>출력결과</title>
</head>
<body>
<script>
function solution(str) {
let arr = str.split('');
let set = new Set();
arr.forEach(e => {
if (!set.has(e)) {
set.add(e);
}
})
return Array.from(set).join('');
}
function solution2(str) {
const obj = {};
let result = '';
for (let i = 0; i < str.length; i++) {
const char = str[i];
if (!obj[char]) {
obj[char] = true;
result += char;
}
}
return result;
}
console.log(solution("apple"));
console.log(solution("banana"));
console.log(solution("asdasd"));
console.log('----------------------')
console.log(solution2("apple"));
console.log(solution2("banana"));
console.log(solution2("asdasd"));
</script>
</body>
</html>중복 제거를 위해 사용한다면 . 성능은 2번이 더 좋습니다.
timeEnd 사용시 평균적으로 성능은 2번이 더 좋습니다.
1번은 중복이 적은 경우입니다 중복이 적을때 좋은 중복제거 알고리즘..?
내가 이상한걸 만들어버린 것 같다.. 언제 쓰는걸까
중복이 발생하지 않는다는 가정이나, 중복이 발생하는 경우의 수가 매우 적은 경우에 사용하는걸까..?
생각해보니.. 1번 알고리즘
function solution(str) {
let arr = str.split('');
let set = new Set(arr);
return Array.from(set).join('');
}이렇게 짜면 되는걸..
| [Algorithm] 보이는 학생 (0) | 2023.04.26 |
|---|---|
| [Algorithm] 중복 단어 제거하기 (메모리 관련 이야기) (0) | 2023.04.25 |
| [Algorithm] 가운대 문자 출력하기 (0) | 2023.04.24 |
| [Algorithm] 가장 긴 문자열 찾기 (0) | 2023.04.23 |
| [Algorithm] 대소문자 변환하기 (0) | 2023.04.23 |
<html>
<head>
<meta charset="UTF-8">
<title>출력결과</title>
</head>
<!-- 문자열의 가운대 문자를 출력합니다.
짝수의 문자일경우 가운대 2개의 문자를 출력합니다. -->
<body>
<script>
function solution(str) {
let answer = "";
const len = str.length;
const mid = Math.floor(len / 2);
if (str.length === 0) {
answer = "입력된 문자열이 없습니다.";
} else if (len % 2 === 0) {
answer = str[mid- 1] + str[mid];
} else {
answer = str[Math.floor(mid)];
}
return answer;
}
function solution2(str) {
const len = str.length;
const mid = Math.floor(len / 2);
if (len % 2 === 0) {
return str.slice(mid - 1, mid + 1);
} else {
return str[mid];
}
}
console.log(solution("good"));
console.log(solution("study"));
</script>
</body>
</html>
| [Algorithm] 중복 단어 제거하기 (메모리 관련 이야기) (0) | 2023.04.25 |
|---|---|
| [Algorithm] 문자열 중복제거 (뭔가 이상함) (0) | 2023.04.24 |
| [Algorithm] 가장 긴 문자열 찾기 (0) | 2023.04.23 |
| [Algorithm] 대소문자 변환하기 (0) | 2023.04.23 |
| [Algorithm] 대문자 변환하기 (정규식 포함) (1) | 2023.04.21 |
<html>
<head>
<meta charset="UTF-8">
<title>출력결과</title>
</head>
<!-- 가장 긴 문자열 찾기 -->
<body>
<script>
let arr = ['apple', 'banana', 'cherry', 'durian', 'eggplant'];
function solution(arr) {
let max = arr[0];
for (let a of arr) {
if (max.length < a.length) { max = a;
max = a; }
}
return max;
}
function solution2(arr) {
let max = arr[0];
for (let i = 0; i < arr.length; i++) {
if (max.length < arr[i].length) max = arr[i];
}
return max;
}
console.log(solution(arr));
</script>
</body>
</html>
| [Algorithm] 문자열 중복제거 (뭔가 이상함) (0) | 2023.04.24 |
|---|---|
| [Algorithm] 가운대 문자 출력하기 (0) | 2023.04.24 |
| [Algorithm] 대소문자 변환하기 (0) | 2023.04.23 |
| [Algorithm] 대문자 변환하기 (정규식 포함) (1) | 2023.04.21 |
| [Algorithm] 대문자 찾기 (정규식 포함) (0) | 2023.04.21 |
<html>
<head>
<meta charset="UTF-8">
<title>출력결과</title>
</head>
<!-- 대소문자 변환하기
대문자와 소문자가 같이 존재하는 문자열을 입력받아 대소문자를 변환
대문자 -> 소문자 , 소문자-> 대문자 로 변환하여 출력하는 프로그램 작성하기 -->
<body>
<script>
function solution(str) {
let answer = '';
for(let word of str){
if(word === word.toUpperCase()) answer += word.toLowerCase();
else answer += word.toUpperCase();
}
return answer;
}
function solution2(str) {
let answer = '';
const arr = str.split('');
answer = arr.map(char=> char===char.toUpperCase()? char.toLowerCase() : char.toUpperCase())
return answer.join('');
}
console.log(solution2("StuDY"));
</script>
</body>
</html>
| [Algorithm] 가운대 문자 출력하기 (0) | 2023.04.24 |
|---|---|
| [Algorithm] 가장 긴 문자열 찾기 (0) | 2023.04.23 |
| [Algorithm] 대문자 변환하기 (정규식 포함) (1) | 2023.04.21 |
| [Algorithm] 대문자 찾기 (정규식 포함) (0) | 2023.04.21 |
| [Algorithm] 특정 문자 개수 찾기 (0) | 2023.04.21 |
변수를 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법으로 생각할 수 있습니다.
색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값과 항목을 저장할 수 있습니다. Sass는 $ 기호를 사용하여 변수를 만듭니다.
Sass를 사용하면 HTML의 동일한 시각적 계층 구조를 따르는 방식으로 CSS 선택자를 중첩할 수 있습니다.
다른 Sass파일에 포함될 수 있는 CSS의 작은 조각이 포함된 '부분 Sass 파일' 을 만들 수 있습니다.
CSS를 모듈화하고 유지 관리를 더 쉽게 유지하는데 도움이 되는 방법이며, 부분 파일은 앞에 밑줄이 붙은 파일 이름의 Sass 파일입니다. (예시 : _Partials.scss )
밑줄을 사용하면 파일이 부분 파일일 뿐이며, Sass가 CSS파일로 생성하지 않습니다.
부분 Sass파일은 @use와 같이 사용됩니다.
@use를 사용하여 가져온 스타일 시트를 모듈이라고 부릅니다.
단일 파일에 모든 Sass를 작성할 필요는 없으며, @use 규칙을 사용하여 원하는대로 분할할 수 있습니다.
이 규칙은 다른 Sass 파일을 모듈로 가져옵니다.
즉, 파일 이름을 기반으로하는 네임스페이스를 사용하여 Sass 파일의 변수, mixins 및 function을 참조할 수 있습니다.
@use 사용시 '_base' 라고 작성하지 않고 'base'로 작성해도 됩니다.
CSS의 반복되는 부분을 mixins르 통해 해결 가능합니다
@mixin으로 선언하며 , @include를 통해 사용합니다.
mixins와 비슷합니다
@extend를 사용하면 한 선택자에서 다른 선택자로 CSS 속성 집합을 공유할 수 있습니다.
mixin은 소스코드의 중복을 막기위해 사용하고, extend, %placeholder는 연관성 있는 규칙을 만들기 위해 사용합니다.
연관성이 존재한다면 extend를 사용하고, 연관성은 없지만 코드가 겹치는 선택자들이라면 mixin으로 중복제거를 합니다.
+, -, *, math.div() 등 %와 같은 소수의 표준 수학 연산자를 사용할 수 있습니다.
출처 : https://sass-lang.com/guide
Sass: Sass Basics
Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but s
sass-lang.com
| @import 보다 @use를 사용해야 하는 이유 (0) | 2023.04.24 |
|---|---|
| Sass에 대해서 (0) | 2023.04.22 |
CSS를 사용하는 것 만으로 많은 앱을 스타일링 할 수 있지만 만약 스타일시트가 점점 더 커지고 복잡해지면 유지 관리하기 어려워지게 됩니다.
Sass에는 중첩, 믹스인, 상속 및 유지관리가 가능한 CSS를 작성하는 데 도움이 되는 기능이 있으며,
아직 CSS에는 존재하지 않는 기능이 있습니다.
Sass로 작업을 시작하면, 사전 처리된 Sass 파일을 웹사이트에서 사용할 수 있는 일반 CSS 파일로 저장합니다.
Sass는 CSS로 컴파일되거나 해석되는 전처리기 스크립팅 언어입니다.
SassScript는 그 자체가 스크립팅 언어인 반면 SCSS는 기존 CSS 구문 위에 구축되는 SASS의 기본 문법입니다.
SCSS문법을 기반으로 작성하게되면, Sass 전처리기로 CSS로 해석하게됩니다.
| @import 보다 @use를 사용해야 하는 이유 (0) | 2023.04.24 |
|---|---|
| Sass의 특징 (0) | 2023.04.22 |
<html>
<head>
<meta charset="UTF-8">
<title>출력결과</title>
</head>
<!-- 대문자로 변환하기 -->
<body>
<script>
let str = "ItisTimeToStudy";
function solution(str) {
let answer = "";
for (let word of str) {
if (word.charCodeAt() >= 97 && word.charCodeAt() <= 125) answer += word.toUpperCase();
else answer += word
}
return answer;
}
function solution2(str) {
let answer = "";
for (let word of str) {
if (/[a-z]/.test(word)) {
answer += word.toUpperCase();
} else {
answer += word;
}
}
return answer;
}
function solution3(str) {
let answer = "";
for (let word of str) {
// if (/[a-zA-Z].test(word)) {
if (/[a-z]/i.test(word)) {
answer += word.toUpperCase();
}
}
return answer;
}
console.log(solution(str));
console.log(solution2(str));
console.log(solution3(str));
</script>
</body>
</html>
solution2 는 정규식을 사용했습니다
/[a-z]/ 는 소문자를 찾으며 i를 붙이면 대소문자를 구분하지 않습니다
즉. /[a-z]/i , /[A-Z]/i , /[a-zA-Z]/ 모두 같습니다. 대소문자를 구분하지 않고 알바벳을 찾습니다.
solution2의 if문은 word가 앞의 정규식의 조건에 해당하는걸 포함하는지.
즉 a-z까지의 문자를 포함하는지를 true, false로 반환합니다.
소문자일때 toUpperCase() , 아니면(대문자일경우) else로 가서 answer에 더하기
하지만 solution3이 가장 좋은 것 같습니다
링크에 알고리즘에 사용한 정규식에 대한 설명이 있으며,
정규식은 추후 별도로 정리하겠습니다
| [Algorithm] 가장 긴 문자열 찾기 (0) | 2023.04.23 |
|---|---|
| [Algorithm] 대소문자 변환하기 (0) | 2023.04.23 |
| [Algorithm] 대문자 찾기 (정규식 포함) (0) | 2023.04.21 |
| [Algorithm] 특정 문자 개수 찾기 (0) | 2023.04.21 |
| [Algorithm] 문자 바꾸기 (정규식) (0) | 2023.04.21 |