소소한 개발팁

오늘 수업 중 나름 깔끔한 표 만들고 싶었다.처음에 따라 친 결과로는 약간 떨어져있는 셀들의 모음처럼 보였기 때문에 ㅜㅜ찾아보니까 table 태그에 셀 간격 cellspacing=0 추가하면 되더라.이렇게~

python 공부하다가 공백 제거하고 싶을 때가 있었는데,교육받은 것과 검색한 결과로는 만족하지 못했다.나는 아래 주문내역처럼 한쪽의 공백만 제거하고 싶고,자료는 양쪽이나 모든 공백 제거 방법만 찾을 수 있었다.처음에 썼던 코드는 아래와 같다.터미널에 출력된 결과:2

수업 중 메모장 아닌 구글 문서에 정리하는 습관이 있다.중복 또는 비교할 수 있는 것들은 표로 정리하면 보기 편하고 나중에 봐도 쉽게 이해되니까~그런데 구글 문서가 워드처럼 기호 자동 변형 기능이 있는데, 그걸로부터 어떤 영향이 있는지 오늘 알게 됐다.오늘 mySQL

수업에서 문구에 링크 삽입하는 방법 공부했다.그런데 클릭이 가능한 건 버튼처럼 보이면 더 직관적이겠다 싶어서 찾아봤다.버튼에 링크 삽입html에서 아래처럼 입력 후전(왼쪽) ~ 후(오른쪽) 비교:버튼 꾸미기먼저 위 문구에 class="button" 추가css에는 실제

요즘 mySQL과 Oracle 병행해서 수업 듣는다.어렵다 정신 없다 ㅠ 정신 차리자!!나는 본질과 이론 제대로 이해해야 올바르게 응용할 수 있을 것 같아서자주 듣던 charㆍvarcharㆍncharㆍnvarchar의 차이점, 구분법 구글링해봤다.한글은 물론 영문 사이

수업 들은 내용 참고해서 나만의 테이블 만들어보는 중.전화번호가 번호니까 입력값의 유형은 int/numeric으로 하면 될 줄 알고아래처럼 쿼리 작성했더니결과가 아래와 같았다.찾아보니 유형을 char로 바꾸고,전화번호 앞뒤에 '' 추가해야 그대로 출력되었다!원하던 결과

나만의 db 만들기 앞서뭘 만들면 전개할 수 있을 테이블이 적어도 3개 정도 되고,추후에 포폴에도 도움될 만할지 고민하다가개발의 정석이라고 듣던 쇼핑몰로 정했다.쇼핑몰하면 제품 가격이 필요하겠지~가격은 숫자 사이에 콤마 없으면 섭섭하잖니? 보기도 불편하고.그래서 알아본

내가 고민했던 거, 오늘 수업에 어떤 학우분이 물어보길래 생각나서 검색했다.join~ on~ (join~ on~) \* 테이블 간격수(즉 연결할 테이블수-1)만큼 입력하면 되겠군.예제:꼭 join 아니어도 비슷한 결과 출력해주는 쿼리:

시험 공부하다가 '마스터 테이블, 이력 테이블'을 보고 지나칠 뻔했는데,알아보니 종류가 어마무시하게 많을 듯..그중에서 흔한 거 먼저 정리해보기로.반복된 내용들을 표로 만들면 보기 편하지~벨로그 에디터에서도 표 만드는 기능이 생기거나혹은 표 복붙 가능하도록 했음 좋겠당

CRUD/DMLㆍDDLㆍDCLㆍTCL 잘 헷갈린데 쪽지시험에 자꾸(?) 나와서구분하고 외울 방법 찾아봤다.외우려면 역시 나열하기보단 테이블(정규화!)이 최고인듯.tag는 내가 임의로 지정한 거임.

oracle sql developer에서 한글 작성하면서 밑줄 때문에 거슬린다..밑줄 제거방법 한참 찾는데 그것만은 안 보이더라!?그래서 그냥 참으면서 계속 작성했는데 드디어 방법 찾아냈지 뭐니~기존에 노랭이줄과 함께 핑크줄도 있었다면아래 경로로 설정에서 체크 해제해주

