윤코딩 윤코딩

싸피 수료 후 약 10개월 간의 방황 끝에.... 드디어 취업에 성공했습니다!

React Hook(훅) 이란? https://react.dev/reference/react/hooks Built-in React Hooks – React The library for web and native user interfaces react.dev React 16.8 버전에서 새로 추가된 기능으로, 기존의 Class형 Component을 사용하면서 발생하는 문제점들을 해결하기 위해 도입됨 Component에 대하여 리액트에서는 UI를 "컴포넌트"라는 단위를 이용하여 구분함. 컴포넌트 관리의 핵심은 state와 생명주기를 다루는 것에 있음. Class형 컴포넌트와 함수형 컴포넌트로 나뉨 Class Component [정상우님의 블로그] 에서 코드의 예시를 가져왔습니다. class Home exte..

flex-basis, flex-grow, flex-shrink item이 차지하는 크기(row 방향일 때에는 width, column 방향일 때에는 height)를 container의 크기 변화에 따라 바뀔 수 있도록 설정이 가능 기본적으로 item의 content box가 차지하는 크기를 제외한 여백이 늘어나거나 줄어드는 방식임 Flex Grow flex-grow 속성은 기본적으로 0으로 설정되어있으며, 각 item마다 값을 주게 되면 container내의 flex-grow 값의 합에 대한 비율을 유지하면서 늘어남 실제로 늘어나는 부분은 item의 내용이 차지하는 크기(예시에서 텍스트가 차지하는 크기)를 제외한 나머지 여백임 Flex Shrink flex-shrink 속성은 기본적으로 1으로 설정되어있..

Flex 란? 레이아웃을 더 쉽게 배치할 수 있도록 고안된 display 속성 부모 요소인 container와 내부에 자식 요소인 item으로 이루어짐 Flex-direction flex레이아웃은 가로(row) 또는 세로(column) 방향을 가질 수 있으며, 설정해주지 않으면 가로(row) 방향이 기본값 item이 거꾸로 배치되도록 변경할 수 있음 row-reverse 또는 column-reverse Main축과 Cross축 📌Justify-content 와 Align-items ✔ Justify-content는 Main축, Align-item는 Cross축에 적용되는 속성 ✔ 처음 배웠을 때 Main 축을 꼬치, item을 어묵에 비유하여 배운 기억이..ㅋㅋ justify-content는 어묵을 정렬..

this 란? javascript에서의 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 this의 특징 📌 this 바인딩 this가 가리키는 값(this 바인딩)은 함수가 선언된 방식이 아니라 함수를 호출하는 방식에 의해 동적으로 결정됨 // 1. 전역 console.log(this); // window => 전역 객체 // 2. 일반 함수 내부 function square(number) { console.log(this); // window => 전역 객체 return number * number; } square(2); // 3. 객체 메서드 내부 const person = { name: 'Lee', getName() { console.log(this); // {..

CORS란? Cross-Origin Resource Sharing(교차 출처 리소스 공유)의 줄임말 웹 브라우저에서 실행 중인 Javascript코드가 동일한 출처를 가지지 않는 다른 도메인의 리소스를 공유할 수 있도록 허용하는 매커니즘 SOP(Same-Origin Policy) 웹 브라우저 보안을 위해 등장한 메커니즘으로, 출처가 동일한 도메인끼리만 리소스 공유가 가능하도록 제한하는 정책 다른 출처로 리소스 요청을 했다는 것 자체가 이미 SOP를 위반하는 행위이고, CORS는 예외조항을 두어 다른 출처에서도 리소스를 요청할 수 있도록 하는 것 📌SOP 정책이 존재하는 이유 클라이언트(웹 브라우저)는 개발자도구만 열어보아도 어떤 서버에 파일을 요청하는지, script 태그를 통해 코드가 어떻게 짜여있는지..

콜백 함수(Callback Function) function repeatFunc(n, func) { for (let i = 0; i < n; i++) { func(i); } } function odd(i) { if (i % 2) console.log(i); } function even(i) { if (i % 2 == 0) console.log(i); } repeatFunc(5, odd)// 1, 3 repeatFunc(5, even)// 0, 2, 4 콜백함수 예시 매개변수를 통해 다른 함수의 내부로 전달되는 함수 매개변수를 통해 함수의 외부에서 전달받은 콜백 함수를 고차 함수라고 함 콜백 함수의 사용 1. 함수의 구조적 설계 콜백 함수를 사용하여 로직 처리 부분과 나머지 부분을 구분할 수 있으며, 이를..

Display 속성 mdn 문서 - CSS display display 속성은 요소를 블록 혹은 인라인 요소 중 어떤 방법으로 취급될지와, flow, grid, flex처럼 자식 요소를 배치할 때 사용됨 display 속성의 값은 block, inline, inline-block, flex, grid 등이 있음. 📌display: block 블럭처럼 위에서 아래로 쌓이는 특징이 있음. , , , , , 등의 요소는 대표적인 block 속성 가로 영역을 모두 차지하기 때문에 block 특성을 가진 요소와 인접된 요소는 양 옆으로 배치될 수 없음. width, height, margin, padding의 설정이 가능 📌display: inline 각 요소를 인접된 요소의 양 옆으로 나열할 수 있음. , , ..