미새문지

이전 글에서 리액트 라이브러리의 기본 설정들을 간단하게 해봤습니다 이번 글에선 설정을 완료하여 웹브라우저를 잘 실행시켜보겠습니다 먼저 React의 기본 주소와 포트는 localhost:3000 입니다 localhost는 본인의 IP주소이며, 3000은 127.0.0.1:3000 입니다 주소는 변경도 가능하여 밑에서 설명하겠습니다 npm i란? node_modules가 없는 상태로 전달되며 git에 있는 클론을 받아도 같은 형태입니다 이런 형태의 파일은 package.json이라는 파일이 있으며 리액트의 모든 기능을 총괄하는 역할을 하는 파일입니다 package.json의 코드입니다 위에서부터 이 폴더의 이름과 버전, 등등이 작성되있고 dependencies라는 코드는 의존성을 부여한 것으로 node.js..

자바스크립트 강의가 끝나고 리액트 강의가 시작했습니다 리액트가 프론트엔드의 메인이라고 할만큼 중요하고 복잡하다고 하여 열심히 따라잡을 예정입니다 리액트란? - 사용자 인터페이스를 만들기 위한 자바 스크립트의 라이브러리 중 하나이며, 모듈형 개발로 빠르게 지원이 가능하고 라이브러리 특성상 붙여 사용하기 때문에 간편하여 프론트엔드의 표준으로 자리 잡았습니다 이러한 리액트를 사용하기 위해 vscode에서 기본적인 설정을 해야합니다 먼저 터미널을 실행할 폴더안에 리액트 파일을 만들어야합니다 npx create-react-app "파일 이름" 으로 폴더를 생성해줍니다 여기서 npx는 npm, yarn과 같은 프로젝트 패키지 관리툴입니다 create-react-app은 CRA라고 부르며 react에서 따로 설치하지..

저번글에서 전체적인 홈페이지의 div구조와 이벤트 구상을 하였습니다 구상한 이미지를 보며 조원들과 홈페이지 제작을 완료했습니다 구상한 이미지에서 애매하거나 좀 부족한 부분은 빼고 구현했습니다. 원래 개인페이지도 각자 맡아 링크를 붙이려 했었는데 프로젝트 기간이 생각보다 짧은관계로 메인홈페이지에 다 쏟아부었습니다.. 구현한 이벤트의 이미지입니다 프로젝트 시간만 넉넉하게 잡았으면 마음같아서는 부족한 이벤트랑 개인페이지까지 같이 구현을 하고싶었는데 다음에 배우는 리액트가 제일 중요한 파트여서 js를 이용한 2차 홈페이지는 여기까지 만들기로 했습니다 다음은 리액트에 대한 공부와 프로젝트에 대해 작성하겠습니다

저번에 이어 중고나라가 어플리케이션에 최적화되어있어 새로 홈페이지 구조를 짜기로 했었습니다 먼저 전체적인 div구조 상단부터 헤더 부분과 광고 부분, 실시간 물품 부분, 거래게시판, 푸터, 사이드바로 구성되어 있습니다 헤더는 두 줄로 구성했는데 첫 번째 줄은 어느 홈페이지에 가든 보이는 메인로고와 검색창 그리고 내 정보가 있고 두 번째 줄은 메뉴 카테고리입니다 첫번째 헤더에는 검색창에 input을 넣어 텍스트를 입력가능하게 만들고 내 정보에는 텍스트대신 아이콘을 넣어 잘 꾸며줍니다 두번째 헤더에는 카테고리만 있되 카테고리 좌측의 목록 아이콘을 누르면 숨겨진 카테고리가 밑으로 내려오며 마우스로 가져간 목록은 검은색에서 주황색으로 글자가 변경됩니다. 그리고 각 카테고리 부분마다 다른 하위 ..

