본문 바로가기

HTML7

Moviepedia & Foodit 프로젝트, 리액트 코드잇 'React로 데이터 다루기' 토픽을 따라 하며 완성한 프로젝트 2가지로하나는 Moviepedia이고, 다른 하나는 Foodit입니다. 따라하기는 했지만, 여전히 리액트는 어렵게 느껴지는군요. 두 프로젝트는 한번 더 복습하면서 코딩을 직접 해봐야겠습니다.^^ Moviepedia : https://github.com/ldh52/React/tree/main/moviepediaFoodit : https://github.com/ldh52/React/tree/main/foodit 2024. 10. 29.
가위바위보 & 주사위 게임, 리액트 코드잇 'React 웹 개발 시작하기' 토픽을 공부하며 만든 프로젝트입니다.토픽 마지막에는 자신이 css와 jsx를 이용해 화면을 구성하도록 되어있는데,아직 혼자 화면을 구성하기에는 부족한 점이 있어,마지막 화면은 좀 더 실력이 붙은 다음에 하는 걸로... 가위바위보 게임은... 컴퓨터와 가위바위로를 하면 이긴 횟수와 승패 여부를 기록주사위 게임은... 승패 여부, 나온 주사위 숫자 기록, 한 번 게임할 때 마다 배점을 주어 누적 점수 계산 등의 기능이 담겨 있습니다. 두 프로젝트 모두 동적으로 웹 개발이 가능한 프로젝트인데요, 따라하기만 해도 재밌고 신기하네요.  가위바위보 게임 : https://github.com/ldh52/React/tree/main/rock-scissor-paper주사위 게임 :.. 2024. 10. 25.
유기동물 입양 페이지, 부트스트랩 부트스트랩을 이용해 '유기동물 입양' 페이지를 만들었습니다. 이 페이지에 DB는 연동되어 있지 않습니다.   부트스트랩이 적용되어, 카드와 모달창이 동적으로 작동합니다.   카드에서 담아 온 정보는 모달창에 전달되고, 모달창에서 입양자 이름을 입력하면... DB나 블록체인으로 넘어가도록 되어있는 페이지입니다. 참, 이 페이지는 블록체인 과정 수업을 하면서 배운 내용입니다. 수업이 진행되면 이렇게 프런트앤드 부분과 블록체인을 연결해 사이트를 구축할 수 있다고 합니다. 부트스트랩을 이용해 동적인 페이지를 만드는 것... 재밌고 신기한데요! 깃허브 : https://github.com/ldh52/javascript/tree/main/petAdoption 2024. 10. 23.
미니 블로그, 리액트 인프런 '처음 만난 리액트(React)' 강의를 듣고 만든 포트폴리오입니다.프런트앤드 미니 블로그인데요, DB와 연계한 listCRUD 기능은 구현되어 있지 않습니다.    블로그 글 목록 보여주기, 블로그 글 작성하기, 댓글 작성하기 등의 기능을 구현하였습니다. 자바로 listCRUD 기능을 구현한 적이 있는데, 리액트를 이용해 이렇게 프런트앤드로 구현할 수도 있군요. 다음에는 자바로 만든 게시판을 포스팅해야겠습니다. 짧은 시간이었지만, 인프런을 통해 리액트를 공부할 수 있어 큰 도움이 되었습니다. 코드잇에서도 강의를 듣고 있는데, 코드잇에는 '주사위 게임' 프로젝트가 있어 곧 만들어 볼 예정입니다.  인프런, 좋은 강의 감사합니다. 깃허브 : https://github.com/ldh52/React/t.. 2024. 10. 23.
아바타 꾸미기, 자바스크립트 제 첫 포트폴리오가 뭐가 될까 궁금했는데,인터랙티브 자바스크립트 프로젝트, '아바타 꾸미기'가 됐군요.  아바타의 피부 톤, 머리 종류, 머리색, 옷, 액세서리를 꾸밀 수 있는 프로젝트인데요, 자신이 꾸민 아바타는 저장하고, 다운로드도 받을 수 있습니다. 자바스크립트를 공부하면서 '인터랙티브 자바스크립트' 부분이 어려웠는데, 이렇게 프로젝트로 구현할 수 있다니 신기하기만 합니다. 이 프로젝트는 코드잇 토픽을 따라 만들었는데, 이 프로젝트에 사용한 코드들은 다른 곳에서도 유용하게 사용할 수 있을 것 같습니다.  블록체인 과정에서도 자바스크립트를 활용한 앱을 만들 계획인데, 이 프로젝트 만든 경험이 도움이 될 것 같습니다. 깃허브 : https://github.com/ldh52/javascript/tree/.. 2024. 10. 22.
비주얼스튜디오에서 'Emmet' 사용으로 코딩을 쉽고 재밌게 Emmet이란?HTML과 CSS 문서를 빠르게 작성할 수 있게 도와주는 편집기의 확장기능이다.몇 자를 적고 TAB 또는 ENTER키를 누르면 자동적으로 나머지 코드를 생성시켜 주는 기능이다. 비주얼스튜디오에서 html을 작성할 때 Emmet을 사용하면 코딩을 쉽고 재밌게 할 수 있다.  css 식별자를 입력하면... 바로 코드를 생성시켜 준다. 예를 들어, 비주얼스튜디오에서 'div'만 입력하면... 자동으로  아래처럼 코드를 만들어 준다.이를 확장해서div.class1 이렇게 입력하면, 다음과 같은 코드가 생성된다.  편리한 Emmet 기능... 적극 활용해서 재밌게 코딩하자![Emmet 사용 예]div>div.class-A div#myID(h1+h2>p)+div>div 2024. 10. 15.
html과 css 공부 html과 css를 안다고 생각했지만, 제대로 공부한 적은 없었는데,이번에 코드잇을 통해 제대로 공부를 합니다.  세부적인 부분까지 설명해 주어,홈페이지 제작할 때 유용하게 사용할 수 있겠어요.  코드잇, 쉬우면서도 정말 체계적인데요! 2024. 9. 25.

티스토리툴바