인프런 워밍업 클럽 스터디 1기 FE | 미션3,4,5 발자국

미션3: 퀴즈 앱 문제은행 형식으로 랜덤으로 출제되는 퀴즈를 풀 수 있는 앱📇 레포지토리 주소: https://github.com/zldnlto/inflearn-warming-up/tree/main/03_%ED%80%B4%EC%A6%88%20%EC%95%B1 주요 로직 (기능 구현) : 함수 설명문제와 정답은 아래와 같은 데이터 구조로 설계하여, 배열에 오답 리스트를 몇개 넣느냐에 따라 선택지 개수가 변화할 수 있게끔 하였다. { "question": "2+2", "correct_answer": "4", "incorrect_answers": ["8"] }, 문제 데이터 data.json 을 불러와서 사용한다. 정답, 오답 선택 시 각각 correct, incorrect 클래스를 추가하여 css를 제어한다.activeRestartBtn : nextBtn 을 hidden 처리하고, restartBtn 을 표시한다. lifePoint의 이모지를 해골로 나타내 남은 도전횟수가 없음을 표시한다.drawLifePointEmoji : 인자로 LP(LIFE POINT)를 받아 남은 도전 횟수를 나타내는 하트 이모지를 렌더링한다.selectRandomItem : 인자로 배열을 받아 랜덤으로 요소를 하나 뽑아 리턴한다.disPlayQuizData : data를 인자로 받고 selectRandomItem을 통해 랜덤으로 생성한 퀴즈 아이템을 화면에 뿌려준다.addAnswerBtn : quizItem의 “correct_answer”와 “incorrect_answers” 를 통해 배열을 생성해서 선택지 버튼들을 추가한다. 수학 문제는 정답이 무조건 하나인 점을 고려해 배열을 생성할때 배열의 첫 인덱스는 정답, 나머지는 오답으로 구성되었다. shuffle 함수를 통해 생성된 선택지 버튼이 랜덤으로 섞여 나타나도록 하였다.handleNextBtn :NextBtn를 클릭하면 발생하는 이벤트 함수이다. 정답, 오답 선택에 따라 생성된 correct, incorrect 클래스들을 리셋하고, 다음 문제를 불러온다. 아무것도 선택하지 않고 NextBtn을 클릭 시에도 LIFE POINT가 감소한다. function shuffle(array) { for (let i = array.length - 1; i > 0; i--) { // 무작위로 index 값 생성 (0 이상 i 미만) let j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } 느낀점데이터의 변화와 렌더링의 시점을 생각하는 부분이 취약하다는 걸 느꼈다. 데이터 → 렌더링 측면에서 [2번 이상 오답을 고르면 실패하는 기능]을 깔끔하게 구현하는 것이 이 과제중에서는 제일 어려웠던 것 같다. 차근차근 하다보면 어렵지 않은 부분인데 정신 안 잡으면 말린다고 해야하나 ,,ㅎ 데이터의 흐름 → 어떻게 화면에 그릴지 이 부분을 논리적으로 생각해서 코드를 짤 필요가 있는 듯하다.명확하고 깔끔하게 사고하는 습관을 잘 들여서 렌더링 밀림이나 잔오류 없이 한번에 구현할 수 있게 되고 싶다. 잘 짠 남의 코드를 보고 배우자 ,,Restart시에 화면 깜빡임 이슈가 있었는데 Restart란 어차피 초기화를 하는 것이 아닌가~ 하고 init() 함수의 재사용을 꾀하다가 생긴 문제였다. 페칭한 데이터를 변수에 담아두고 재사용하니 간단하게 해결되었다.함수의 재사용도 좋지만 굳이 따지자면 데이터 호출을 최소화하는것이 좀 더 중요하다. 여러모로 신경써야겠다. 미션4: 책 리스트 앱 책 리스트를 추가하고 삭제할 수 있는 앱📇 레포지토리 주소: https://github.com/zldnlto/inflearn-warming-up/tree/main/04_%EC%B1%85%20%EB%A6%AC%EC%8A%A4%ED%8A%B8%20%EC%95%B1 { "question": "2+2", "correct_answer": "4", "incorrect_answers": ["8"] }, 주요 로직 (기능 구현) Or 함수 설명무난하게 진행했던 과제이다. 주요 함수 or 신경썼던 부분을 발자국으로 정리해본다.객체배열 BOOK_LIST 를생성하여 책 데이터를 관리하고 있다.const BOOK_LIST = [{id = "",title: "책제목", author: "김작가" }]‘명확한’ 데이터 삭제를 위한 id값 생성id는 난수 생성 후 작가이름+책제목+난수 형식으로 붙여주었다. 난수만 붙이면 될 수도 있는데 작가이름+책제목은 왠지 나중에 sort할때 도움되지 않을까 싶은,, 데이터에 대한 나름의 배려이다 😄 React를 쓸 때는 uuid 라이브러리를 썼는데 깊은 고민은 아니지만 어떻게 key를 생성해야 안전할까에 대한 고민을 했다. 그 결과 작가이름+책제목 조합부터 중복은 잘 없을텐데 거기다가 난수를 붙여주면 좀 더 안전할 것 같다는 결론..{id = ""title: "책제목", author: "김작가" } const generateRandomString = () => { return Math.random().toString().split(".")[1].substring(0, 8); }; const addBookItem = (data) => { data.id = `${data.title}${data.author}${generateRandomString()}`; const bookItem = generateBookListItem(data); bookListItems.append(bookItem); BOOK_LIST.push({ ...data }); }; setTimeout 사용하여 notice 구현const noticeTimeout = (msg) => { notice.classList.add("active"); notice.innerText = msg; setTimeout(() => { notice.classList.remove("active"); }, 2000); }; setTimeout으로 구현했는데 작은 문제가 있다. 2000ms 이내 또 하나의 책이 추가되거나 하는 경우 요소가 겹치는 문제가 생겨서 이미 생성된 노드에 관한 중복 처리가 필요하다. 아쉬운 점 / 느낀점 :바닐라 JS로 과제 프로젝트를 4회정도 하니 느낀 개인적이고 작은 인사이트element.className = "className"; element.classList.add("className"); 이 둘을 어떻게 구분해서 써야할까? 싶었는데 프로젝트를 몇 번 거치며 사용해본 결과 className = ""은 DOM을 생성하면서 곧바로 클래스를 붙여줄 때, classList.add()는 active나 hidden 등의 클래스 추가로 화면을 조작할 때 사용하는 식으로 구분해주면 가독성 측면에서 용이할 것 같다.단순 랜덤 추출이 아닌, 뽑힌 문제를 배열에서 제거하여 문제를 모두 풀 수 있는 기능을 추가해보고 싶다.미션5: GitHub Finder 앱GitHub API (Octokit) 을 사용한 깃허브 유저 검색 앱 프로필과 최신 레포지토리를 최대 5개 보여준다.📇 레포지토리 주소: https://github.com/zldnlto/inflearn-warming-up/tree/main/05_Github%20Finder 디바운싱 기능 구현스로틀링과 디바운싱 정리 (GPT) → 둘 다 이벤트 핸들러의 호출 빈도를 제한한다.스로틀링: 연달아 발생하는 이벤트를 일정 주기로 제한한다. 일정 시간 간격으로 이벤트 핸들러가 실행됨 첫 번째 호출만 허용되며, 이후 호출은 지정된 시간동안 무시된다. 이벤트 핸들러의 호출 빈도를 제한하는 것으로, 예를 들어 스크롤 이벤트나 리사이즈 이벤트와 같은 주기적으로 발생하는 이벤트를 다룰 때 유용하다.디바운싱: 이벤트 발생 후 일정 시간이 지났을 때 이벤트 핸들러가 실행된다. 연이어 발생하는 이벤트의 호출을 제어하는 것으로, 검색 창과 같이 사용자가 연속해서 입력하는 경우에 유용하다. 사용자가 연속해서 타이핑할 때, 마지막 이벤트가 발생한 후 일정 시간이 경과한 후에 비로소 검색을 실행하도록 할 수 있음.모듈화script.js 에 코드를 쭉 짜보았는데, 사이즈가 생각보다 있어 모듈화를 진행해보았다. 폴더 구조는 아래와 같고 200줄 넘어가던 한 코드를 기능별로 분리해놓으니 전반적으로 상당히 가독성이 향상되었다고 느꼈다. 메인 코드 script.js 은 확실히 깔끔해진 모습이다.import { GITHUB_TOKEN } from "./config.js"; import { Octokit } from "https://esm.sh/@octokit/core"; import debounce from "./utils/debounce.js"; import { findUserInfo } from "./userSearch/findUserInfo.js"; import { findUserRepoInfo } from "./userSearch/findUserRepoInfo.js.js"; import { activeNotFoundNotice } from "./userSearch/activeNotFoundNotice.js"; import { createUserProfileImg, displayUserInfo, displayUserRepos, } from "./userSearch/display.js"; // ... DOM 코드 생략 ... const debouncedHandleSearchInput = debounce(async (e) => { const value = e.target.value; if (value === "") { activeNotFoundNotice(""); userCard.innerHTML = ""; } if (value.length 소소한 트러블슈팅 (렌더링 밀림)기능 구현 중, 의도와는 다르게 반응이 한 글자씩 밀리는 에러가 있었다. (ex. 'zldnlto'를 입력하면 'zldnlto'의 검색 결과가 나와야 하는데 마지막 글자가 누락된 'zldnlt'의 결과가 나옴)이벤트 핸들러를 keydown이벤트에 붙여서 이런 결과가 생긴 것인데, 이 경우 입력 필드의 값이 변경되기 전에 업데이트가 된다. 키가 놓이면 그 때 입력된 값을 인식하도록 keyup으로 변경해주니 의도한 대로 동작한다. 신경쓰이는 버그 🐛실시간 검색 기능이어서 키 입력 발생때마다 검색이 진행되어 화면 깜빡임 오류가 있음! 유저 있음 -> 유저 없음 -> 유저 있음 상태로 진행될때 레포지토리 UI가 출력되며 깜빡이는데 추후 개선해보도록 한다. (프로필이 있어야 해당 레포지토리도 보이도록 제어해야 함) 느낀점전체적으로 돌아봤을때 어디서 시간이 많이 걸린건지 했는데 → 기능 구현중에는 에러 핸들링이 가장 문제였다. 유저를 찾을 수 없으면 notice UI를 띄워야 했는데, if문으로 respose.status === 404 인 상황에 UI변화를 걸어주고자 했으나 if문에 걸리지 않고 콘솔 에러만 떠서 중간에 난항을 겪었다. 결과적으로 octokit공식문서 보고 해결했음. (ㅎㅎ..!) error.status 로 조건문을 잡아줘야 한다. 항상 데이터 페칭에서 헤매는 것 같은데,, 데이터 페칭 넘어가면 유독 코드가 실제 이해도를 반영하는 것 같다는 생각을 했다. 결국엔 데이터를 받아서 화면에 어떻게 매끄럽게 표현할 것인가인데 오픈소스들 찾아보면서 여러 코드를 접하고 분석해볼 필요가 있겠다. 명확히 설명하지 못하면 내 거 아니고 아는 거 아니다일단 시작하는 것도 틀린 말은 아니지만 나의 경우엔,,, 생각을 하고 코드로 짜야지 에러가 덜 나는 것 같다.추후 추가할 기능 : 소소하지만 모듈화를 진행했으므로 script.js 를 index.js 로 이름을 바꾸는 것이 적합해보이고, 버그 수정해야함

