Land of Joe

클라이언트와의 첫 (가상)미팅을 진행하고 그에 따른 스토리보드 제작과 기능명세서 작성을 하였다. 스토리보드는 보통 ppt나 figma를 사용한다고 한다. 나는 실력이 거의 없을 때 팀 프로젝트를 한 경험이 두 번 있는데 (둘다 엎어짐) 두 번 다 디자이너가 따로 있었고, 모두 피그마를 사용하는 걸 어깨 너머로 지켜봐왔었다. 그리고 현업에서 그 중요성에 대해 언급하는 영상도 유튜브에서 많이 봐왔기 때문에 이번에 기회에 나도 피그마를 이용해 스토리보드를 만들어보고 싶다고 생각해 도전해보았다. 만들수록 내가 어디까지 만들어야하나 생각이 들었다. 사용자의 행동에 따라 생기는 변화 하나하나를 전부다 만들어내야 한다는 압박감(?)이 들어서 의 방법으로 만드는 드롭다운 리스트나, 으로 만드는 시간 선택 박스, 심지어..

10월 12일부터 27일까지 3주에 걸쳐 배운 백엔드 관련 내용들을 총정리해보려 한다. 원래부터 명확히 내 머릿속에 그려지는 느낌 없이 하라는 대로 쫓아간 기분이긴 했다. 그래도 어차피 다 암기하는 부분이라 그래서 언젠간 되겠지.. 싶었는데 저번주에 JSP언어를 배우고 회원가입, 로그인, 게시물 생성 등등의 백엔드 개발에 돌입하려고 하니 이게 뭐람??? 내가 갖고있는 키페어에 손상이 있다? 이것저것 손써봤지만 싹 다 지우고 다시 시작하는 것만큼 깔끔한 방법이 없을 것 같아 그렇게 했다. 그리고 현재는 새로운 키페어로 모든 걸(톰캣, 마리아db, ftp-simple 등..) 연결해놓은 상태이지만, 다시 AWS로 돌아가 만들어두었던 인스턴스를 다시 한 번 삭제(종료)하고 전체 일련의 과정을 천천히 곱씹어 가..

들어가기 백엔드 개발의 특징 코딩이 차지하는 비율이 높지 않음 서버 관리, 데이터베이스 구축, 그리고 프론트엔드와의 연결을 하는 백엔드 개발 백엔드 언어의 역할 프론트엔드와 데이터베이스를 연결해주는 중간 과정 프론트엔드의 요청을 분석해서 sql로 바꾸고, 이를 db에 전달 db에서 온 값을 정제한 뒤 다시 프론트엔드로 돌려주는 것 백엔드는 수동적인 형태를 띈다. === http 통신은 수동적인 형태를 띈다 (http통신의 특징임: 수동적) 프론트엔드가 요청하면 서버가 주는 것밖에 못함 ex) 채팅이나 알람설정 등은 http 통신이 아닌 다른 통신방법을 이용해야 한다. 백엔드 언어의 변천사 1세대 백엔드 언어: jsp, php,.net 2세대 백엔드 언어: node.js, spring 2015년까지만 해도..

프로토콜 정의: 인터넷 통신에 대한 표준 인터넷은 전세계가 다같이 맞춰서 사용하자! 라고 약속하고 사용하는 통신 기술이기 때문에, 한 가지 방법을 정해서 다같이 맞춰서 사용하고 있음 인터넷 통신 방법마다 각자의 프로토콜이 존재함 (현 약 80개의 프로토콜이 존재함) 이메일 통신, 파일 전송 통신, 원격 접속 통신, 전화 통신, 스트리밍 통신 등…. 개발자들이 이 프로토콜을 몰라도, 이 프로토콜로 구성된 프로그램을 이용하기에 문제가 없다! (그냥 프로토콜을 지원하는 프로그램을 활용하면 되기 때문!) * 우리가 알아야할 것은... 각 프로토콜의 정의와 쓰임 각 프로토콜이 사용하는 포트번호 ssh: 원격 접속 프로토콜 (22) ftp: 파일 전송 프로토콜 (21) http: 단방향 데이터 프로토콜 (80) t..

AWS를 들어간다 인스턴스>인스턴스 인스턴스 시작하기 이름, ubuntu, (AMI)>Ubuntu Server 20.04 LTS (HVM), SSD Volume Type, 키페어이름 >> 인스턴스 시작 (다운로드됨) 터미널 열어 cd Downloads ls sudo chmod 700 .pem : 700이면 키페어 파일에 관리자만 접근할 수 있는 권한을 부여함. Password: 원격접속하는 명령어 ssh (id)@(퍼블릭 IPv4 주소) -i (키페어파일) ubuntu@ip-172-31-8-110:~$ cd / ubuntu@ip-172-31-8-110:/$ ls ubuntu@ip-172-31-8-110:/$ cd home ubuntu@ip-172-31-8-110:/home$ ls ubuntu@ip-172..

구구단 만들기 // html // javascript function cal () { var num = parseInt(document.getElementById("num").value) var result = num * (index+1) document.getElementById("result" + (index+1)).innerHTML = result } 위 방식의 한계는 구구단이 아니라 더 큰 숫자까지 만들고 싶으면 html을 하나하나 다시 뜯어고쳐야한다는 점이다. // html // javascript function calc () { var number = parseInt(document.getElementById('num').value); for (var index = 0; index < 9; ..

저저번 주에 걸린 감기 때문에 저번주 수업은 못하고 이번주에야 3주차 수업을 했다. 2주차 수업의 과제는 html과 css만을 이용한 유튜브 웹사이트 클론코딩이었는데 개선해야할 부분들이 참 많았지만 그것에 대한 리뷰는 새로운 글로 남기도록 하고.. [ JavaScript ] 1. 자바스크립트: 이벤트를 달아주는 언어 ㄴ 이벤트: 유저의 행동에 따라 변화를 주는 로직 2. js의 특징 html, css와 다르게 수학적인 로직 필요 에러, 버그 존재 최근 매우 각광받는 언어임 3. 디자인패턴 : 단순히 코드를 작성하는 방식 (문법, 기술 아님) : 함수형 프로그래밍 방식, 객체형 프로그래밍 방식 함수를 위주로 사용(신흥) vs 객체를 위주로 사용(고전) 구글링 했을 때 class로 적혀있는 건 과감히 패스할..

[ CSS ] 1. font-size (기본값: 16px;) 2. font-weight (기본값: 200;) ㄴ 사파리에선 모든 굵기가 적용되나/ 크롬에선 200, 400, 600만 적용 가능 3. display: block, inline, inline-block, none, flex 의 display 속성은 block, 의 display 속성은 inline ( 알고보니 ,의 태그적 특징이 아니라, 각 태그가 기본으로 가진 display 속성일 뿐이었다~~! 태그의 display 속성이 inline인 것처럼 ) inline속성은 width를 바꿀 수 없다 ⇒ inline-block을 사용한다!!! 4. position: static(기본값), relative, fixed, absolute relative..