100일은 해야지

[프로젝트 1주차 17일 ~ 21일]이번주는 사전직무교육이 끝나고 시작되는 프로젝트 1주차 기간이다.저번주 금요일에 설명회 할때 나눠준 자료들을 조금 정리해봤다.이번주 해야 할 일은 어떤 기능을 넣을지 생각하는 것과 와이어프레임을 짜는 것이었다.19일에 멘토링이 있었어서 그 전에 어떤 기능을 넣을지 생각하고 멘토님께 회의안을 제출했다.긍정적인 답변을 주셨고 19일 수요일에 멘토링까지 끝난후 20일 목요일에 오프라인 회의로 만나서 초기셋팅을 한 후 와이어 프레임까지 어느정도 끝낼 수 있었다. 금요일에는 다음주에 개발을 시작하기로 했기때문에 기능들을 좀 더 구체화하면서 어떤정보가 필요한지 알아보고 진짜 필요한 정보들은 각자 기능을 개발하면서 멘토님께 전달받기로 했다.프로젝트 2주차기간 부터는 각자 원하는 기..

📜 API 호출🟡 async / await 방식👉🏻  async await방식으로 연속호출했을 때 단일쓰레드 방식으로 호출되기 때문에 2초 2초 걸린다면 데이터 받는데 총 4초가 걸림const getPosts = async () => { await new Promise((res) => setTimeout(res, 2000)) return await ( await fetch("https://jsonplaceholder.typicode.com/posts") ).json()}const getComments = async () => { await new Promise((res) => setTimeout(res, 2000)) return await ( await fetch("https:..

📜  NEXT.JS🟡 설치 npx create-next-app@latest .typescirpt yes eslint yestailwind css yessrc/ directory yesapp router yes 🟡  layout.tsx 구조👉🏻  루트폴더에는 layout파일이 하나 있어야 하기 때문에, app 폴더 지우고 page.tsx를 새로 만들어서 npm run dev를 하면 layout.tsx를 자동으로 만들어줌 나머지 폴더에서는 자동으로 안 만들어줌 필수가 아니라서...// /app/layout.tsxexport const metadata = { title: 'Next.js', description: 'Generated by Next.js',}export default function..

핑계일지는 모르겠으나 정리할게 많고 너무 밀려버려서 그냥 이번주는 한번에 2주차 후기로 쓰기로 했다.1주 차도 이미 밀려서 이제야 다 썼기도 하고 이번주는 거의 실습을 많이 해서 정리를 잘 못했기 때문에?이번주는 회고 가이드대로 작성할 예정4L : 학습한 내용의 생각/경험을 회고하는 템플릿1. 이번주 수업에서 좋았던 점은? (Liked)2. 이번주에 새롭게 배운 점은? (Learned)3. 배운 것에 관해서 내가 부족했던 부분은? (Lacked)4. 앞으로 뭘 더 하면 좋을까? (Longed for)[Liked] 이번주 수업에서 좋았던 점은? 👉🏻  내가 대충알고 있던 내용을 좀 더 깊이 알 수 있어서 좋았던 것 같다. 👉🏻  메모이제이션을 설명해 주실 때 그냥 이론정도만 알고 잘 안 썼는데 어떻..

학습기록📜 DOM 조작🟡 학습노트.... 👉🏻  나는 분명 열심히 따라 했는데 왜 정리된 노트가 없는지 모르겠음.  👉🏻  내... 머리속에 있겠지???  👉🏻  돔 조작은 내가 조작하고 싶은 문서 객체를 잘 선택해서 선택된 문서객체를 잘 조작하면 된다는 것만 적혀있네.... 📜 콜백함수🟡 콜백함수란? 👉🏻  매개 변수로 함수를 전달받아서 함수 내부에서 실행하는 함수function func (callback) {callback()}function callbackFunc () {console.log("나는 콜백함수가 될거야")}func(callbackFunc) // 나는 콜백함수가 될거야  👉🏻  아래의 코드는 출력값이 task2에서의 setTimeout 때문에 순서가 task1..

학습기록📜 생성자 함수🟡 생성자 함수란? 👉🏻 객체를 생성할 때 사용하는 함수 👉🏻 생성자 함수는 대문자로 시작한다는 암묵적 약속 존재 👉🏻 함수의 매개 변수를 활용할 수 있다 👉🏻 객체를 생성할 때 new 키워드를 사용한다.function Shape(width, height) { //this = {} this.width = width this.height = height // return this}Shape.prototype.getArea = function () { return this.width * this.height}//프로토타입에 넣어서 가져다 쓰고 싶을때 쓰면 됨const rect1 = new Shape(10, 10)console.log(rect1) // Shape..

학습기록📜 조건문🟡 조건문이란?👉🏻 특정 조건을 만족할 때 실행하는 명령의 집합👉🏻 조건이 참과 거짓인지에 따라서 달라지는 계산이나 상황을 수행하는 문법 🟡 if문if(조건) { // 실행해야 할 명령} 👉🏻  if(만약 ~라면), else(만약 ~가 아니라면), else if(만약 ~가 아니라 ~라면)let person = 17if (조건1) { 실행문} else if (조건2) { 실행문} else { 실행문} 🟡 if문 작동 👉🏻 소괄호 안에 있는 표현식의 참 거짓 여부 판별 후 참이면 중괄호 안의 코드 실행 👉🏻 거짓이면 else if 또는 else로 넘어감 👉🏻 else if는 여러 개 사용 가능 👉🏻 else 생략 가능조건 하나만 있으면 if만 사용참, 거짓..

학습 기록📜 자바스크립트 역사모카(1995) => liveScript(1996) => javaScript(1996) => ES(ecmaScript)(1997) => ES2(1998) => ES3(1999) => ES4(2000) => ES5(2009) => ES6(2015) => 이후에 나온 것들은 그냥 ES6+라 부름 📜 HTML script 태그🟡 기본적인 HTML 파싱👉🏻 HTML 문서는 순차적으로 파싱이 되는데 이 과정에서 script 태그를 만나면 DOM생성을 잠시 미룬다음 script를 먼저 다운받고 실행한 후 나머지 코드를 실행한다. 이때 스크립트 태그 아래의 DOM요소에는 접근 할 수 없게 된다. 만약 script 태그가 무거우면 그 만큼 DOM생성이 늦어진다.👉🏻 그래서 보통..