Projects

회원 기능으로 자료실을 만들었다 이제 회원이 활용할 수 있는 부분의 기능은 다 만들어졌고 front end 부분의 꾸미기, 디자인 작업만 진행하면 된다 그리고 관리자 기능도 조금 더 추가해서 만들어야 한다   자료실자료실은 위와같이 총 4개로 만들어놨다 나중에 더 추가할일이 있으면 추가하면 되고 제목부분에 링크로 나타나는 부분도 수정해줘야 하며 너비도 수정해줘야 한다  자료실 부분은 관리자만이 글을 작성할 수 있도록 해놨기 때문에 작성자는 관리자로 나온다 그리고 다운로드 받은 파일이 있다면 다운로드 버튼도 보이도록 했다  다운로드 받을 파일이 없다면 글제목, 글 내용만 나오고 원래 게시판으로 돌아가도록 했다    혼자서 만든다고 힘들었는데 아직 관리자기능이 남아서 뭔가 다 만든거 같진 않지만...관리자 ..

Web CTF 관련된 부분을 다 만들었다 이전홈페이지에 있던 내용들을 참고해서 만들었지만 구현과정이 달라졌기에 조금 힘든부분이 있긴했다특히 게시판 부분이 많이 힘들었는데 그래도 성공했다   Web CTF Main메인 홈페이지 부분이다 처음 클릭하면 위와같이 회원들의 전체적인 세부사항이 나타난다 최근 해결된 문제에 대해서는 시간도 표시할까 고민중이다   SQL Injection다음으로 내가 풀고자 하는 카테고리로 마우스를 이동하면 아래에서 초록색의 선이 등장한다 그리고 각각의 카테고리별로 문제들이 보여지도록 하였다   게시판제일 시간이 많이 들어갔던 부분!! 이전에는 그냥 게시글 페이지로 이동해서 띄워주면 되는 간단한 방식이었는데 이번에 변경하였다 카테고리바를 위에 나두고 아래쪽에 게시판을 표시해주기로 결..

어제 오늘까지 해서 회원정보랑 나의 정보에 대해 백엔드과정은 완료하였고 프론트엔드도 위치만 대략적으로 설정했다   회원정보회원정보는 위와같이 왼쪽에는 테이블 형태로, 오른쪽에는 해당 유저의 정보가 나오도록 되어있다 다른 회원을 클릭하면 해당 유저의 정보가 나타난다   마이페이지저번과 다르게 조금 변경되었으며 최근 접속한 내용이 잘 보이는것을 확인할 수 있다

오늘은 회원정보, 관지라 History, 나의 정보에 대해 작업을 진행하였다   회원 정보우선 위와같이 작업하다가 2가지 방법에 대한 고민이 들었다 첫번째는 모든 정보를 한번에 받아오는 방식이다두번째는 해당 사용자의 영역을 클릭할때마다 정보를 받아오는 것이다 이 부분은 고민 좀 해봐야 할 것 같아서 우선 여기까지 작업했다   관리자 History관리자들이 만들었던 내용들에 대해 확인할 수 있도록 만든 공간이다 왼쪽 아래에는 관리자를 했던 기간이며 오른쪽에는 구경하기, 취약점 진단 버튼이 있다   마이페이지그리고 자신에 대한 정보를 수정할 수 있는 부분이다 아직 백엔드 부분은 구현하지 않았지만 우선 위와같이 만들어놨고 다른 모든 기능이 구현되고 조금 더 꾸밀 예정이다   P.S지금은 영역 구분하기, 백엔드..

동아리 홈페이지를 만들면서 처음으로 백엔드 작업을 시작했다 로그인, 회원가입 부분을 작성하였다   로그인 위와같이 로그인 페이지로 접속하면 처음에 로그인이 먼저 나온다 아이디를 잘못입력하면 아이디가 잘못입력되었다고 나온다-> 설계과정대로 아이디, 비밀번호 2개 모두 잘못입력해도 아이디 먼저 검사하기 때문에 아이디만 나오게 된다  아이디는 정상적으로 입력하고 비밀번호를 잘못입력하면 비밀번호가 잘못되었다고 나타난다   회원가입회원가입으로 이동해서 아이디, 비밀번호, 이름, 닉네임을 입력하고 회원가입을 시도한다 이때 동아리 회원이 아니라면 동아리 회원만 가입가능하다는 알림창을 띄워주도록 했다 그리고 가장 중요한 부분!!처음에 로그인이 나오고 뒤에 숨어있던 회원가입이 나오는데 회원가입에서 문제가 생겨 다시 작성..

