Jeden Tag, aufrichtig und lustig.

1. Progress bar? 성격유형 검사지를 만들면서 테스트 진행도를 사용자가 알면 사용자 경험에 좋을 것 같아 프로그레스바를 작업해봤다. 구현 할 때 시맨틱하게 마크업을 하고 싶어서 관련 태그가 존재하는지 찾아봤는데, progress라는 태그가 있다는 것을 알게 됐다. 아래 사이트를 참고했다. https://www.w3schools.com/w3css/w3css_progressbar.asp W3.CSS Progress Bars W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScrip..

1. 프로젝트를 하게 된 배경 리액트를 공부하는 용도로 youtube api를 활용해서 youtube를 구현해보았다. 다른 작업과 병행하다보니 기획부터 배포까지의 총 작업기간은 6일정도 소요되었다. 2. 배운 점 및 느낀 점 이번 프로젝트를 통해 새롭게 배우고 경험한 것은 크게 6가지다. youtube api 활용 mock 데이터 생성 및 활용 React에서의 테일윈드 CSS 적용 폴더구조와 url 구조 기획 MVP 형태 개발 .env 활용 프로젝트에서는 아래의 4가지 api를 활용하였다. 인기 동영상 데이터 검색 키워드에 따른 데이터 연관된 동영상 데이터 채널 데이터 일목요연하게 api가 정리 되어 있어서 필요한 api를 쉽게 찾을 수 있고, 필요한 데이터 수도 간편하게 지정할 수 있다. 다만 불편한 ..

