전체 글 99

Mooming | Front 작업

지난주에 프론트 작업은 얼추 마무리가 되었다. 내가 담당한 페이지는 메인페이지, 상세페이지, Footer부분.. 근데, 메인페이지에 찜하기 버튼이 활성화가 안되어서 며칠째 붙잡고 있는 중이다... 그리고 메인페이지의 카드 리스트를 carousel 로 보여주고 싶은데, bootstrap으로 간단하게 구현할지, javascript로 구현할지 고민중이라 그 부분만 해결하면 진짜 끝이다.! + 상세 페이지는 레이아웃 배치때문에 골머리 앓는 중 ㅠㅠ 마진값이 잘 적용되지 않아서 좀 연구해봐야할 듯 하다.

project/mooming 2023.10.30

Windows 11에서 VirtualBox (가상머신) 설치 및 리눅스 설치

VirtualBox 설치해서 노트북 내부에 가상 컴퓨터를 만들고 리눅스를 설치해보겠다. 가상머신 설치 우클릭 후 관리자 권한으로 실행하기 next 클릭 install 후 환경설정에 들어가기 네트워크에 들어가면 비어있는데, 우측 + 눌러서 새로만들기하면 NatNetwork가 생성된다. 위에 새로만들기를 누르면 가상 머신을 만들 수 있다. 나는 경로는 그냥 디폴트로 뜨는 경로로 설정했다. ( 기본 c 드라이브에 30GB 이상 저장 공간이 있음 ) 만약에 여유로은 드라이브로 옮기고 싶으면 각자 원하는 곳에 설정하면 된다. 종류 : Linux 버전 : Other Linux(64-bit)로 설정했다. 각자의 메모리 사정에 맞게 설정하면 된다. 나는 32GB 중 가상 머신에 4GB 를 할당해줬다. (1024mb*4..

Linux 2023.10.30

Do It! 인터랙티브 웹 페이지 만들기 | Chapter06 정리

Chapter 06은 드디어 자바스크립트를 다룬다. 솔직히 css 너무 어려웠다 ㅠㅠ 물론 js도 너무 어렵다 ㅜㅜㅜㅜ Javascript 란? 간단하게 설명하자면 웹페이지에 생동감을 넣어주기 위해 만들어진 언어이다. 다양한 이벤트 (ex. 마우스 클릭) 로 어떠한 동작을 하도록 할 수 있다. html 파일에서 자바스크립트를 사용하는 방법은 크게 두 가지이다. 1. HTML 파일 내부에 자바스크립트 연결하기 이렇게 위의 비슷하게 img 태그에 onmouseover, onmouseout 속성을 적용하여 hover를 구현할 수 있다. 같은 요소에 이벤트 한꺼번에 연결하기 html item1 item2 item3 item4 js const list = document.querySelectorAll(".list..

스터디/front 2023.10.26

에러 | jinja2.exceptions.TemplateNotFound: 해결 방법

html 파일을 찾지 못하고 이런 에러가 발생할 때 원인은 [ flaskEx03.py ] from flask import Flask, render_template # [주의] 실행파일과 같은 층위에 template 폴더를 만들고 그 폴더에 html 파일을 배치해둔다! app = Flask(__name__) @app.route("/") def index(): return render_template('demo.html') if __name__ == '__main__': app.run() 폴더명이 잘 못 되었을 가능성이 있다. render_template()는 루트 경로에서 templates 라는 폴더안에서 view 파일을 찾는데, 폴더명을 templates 라고 지정하지 않았을 때 오류가 나기도 한다. 이..

Python 2023.10.26

Javascript | 회원가입 유효성 검사

유효성 검사는 보통 JS로 쓴다. [ html ] 아이디 패스워드 패스워드 확인 email [ javascript ] (form 에서 묶여있는 name이 지니고 있는 속성들을 가쟈온다..) 여기서 this는 내가 입력받은 값을 지칭하는 것. (Form 에서,,,) this 키워드 객체 자신을 가리키는 자바스크립트 키워드이다. DOM 객체에서 객체 자신을 가리키는 용도로 사용 DOM 객체 배열들을 변수로 선언해서 검사했다.

FE/javascript 2023.10.25

무밍 프로젝트(1)

새롭게 시작하는 프로젝트... 지난번에 면접을 보면서 포트폴리오를 개선시켜야겠다는 마음이 커졌다, 그래서 이번달에는 기존에 없는(?) 서비스를 기획해서 배포까지 해보려고한다. 참고로 이번 프로젝트는 2인 프로젝트이다. (그래서 그런가 속도가 빠르다 ) 지난 주말에는 기획을 마무리 짓고. 이번주에 디자인 작업과 front 작업을 마무리 할 예정이다...( 물론 앞으로 수정할 일이 많겠지만...ㅎ) (이번에 DB는 oracle 말고 mysql을 써보려고 한다.)

project/mooming 2023.10.24

Do It! 인터랙티브 웹 페이지 만들기 | Chapter05 정리

Chapter 5는 flex 요소에 대해 집중적으로 다루는 장이다. 우선 flex를 사용하기 위해 필요한 속성과 속성값을 정리해보겠습니다. 부모 요소에 flex 적용하기 속성명 속성값 설명 display flex 자신은 블록 속성을 유지하면서 자식 요소에 flex 환경 설정 inline-flex 자신을 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정 flex-direction row flex의 기본축을 가로로 지정한다. column flex의 기본축을 세로로 지정한다. row-reverse 자식 요소 콘텐츠를 가로 역순으로 정렬한다. column-reverse 자식 요소 콘텐츠를 세로 역순으로 정렬한다. flex-wrap nowrap 자식 요소의 줄 바꿈을 하지 않는다. wrap 자식 요소의 ..

스터디/front 2023.10.19