로그인부분은 세션 기반 인증 방식이나 토큰 기반 인증 방식을 공부해보시고

구글 깃헙 이메일 연동은 google OAuth, github OAuth 같은걸 공부해보시고

개발자도구를 막는 방법은 사실상 없습니다. 자바스크립트 난독화를 해서 코드 알아보기 어렵게 하는게 최선책입니다. 혹은 중요한 작업은 서버에서 처리하면되요

1. 보안이 걱정되면 ssl 위에서 웹서버를 켜라냥. 인증서를 위조한 중간자 공격이 아닌 이상 타인에게 민감 정보를 유출할 일은 어지간하면 없어진다냥.

1-1. 대부분 타 사이트에서 자신들의 계정으로 로그인을 지원하는 플랫폼(네이버, 카카오, 디스코드, github) 들은 oauth 라는 개방된 표준을 이용해서 로그인 과정을 지원해주게 되어있다냥. 구글링 하면 많이 나오니깐 찾아보는것을 권장냥

2. 본래 자바스크립트는 서버 위에서 작동되는 스크립트가 아니다냥 html 에 의해서 자바 스크립트의 리소스 위치가 특정되서 브라우저가 다운로드 받게되고 브라우저 내부의 자바스크립트 엔진에 의해서 실행되는 구조다냥. 그쪽이 원하는건 devtools 에 그러한 스크립트가 안보이게끔 하는걸 원하는 것 같은데 이 같은 매커니즘 위에서는 그런 목표는 달성될 수 없다냥. 그러니 민감한 데이터를 처리하는 비즈니스 루틴은 서버측에서 처리하고 클라이언트에 전송되는 자바스크립트는 순전히 서버와의 통신, 프론트 엔드 구성에 중점을 둬야될꺼다냥.

2-1. 물론 devtools 그 자체를 안뜨게 하는 것이 목적이고 대부분의 툴 키디가 그게 안켜지면 어떻게 스크립트를 추출하는지 모르는 상황만을 가정하면 electron 같은 크롬 기반의 프로젝트를 이용해서 프로그램을 만드는걸 추천하지만냥, 그쪽은 웹사이트 포럼을 만든다고 하니 이 옵션은 사용할 수 가 없겠네냥

3. 웹서버를 열었는데 접속이 안된다는건 알겠다냥 근데 질문에 나와있는 정보들만으로는 왜 웹서버가 작동이 안되는지를 유추하기란 힘들다냥 후속 답변을 원하면 관련된 모든 정보를 쓰는것이 좋을꺼다냥

4. 자바스크립트를 이용해서 상태 변화를 주면 된다냥. isLoggedOn 같은 불린 형식의 변수에 로그인 상태를 담아서 로그인 또는 회원가입 이미지를 바꿔치기 하는 식으로 구현할 수 있다냥.

질문 자체가 속을 파고드는 질문이 아니였기 때문에 답변에도 한계가 있다는걸 알아줬으면 한다냥

열심히 코딩판치 해라냥 '^'b

1. 보안은 SSL 하시면 됩니다

2. 서버 스크립트는 Source 들어가도 소스코드 안보입니다(서버스크립트는 PHP 최신버전(구버전 예외), Node.js같은것들입니다)

3. GitHub, Google 로그인같은건 OAuth라는것을 사용하기 때문에 검색해보시면 하실수 있으실겁니다!!!

+ (수정) OAuth 처음하시면 힘드실수도 있어요. 물론 저도 그랬고요. 갑자기 안될때가 있지만... 그런것들은 문서를 다시 천천히 보시면 될 듯합니다

4. 127.0.0.1이나 localhost로도 연결이 안되는건 포트를 8080같은걸로 해두었거나, 서버가 닫혀있는겁니다. (localhost로 바로 접속하게 하려면 80포트가 열려있어야 됩니다)

5. 로그인 전 화면과 로그인 후 화면을 다르게 하는 방법은, 서버스크립트에서 설정해주는겁니다.

아 그리고 서버스크립트를 사용하는 이유는 보안때문에 Source에서 소스코드를 보지 못하게 하는거에요

어.... 이건 설명이 안되있을수도 있으니 밤냥(?)님의 설명 읽어보시는걸 추천해요

127.0.0.1로 서버를 열었는데도 안들어가지는건 포트 번호를 치지 않아서 그럴 수 있습니다.

아파치를 쓰실테니까 따로 포트번호를 넣어주신게 아닌 이상 127.0.0.1:8080 또는 localhost:8080으로 접속해보시면 될 것 같습니다.

크롬, 오페라, 파이어폭스 등등 많은 웹브라우저가 소스보기를 지원하는데 이걸 막을 수 있는 방법은 없습니다. .

js는 난독화 작업을 해서 막을 수 있지만 html과 css같은 경우는 힘들다고 볼 수 있습니다.

다른 부분은 좋은 글들이 많아서 참고하시면 될 것 같습니다~

좋은 커뮤니티 포럼 만드세욥!