vscode 화면 하단 spaces 클릭상단 검색창에 셀렉박스가 내려오는데 그중 indent...spaces 클릭 후원하는 칸수 선택하면 끁

너무 말도 안 되는 오류이기도 하고, 오류라고 해도 눈에 팍! 들어오는 경고창이 아닌 아주 평범해 보이는 알림창만 떠서 놓치기도 쉬움.애초부터 oracle 설치 시 아래처럼 기본으로 권장되는 설치경로 변경치 않고 그대로 냅두면 해당 오류가 안 날 것 같다.나는 혹시 몰

style에 line-height: 원하는 비중% 추가하면 되네

window > preferences > ... > spelling에서 아래 문구 체크 해제해주면 됨~깔끔시원한 결과:

색상만 바꿔도 이렇게까지 행복해질 줄이얌~환경설정에서 syntax 검색하면 파일 종류별로 미리 보면서 바꿔볼수있음!

sqld 시험 공부 중 예제 입력 시 나올 법한 결과가 안 보여서검색 후 아래처럼 NLS 설정 변경했다.알려주신 분은 문구 바로 복붙할 수 있도록 블로그에 올렸네 (센스 👍!)나도 따라함\~~결과:

글자를 영역 기준으로 중앙정렬하기 위해강의 듣은 바로는 height & line-height 똑같이 설정하고text-align = center 하면 되었다.그래서 궁금한 건 height & line-height 다르게 잡았을 때어떻게 하면 중앙정렬 유지할 수 있을까.검

html에서 입력란 생성style에서 스크롤다운 생성하고, 입력내용에서 밑줄 제거결과:폰트는 입력할 때 다른 입력란과는 달라 보이는 것도 거슬리는데 극복방법 찾는중..

1,제출(업로드)하는 파일에 대한 제약조건 유지하면서업로드되지 않았을 경우에도 막힘 없이 통과시키위해 return true 추가2,파일 크기에 대한 제약조건 설정 시 byte 쓰고,알럿 출력 시 mb로 변환하는 방법:보고 싶었던 알림창:처음에 369xx.........

style에서 아래 문구 넣어주면 되겠다.결과:

htmlcss중요한 건 마우스가 어떤 반응도 없는 거라고 본다.cursor: not-allowed;pointer-events: none;결과:

html) tr에 class 지정css:결과:

html) td에 class 지정css:결과:미리보기 내용만 좌측 정렬 위해 td_etc2{} 안에 text-align: left 입력컬럼명 포함 남은 모든 내용들은 중앙 정렬 위해 tr 안에 align=center 입력

이클립스 작업하고 실행 시500 Communications link failure 오류가 보이면db가 멈춰있는지 확인하고, 재실행하면 된다.당시 오토셋 열어보니 MySQL이 멈춰있었다.'시작' 클릭하고 phpMySQL 재접속한 후작업 중이던 jsp파일이 정상 작동됐다.

공공데이터 불러오고 실행 시 console에 아래 문구가 보였다.불허되는 접근: 이 웹 애플리케이션 인스턴스는 이미 중지되었습니다. \[]을(를) 로드할 수 없습니다. 디버그 목적 및 불허되는 접근을 발생시킨 해당 쓰레드를 종료시키기 위한 시도로서, 다음 스택 트레이스

chat gpt가 짜준 거고, 비결은 질문만 제대로 하면 괜찮은 결과 얻을 수 있을 것 같다.아주 만족해서 학습지 외 블로그에도 올려봄~적용 전:적용 후:

색상은 랜덤적용 안 하고 정성스럽게 하나씩 뽑아주기~

언젠가 내가 가본 곳 사진도 올리고 스크랩맵 (스크랩북 겸 맵) 만들어도 되겠다.1, 먼저 적용할 부위 정하기2, 전체 보기위치는 경도, 위도 기준으로 잡기3, 상세보기위치는 도로주소기준으로 잡기(경도, 위도 사용X)