1차 프로젝트가 끝나고 2차로 넘어왔습니다 1차때는 배운 html 과 css만으로 열심히 만들었었고 현재 자바스크립트까지 배우고있는 단계에서 아마 2차 프로젝트는 자바스크립트까지 병행하여 이벤트까지 구현하는게 목표입니다. 저희 팀은 원래 당근마켓을 모티브로 만들려 했었으나 요즘에는 대부분 휴대폰 어플로 해결이 가능하여 pc홈페이지보단 모바일 앱으로 만드는 곳이 많아졌습니다 그래서 당근마켓은 따로 웹 페이지가 안보이더라구요 다른 사이트도 찾아보다가 중고나라라는 홈페이지를 봤는데 중고나라도 다른 사이트처럼 어플만 관리하지만 모바일 화면 자체를 홈페이지로 볼 수 있게 나와있습니다 그래서 생각한게 모바일 홈페이지를 분해해서 따로 pc홈페이지처럼 구현을 해보는게 어떻겠냐 하여 새롭게 만들어보려고 합니다 현재 중고..

메인홈페이지 끝나고 각자 다른 카테고리를 골라 만드는데 저는 한옥마을의 사진갤러리 사이트를 만들었습니다 단순히 사진만 많고 이벤트가 적어 만들기 괜찮았습니다 실제 한옥마을 사진첩 홈페이지 만든 사진첩 홈페이지 개인페이지 사진첩 html 코드 더보기 한국어 ENGLISH 日本語 中國語 이용안내 전주한옥마을소개 체험 콘텐츠 문화 공연 행사 한옥마을 사진 한옥마을 영상 한옥의 별 스탬프투어 전주한옥마을 풍경 한옥마을 사진 전주한옥마을 풍경 경기전 돌담길의 야경 한옥마을 공식 포토존! 경기전 돌담길 야경은 이런 모습이에요~~ 한옥마을 철쭉 한옥마을 곳곳마다 계절꽃이 아름답게 피었어요 태조로 한옥마을에 오셔서 고즈넉한 밤 분위기를 꼭 느끼고 가세요~ 오목대 야경 산책도 하고 오목대 야경도 즐기러 오세요~~^^ 오..

div구조를 구상한대로 VSCode로 html과 css를 이용해 홈페이지를 만들었습니다 더보기 한국어 ENGLISH 日本語 中國語 이용안내 전주한옥마을소개 체험 콘텐츠 문화 공연 행사 한옥마을 사진 한옥마을 영상 한옥의 별 스탬프투어 한옥마을 문화시설 전통, 문화, 예술, 역사이야기 한옥마을 문화유적지 여기는 꼭 가봐야 해! 한옥마을 이색체험 다양한 볼거리, 즐길거리 한옥마을 체험콘텐츠 더보기 전통공예 생활공예 액세서리,예술공예 쓰고,그리는 체험 예절체험 교육·강좌 전통놀이 체험 음식 체험 한옥숙박체험 한복 체험 한옥마을 상설 콘텐츠 안내 더보기 전주대사습청 토요상설공연 4월~5월 / 매주 ( 토 ) 전주대사습청 오늘의 행사일정 펼쳐보기 05월 21일 1 2 3 4 5 6 7 8 9 10 11 12 13..

조원들끼리 구상한 모티브 홈페이지는 전주 한옥마을 홈페이지입니다 첫 프로젝트인만큼 따라할수 있을 정도의 적당한 구조와 적은 이벤트가 있는 홈페이지를 찾아 회의해보다가 한옥마을로 결정하게 되었습니다 한옥마을 메인 홈페이지 div 각 조원들끼리 홈페이지 div구조를 잡아 제일 잘 만든 조원의 div구조를 사용합니다 위에 제꺼는 기본 구조만 잡고 내부의 세부적인 구조는 안잡아서 다른 조원거를 사용하게 되었습니다 최종 div 구조 이제 구조를 잡았으니 VScode로 구상한 div 코드를 작성해야합니다 코드와 실행홈페이지창은 다음 게시물에 올리겠습니다