본문 바로가기

웹개발11

비주얼 스튜디오 코드 익스텐션 28개 추천 / 확장 프로그램 설치 및 웹 개발 환경 설정 (Visual Studio Code) / VS Code HTML, CSS Extension 목차 오늘은 흔히 웹 공부를 할 때 사용하는 텍스트 에디터인 '비쥬얼 스튜디오 코드(Visual Studio Code)의 확장프로그램'을 소개할 것이다. 나도 매번 개발하는 컴퓨터와 노트북, 개발 환경이 계속 바뀌기 때문에 저번에 설치했던 확장프로그램이 정말 유용했는데 기억이 나질 않아서 내가 지속적으로 활용하고자 이렇게 글로 작성하게 되었다. 그럼 바로 정말 내가 사용하는 웹 개발에 유용한 익스텐션을 추천하도록 하겠다. 우선 해당 확장 프로그램은 '비쥬얼 스튜디오 코드'가 깔려 있어야 한다. 해당 다운로드는 아래 링크를 통해 자세히 알아보도록 하자. Visual Studio Code 쉬운 설치 Visual Studio Code 쉬운 설치/ VSCode 코드 편집기 추천 및 설치/ Vscode 한글 설정.. 2022. 5. 18.

[웹기초] 브라우저란 무엇인가, HTML이란, CSS란, JavaScript란 무엇인가/ 웹개발 기초부터 공부 기본기를 갖추지 못 하면 나중에 어려운 문제에 직면했을 때 무너질 가능성이 크기에 이제부터는 정말.. 우리가 흔히 사용하는 브라우저가 무엇이고.. 등등 기초부터 차근차근 공부해 가보도록 하겠습니다. 우리가 사용하는 크롬, 인터넷 익스플로러, 사파리 등을 뜻하는 '브라우저'는 무엇일까? 브라우저에는 아래와 같은 종류가 있다. 여기서 1개 이상은 사용해보았을 것이다. '브라우저(Browser)'란 무엇인가? 브라우저는 간단히 말하면 '웹 정보를 화면에 표시하는 소프트웨어'를 말한다. Browse 는 둘러보다, 훑어보다, 인터넷을 돌아다니다라는 뜻을 가지고 있는 영어단어로, 브라우저가 무엇인지 영어 해석으로 조금 유추해볼 수 있을 것 같다. 조금 더 깊게 들어가면 브라우저는 인터넷 상에 연결된 '웹 서버'에 .. 2021. 6. 17.

웹 / 페이스북 좋아요 기능 웹 사이트 만들기(2) - DB에 있는 데이터를 활용해 클라이언트에게 시각화하기 내용이 길 것 같아, 게시글을 나누어 프로젝트를 진행해보겠다. 개발환경 설정 및 데이터베이스(DB) 준비는 아래 참고 ▼ 페이스북 좋아요 기능 웹 사이트 만들기(1) - 개발환경 설정 및 크롤링을 통한 데이터베이스(DB) 준비 기본 틀 웹페이지의 모습이다. 디자인 부분에 있어서 조금 허접(?)한 느낌이 있지만 좋아요나 없애기 등, 필요한 기능에 대해서는 충실한 편이다. 웹 페이지 HTML 기본 틀 index.html 파일 / My favorite actor . HTML 기본 틀 코드 My Favorite Actor🙈 내가 좋아하는 배우 순위♥ 문채원 (좋아요: 1004) 오늘의 연애(영화제목) 좋아요 없애기 해당 프로젝트에서는 app.py 파일에서 서버와 API를 제공하고, 데이터베이스(DB)를 활용할 .. 2021. 6. 10.

가비아(gabia) 도메인 등록/ 500원에 도메인 만들고 등록하기/ 도메인 등록 대행 서비스/ 도메인 500원 이벤트 우선 설명 전에 현재 가비아(gabia)에서 도메인을 무려 550원에 등록할 수 있도록 이벤트를 하고 있다! !!! 가비아(gabia)를 사용하기 전에 가비아가 무엇인지 부터 알아보자. 가비아(gabia)란? 가비아(gabia)란 이전과 같이 설치해야 하는 프로그램이 아니라, 판교에 있는 클라우드 기업이다. 네이버의 힘을 빌려보자. 요약을 보면 '도메인 등록 대행 및 서버 호스팅을 주력 사업으로 하는 정보기술(IT) 업체'라고 한다. 가비아(gabia)에 대해서 알아봤는데, 우리가 가비아에서 사용하고자 하는 것은 '도메인'이다. 가비아를 통해 도메인을 등록하면 가비아에서 대행으로 등록해주는 것이다. 그럼 여기서 도메인(domain)이란? 숫자로 이루어진 인터넷상의 컴퓨터 주소를 알기 쉬운 영문으로 표현한.. 2021. 6. 8.