이미지 하나하나 그렸당..소스코드는 여기서 참고해서아래처럼 내 입맛대로 바꿔봤다. chat gpt의 도움 받으면서!테스트용 html:java 적용 html:css:

java 사용해 중간이름을 '별'로 마스킹하는 방법:결과:

eclipse 작업하다가 화면 하단우측에 upgrade하라는 팝업이 뜨길래 upgrade했다.그런데 끝나고 파일 실행할 때 아래 실패 알림이 떴다.(전에 한번 업뎃하고 아무 문제도 없어서 계속 믿고 따라했지)eclipse\\plugins 확인해보니, 보통 같으면 설치하

eclipse에서 카카오 로그인 연동하는 도중이었다.이전 포스트에 언급된 upgrade 이후,프로젝트 지웠다 다시 import해도 유독 카카오 로그인 서블릿 파일에만 빨간불이 켜져 있었다.마우스 대보니 'The import com.google cannot be reso

eclipse upgrade하는 것에 조심하고 또 조심하자.upgrade 한 번으로 여러가지를 수습해야 했다.잘 보이던 줄번호는 upgrade 이후 갑자기 없어짐.(다른 설정들은 그대로인 갓 같은디..?) 극복방법은 설정에서 아래를 체크해주면 된다.

JSTL의 fmt:formatNumber 이용하면 된다. 예제:

1, 숫자 천단위 콤마(쉼표) 찍기'toLocaleString()' 이용하면 된다.2, 구매량이 1 이상에서 0으로 줄었을 때 배송비도 0으로 반환3, 동일상품 구매시 해당 배송비는 한 번만 계산예제:결과:

좋은 점: 뭔가 정교하고 깔끔하고 규칙적이고 있어 보임;아쉬운 점: 테스트할 때 약간 킹받음 😤예제:결과:영문 경우의 캡처는 생략~

1, 숫자만 허용2, 11자리까지만 허용예제:결과:숫자 외 '-' 입력시도 시11자리 넘게 입력시도 시\+) 11자리 미만 입력하고 다른 필드로 이동 시 관련 함수와 알럿도 띄우려 하다가 보류 🤓팝업이 자주 뜨면 사용성이 떨어질 수도 있으란 핑계로~

학습자 입장에선 있으면 좋다고 판단해서 적용해봤다.실사용자 입장에서 생각하면 귀찮을 수도(?)그리고 메일 인증까지 안 하면 abc@123.xyz처럼 형식만 맞고실제론 존재여부 알수없는 값을 입력해도 넘어갈 수 있긴 함..하여튼 검색하고 재밌게 느꼈던 부분이라 블로그에

프론트엔 사용자가 입력할 내용에 대한 제약사항들은다른 주요 기능 (crud) 테스트 다 마치고, 추가로 넣는 게 낫겠더라.백엔드 위주로 공부 중이기도 하고,테스트하면서 내가 정한 제한들 때문에 여러 차례로 킹받았으니 🤣그 중의 하나는 연령이다.그래도 관심 분야에 실제

1, '주소 찾기' 버튼 누르면 주소 입력창이 뜸.버튼명이 원래 '우편번호 찾기'였지만 우편번호를 출력 안 할거기 때문에 변경~2, 주소 입력하고 알맞는 거 선택하면 기본주소 필드에 자동 입력완성소스코드:프론트)java)

예제:결과:

결과:예제:

010****2345 이런 별 마스킹 말이다~결과:예제:

2024-06-29 (토) 15:55:56 이런 식 말이다~결과:예제:

레코드 삭제하기 전에 한 번 더 묻고 확인되면 삭제 실행시키려고 한다.예제:

상태 안 바꾸고 실수로 '변경' 버튼 눌렀을 경우 대비해, 아래 경고창 띄우고변경 처리하기 전에 한 번 더 묻고 서버로 넘어가기~예제:

(shopSel: select all from shop ^^)예시 이미지 출처: 쿠팡

JSTL 라이브러리를 제대로 불러오지 않아서 발생하는 문제란다.해결방법: JSTL 태그 라이브러리를 선언

