감귤밭 호지차 농장

Webpack Bundle Webpack 을 사용하면 웹에서 사용하는 다양한 파일들을 모듈별로 다룰 수 있게 된다. 서로 참조 관계에 잇는 파일들을 모아서 하나의 파일로 묶는 것을 Bundle이라고 한다. Webpack은 Bundle 작업을 해주기 때문에 모듈 번들러라고도 불리운다. 제품을 묶음으로 판매하는 것 = ' 번들링' = '빌드' 사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램을 묶는 행위. 개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다. Bundle 하는 이유? 모든 모듈을 로드하기 위해 검색하는 시간이 단축 사용하지 않는 코드를 제거 파일의 크기를 줄여준다. 파일의 크기 ..

용어 정리 - CSS Prreprocessors - SCSS - SASS 둘 다 CSS 전처리기 SCSS는 SASS에서 파생된 언어 - 거의 동일한 기능을 보유 (문법적으로 살작 다를 뿐 ) - 미관상 문제 sass는 중괄호와 세미콜론 생략, scss는 기존의 css와 비슷하게 중괄호와 세미콜론으로 구분 SASS & SCSS 링크 : sass 받아들이기, 당신이 그냥 CSS로 그만 코딩해야 하는 이유 2019. 링크 : Emotion vs SCSS vs Styled-Components _ 2023 링크 : css-in-js 라이브러리 선택 비교 (styled-component vs emotion) 링크 : React - emotion 과 styled-component의 차이 링크 : (번역) 우리가 CS..

node:internal/process/promises:288 triggerUncaughtException(err, true /* fromPromise */); ^ [Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/emma/Desktop/temp/invitation): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss' Require stack: - /Users/emma/Desktop/temp/invitation/postcss.config.js (@/Users/emma/Desktop/temp/invitation/postcss.conf..

@ 데스크탑 사이즈일 때 @ 모바일, 테블릿 사이즈 일 때 그림을 보면 알 수 있듯이 데스크탑 사이즈일 때 검색 용 아이콘 (SVG) 의 색상도 변경해주어야 함을 깨달았다... 나는 SVG를 리액트 컴포넌트화해서 props 로 색상이랑 사이즈를 내려주고 있는데 이 부분을 어떻게 사이즈에 따라 변경할 수 있을까??? Chapter 02. SCSS의 반응형 웹 제작을 위해 미디어쿼리 사이즈 설정 전역 설정하는 방법 + width vite.config.ts 반응형 웹을 만들기 위해서 우선 " variable.scss " 파일을 생성해서 그곳에 가각의 화면 사이즈 컨트롤 할 수 있는 변수 설정? 선작업을 해둔다. /*반응형 믿디어쿼리*/ $mobile: 767px; $tablet: 1023px; $desktop..

React에서 SVG 파일을 함수 컴포넌트화해서 간편하게 관리 및 재사용하고 불러올 수 있게 만들어봅시다. # 사용 기술 스텍 React x Vite x TypeScript SCSS https://www.telerik.com/blogs/how-to-use-svg-react How to Use SVG in React SVG is an excellent way to develop scalable and responsive visuals. This article introduces SVGs and different methods of using them in a React application. www.telerik.com type SVG = { fillColor: string; width: string; h..

하도 공고에 반응형 웹 과 관련해서 우대 사항이 많기 때문에 겸사 겸사 간단한 반응형 웹 프로젝트를 만들어보려고 합니다. 이전 메인 프로젝트 리팩토링 작업은 아무래도 주소가 달라서 서버랑 통신을 못해서 네틀리파이로 배포가 안되더군요.. ㅠㅠ 눈물을 머금고.. 손을 놓기로 결심하였습니다. 아래는 피그마 작업 입니다. 크게 웹과 모바일 + 태플릿 크기로 간단하게 만들어볼 예정입니다. 기술 스텍은 이번에는 제가 사랑하는 TailwindCSS를 사용하지 않고 순수 CSS 로 제작해보겠습니다. 겸사 겸사 연습인 거죠. Styled-Components 정도는 사용해서.. 야무지게 만들어보겠습니다. 시간이 되면 주말에 Express 도 곁들여서 게시판도 한번 만들어 보고 싶은 욕심은 언제나 계속 생겨나네요... 디자..

최종면접 탈락 후 슬픔 속에 잠겨 작성하는 map/filter/forEach와 관련된 고뇌입니다. 제가 검색창 자동 완성을 구현할 때 데이터를 전체로 받아 온 후 이를 map 으로 입력 값에 따라 필터링을 하는 방식으로 구현을 했습니다. 지금 생각하면 filter 를 사용해서 원본 배열의 변경 없이 사용할 수 있었을 텐데.. 그때는 map을 사용해야 한다고 레퍼런스 영상에서 얘기해서 그대로 사용했었습니다. 하지만 면접에서 왜 map 을 사용했는지.. 다른 좀 더 효율적인 방법은 없었을까? 라는 질문에 숨이 턱턱 막혀 버렸지 뭡니까.. 그래서 고민하는 데이터 자동 완성 기능과 관련된 고뇌에 대한 글입니다.

JS에서 소수 찾는 방법 몇 가지를 난이도 별로 정리해보았다. 프로그래머스를 풀다 보면 소수와 관련된 문제들이 많은데 자꾸 까먹고 그래서한번 정리해보겠다. 소수 = 1과 자기 자신으로만 나누어지는 수를 의미합니다. ( 1은 소수가 아닙니다 !) # 관련 프로그래머스 LV01: 소수 찾기 LV02: 소수 찾기 [ Basic ] 소수 찾기 function isPrime(num) { if( num < 2 ){ return false; }; for( let i = 2; i < num; i++){ if( num % i === 0){ return false; } }; return true; } function solution (n) { let count = 0; for( let i = 2; i 를 사용할 수 있습니..

슬프고 힘들 땐.. 피그마 작업이 제일 재밌다는... 아시는 분께서 프리랜서이신데 그분의 소개 사이트와 컨택 오는 연락 들을 컨트롤 하는 대시보드 (어드민) 페이지를 만들어드려볼까 라는 생각을 했답니다. 이제 기술 스텍을 고민해야 하는데... 대충 유저 플로우랑 어떤 성능 들어갈 지를... 고민 중인데요... 사실 혼자서 풀스텍 해보려고 하는 거라.. 될 지 모르겠네요 ㅋㅋㅋㅋㅋㅋㅋ 취업 도 안되고... 이 차걉디 차갸운 취업 시장 ㅠㅠㅠ 견디려면 다른 곳에 정신을 쏟는 수 밖에...

var, let , const 에 대해서 아주 사소한 것까지 다 부셔버리기 위해 정리글을 작성합니다. 왜냐면 면접에서 아주 탈탈 털렸기 때문이죠. 핫.핫.핫... 덩달아 가장 기초적인 JS의 털린 부분도 다 깔끔띠하게 정리해봅니다. [1] var, let, const 키워드 정리 자바스크립트는 함수 레벨 스코프를 준수한다. (대부분의 프로그래밍 언어는 블록 레벨 스코프를 준수). 함수 레벨 스코프는 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. # 함수 내부 선언 변수 - 지역 변수 , 함수 외부 선언 변수 - 모두 전역 변수 var 전역 범위 , 함수 범위에서 선언될 수 있는 키워드로 "재선언" 되거나 " 업데이트" 될 수 있습니다. 재선언 될 수 있기 때문에 예상..