웹 / 쇼핑몰 서버와 데이터베이스(DB) 관리하기/ 쇼핑몰 주문자 정보 관리하기/ 웹 쇼핑몰 만들어보기 이번 글에서는 쇼핑몰에서 클라이언트가 주문한 내용을 데이터베이스에 저장하고, 다시 클라이언트에게 보여주는 것을 해볼 것이다. 그 전에 쇼핑몰에 대한 기본 틀이 있어야 한다. 직접 만들어도 좋지만 예전에 만들어둔 것이 있다. 쇼핑몰 기본 틀 가져오기/ 아래 클릭▼ 웹 / 쇼핑몰 기능 추가하기 / Ajax와 jQuery로 쇼핑몰에 환율추가 해보기/ 환율 API 활용한 쇼핑몰 웹 / 쇼핑몰 기능 추가하기 / Ajax와 jQuery로 쇼핑몰에 환율추가 해보기/ 환율 API 활용한 쇼핑몰 이전에 HTML, CSS, JavaScript에 요소들로만 제작하였던 웹 쇼핑몰(?) 비스무리한 것을 다시 한번 더 활용해보고자 한다. HTML, CSS, JavaScript와 함께 이전 글에서 쭉 다뤄왔던 Ajax와 jQuer.. 2021. 6. 7.

웹 / 나만의 영화저장 웹 만들기 / 영화 OpenAPI / Ajax와 jQuery를 활용한 예제/ 영화 API 활용한 웹 개발 웹 / 제이쿼리(jQuery)란 무엇인가/유용한공부사이트/함께해보는예제/쉬운설명/ w3schools 웹 / 제이쿼리(jQuery)란 무엇인가/유용한공부사이트/함께해보는예제/쉬운설명/ w3schools 다음은 자바스크립트보다 더욱 간결하게 웹 기능을 사용할 수 있는 '제이쿼리(jQuery)'에 대해 알아볼 것이다. jQuery 란 무엇인가? 제이쿼리는 '경량의 JavaScript 라이브러리'라고도 한다. 기존과 다 parkjh7764.tistory.com 이번에는 이전 글에서 잠깐 포스팅했던 골격을 활용할 것이다. 이전에는 '포스팅박스 닫기' 버튼을 누르면 아래의 URL 과 기사 내용을 입력하는 부분이 사라지는 것을 연습했다면 이번에는 그 아래, 포스트들을 이전부터 다뤘던 jQuery와 Ajax를 통해 다.. 2021. 5. 26.

웹 / 쇼핑몰 기능 추가하기 / Ajax와 jQuery로 쇼핑몰에 환율추가 해보기/ 환율 API 활용한 쇼핑몰 이전에 HTML, CSS, JavaScript에 요소들로만 제작하였던 웹 쇼핑몰(?) 비스무리한 것을 다시 한번 더 활용해보고자 한다. HTML, CSS, JavaScript와 함께 이전 글에서 쭉 다뤄왔던 Ajax와 jQuery를 사용해서 쇼핑몰에 기능을 추가하고자 한다. 이전에 간단하게 제작하였던 웹 쇼핑몰 주문 부분에 대한 코드 전부를 맨 아래에 첨부해놓겠다. 아직 미숙한 부분이 많아 불필요한 코드 부분이 있을 가능성이 있으니 복사해서 사용하시는 분은 효율적으로 고쳐서 써보면 좋을 것 같다. 혹시나 못 본 분들을 위해 이전 글에 어떤 방식으로 제작을 해보았는지 참고하면 좋을 것 같다. 웹 / 처음 제작해보는 나만의 웹 쇼핑몰 사이트 - HTML CSS JS / 자세한 설명 웹 / 처음 제작해보는 나.. 2021. 5. 22.

웹 / jQuery와 Ajax 예제 연습/ 고양이 사진 API 랜덤으로 바뀌는/ 강아지 사진 API/ OpenAPI/ 쉬운 예제와 설명 이번에 활용할 API에서는 고양이 사진을 데이터로 주는 API를 활용하는 것이다. 여기서 특이한 점은 해당 API에서 고양이 사진을 랜덤으로 준다. 이를 활용해볼 것이다. 아래의 구조는 API URL을 타고 들어가면 볼 수 있는 구조인데 이전에 다뤘던 API와 다른 점은 여러 개의 딕셔너리가 아니라 리스트 형태로 넘어온다. 그렇기 때문에 사진 주소를 활용하기 위해서는 API 주소는 아래에 첨부해 놓았다. 취향에 따라 고양이, 강아지를 선택하여 활용해보면 좋을 듯하다. 고양이 사진을 랜덤으로 주는 API API URL : https://api.thecatapi.com/v1/images/search 강아지 사진을 랜덤으로 주는 API https://api.thedogapi.com/v1/images/searc.. 2021. 5. 22.

웹 / jQuery와 Ajax 예제 연습/ 따릉이 API 활용해보기/ 서울시 OpenAPI/ 쉬운 예제와 설명 이전 글들에서 다뤘던 jQuery와 Ajax를 사용해보자. 이번에는 서울시에서 사용되고 있는 공유 자전거 '따릉이' API를 활용해 연습을 해볼 것이다. url : 서울시 열린 데이터 광장 / 공공자전거 실시간 정보 http://data.seoul.go.kr/dataList/OA-15493/A/1/datasetView.do 서울특별시 공공자전거 실시간 대여정보 서울특별시 공공자전거 실시간 대여정보입니다. 대여소별 실시간 자전거 대여가능 건수, 거치율, 대여소 위치정보를 제공합니다. 호출시 시스템 부하로 한번에 최대 1,000건를 초과할수 data.seoul.go.kr 위의 주소로 들어가게 되면 '서울 열린 데이터 광장' 사이트가 열린다. 서울특별시 공공자전거인 '따릉이'의 OpenAPI를 가져올 수 있다.. 2021. 5. 22.

이전 1 2 다음

티스토리툴바