작업 중인 페이지 상단에 링크가 많아지기에 주제별로 모으고, 필요 시 드롭다운 통해 이동하고 싶어 chat gpt에게 방법 물어봤다.예제:"각 option 태그의 value 속성을 통해 각 항목이 클릭되었을 때 이동할 URL을 지정.JavaScript의 onchange

검색했을 때, 검색결과 창으로 전환해도 검색란은 초기화되지 않고 방금 입력된 검색어 및 검색조건 그대로 남았으면 한다.chat gpt에게 물어보니 아래처럼 script 추가하면 되더라~

각도가 기본으로 90deg 되어 있었고,약간 오른쪽으로 기울이도록 하려고 135deg로 올렸다.0%: 시작점50%: 중간의 시작 지점 (35% 등으로도 변경 가능)100%: 끝 지점참고한 그라데이션 미리보기: https://cssgradient.io/

결과물 미리보기:준비사항:구글계정API 키이미 구글계정이 있으면 https://console.cloud.google.com/ 들어가 본인인증하고 API 키 생성 가능~아래 안내(https://developers.google.com/maps/docume

결과물:back:front:아래 OrderRef 누르면 팝업 띄우도록 할 예정팝업 영역: (css 별도 작성하면 좋겠지)script:

1, 테이블 모서리를 동그랗게2, 버튼에 마우스 댔을 때 음영 추가❔ chat gpt에게 box-shadow 쓸까, filter: drop-shadow 쓸까 물었을 때 자세히 비교해줬다.답변 내용이 꽤 알차서 그냥 넘기기는 아깝더라고~!box-shadow요소의 테두리(

수강 중인 수업에서 db는 oracle 위주로 쓰는데, 개인적으론 mariaDB가 직관적이기도 하고, 관심 기업에서도 쓴다고 해서 개인 프로젝트에는 mariaDB 사용 중이다.chat gpt가 알려준 대로 oracle에서 컬럼 여러개 제거 시 쿼리 하나씩 작성, 실행해

❔왜 eclipse에는 여러 프로젝트들이 같은 port 통해 실행 가능하고, sts4에는 port번호가 같으면 실행 불가한가요?EclipseEclipse 자체는 Java 프로젝트, 웹 프로젝트, 서버 프로젝트 등 다양한 프로젝트 타입을 지원하며, 기본적으로 포트 사용에

특정 테이블:html:css (공통적용 사항 제외)참고로 미적용 테이블:

price, amount, pay 등은 db & Vo에서 varchar/String으로 잡혀도 sql, mybatis에서는 자동으로 숫자로 변환, 계산해줌java 내에서 연산 시 여전히 Integer.parseInt(변수명) 식으로 변환해야 함그래도 숫자는 숫자형으로

흔히 보이는 상품번호, 주문번호, 거래번호 등 앞에 문자 하나씩이 있다.테이블이 많아질수록 해당 문자가 있으면 어떤 테이블의 식별번호인지 구분하는 데도움이 될 것 같아 chat gpt에게 생성하는 방법 물어봤지.여태까지 교육 받은 바로는 해당 번호를 java/js를 통

예전에 eclipse 교육 받을 때 백쪽에 항상 Vo, Dao, DaoImpl, Service(★), ServiceImpl, Controller(★★) 이렇게 최소 6종세트가 필요했다. (★, ★★: 이하부터는 Svc, Ctrl로 표시할 예정)sts4로 넘어오면서 Da

chat gpt와 대화하다 보니 mapper.xml 파일까지 생략 가능하다는 걸 알게 되었다.대신에 sql문은 interface에서 작성하면 되고, 매핑 오류가 철저히 없어지는 효과가 보였다.A. 기획의도:최초 진입 시 로그인 여부와 상관없이 홈, 전체상품

방법1 - 본인이 생각했던 로직동일 사용자가 동일 상품 몇 번 담았는지 확인, 즉 해당 (uid, product_code) 존재하는 cart건수 카운트 1.1. 동일 상품 담은 기록 없으면 새 cart 삽입1.2.1. 동일 상품 담은 기록 있으면 해당건의 cartid

기획의도:장바구니에서 주문량 변경 시마다 금액 소계와 합계가 실시간으로 계산되도록최소 주문량은 1개(0 값을 허용하면 코드 추가해야 하고, 그럴 바엔 해당 cart 삭제하는 게 깔끔하겠다.)최대 주문량은 주문가능 수량(또는 잔고)만큼으로 한정ㄴ 추후 품절 처리할 경우를

기획의도:장바구니와 마찬가지로 주문량 변경 시마다 예상결제액도 자동으로 반영되도록 함배송비도 한 번만 합산유의할 점:js가 html 요소들을 제대로 감지할 수 있도록 연산할 값들의 input 태그를 독입적으로 배치하는 게 중요 (특정 div안에 감싸면 인식 잘안될수있음

기존의 테이블도 좋았지만 여러가지 레이아웃 잡는 걸 경험해보고 싶기도 하고,테이블로 유지하면 관리자 페이지와 비슷해 보여서 바꾸기로 했다.이에 따라 연산에 관한 js도 변경되었다..!(부분 선택/삭제 기능은 곧 개발 예정. 이번 포스팅은 오직 꾸미기에 대한 이야기 🤍

기획의도:체크된 cart의 소계금액만 예상결제액에 포함체크된 cart 건수를 카운트해서 주문 버튼에 표시

결제금액 제외한 주문서 초본이다.진입 시 사용자의 가입정보가 기본으로 불려오고,사용자 본인 외 다른 수령인정보 직접입력 선택 시 입력란이 비워지고,다시는 본인 정보를 불러올 수도 있다.가입정보 데이터는 users에 있고, 수령인정보 새로 작성 시 orders에 저정될

기획의도:장바구니에 담은 상품 중 일부만 골라 먼저 주문 시, 해당 상품의 정보 및 결제금액만 출력쇼핑몰 처음인데 욕심 나름 내기에 cart & order의 애매한 경계가 아직 나에게 새삼스럽다(?). 소스 파일을 아래처럼 나누는 게 맞나 싶지만 더 나아갈 나중을 위해

사용자별 주문목록 들어갈 때 결제번호 기준으로 주문 리스트 있고,결제건당 주문상품 2건 이상일 때 해당 리스트도 함께 한 페이지에 출력해보고 싶었다.약 70-80% 생각하고 작성해보고 나머지는 chat gpt에게 도움 받았다.1, Mapperㄴ 아직 group by 하

주문ㆍ결제 완료 시 해당 주문상품의 cart를 장바구니에서 단순히 삭제하면 db상 무결성 위배로 실패할 수 있다.chat gpt의 추천 받아 soft delete 응용해서 해당 cart에 상태를 부여하고, 상태에 따라 cart 조작 또는 조회한다.1, DB & Vo 중

1, 상태 변경 전후 비교MapperServiceCtrl예시로 콘솔에서 찍어본 결과:2, 변경 결과 팝업htmljscss

학원에서 배워본 Summernote 활용.그런데 그때처럼 HashMap<String, Object> 쓰지 않아도 되더라~DB products 테이블에 pdetail (longtext) 필드 추가Vo에는 pdetail (String) 추가Mapper sql문에도 p

기획의도:동일 제품을 2회 이상 주문 가능하기에 후기는 '제품' 상세보기에서 출력되지만 '주문' 기준으로 생성된다.조건:주문상태가 '도착'이고 + '후기 없음'이면 후기 작성 가능주문건마다 후기 1회만 작성 가능DB기본키도 R001, R002 식으로 자동 증가하도록 한

css 적용해 페이지 scroll-down해도 항상 보였으면 하는 부분들을 보이도록 상단고정 처리해봤다.로그인 여부에 따라 상단 높이도 조절해줬다.html/nav: 상단고정 영역separator-horizontal2: 경계선/css로그인 전:로그인하고 scroll-do

1, 폰트한글 기준으로 작업하기 때문에 보통 아래 url로 들어간다.https://fonts.google.com/?subset=korean&script=Kore마음 드는 폰트 get~get embed code~import 체크하고 1번 복사,2번은 개인적으로

어쩌다가 알아냈다 😸justify-content: center: 내용물들을 공간 중앙에 정렬align-items: center: 내용물 끼리/서로 중앙정렬

목적: 현재 페이지 URL 확인하고, 그에 따라 표시 영역 색상 적용적용할 페이지 수만큼의 html파일이 있고, 각각에서 똑같이 아래 부분이 있다.예제의 경우, 페이지 2개라서 표시 구간 너비를 각각 50%로 한다.html)js)

상품 테이블 & Vo에 category (varchar/String) 필드 추가한다.MapperCtrl전체 리스트에는 경로 생성카테고리별 리스트연습 삼아 제품당 카테고리 키값 쌍을 하나씩만 부여했다.추후에는 tag(hashtag 같은) 추가해서 배열로도 처리해봐야겠지.

chat gpt가 알려준 방법 4가지 중 가장 직관적인 걸로 해봤다.1, 생성된 테이블에서 추출할 행들을 선택하고 우클릭 > 격자 행 내보내기2, 아래를 필요에 따라 체크이번에는 엑셀 추출했다.끝~그리고 pc에 엑셀이 없어서 구글 시트에 가져오기!

기획의도:제품 상세페이지 진입 시 해당 제품과 동일한 카테고리의 제품도 하단에서 표시해당 제품은 이미 보고 있으니 리스트에서 제외비슷한 제품이 많을 수 있으니 3개로 제한MapperCtrlFront

희망사항:카테고리별 제품 건수 및 비중 계산해당 비중 나타내는 바 형태로 시각화색상은 랜덤 적용하는데, 파스텔 톤 위주로 😸MapperCtrlhtml (바 부분만)js)파스텔 톤 적용할 경우:원색으로도 만족할 경우:가끔 별 기대 없이 물어보는데 오히려 아주 만족스러운