자바스크립트를 활용하면서 수 없이 사용하는 array와 object 유형의 데이터는 이미 자바스크립트에 내장된 new Object(), new Array()라는 생성자함수에 의해 인스턴스로서 생성된다. 객체와 배열을 통해 생성자와 인스턴스를 자주 사용하고 있지만, 그 뜻에 대해서는 모호하게 알고 있었고, 일반함수와 다른 점은 무엇인지 궁금하여서 공부하게 되었다. 1. 개념 생성자 함수? 생성자 함수는 생성자를 만드는 함수를 의미 한다. function MakeSong(genre, singer) { this.genre = genre; this.singer = singer; this.introduce = function () { console.log( "이 노래는 " + this.genre + " 장르이고,..

프로젝트를 진행하면서, 사용자의 만족도를 높이기 위해서는 빠른 렌더링 속도가 중요하다는 것을 느끼게 됐다. 렌더링 속도를 높이기 위해서 어떤 것을 고려해야하는지 공부하던 도중 리플로우와 리페인트에 대해 알아보게 되었다. 1. 개념 리플로우는 레이아웃이 변경 될 때 이로인해 영향을 받는 모든 DOM 노드들의 수치가 다시 계산되고, 레이아웃 트리가 재생성되는 것을 의미한다. 레이아웃이 변경 될 때 발생하기 때문에 width, height, padding, margin, float, position 등이 변하면 발생한다. 리페인트는 리플로우가 끝난 후에 발생하는 현상으로, 다시 만들어진 레이아웃 트리를 레이어에 다시 그리는 작업을 의미한다. 또한 리페인트는 가시적인 속성에 의해 발생한다. ex. color,b..

> 6주차는 JavaScript를 본격적으로 배운 한주였다. 강의를 통해 들어오는 학습량이 많기 때문에 계속 매순간 집중해서 이해해야 한다는 생각을 매초 하게된다! 내용을 빠르게 이해할 수 있도록 딥다이브 책을 통해 보충학습을 할 생각이다. 6주차로 멋쟁이사자처럼 프론트엔드스쿨이 1/3이 지난 시점이 되었다. 1/3 과정을 소화했는지 자가질문을 던져보면 괜히 살짝 눈물이 나며 다른 동기들에 비해 부족한 내모습만 보였다. 하지만 한달 전의 내모습과 비교하면 꽤 성장한 나 자신 또한 발견할 수 있었다. 자기합리화하지말고 시간을 매분 잘 활용하고자 한다! DOM 책 집필에 관해서는 node에 대해 공부하고 2챕터분들에게 파트를 바톤터치한 한주였다. 생각보다 책집필에 시간이 할애되서 개인적인 공부를 할 수 없었..

> 벌써 4주차가 지났다! 여름에 수업을 듣기 시작했는데 이제 가을을 넘어 때때로 초겨울처럼 너무 춥다. 금방 한달이 또 지날테니 시간을 더욱 잘 활용해야겠다. 4주차는 멋사와 멋사 동기들의 따뜻함에 대해 알게 된 한주였고 개인적으로는 많은 일정을 온전히 소화하지 못해서 아쉬웠다. 하지만 그래도 배운것들을 일부 활용하여 과제를 수행하고 git push를 성공하여 살짝 뿌듯함을 느꼈다. 5주차는 책집필, 이력서작성, 과제, 수업 등 5마리 정도의 토끼를 잡아야하니 매시간에 집중하고 회고조 조장님이 추천해주신 공부법과 일정관리 방법을 최대한 활용하는 것이 목표이다! 💛 Fact CSS 지그재그 특강 학습내용 CSS (grid, transition, transform, animation, perspective..

복습하고 적응하기 바빴던 한주였다. > 노트정리 및 TIL작성에 시간이 많이 소비된다. > 강의시간에 집중해서 추가적인 시간 소비를 줄이자. > 일일 / 주간 시간을 잘 사용할 수 있도록 계획 세우는 것이 필요하다. 💛 Fact 멋쟁이사자처럼 프론트엔드스쿨 3기 개강 학습내용 Git Hub & Git, 웹의 기초 상식(URL, IP ,Port) HTML(semantic tag), CSS(selector, initial value, inheritance) HTML sectioning, CSS 구현 과제 수행 모던 자바스크립트 책 구매 ❤️ Feeling 고대했던 멋쟁이사자처럼 프론트엔드스쿨이 개강해서 즐거웠다. 좋은 동기들, 회고팀원들과 함께라서 1주차를 잘 보낼 수 있었다. 생각보다 HTML, CSS 개..

for loop & array 반복문과 배열은 현업에서도 자주 함께 사용되는 중요한 개념이다. 빈 배열 myArray에 100부터 110까지 요소를 추가하기 array를 순회한다. =배열의 각 요소에 접근해서 동일한 동작을 진행한다. array각요소를 콘솔에 찍기 ex. for(let i=0 ; i 0; i-=2) { ourArray.push(i); } // ourArray will now contain [10,8,6,4,2] i에 2 빼는 법 i = i-2 i-=2

논리 연산자는 조건문처럼 활용될 수 있고, 반복된 if문 작성이나 if문의 중첩을 줄일 수 있다. 논리연산자의 종류 1. || (or) console.log("사과" || "딸기" || "무화과"); // 사과 '사과'가 출력되는 이유는 ||(or)연산자는 왼쪽부터 평가를 시작해서 첫 번째 truthy 값을 찾아가기 때문이다. 만약 truthy 값이 없다면 마지막 값을 반환한다. 2. && (and) console.log("사과" && "딸기" && "무화과"); // 무화과 '무화과'가 출력되는 이유는 &&(and) 연산자는 왼쪽부터 평가를 시작하고, 첫 번째 falsy 값을 찾아가기 때문이다. 위의 코드의 연산중에서는 모든 값이 true이므로 마지막으로 평가한 값인 '무화과'가 출력된 것이다. 아래의..

비교연산자 값을 비교할 때 사용하는 연산자로는 여러개가 있다. 엄격연산일치 === Console.log(1+1===2) // true Console.log(1+1===3) // false Console.log(‘Coder’===’CODER’) // false (자바스크립트는 대소문자를 구분한다.) fullName === familyName + " " + "개발" 불일치연산자 !== 또는 || 그리고 && if (age > 65 || age < 21 && res === "한국") age가 65를 넘거나, age가 21보다 아래이면서 사는 곳은 한국이다. 위와 같이 조건을 해석할 수 있다. 왜냐하면,컴퓨터 언어는 왼쪽에서 부터 해석하기 때문이다. 개발자인 사람은 볼 때마다 헷갈리는 경우가 있으니 항상 괄호로..