내배캠 57

[WIL] 24년 10월 1주차 회고

WIL(Weekly I Learned)-WIL은 일주일동안 내가 학습하면서 배운점, 아쉬웠던 점, 느낀점을 작성하는 것인데, 거창한 내용이 아니더라도 꾸준하게 공부 기록을 남기기 위해서 적기로 생각해보았다.*이번주에 내가 학습하면서 배운점html, css, js 를 활용하여 웹페이지를 만들고, firebase를 이용해 데이터를 저장하는 방법을 배웠다.데이터를 저장하고 삭제할 수 있으니까 진짜 뭔가 하나 배운 느낌이라 좋았다. 프로젝트 진행을 하면서 협업에 관련해서도 조금 더 깨달음을 얻게 되었다.나는 원래 혼자 공부하는 것을 선호하고, 생각을 오래하는만큼 이해한 내용을 정리해서 기억하는 것도 오래걸리는데 협업을 해보니 팀 활동에서는 이게 좋은 방식이 아니라는 것을 알게 되었다. 나중에 회사에 들어가게 되..

내배캠 2024.10.06

[VS Code] VS Code에서 한글이 깨지는 현상

VS Code를 처음 사용할때, 실행 화면에서 한글이 깨지는 현상을 해결하는 방법. 스켈레톤 코드를 가져왔을 때, 실행화면이 이런식으로 깨지는 현상이 있어서 해결하는 방법을 찾아보았다.  이 현상은 기본적으로 인코딩 불일치 문제로 발생하는 오류로, vs code의 기본값과 컴퓨터가 지원하는 한글 인코딩 값이 달라서 일어나는 현상이라고 한다.   - 소스파일 인코딩을 korean으로 설정하기이렇게 화면 깨짐 현상을 해결하기 위해서는 인코딩 방식을 바꿔주는 방법이 있다. 먼저 vs code 화면 하단 오른쪽에 보면 UTF-8이라고 적힌 부분이 있는데, 이 값이 vs code의 기본 값으로 지원하고 있는 인코딩이라고 보면 된다. 1. vs code 화면에서 UTF-8이라고 적힌 부분을 클릭하면, 화면 윗부분에..

[내일배움캠프/1주차] 웹개발강의 2주차

부트스트랩 사용법Jumbotron -jumbotron은 특색있는 정보나 내용을 사각의 영역 안에서 눈에 띄도록 보여주는 박스 1. 부트스트랩에서 jumbotron 검색해서 클릭 2. 원하는 요소 옆에서 마우스 우클릭 후 검사 누르기/ 원하는 만큼 코드 복사 3. 요소 가져온 뒤에는 각자 원하는 내용을 입력 Javascript자바 스크립트(JS) -자바스크립트란? 프로그래밍 언어 중 하나로 브라우저가 알아들을 수 있는 언어.-브라우저한테 명령을 내리는 표준이라고 생각하면 됨.-자바스크립트로 프론트엔드, 백엔드, 서버 개발 등등 다 가능함. -consol.log() 를 사용하여 작성한 코드가 맞는지 확인할 수 있음     마우스 오른쪽 클릭-검사-콘솔 탭에 들어가면 확인할 수 있음 let변수, 기본연산 -변..