카테고리 중 선택 가능한 항목 외 직접입력 시, 해당 입력값 추가 처리해봤다.제출 form, Mapper에는 변동 없다.html직접입력란은 상시 표시되지 않고 '직접입력' 선택 시에만 나타난다.jsCtrl

특정 테이블을 담는 페이지 내에서 검색하는 것은 아닌, 모든 페이지에서 상단고정된 검색바를 통한 검색하는 기능이다.VoMapper는 xml파일 쓰지 않으니 검색을 위한 class가 별도로 필요했다.PrdSqlProviderMapperCtrlmethod는 get 아닌 p

index 진입 시 로그인 여부에 상관없이 top제품을 표시하려고 한다.조건:주문상태가 '도착'인 제품에 한정누적 주문량 & 후기건수 순으로 정렬후기건수 출력(0값 허용)상품+주문+후기 테이블 3개 단순히 join한 결과 후기건수가 정확히 합산되나누적 주문량은 2배로

브라우저 탭 보면 페이지 title 왼쪽에 아이콘이 있는데, 이를 customize하려고 chat gpt에게 방법 물어봤다.

먼저 이미지 위치와 크기를 html파일에서 잡아본다.scroll-down하지 않아도, 첫 페이지에 필요한 게 다 한눈에 보였으면 한다.글자는 이미지 편집 시 직접 삽입해도 되지만 웹에 올렸을 때는 또 상상과 다를 경우 대비해,웹에서 작성하고 맞추는 게 편하겠더라~이미지