동아리 홈페이지를 다시 만들기 위하여 기초적인 데이터베이스 설계까지 완료하였다 오늘은 가장 기본적인 헤더와 푸터를 만들고 로그인, 회원가입 페이지를 만들었다  홈페이지처음에 홈페이지에 접속하면 아래와 같이 기본적인 내용을 확인할 수 있도록 하였다헤더에는 로고, Home, Web CTF, 자료모음, 회원정보, 관리자 History가 카테고리로 존재한다 그리고 푸터부분에는 카피 문구와 문의사항에 대한 내용을 작성해놓았다푸터는 홈페이지에만 있으면 될 것 같아서 홈페이지에만 적용시켰다   로그인/회원가입로그인, 회원가입은 유튜브에 괜찮은 양식이 있어서 클론코딩했다 로그인 화면은 위와 같다 나중에 홈페이지가 다 완성되면 css 같은 부분을 다른걸로 바꾸는 방식으로 할 예정이다  회원가입은 위와 같이 만들었다 기존..

1학기가 끝나고 여름방학이 시작되었다 홈페이지를 만들기 위해 먼저 데이터베이스 설계를 먼저 진행하였다   VSCode ERD Editor최근에 알게 된 확장 프로그램이다 이전에는 다른 프로그램을 활용하여 데이터베이스 연결관계 같은 실습을 진행해 본 적이 있는데 이번에는 간단하게 위의 확장 프로그램을 사용하여 설계를 간단히 해보았다 이름.vuerd.json형식으로 파일을 생성하면 테이블과 관계설정등을 할 수 있고, 내가 만든 테이블에 관련된 명령어도 만들어주는 기능이 있다   설계 내용 1이번에는 조금 더 쳬계적으로 만들기 위해 크게 2가지 부분으로 구분하였다초록색 부분은 로그인, 회원가입 관련된 부분이다 당연히 prepared statement로 구현할 것이지만 그래도 언제 이 방법이 취약해질지도 모른다..

Udemy의 하루 10분으로 끝내는 UXUI 디자인을 위한 실전 피그마 Figma 강의를 듣고 실습해보았다   1. UI 기확안 작성기획과 디자인 사이의 과정이며 상세하게 적으면 더 좋다   autoflow를 검색한다  위의 플러그인을 설치한다  그리고 연결하고자하는 대상을 선택하고 shift키를 누른 후 다른 대상을 클릭하면 된다  자동으로 선이 생기며 원하는 내용을 작성할 수 있다  검색모양 클릭하면 검색화면으로 넘어가도록 연결했다  다음으로 세부적인 동작에 대한 내용을 작성해보았다  완성된 모습이다 하트버튼을 클릭했을때, 어떤 UI를 사용할지에 대해 구체적으로 적으면 개발자와 디자이너가 편해진다    강의자료https://www.udemy.com/share/109mqS/

Udemy의 하루 10분으로 끝내는 UXUI 디자인을 위한 실전 피그마 Figma 강의를 듣고 실습해보았다    1. 오토레이아웃우선 간단하게 기초적인 사각형을 3개 만들어준다  다음으로 Auto layout버튼을 눌러준다  그럼 위와같이 하나로 묶이게 된다  그리고 방향은 오른쪽으로 해놨다  사각형 사이의 간격을 20으로 설정했다  가로말고 세로로도 가능하다  세로로 여백을 추가하고 배경은 자동으로 선택되는 흰색으로 했다   세로여백은 30으로 설정했다  이제 마지막에 있는 사각형을 클릭하고 복사 붙여넣기 하면 자동으로 간격에 맞춰서 추가된다  화면이 줄어들면 아래로 내려가도록 설정할 수 있다  가장 오른쪽에 있는 화살표로 설정하면 된다    강의자료https://www.udemy.com/share/1..

Udemy의 하루 10분으로 끝내는 UXUI 디자인을 위한 실전 피그마 Figma 강의를 듣고 실습해보았다   1. 검색 및 오토레이아웃(위치 고정)우선 위와같이 기본적인 그림을 넣어준다  가운데 정렬을 해주고 그룹으로 묶어준다  다음으로 최근에 검색한 내용을 나타나도록 해준다 글자가수가 변경되어도 X 가 움직이지 않도록 하기 위해선 우선 글자 입력하는 공간을 늘려준다  다음으로 X 표시와 함께 그룹으로 묶어준다그룹으로 묶어주면 Auto Layout설정이 가능하다 Auto Layout설정을 해준다  그리고 다시 그룹으로 묶어주고 Auto Layout을 한번 더 동일하게 적용하면 된다 글자수가 늘어나거나 줄어들어도 X 표시는 그대로 있음을 확인할 수 있다  마지막으로 아래쪽에 구독자 부분을 추가해줬다   ..