[미니 프로젝트/#3] 팀 소개 페이지 제작

-멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기 위해    +멤버 등록을 입력할 수 있게 하는 화면 구성을 위해-------> javascript, html, css를 사용하여 코드 작성 & 부트스트랩을 활용해 버튼이나 입력칸 모양 참고 -수정하기 버튼을 누르면 등록할 때 적은 내용이 조회되고, 수정된 데이터가 입력되도록 하기------->firebase에서 등록된 데이터를 불러오기 updateDoc 사용  -화면 구성은 했으니 이제 기능 구현을 해봤다. -firebase에서 데이터를 등록하고 불러오기 위해서 가져와야하는 값들-script type = "module" : 다른 모듈에 접근하기 위해서 스크립트 타입을 모듈로 지정해야함-import : 모듈 가져오기import ..

[미니 프로젝트/#2] 팀 소개 페이지 제작

-멤버카드 등록, 수정 부분-멤버카드 등록 화면 제작 -멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기-등록 버튼을 눌렀을 때 나오는 화면 구성=입력할 수 있게 하는 화면-수정하기 버튼을 누르면 등록할때 적은 내용이 조회되도록 하기-내용을 수정하고 등록하기 버튼을 누르면 수정된 데이터가 입력되도록 하기-취미, 좋아하는 음식 부분에서는 사진과 글이 같이 등록 될 수 있게 구현하기-등록시 비밀번호를 입력하면, 등록한 사람만 수정이 되도록 하기   -멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기 위해    +멤버 등록을 입력할 수 있게 하는 화면 구성을 위해-------> javascript, html, css를 사용하여 코드 작성 & 부트스트랩을 활..

[미니 프로젝트/#1] 팀소개 페이지 프로젝트

1. 들어갈 내용간략한 팀 소개멤버소개 ↘mbti, 취미, 좋아하는 음식, 사진멤버의 블로그 주소2. 구성(화면)홈화면멤버 리스트멤버 상세 소개 페이지등록/수정 화면3. 기능멤버카드 CRUD(Create, Read, Update, Delete) 기능사진 넣을 수 있는 기능멤버카드 등록, 수정, 삭제 시 비밀번호 입력할 수 있는 기능 -멤버카드 등록, 수정 부분-멤버카드 등록 화면 제작 -멤버카드 등록을 눌러서 입력했을 시 firebase에 데이터가 입력되게 하기-등록 버튼을 눌렀을 때 나오는 화면 구성-취미, 좋아하는 음식 부분에서는 사진과 글이 같이 등록 될 수 있게 구현하기-등록시 비밀번호를 입력하면, 등록한 사람만 수정이 되도록 하기-수정하기 버튼을 누르면 등록할때 적은 내용이 조회되도록 하기

[내일배움캠프/1주차] 웹개발 강의 1주차

html, css, javascript뼈대와 꾸미기 작업 -html은 웹페이지의 뼈대를 담당하는 코드-css는 html을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드-javascript는 웹을 움직이게 하는 코드1. 요청을 보내고-요청은 서버가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보내는 것  =주소창에 주소를 입력한 후 엔터를 입력하는 것---항상 html 파일을 주는 것이 아니다.---이 사진처럼 데이터만 받아서 갈아끼우는 경우가 더 많음(데이터만 줄 때가 많음/ JSON형식) -html 파일도 결국 데이터라고 볼 수 있음 -예매할때 새로고침하는 경우를 생각해보면 쉬움 2. 받은 html 파일을 그려주는 것※예시주소창에 https://naver.com을을 입력하면 네이버 홈에 해당..

[SQL 걷기반] Q5.공부하다보니 팀 프로젝트 시간이 왔어요!

공부를 한 결과를 점검하기 위해 팀 프로젝트를 수행해야 합니다! 이제, 아래와 같은 team_projects(프로젝트) 테이블이 있습니다.id namestart_dateend_dateaws_cost1일조2023-01-012023-01-07300002꿈꾸는이조2023-03-152023-03-22500003보람삼조2023-11-202023-11-30800004사조참치2022-07-012022-07-3075000 1. team_projects 테이블에서 AWS 예산(aws_cost)이 40000 이상 들어간 프로젝트들의 이름을 선택하는 쿼리를 작성해주세요! select name from team_projects where aws_cost>=40000 2. team_projects 테이블에서 2022년에 시작된..

내배캠/퀘스트 2024.09.24

[SQL 걷기반] Q4. 이제 놀만큼 놀았으니 다시 공부해봅시다!

아래와 같은 sparta_students(학생) 테이블이 있습니다.   idnametrack gradeenrollment_year1르탄이Node.jsA20232배캠이SpringB20223구구이UnityC20214이션이Node.jsB2022 1. sparta_students 테이블에서 모든 학생의 이름(name)과 트랙(track)을 선택하는 쿼리를 작성해주세요! select name, track from sparta_students 2. sparta_students 테이블에서 Unity 트랙 소속이 아닌 학생들을 선택하는 쿼리를 작성해주세요! select * from sparta_students where track'Unity' 3. sparta_students 테이블에서 입학년도(enrollment_y..

내배캠/퀘스트 2024.09.24

[SQL 걷기반] Q3. 상품 주문이 들어왔으니 주문을 처리해봅시다!

이제 상품 주문이 들어왔으니 어떤 고객에게 어떤 주문이 들어왔는지를 파악할 수 있는 orders(주문) 테이블이 아래에 있습니다.idcustomer_idproduct_idamountshipping_feeorder_date171913500002023-11-01213121100002023-11-0236541200002023-11-054100832250002023-11-05535611150002023-11-09 1. orders 테이블에서 주문 수량(amount)이 2개 이상인 주문을 진행한 소비자의 ID(customer_id)만 선택하는 쿼리를 작성해주세요! select customer_id from orders where amount>=2 2. orders 테이블에서 2023년 11월 2일 이후에 주문된 ..

내배캠/퀘스트 2024.09.23