인프런 워밍업 클럽 스터디 1기 FE | 2주차 발자국

일주일 동안의 학습 방식을 4L식으로 회고해본다.Liked (좋았던 점) + Learned (배운 점) : :중간 점검 : 여러가지 인사이트를 얻을 수 있었다. 능동적으로 생각하는 데에 방해가 될 것 같다는 우려를 하고 있어서 챗GPT의 사용을 어떻게 해야할 지 질문드렸는데 강사님께서 답변주신 내용이 도움이 되고 있다. 내용인즉 활용하는 데에 능숙해지는 것도 나의 능력이고 도움을 받아서 같이 만들 수도 있는 것이다. 다른 동료분들의 Q&A도 많은 도움이 된다. 프로젝트 Tip) 회원가입하고 로그인 후 메인 페이지로 접속 가능한 프로젝트들을 만드는 경우가 있는데, 최대한 게스트 로그인과 같은 접근 용이한 방법을 사용해서 프로젝트를 구성하는 것이 좋다. (회원가입-로그인이 필수면 유저가 메인 기능만 가볍게 열람하고 싶은 경우 많은 손이 들기 때문에...) 또한 기능 동작하는 영상을 짧고 굵게 잘 찍어둔다.과제 시간이 많이 걸린다면 시간이 많이 걸리는 이유를 분석하라 -> 나의 경우엔 CSS에서 은근 시간을 많이 쓰고 중간중간에 코드를 쪼개면서 리팩터링하거나 다른 방법이 없나 모색하는 데에 시간이 걸린다.코딩은 오픈북이라는 말씀강의 : React 시작 | React 파트에서 항상 들으면 까먹게 되고, 심지어 코드로 잘 활용하지 못하는 부분이 최적화라고 생각했다. 섹션3 최적화 파트를 집중해서 들었다.미션 : 아이콘 폰트나 CSS 작성에 도움이 되는 사이트 등 아는 방법들을 적극 활용해서 마음에 드는 UI로 과제를 만들고 있다. 또한 많은 과제들을 관리하기 위해서 Github Project, Milestones 를 활용하고 있다. 한 눈에 보이고 이슈와 연동이 되기도 하고 좋은 방법인 것 같다. 이런 느낌으로 열심히 CSS 구현.. ◠.◠ (근데이제 빠르게 하고싶다는 욕망이 스물스물 올라오는 것이다) Lacked (부족한 점) : 강의는 React 진도를 나가고 있지만. JS 과제인 Github Finder 과제를 수행하고 있다. 기능 위주로 구현해서 제출하면 된다는 걸 알고 있지만 UI도 욕심나고 ㅎㅎ,, 이것저것 챙기고 싶은 게 많아서 지연되는 경향이 있다. 욕심을 내면 한도 끝도 없다는 게 장점이자 단점인 것 같다. 또한해 놓은 미션이 있어도 바로 다음 미션에 착수하거나 다른 할 일들에 밀려서 발자국 작성이 느리다. 문서 작성이 장벽처럼 느껴지는데 문득 소스코드를 열람하는 수고를 들일 사람이 몇이나 있을까 하는 생각이 들었다. 정성들여 짜놓은 코드라면 README.md 작성을 통해 어필하는 것을 아끼지 말아야겠다. Longed For (바라는 점) : 스터디 끝까지 최대정진 오늘까지 JS 과제 완수한 후 발자국 작성, 다음주에는 강의 진도를 앞당겨 듣고 React 과제 선택과 집중하기React에서 상대적으로 취약한 TDD 파트 집중해서 듣기 / (개인적인 욕심) Docker로 실행하는 부분 깊게 이해하면서 듣기이번 주에는 시간을 많이 내지 못하였는데, 다음주는 유종의 미를 걷는 것에 집중하기 시간을 많이 할애하여 임하고 다음주가 지나면 '나의 작업 스타일은 어떤지' 파악이 된 상태였으면 좋겠다.

