Frontend 개발자 - hyo.loui

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목표, 오류, 정리로 세분화) Project : 최종 프로젝트 시작 = 최종 프로젝트 시작 ( init ) 챌린지 팀 헤커톤 진행 = 2.10 ~ 11일 ( 24시간 ) Hackathon review 이번 주 가장 인상 깊었던 '헤커톤'에 대해 리뷰 하겠다. 우선 우리는 2월 10일 부터 11일 까지 안양 오피스텔을 대관하여 진행했고, 12시에 모여 간단히 식사 후, 해커톤 장소로 가서 각자 장비 셋업을 끝내니 2시가 다 되었다. 팀장님 주도 하에 디자이너님과 회의를 진행했고, 우선적으로 와이어프레임이 나와서 무난하게 진행 할 수 있을 것 같았다. 또한 우리는 디자이너..

❤️‍🔥TIL : Today I Learned 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 제어문(control flow statement) 조건에 따라 코드 블록을 실행(조건문)하거나, 반복실행(반복문)할 때 사용한다. 블록문(block statement) 0개 이상 의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. { } 문의 끝에는 세미콜론을 붙이는 것이 일반적이다. 하지만 블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. // 블록문 { var foo = 10; } // 제어문 var x = 1; if (x < 10) { x++; } // 함수 선언문 function sum(a, b) { ret..

❤️‍🔥TIL : Today I Learned 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념 변수 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 변수란 무엇인가? 왜 필요한가? 애플리케이션은 데이터를 다룬다. 아무리 복잡해도 데이터를 입력(input)받아 처리하고, 결과를 출력(output)하는 것이 전부다. 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 메모리 메모리(memory)는 데이터를 저장할 수 있는 메모리셀의 집합체다. 1바이트 단위로 데이터를 저장(save)하거나 읽어(read) 들인다. 각 셀은 그림의 왼쪽에 보이는 것 처럼 메모리 주소를 갖는다. 메모리 공간의 위치를 나타낸다. 컴퓨터는 모든 ..

🎯목적 : Youtube API 활용 (비동기)서버통신 : React-Query 적용 response 로 UI구성 🤢 트러블 슈팅 : filter 메서드 문제 해결 1. react query Youtube API 활용에 있어 서버통신의 생산성을 위해 react-query 적용을 기획했다. api.js에서 데이터를 가져오는 함수를 관리하는 파일을 따로 분리했고 중복되는 url 과 api key는 따로 변수선언을 해주었다. 필요한 component에서 react-query를 연결해 위 함수를 사용하도록 import 했다. 별칭을 붙여 데이터의 목적을 정확하게 명시했다. 2. UI 생성 위에서 react-query로 가져온 AllPlayList 라는 배열형 데이터는 map 메서드로 하나씩 돌며, 이미지태그의 ..

🎯목적 : Type Script 함수 타입 정리 및 복습 1. JS와 비교 JS // js function add(n1, n2) { return n1 + n2; } TS function add(num1: number, num2: number): number { return num1 + num2; } console.log("👉👉 add", typeof add(3, 4)); //👉👉 add number 🧪나의 실험실 // 실험 const one1 = add(1, 2); const two = add(1, "2"); // Error const three = add(1, 2, 3); // Error const four = add(1); // Error // 파라미터에서 return되는 타입이 바뀌는건 불가능 fu..

🎯목적 : Type Script 타입 총정리 및 복습 String Number Boolean Object Array Tuple Enum Any Void Null Undefined Never 1. String (문자형) JS와 마찬가지로 텍스트 데이터 타입을 string으로 표현한다. 작은따옴표('')나 큰따옴표("")로 문자열 데이터를 감싸는데 사용한다 // string let str: string = "Typescript"; // str = 1; // Error // str = true; // Error // str = undefined; // Error let fullname: string = "ABC"; let age: number = 14; let sentence: string = `my name..

❤️‍🔥TIL : Today I Learned 모던 자바스크립트 스터디 주제 : 모듈 리액트 사용, 여러 js를 묶어놓은 index.js 등을 html 파일에 연결시킬 때 script 태그 안에 작성하는 속성으로 타입을 모듈로 작성해준다 type="module" 모듈은 파일의 크기가 커지면 커질수록 사용 가능성이 높으며 프로젝트 간 필수적으로 사용 할 수밖에 없는 기능이다 모듈 타입은 기본값으로 defer 속성이 있다 즉, html 요소가 모두 파싱이 된 이후 script를 실행한다 여기서 defer와 async 의 차이점이 궁금해져 공부했다. 공통점 : 스크립트를 다운로드하는동안 HTML 이 중단되지 않음 defer : html 다 다운받고 나서 dom 조작 가능 할수 있도록! script 가 html..

❤️‍🔥TIL : Today I Learned 구조 분해 할당 - 자바스크립트 표현식 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. (출처: MDN) 구문 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b..