드디어 늘 경계하는 부분에 도전~레코드 건수가 수천, 수만이 아닌 수십개로 초간단한 버전으로 작업해봤다.예전에 배웠던 것 참고하면서 chat gpt에게도 도움 받아서 부담감이 좀 덜했단가.가독성을 위해 현재 보고 있는 페이지 번호를 굵게 처리하고 클릭 비활성화깔끔함을

본인의 신상에 대한 기준은 등록한지 7-14일 이내의 상품이다.먼저 7일로 가정하자.1, 표시신상 여부 표시하는 isNew 필드를 Vo에 추가한다.고정값이 아니기에 db에는 없어도 된다.VoFront에는 아래 한 줄만 추가하면 끝~2, 조회첫인상을 주는 index.ht

기획의도:가입 id 중복체크비밀번호 두번 일치하게 입력 여부 체크UserVo에 아래 필드 2개 추가UserMapperUserServiceJoinCtrlhtmljs (id, pw 체크 부분만)

jsp/jstl에 이어 thymeleaf로도 카카오지도 연동해봤다. 출력할 정보가 db에 없기에 ctrl & front에서만 작성하면 된다. Ctrl html js

서비스 제공자 기본정보도 넣고, sns 로고도 넣는다~진짜처럼 통신판매업 신고번호도 넣어봤는데 복잡해 보여서 일단 줄였다.html:css:

프로젝트를 소개할 ppt 작성을 위해 데이터 시각화를 준비한다.MySQL Workbench라는 MySQL 공식 도구 사용하면 해당 도구에서 바로 ERD 설계 가능하다고 한다.본인이 HeidiSQL 써온 거기 때문에, MySQL Workbench도 설치하면 동일 db 연

들어본 적 있는데, 교육은 못 받은 부분이라 chat gpt, 구글, 유튜브, 커뮤니티에서 물어보고 찾아보고 그랬다.처음 들어본 개념들이 많아서 막막하고 시간이 상당히 걸렸다.그래도 드디어 나름대로 해냈다! 😸본인이 생각하는 민감정보:db 경로 & 로그인 정보api

vscode에서 설정 들어가기: 아래 클릭 또는 ctrl + ,아래 부분을 눌러 settings.json 파일 열기settings.json 파일 {} 안에 아래를 추가해주면 끝이제 App.js에서 .item-name 입력하고 엔터하면 아래처럼 자동완성됨

연습 중인 react 프로젝트가 있는데,vscode+browser 다 종료했을 때 재실행하기 위해 해당 플젝 terminal에서 아래 명령어 한줄씩 실행하면 된다.\*my-app = appName, 임의 지정 가능

기본 상태가 꺼짐이고, 누르면 켜진 듯이 색상 변경하고,스피너 위치도 직관적으로 이동하도록 하려고 한다.1, Toggle.js2, ToggleStyles.css

pc가 교체되어 자주 쓰던 vscode, git, react 등 재설치했다.react 플젝 생성 중, 이전 pc에서 못 봤던 오류가 발생해서, 동료의 도움 받아 해결할 수 있었다.명령어 npx create-react-app my-app 실행 후의 오류:해결 절차:1,

목적: 메인 버튼과 서브 버튼을 시각적으로 구분하고, 코드를 효율적으로 작성하기 위함1, sass 설치2, App.js에 버튼 임포트3, Btn.js4, css파일의 경우, .scss파일로 생성Button.scss

목적: 메인 버튼과 서브 버튼을 시각적으로 구분하기 위함0, Button.module.css파일 생성1, App.js에 버튼 임포트2, Btn.js3, Button.module.csssass와 달리, btn {} 안에 sub btn css 넣는 건 아니라,동릭적인 블록

styled-components라는 library 설치 시 ERR_OSSL_EVP_UNSUPPORTED 오류가 보여 chat gpt 도움 받고 해결했다.설치 명령어(뒤에 --save 없어도 됨):설치 후, 앱 실행에 실패해 vscode & browser 종료했다 재시작

HeidiSQL보다 어떤 장점이 있는지 직접 경험도 하고회사에서 지시한 학습 주제로 실습하기 위해 MySQL server & MySQL Workbench 설치해봤다.참고자료 대로 여기서 ver.8 다운받았다.로그인/회원가입 없이 다운로드 가능~다만, 위의 참고자료와 같

mysql에서, 기존 users 테이블에 이미 레코드가 존재하는데, 아래 컬럼 추가하려고 한다.추가 시 아래 오류가 보였다.새 컬럼 추가 전의 기존 레코드를 다 삭제 후 재시도하면 되나 싶어 'DELETE FROM users' 쿼리를 실행했으나 아래 오류가 또한 보였다