코딩 챌린지
-
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 6일차코딩 챌린지 2023. 8. 4. 12:04
오늘은 웹페이지 화면 구성하는 방법에 대해 배웠다. 처음에는 index.html파일을 수정해 랜딩 페이지의 화면을 구성했다. Brad에게 배경 설명, 즉 내가 만들 MBTI웹사이트에 관한 설명을 해준 후 랜딩 페이지를 어떻게 구성할지 구체적으로 지시를 해준 후 html코드를 예시로 넣어주었다. 내가 기존에 가지고 있던 index.html파일의 태그 부분에 어떤 코드를 넣어야 할지 Bard의 답변을 얻은 후 복사해서 붙여 넣었더니 랜딩페이지가 구현되었다. 동시에 test.html과 result.html도 비슷하게 코드를 생성해서 붙여 넣어주었다. Bard에 어떻게 물어보아야 내가 원하는 코드를 짜 줄지에 대해서는 좀 더 여러 차례 스스로 시도해 보는 게 좋을 것 같다. 이번 실습에서는 예시로 주어준 질문만..
-
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 5일차코딩 챌린지 2023. 8. 3. 23:58
이제 웹개발 기초강의를 다 듣고 실습으로 넘어가게 되었다. 첫 강의는 내가 웹사이트를 만들었을 때의 최종 결과물의 예시를 보여주며 이런 형태의 웹사이트가 나온다고 알려주는 것이었다. 주의할 점은 대부분의 코드를 Bard를 사용해서 짜기 때문에 전체적인 것은 비슷해도 디테일들을 다를 수 있다고 했다. 처음에는 html파일을 생성해서 웹페이지들의 기본적인 뼈대들을 만들었다. 그리고 html파일들의 기초 구조는 일일이 다 입력하면 시간이 너무 오래 걸리므로 미리 구조가 입력되어 있는 탬플릿 같은 것을 '!'를 입력해 불러온다. 이제 기본 폰트 대신에 내가 원하는 폰트를 적용시켜 주면 된다. 1. CSS를 이용하는 방법 폰트 사이트에서 '웹폰트로 사용'이라고 되어있는 칸이 있는데, 그 부분을 복사해서 html ..
-
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 4일차코딩 챌린지 2023. 8. 3. 00:48
오늘은 JavaScript에 대해 배웠다. JavaScript는 웹 페이지에 동적인 요소, 즉 상호작용 할 때 나타나는 모든 요소들을 추가해 준다. JavaScript는 HTML이나 CSS와는 다르게 프로그래밍 언어이기 때문에 변수와 자료형이 있다. 변수는 보통 'const'를 사용해서 정의해 준다. 그리고 자료형에 대해서는 밑에 코드블록에 나와있다. const a = 30; //변수 a 선언방법 //자료형 const str = "Hello"; //문자열 const num = 55; //숫자 const arr = [1, 2, "hi"]; //배열 const obj = { //객체 name: "Elice", age:22, }; JavaScript에서는 HTML의 요소를 하나하나 가져와서 작업을 해야 하는데..
-
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 3일차코딩 챌린지 2023. 8. 1. 10:18
오늘은 CSS에 대해 배웠다. CSS는 어제 말한 것처럼 웹 페이지의 각 요소를 스타일링, 즉 꾸며준다. 이때 각 요소는 HTML의 태그에서 id로 구분한다. #container { background-color: aqua; border: 5px solid black; } 이때 #container 이렇게 선택자를 이용해 id를 지정한다. 좀 더 간편하게 CSS를 만들기 위해 Bootstrap이라는 라이브러리를 이용한다. 라이브러리는 이미 누가 만들어놓은 유용한 코드 조각이기 때문에 이를 이용해 더 쉽고 편하게 개발할 수 있다고 한다. 하지만 강의에서 Bootstrap은 HTML을 이용해 코드를 만들어주고, 코드 작성 시 Bard를 대부분 사용하기 때문에 딱히 CSS는 쓸 일이 없을 것이라고 한다. 과연 ..
-
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 2일차코딩 챌린지 2023. 7. 31. 23:54
웹개발을 위해서는 HTML, CSS, 자바스크립트를 배워야 한다. HTML은 웹 페이지의 구조를 작성하고, CSS는 웹 페이지의 각 요소 스타일링, 그리고 자바스크립트는 웹 페이지 요소들에 동적 요소를 추가해 준다. 오늘은 HTML기초에 대해 배웠다. HTML은 Head와 Body로 구조가 나뉘어 있는데, Head에는 우리 눈에는 보이지 않는 부가적인 요소들이 들어가 있고 Body에는 우리 눈에 직접 보이는 부분이 들어가 있다. Body에는 태그가 들어가 있는데 이렇게 꺾쇠 안에 들어가 있다. 각각 태그의 이름에 따라 특정한 역할을 한다고 한다. 태그에는 id라는 요소도 들어가 있는데 이런 식으로 요소에 들어가 있다. id는 이 요소를 조작하거나 꾸밀 때 유용하게 사용된다.
-
[엘카데미 챌린지] Bard로 만드는 MBTI 검사 웹사이트 1일차코딩 챌린지 2023. 7. 30. 22:28
엘카데미 챌린지 7일 특별 보상으로 받은 강의 수강권을 어디에 쓸까 고민하다가 구글에다 Bard라는 ChatGPT에 대응해서 내놓은 서비스가 있다는 것이 기억나 'Bard로 만드는 MBTI검사 웹사이트' 강의를 수강하게 되었다. 일단 Bard를 활용하며 웹개발을 한다는 것 자체가 매우 흥미로운 주제였다. 이 과목은 요즘 트랜드인 대화형 AI 서비스를 이용해 무엇을 할 수 있는지 보여주는 강의라고 한다. 모르는 부분은 Bard에게 물어보면 되니 개발의 난이도를 낮출 수 있고 웹개발은 우리가 보여주기 좋은 분야라고 한다. 다만 처음 웹개발을 하는 사람은 개발환경 세팅이 어려운데 엘리스는 실행환경을 제공해 주어 초보자가 웹개발에 더 쉽게 접근할 수 있도록 만들었다고 한다. 다만 Bard도 모든 것을 다 알려줄..
-
[엘카데미 챌린지] IT 소프트웨어 프로젝트 이해하기 3일차코딩 챌린지 2023. 7. 29. 11:39
소프트웨어 프로젝트는 프로젝트의 성격에 따라 구분이 가능하다고 한다. 구축, 운영, 리뉴얼, 고도화, 차세대 이렇게 다섯 가지가 있다. 구축은 새롭게 서비스를 만드는 프로젝트이고, 운영은 현재 서비스 중인 제품이 원활하게 구동될 수 있도록 지원하는 프로젝트, 리뉴얼은 현재 서비스 중인 제품의 UI, 디자인 등을 개선 또는 추가하는 프로젝트, 고도화는 서비스 품질 향상을 위해 전반적인 업그레이드를 하는 프로젝트, 그리고 차세대는 서비스 또는 비즈니스 범위 확장을 위한 프로젝트이다. 이런 프로젝트의 성격을 알아야 하는 이유는 프로젝트의 업무 진행 단계나 업무의 포커스가 달라지기 때문이다. 프로젝트를 진행할 때 기획자의 역할과 책임은 무엇일까? 기획자는 프로젝트의 설계자이자 커뮤니케이터이다. 모든 담당자와의 ..
-
[엘카데미 챌린지] IT 소프트웨어 프로젝트 이해하기 2일차코딩 챌린지 2023. 7. 28. 11:12
소프트웨어 프로젝트는 Kick-off meeting부터 시작한다고 한다. Kick-off meeting에서는 프로젝트의 목적, 프로젝트의 일정, 업무 진행 방식(규칙)을 나눈다고 한다. 프로젝트의 왜 진행하는지, 목적은 무엇인지, 타깃 유저는 누구인지, 그리고 기대하는 효과를 설정한다. 주요 이벤트 일정 공유도 같이 한다. 그리고 합리적인 공유와 협업을 위해 일정한 업무 진행 방식에 대한 협의 공유. 기획자가 킥오프 미팅을 위해 준비해야 할 것은 서비스 분석, 요구사항 분석, 일정계획, 질의응답을 잘 정리해서 미팅을 해야 한다. 회의록도 작성해야 하는데 회의록에는 회의 진행일시와 참석자, 안건과 확정 사항, 추후 일정과 파트별 액션 아이템이 꼭 들어가야 한다. 요구사항 정의서란 프로젝트에서 구현하고자 하..