인프런 워밍업 클럽 스터디 1기 FE | 미션1, 미션2 발자국

미션1: 음식 메뉴 앱간단한 음식 목록을 카테고리 별로 분류하여 보여주는 앱📇 레포지토리 주소: https://github.com/zldnlto/inflearn-warming-up/tree/main/01_%EC%9D%8C%EC%8B%9D%20%EB%A9%94%EB%89%B4%20%EC%95%B1header, main과 같은 큰 골격을 index.html에 짜 두고 기능이 필요한 요소들은 동적으로 생성하여 DOM에 붙이는 방식으로 구현하였다.데이터 페칭을 다루는 방식이 미숙하다고 생각하여, 짧은 데이터지만 굳이 data.json 을 생성해서 페칭을 모사해보았다. HTML validator 통과, 카드 부분에 , 사용하는 등 시멘틱한 태그 작성 주요 로직MenuList 라는 객체 배열을 통해 메뉴 버튼을 생성하고 관리한다.init() 함수 는 앱 최초 진입시 실행되며 전체 카드 목록을 불러온다. ('All'이 디폴트) renderCard() 함수는 html 요소 템플릿을 찍어내는 함수다. 각각의 Card 컴포넌트를 생성한다.handleFilterBtn() 을 통해 버튼 id와 일치하는 foodData를 필터링한다.const renderCard = (data) => { let newCard = ""; if (data) { data.forEach((v) => { const menuItem = ` ${v.name} ${v.price}원 ${v.description} `; newCard += menuItem; }); } return newCard; };각각의 요소를 따로 생성하기보다는 Card컴포넌트를 생성할 때 태그 이하의 자식 요소들이 많은 점을 고려하여 innerHTML 로 덩어리 템플릿을 이어붙이고 렌더링 하는 방식으로 구현하였다. 아쉬운 점 / 느낀점 :오랜만에 vanillaJS를 다뤄서 그런지 파일명과 같은 작은 부분들에서 '이게 맞나' 하는 생각의 연속이었다.프레임워크/라이브러리를 주로 사용했다고 한들 간단한 기능 위주임에도 생각보다 시간이 걸려서 아쉽다. 기능 위주로 구현하면 된다고 하셨는데 이왕이면 하는 마음을 버릴 수가 없어서 디자인도 조금씩 고민하게 된다. 간단한 기능일텐데 코드가 생각보다 길다. 더 효율적으로 짜는 방법이 있을 것 같다. 미션2: 가위 바위 보 앱컴퓨터와 가위바위보!📇 레포지토리 주소: https://github.com/zldnlto/inflearn-warming-up/tree/main/02_%EA%B0%80%EC%9C%84%EB%B0%94%EC%9C%84%EB%B3%B4%20%EC%95%B1 미션 프로젝트들을 한 레포지토리에 관리하려 하는데 root 경로에 common 폴더를 만들고 전반적으로 임포트해 사용할 reset.css 파일을 생성하였다. 주요 로직가위바위보 게임의 특성상 -1,0,1 숫자를 이용한 Matrix를 생성하여 승패를 판가름하였다.const resultMatric = [ [0, -1, 1], // rock [1, 0, -1], // scissors [-1, 1, 0], // paper ]; 기능 별 함수를 분리시켜서 캡슐화시키는 부분에 신경썼다.가위,바위,보 버튼을 눌렀을 때 화면 동작이 발생한다. 그런 의미에서 메인이 되는 함수를 뽑자면 각 버튼의 이벤트 함수라고 생각하였다. handleScissorBtn, handleRockbtn, handlePaperbtn 버튼을 보았을 때 어떤 동작이 일어나는지 한 번에 보이도록 하였고 코드는 아래와 같다. const handleScissorBtn = () => { USER_PICK = 1; COMPUTER_PICK = generateComputerPick(); calculateScore(USER_PICK, COMPUTER_PICK); resultRender(USER_SCORE, COMPUTER_SCORE); return USER_PICK; }; generateComputerPick() 0~2 사이의 난수를 리턴한다.calculateScore() 유저의 패와 컴퓨터의 패를 인자로 받아 resultMatric 기반으로 승패를 계산한다.resultRender() 승패 결과를 렌더링한다. 남은 횟수가 0이 되면 결과를 띄운다. 그 외 코드calculateResult() 게임이 끝난 후 유저가 이겼는지 컴퓨터가 이겼는지 결과만을 판단해 렌더링한다.아쉬운 부분const resultRender = (USER_SCORE, COMPUTER_SCORE) => { REMAINING_POINT -= 1; remainigPoint.innerText = REMAINING_POINT; userScore.innerText = USER_SCORE; computerScore.innerText = COMPUTER_SCORE; if (REMAINING_POINT === 0) { // 아쉬운 부분 resultText.innerText = ""; remainingBox.style.display = "none"; rcpBtnBox.style.display = "none"; selectText.innerText = calculateResult(); selectText.style.fontSize = "3.5rem"; restartBtn.style.display = "block"; return; } };남은 도전 횟수가 0이 되면 가위바위보 각 버튼과 선택하기 텍스트 등을 화면에서 숨기고 게임 결과와 재도전 버튼을 보여주어야 한다. 이 부분을 각각의 요소들을 일일이 display="none" css 처리를 하는 식으로 동작시키고 있는데, classList.add 메서드를 이용하여 코드를 줄이는 방식으로 리팩터링 할 수 있을 것 같다.또한 selectText 변수가 선택하기 텍스트를 보여주며 경우에 따라 게임 결과도 표현하고 있는데 변수명이 포괄적이지 못해 아쉽다.변수를 생성할 때는 영문 기반이라 바위-가위-보 순으로 생각하게 되는데 버튼은 가위 바위 보 순이어서 소소한 통일성 이슈가 있다. 우선 버튼 순서 빼고는 전자로 구현되어 있다. 버튼의 코드 정렬 순서와 가위바위보의 0,1,2 매칭 순서, 그리고 약어로 rsp인데 rcp라 오타나있는 부분 등 통일성 부분에서 개선이 필요하다. (rcpBtnBox) 느낀 점html 태그를 단순히 많이 생성하는 것을 지양하기 위해 body 태그에 id='root' 속성을 부여하고 DOM을 생성하려 했는데 body 안의 태그 때문에 의도한 대로 작동하지 않았다. 사소한 실수지만 React에서 요소를 렌더링 할 때 를 그대로 쓰지 않고 를 사용하는 이유가 렌더링 공간을 따로 분리하는 의도였구나 생각한다.VanillaJs를 하면서 오히려 React의 편리함 측면에서 교훈을 많이 얻게 된다. 특히 DOM을 일일이 변경시키는 작업을 통해 React에서 상태가 변화하면 UI가 자동으로 바뀐다는 게 얼마나 경이롭고 편리한 기능인지 느꼈다.미션 1과는 달리 이번에는 모든 요소를 js에서 생성해보았는데, html 코드로 골격을 어느정도 짜 놓은 상태에서 로직을 붙이듯 작성하는 것이 html / css / js 가 기능적으로 분리되어 가독성 측면에서 적절하다 생각한다.

