javascript

프로젝트 생성 및 디렉토리 구성 자 심리테스트 만들기를 본격적으로 시작해보자. 가장 먼저 프로젝트를 생성하자. 필자는 GUIDE라는 이름의 프로젝트를 생성하였고 위와 같이 디렉토리를 구성하였다. GUIDE index.html script.js style.css 이름 설명 index.html 메인 페이지 script.js 페이지에서 기능을 동작하게 하기 위한 자바스크립트 파일 style.css 페이지를 꾸미기 위한 css파일 사실 아주 간단한 프로젝트기 때문에 따로 파일을 분리할 필요가 뭐가 있겠냐고 생각할 수 도 있지만. 필자는 깔끔한 것을 좋아하기 때문에 코드양이 적더라도 분리하였다. 기본적인 html의 소스코드다. 설명할 것도 딱히 없지만, 굳이 설명하자면 link 태그를 통해 style.css 파일..

시작하기 앞서.. 친구들끼리 MBTI 테스트 혹은 심리테스트를 웹페이지에서 진행하고, 결과물을 공유해서 서로의 성향을 비교해 재미를 느껴본 경험은 다들 한 번쯤 있을 것이다. 예시) 코인 투자 성향 심리 테스트 https://cjwoov-invesetment-type.netlify.app/ 글을 쓰게된 계기도 나도 그런 테스트를 한 번 만들어보고 싶었고 경험을 공유하면 좋을 것 같아서 글을 남긴다. 사전 지식 해당 과정은 HTML, CSS, JavaScript 언어를 사용한다. HTML, CSS, JavaScript에 대한 많은 지식도 필요 없으며 아주 기본적인 개념만 알고 있으면 된다. 그렇게 어렵게 만들지 않을 것이기 때문에... 준비물 Visual Studio Code : 소스코드 작성을 위한 에디..

test.json(예시 파일) TestFile = { "test": [ 1, 2, 3 ], "persons": [ { "name": "홍길동", "age": 14 }, { "name": "최진우", "age": 31 } ] } 여기서 주목해야 할 것은 기본적인 JSON 포맷에 TestFile이라는 변수명을 붙여서 =로 할당해줘야 javascript에서 로드할 수 있다. JSON 파일 읽어오기 1번째 라인처럼 json이 있는 파일을 명시해준 뒤 test.json에 할당해준 변수명으로 JSON을 읽어와 파싱한다.