팀프로젝트(팀소개 페이지)

<main.js>

function hideNshow(i,s){
	// if(s){
	// 	$('#_'+i).hide();
	// }else{
	// 	target_time=Date.now()
	// 	setTimeout(() => $('#_'+i).show(),200)
	// }
}

$(document).ready(function () {
	console.log('js active')
	listing();
});

function listing() {
	fetch('/data').then((res) => res.json()).then((data) => {
		console.log(data)
		let rows=data['result']
		$('.container').empty() // sellector(컨테이너) 수정필요
		let temp_html = `
			<div class = "commonBoxStyle box1">
				<div class="overlay">
					<div class="contents" id="_0">
						In the ever-evolving world of IT security, online criminals are continuously looking for new ways to gain access to your private information. Research shows the days of one-word passwords are numbered and taking their place are passphrases – multiple word phrases using letters, symbols and spaces to create keys that are nearly impossible to crack.
					</div>
				</div>
			<a href="../templates/index.html">
				<img class="Detail1" src="https://media.kasperskycontenthub.com/wp-content/uploads/sites/103/2016/10/06233221/shutterstock_96838054.jpg" />
			</a>`
		$('.container').append(temp_html)
		let i =2;
		rows.forEach((a) => {
			let name = a['name']
			let age = a['age']
			let gender = a['gender']
			let mbti = a['mbti']
			let shortDesc = a['shortDesc']
			let thumbnail = a['thumbnail']
			//프론트 디자인 양식에 맞춰 수정필요
			let temp_html = `
				<div class = "commonBoxStyle box${i}">
            		<a href="/profile/${name}/">
						<div class="overlay">
                			<div class="contents" id="_${i}">
								<h2>이름: ${name}</h3>
								연령: ${age}<br>
								성별: ${gender}<br>
								MBTI: ${mbti}
								<br><br>
								<h3>한줄 소개</h4>
								${shortDesc}
                			</div>
            			</div>
					</a>
            		<a href="/profile/${name}/">
                		<img class="Detail1" src="${thumbnail}" />
            		</a>
        		</div>`
			$('.container').append(temp_html)// sellector(컨테이너) 수정필요
			i++;
		});
	})
}

위 코드는 메인페이지 자바스크립트이다.

자바스크립트를 따로 빼내어 관리할 수 있도록 새로운 파일을 만들어 작성을 시도했다. 다른 팀원분들의 도움으로 이전 최대 고비였던 깡코딩을 jquery와 반복문의 사용으로 해결되게 되었다.

작동 테스트결과 작동하는것을 확인 하였고, 코드를 한줄 한줄 뜯어서 보면 모두 이해가 되는데 어째서 작성하던 당시에는 전혀 생각하지 못한걸까... 아는것과 응용하는것은 확실히 다르다는것을 오늘 느끼게 되었고, 응용을 위해선 많은 경험과 시행착오가 있어야만 한다는 것을 깨닫게 되었다.

위에 보면 i=2로 나와있는데 이는 본래 계획과 다르게 첫번째 div박스를 제목으로 사용하자는 의견으로 결정이 났기 때문에 첫번째 박스를 남겨두고 두번째 박스부터 적용되게끔 변경한데서 나온 2이다.

var link = document.location.href
var string = decodeURI(link);
var urlname = string.slice(30, -1)
console.log(urlname)
$(document).ready(function () {
	
	listing();
	
});

function listing() {
	console.log('start fetch')
	fetch('/profile/'+ urlname +'/data').then((res) => res.json()).then((data) => {
		console.log(data)
		let a = data['result']
		$('#container').empty()// 프론트 변경에 따라 변경 필요
		let name = a['name']
		let age = a['age']
		let gender = a['gender']
		let mbti = a['mbti']
		let tmi = a['tmi']
		let imglink=a['imglink']//별개이미지 사용
        //let thumbnail = a['thumbnail'] // 메인페이지의 이미지를 사용
		let pro_con =a['pro_con']
		let goal_style = a['goal_style']
		let blog=a['blog']
		//프론트 디자인 양식에 맞춰 수정필요
		let temp_html = `
			<div class="box_top">
				<div class="mybox1">
					<h1>T.M.I TIME </h1>
					<p>${tmi}</p>
				</div>
				<div class="mybox2">
					<!--<img src="/static/image/googoo.jpeg" width="330px" height="300px" alt="">-->
					<img src="${imglink}" width="330px" height="300px" alt="">
				</div>
			</div><!-- e:box_top -->
			<div class="box_bot">
				<div class="bot_left">
					<div class="mybox5">
						<h1>목표/협업스타일</h1>
						${goal_style}
					</div>
					<div class="mybox3">
						<h1>장단점</h1>
						${pro_con}
					</div>
				</div><!-- e:bot_left -->
			<div class="bot_right">
				<div class="mybox4">
					<h1>information</h1>
					<p>name : ${name}</p>
					<p>age : ${age}</p>
					<p>gender : ${gender}</p>
					<p>MBTI : ${mbti}</p>
				</div>
			</div><!-- e:bot_right -->
		</div><!-- e:box_bot -->`
			$('#container').append(temp_html)// 프론트 변경에 따라 변경 필요
			console.log(temp_html)

        
            $('#blogurl span').text(blog)
			$("#blogurl").attr("href",blog)
		})
	}

위 코드는 상세페이지 자바스크립트이다.

방식 자체는 위와 상당히 유사하고 달라진것은 html의 방식과 들어가야할 항목의 차이다.

이렇게 적고보니 오늘 굉장히 한게 없어보이지만.. 나름 굉장한 시간소비끝에 탄생하게 된 작품들이다. 심지어 저 작품의 대부분이 다른이들의 도움을 통해서 완성할 수 있었다. 방금 전의 글에서도 답한 내용이지만 이렇게 써야한다는 생각이 나질 않았다. 내용은 보면 다 아는 내용인데.. 오늘은 나 자신의 무력함을 제대로 느끼게 된 날이라고 생각한다. 내일은 반드시 좋은코드를 스스로 작성할 수 있게되면 좋겠다.