programming/엑스형 프로젝트 (7) 썸네일형 리스트형 고민해결 자바 콘솔창으로는 만들었는데 자바스크립트에서 바로 띄우고 싶어서 별별 방법을 다 써봤지만... 지식+경험 부족으로 무작정 함수만 만들다가 지속적으로 실패하여 포기하려던 찰나.. 그냥 쉽게 가기로 했다 javascript prompt 창으로 입력값을 받고나서 그 값으로 제어문을 만들어서 cp조합을 내는 아주아주 간단한 기능이었는데 도저히 버튼안에 prompt창을 띄우는 함수를 담는걸 못하겠더라 심지어 나는 prompt창으로 값을 두개를 받아야해서 그러면 그 두개의 값을 따로 저장해야할지 함수를 하나로 합칠지 두개로 만들지 뭐 이런 생산성없고 짜증나기만한.. 답답함을 겪고있었는데 그냥 버튼을 포기하기로 했다. 대신 그냥 새로고침해서 prompt 창이 뜨면 값을 연속적으로 받을 수 있게 했고 버튼을 누르면 함.. 명대사 + 사진 그리드 만들기 버튼을 눌러 명대사가 랜덤으로 나오게 하는 기능은 완성했다. Alert 창을 바꾸고 싶은데 일단 조금 시도하다가 다음으로 보류했다. 중요한건 기능이지 디자인이 아니기 때문에.. 조금 아쉽지만 프로젝트 진행을 위해 다음 기능부터 구현하기로 했다. 명대사와 사진을 같이 보여주는 기능을 쓸꺼다. 대신, 처음엔 사진만 보이고 마우스를 가져가야만 명대사가 보이는 기능을 구현하려 한다. 이런식으로 대충 스케치를 해봤다. 현재 랜덤으로 나오는 명대사가 22개 이기 때문에 테이블 형식으로 맞출 수 있는 6x4 형태의 테이블을 생각해봤다. 근데 사진 뭐있나 찾아보다가 예전에 명대사 캡쳐해둔 걸 보고 하나 추가했다. 그래서 현재 23개다.. (* 객체에 대사 추가하고 콤마 (,) 안찍어서 코드가 돌아가지 않았었다. 다른거.. Alert box 디자인하기 생활코딩에서 강의 끝마다 해주신 얘기가 있다. 일단 자신의 프로젝트를 시작해보라고 배웠던 것들로 하다보면은 잘 되다가 어느순간 막히는 부분이 있을거라고 그럼 그때가 새로운 공부를 시작할때라고... 그리고 지금 그 순간이 온거 같다. Alert box를 디자인하고 싶은데 이걸 할려면 jQuery를 써야 한단다.. 안그러면 방법이 없단다.. 아직 javascript 하나만으로 좀 벅찬데 벌써 jQuery를 쓸려고 하니 좀 부담스럽다... 근데 어쩔수가 없다 alert box만 현재 느낌으로 디자인할 순 없잖아.... 일단 뭔가 잘 설명되어 있는것 같은 사이트를 하나 찾았다. www.geeksforgeeks.org/how-to-change-the-style-of-alert-box-using-css/ How t.. alert 메세지 창에 함수 실행하기 어려운 고비를 지나고 있다. 명대사를 랜덤으로 출력하는 코드는 어찌저찌 찾아서 만들어냈으나 그 함수를 alert 창에 띄우려니 무엇을 어떻게 건드려야 할지 모르겠어서 구글링을 뒤지게 하고 있다. 우선 그냥 객체의 key와 value를 띄울 수 있는 코드를 찾아냈다. let resultString = "" for (const [key, value] of Object.entries({hello: "🌎", wassup: "👀✨😍🔥"})) { resultString += `${key}: ${value}\n` } alert(resultString) 근데 이건 그냥 의미가 없다. 난 이미 객체를 활용하는 함수 코드를 짰고, 그걸 활용할 수 있는 코드가 필요하기 때문에 그래서 다시 검색한 키워드가 "call java.. 랜덤 명대사 추출 자바스크립트로 들을 수 있는 강의는 다 들었으니 엑스형 프로젝트 완성 작업을 다시 시작해 볼까 한다. 일단 내가 이제까지 만든건 html과 css만을 사용한 단순 꾸미기 수준이었는데, 이번에 구현할 기능들은 자바스크립트의 기능을 가져와야만 사용할 수 있는 기능들이다. 1. 명대사 가져오기 2. 방명록 일단... 방명록은 database를 연결해야만 구현할 수 있는 기능이기 때문에 지금 당장은 pass 하고 먼저 만만해 보이는 랜덤 명대사 추출을 시도해봤다. 아직 완벽하게 구현한건 아니지만 새로고침하면 랜덤으로 대사가 나오는 기능을 완성해서 기록용으로 적어본다. 우선 이렇게 아이디어를 짜봤다. 1. 객체에 1부터 22까지 명대사들을 하나씩 value 값에 담는다. var lines = { "1" : "명찰.. 두 번째 수정 첫 번째 버전과 달라진 것이 뭐가 있는지 기록을 해야할 것 같다. 1. 윈도우 98테마를 적용했다. - 이건 당연히 온전히 내 능력으로 한건 아니고 구글링을 통해 css 코드를 발견했다. jdan.github.io/98.css/#intro 98.css A design system for building faithful recreations of old UIs. jdan.github.io 엑스형은 2005년 배경이긴하지만 대충 그 언저리 느낌이 나려면 윈도우98 감성이 필요하다고 생각했기 때문에 굉장히 열심히 찾았다. 사실 css에 대해 아는거라곤 생활코딩에서 어찌어찌 연습해본게 다였어서 기억을 되짚어가며 만들어야 했다. 2. 시작페이지를 만들었다. - 바로 엑스형이 제목인 페이지로 접속하는게 아니라 "G.. step 1 무언가를 만들어 내는걸 가장 즐기는 인간으로 태어났기 때문에, 일단 다시 코딩을 시작했으니 내 힘으로 뭔가를 만들어 내고 싶었다. 뭔가 당연한 열망인것 처럼 아이디어가 쏟아져 나왔다. 꽤 돈이 될법한 사업 아이디어 까지도 구상했지만 그건 나중에.. 내가 정말 프로그래머로 성공 아닌 성공을 한다면 시도해볼 것이고 (내돈이 아닌 남이 투자해준 돈으로 말이다) 국비교육을 들으면서도 혼자 진행할 수 있을 법한 프로젝트들을 몇개 구상해봤다. 물론 여기에 적지는 않겠다. 왜냐 누가 보면 어떡해 내 소중한 아이디어..ㅎㅎ.. 하지만 하나는 적을 수 있다. 이미 대충 만들었기 때문에 공개가능한 프로젝트는 카테고리명에서도 알 수 있다시피 '엑스형'이 주제이다. 사실 그게 다다. 내가 이시대 최고의 현대문학으로 꼽는 hu.. 이전 1 다음