인프런 워밍업 클럽 스터디 1기 FE | 1주차 발자국

강의 수강인프런 워밍업 클럽 스터디 1주차이다. JavaScript의 전반적인 이론을 복습하였다. 기술 면접을 대비하고자 강의 제목을 보았을 때 내가 먼저 설명해보고 막힌 부분이 있으면 그 부분을 메모해두었다가 확실하게 공부하는 식으로 진행했다.이제는 옛말이지만 수학의 정석 책을 사면 집합(1장) 부분만 닳아 있는 사람들이 많다고 하고 실제로도 그렇다.,ㅎ 모든 학습에 적용되며 경각심을 가질만한 공통의 경험이라고 생각하여 힘조절에 신경쓰려고 했다. 형식이나 타입 변환 같은 부분은 느슨하게 보고, 자주 까먹거나 헤매게 되는 비동기나 이벤트 루프 부분을 집중해서 보았다. 일주일 동안의 학습 방식을 4L식으로 회고해본다.Liked (좋았던 점) + Learned (배운 점) :우선 공식적으로 할 일이 생겨서 너무너무 좋았다 ◠‿◠ 배웠지만 어디에 사용해야할까 막막할 때 이렇게 미션들이 주어지면 최대한 적용해보는 플레이그라운드가 되어서 즐겁다. 또한 A-Z 강의를 들으며 기술 면접 준비 차 자바스크립트를 복습할 수 있어서 더없이 좋다. 또한 과제를 통해서 DOM을 직접적으로 조작하여 기능을 구현하였는데 html을 시멘틱하게 설계하고, css를 입히고, js로 생명력을 불어넣는 과정이 그 어떤 초심으로 돌아간 것 같아서 즐거웠다. Lacked (부족한 점) : 미션 수행률이 더디다. 이론의 부족한점에 치중하는 경향이 있는데 이론 공부를 하다가 미션이 많이 밀렸다. 우선 완주 목표치는 채우는 것은 당연하고 웜업 스터디가 진행되는 기한 내에 80% 이상의 과제를 하는 것을 목표로 잡았다.이론적으로 부족한 파트 : 이벤트 위임, this, Intersection observer, 커링이벤트 위임은 이론적으로는 잘 받아들이지만 코드로 볼 때 직관적으로 들어오는 느낌은 아니라서 코드 위주로 복습을 해야 한다.커링과 클로저를 엮어 설명한 아티클을 읽었던 기억이 있는데, 다시 한 번 찾아 읽어야겠다.처음 목표는 스터디에서 배운 파트를 You don't know JS Yet 교재로 딥하게 파고드는 것이었다. 힘조절에 신경썼다고 하지만 기본 내용이 완벽하게 숙지되었는가 하는 사실에 매몰되어서 심화 공부를 못하고 있다. 완벽주의를 버리는 연습을 해야 한다.구현을 하다 보면 ‘이왕이면’ 싶어서 CSS를 신경 쓰거나, 내가 쓰는 코드가 맞는 방식일까 생각하게 되는데 이게 시간 잡아먹히는 요인이 아닐까 싶다. 미션이 하루에 하나씩 나오는 꼴이라는 걸 생각하면 어느정도 선에서 타협을 보거나 조절해야 할 듯 싶다.Longed For (바라는 점) :하루의 마감 시간을 정해두고 공부하는 게 좋을 듯하다. 특히 낮시간엔 강의를 듣다가 까무룩 보내고, 뒤늦게 과제를 시작했다가 밤이 늦어지는 경우가 종종 있었다.5/6까지 휴일이니 쉬는 날을 이용해서 이번주의 과제를 최대한 맞춰 해놓고 다음주부터는 진도표에 맞춰서 미션과 강의를 진행할 것이다. + 미션 발자국 기록 제때제때 하기타입 공부할 때 '원시 타입은 Call Stack 메모리 공간을 사용하지만 참조 타입의 경우 Heap 이라는 메모리 공간을 사용한다.' 라는 문장이 있었는데 CS와 접목시켜 이 문장을 제대로 이해하고 싶다.미션 제출 글이 아닌 회고 글을 첫번째 글로 작성하게 되었는데, 미션3까지 완성이 되는 대로 갈무리하여 미션 제출 발자국(1~3)을 빠른 시일 내에 제출하자.