최신 글
-
Div 에서 띄어쓰기, 줄바꿈 (
태그)가 먹지 않을 때
일반적으로 HTML에서 띄어쓰기 (줄바꿈)가 되지 않으면 형식에 맞지 않는 태그나 코드로 작성된 경우가 많다. 예를들어 태그에서는 줄바꿈을 로 표현하지 않고, 운영체제에 따라서 \r\n 으로 표시하거나 \n으로 표시해야한다. 하지만, 태그 내에서 줄바꿈을 하기 위해서는 보통 태그를 사용해서 적용하는데이번에 아무리 적용해도 되지가 않아서 확인해보니, 태그는 아래와 같이 white-space 속성이 normal로 되어있다.white-space: normal; 이건 띄어쓰기(\s), 들여쓰기(\t), 줄바꿈(\n)이 그냥 한번의 공백으로 차지하는 방식으로 바뀌는 것인데 이를 해결하기 위해서는 해당 속성값을 pre-wrap으로 변경해주어야 한다. white-space: pre-wrap;이것을 잘 몰라서..
2025.01.23
-
Vue3 에서 yarn serve 시 오류 (The project seems to require yarn but it's not installed.)
node -vv18.20.5yarn -v1.22.22npm -v10.8.2 설치 정보는 상기 정보와 같다.인프런에 보면 Vue3 강좌가 있는데 해당 강좌에서 따라하다보니아래와 같은 문제가 발생하였다. ERROR Error: The project seems to require yarn but it's not installed.Error: The project seems to require yarn but it's not installed. at checkYarn (C:\Users\Computer\Desktop\files\learn-vue-js-master\learn-vue-js-master\vue3-form\node_modules\@vue\cli-shared-utils\lib\env.js:46:4..
2025.01.20
-
Vue 2 & Vue 3 - Reactivity 차이점
아래의 소스코드는 위의 동작으로 실행된다.이 과정은 Vue의 핵심이라고 할 수 있는데 개발자는위의 과정에 맞춰서 개발을 한다고 보면 된다. 기존에는 아래와 같이 Property 동작을 제어했다. let data = { a : 10, b : 20};Object.defineProperty(data, 'a' { get() { }, set() { }}); 여기서는 'a' 에 대한 것만 제어가 가능하게 설계가 되어있었는데Vue 3에서는 Proxy를 통해 객체를 통짜로 모방하도록 만들 수 있어서좀 더 개선된 버전이라고 할 수 있다. API 차이로 인해서 Vue 2 보다 Vue 3가 사용하기 더 편하다고 할 수 있다.
2025.01.09
-
Vue 3의 코드 작성 방식
옵션 API {{ message }} data => Instance Optiondata의 내용을 리액티비티가 주입 컴포지션 API {{ message }} 옵션 API 에서 컴포지션 API로 변경되었는데 코드 재활용하고 좀 더 클린한 코드를 작성하기 위해서 컴포지션 API가 개발되었다. Vue 개발 초보자라면 옵션으로 개발해보고 그 이후 컴포지션 API를 사용하기를 권장함.
2025.01.09
-
Vue2와 Vue3의 차이점
Vue2와 Vue3의 차이점라이브러리 내부 로직 재작성Vue2의 라이브러리를 모두 TypeScript로 재정의하여 내부 로직을 재작성주요 개발 도구들 변경예 ) 뷰 개발자 도구, VSCode 플러그인 (Vetur -> Volar), Vite 기반 프로젝트 생성 등Webpack이 아닌 Vite를 쓰게되면서 전반적인 생태계가 변화되었다. (https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html)새로운 문법 지원컴포지션(Composition) APITeleport기타리액티비티 시스템 기반 API 변경개선된 API로 Vue 내부 개선공식 문서 변경Vue3 공식문서와 Vue2 공식 문서가 나뉘어져 있음필요에 따라서 버전 별 사용 가능http..
2025.01.09
-
[소프티어] 9496번: Pipelined(Java/자바)
문제https://softeer.ai/practice/9496 문제 해석이 어려워서 그렇지 사실 간단하고 쉬운 풀이법이다. 우선 해당 문제의 노트가 닫힌 구간, 열린 구간에 대한 설명을 해주는데 어렸을 때 기억을 더듬어보면 중학생때 수학에 나오던 개념이다. [a, b] = a 이상 b 이하[a, b) = a 이상 b 미만(a, b] = a 초과 b 이하(a, b) = a 초과 b 미만 해당 관계성만 알게된다면, 사실 문제의 반은 접근했다고 볼 수 있다. 입력이 아래와 같다고 생각해보자32 2 3 N = 3 이고, 각 각 자동차는 2, 3, 2의 작업 단계를 갖는다. 이를 순서대로 s1, s2, s3 라고 하고 공간 차지율을 확인해보면 s1(2) = [0, 1/2)s2(2) = [0, 1/2)s3(3)..
2024.10.17
-
[소프티어] 9657번: 나무공격격 (Java/자바)
문제https://softeer.ai/practice/9657 소스코드import java.io.*;import java.util.*;import java.awt.Point;public class Main { public static int N, M; public static int map[][]; public static Queue queue = new LinkedList(); public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); StringTokenizer st =..
2024.10.15
-
[백준] 18808번: 스티커 붙이기 (Java/자바)
문제https://www.acmicpc.net/problem/18808문제풀이⭐ 가장 중요한 것 은 Rotation을 어떻게 할 것 인지가 중요하다. 나는 아래와 같이 그림을 그리면서 로테이션 했을 때 (y, x) 좌표가 어떤식으로 변화하는지 확인하였다. 이 과정에서 Rotation을 구현할 수 있었고 그 외에는 시뮬레이션을 돌려가며 순서대로 구현하면 문제없이 풀 수 있다. 소스코드import java.io.BufferedReader;import java.io.InputStreamReader;import java.util.ArrayList;import java.util.Arrays;import java.util.LinkedList;import java.util.Queue;import java.util...
2024.08.07
-
[프로그래머스] 카테고리 별 도서 판매량 집계하기 (MySQL)
문제https://school.programmers.co.kr/learn/courses/30/lessons/144855 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제풀이1. 2022년 01월 데이터를 WHERE 조건에 건다.2. CATEGORY 별 GROUP BY3. CATEGORY 별 ORDER BY ASC 소스코드SELECT CATEGORY CATEGORY , SUM(SALES) TOTAL_SALESFROM BOOK_SALES ..
2024.08.06
-
[프로그래머스] 조건에 맞는 사원 정보 조회하기 (MySQL)
문제https://school.programmers.co.kr/learn/courses/30/lessons/284527 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr문제풀이1. With문을 사용하여 2022년 각 사원의 총 SCORE 를 기억한다.2. 이를 이용하여 MAX 값을 구한다. 소스코드WITH SUM_SCORESAS ( SELECT SUM(GRD.SCORE) SCORE , EMP.EMP_NO EMP_NO , EMP...
2024.08.06