본문 바로가기

전체 글376

[webpack] externals 개념 및 사용 이유 webpack 설정에서 externals 속성을 사용하여 node_modules 폴더에 있는 패키지들을 번들링에서 제외하는 것은 일반적인 상황입니다. 여기에는 몇 가지 이유가 있습니다: 라이브러리의 외부 의존성 유지: 많은 라이브러리들은 프로젝트에서 직접적으로 번들링되지 않고, 대신에 node_modules 폴더에 설치됩니다. 이러한 라이브러리들을 번들링에 포함시키면 번들 크기가 매우 커지고, 의존성 관리가 어려워집니다. 따라서 externals 설정을 사용하여 라이브러리를 번들링에서 제외시킴으로써 번들 크기를 최소화할 수 있습니다. 서버 사이드 렌더링(SSR)과 호환성: 서버 사이드 렌더링을 구현하는 경우, 서버에서 사용되는 라이브러리들이 클라이언트와 달라질 수 있습니다. 서버에서는 보통 node_mo.. 2024. 4. 13.
[web] zero-runtime 이란? 개념 CSS 프레임워크나 라이브러리가 브라우저에서 실행되는 동안 전혀 추가적인 JavaScript 코드를 필요로 하지 않음을 나타냅니다. 즉, 프레임워크가 브라우저에서 실행될 때 추가적인 JavaScript 코드를 생성하거나 실행하지 않는 것을 의미합니다. 일부 CSS 프레임워크는 스타일을 적용하고 관리하기 위해 JavaScript를 사용합니다. 예를 들어, 특정 CSS 클래스를 토글하거나 동적으로 스타일을 변경하는 등의 작업을 수행하기 위해 JavaScript 코드를 사용할 수 있습니다. 이러한 프레임워크는 브라우저에서 실행될 때 JavaScript 코드를 실행하여 스타일을 조작합니다. 반면에 "zero runtime" CSS 프레임워크는 브라우저에서 실행되는 동안에도 추가적인 JavaScript 코드.. 2024. 4. 13.
[web] thumbnail의 width 값 비율에 따라 height 크기 조절하기 정공법은 아니지만, 많은 개발자들이 사용하는 방법을 소개하고자 한다. 반응형이 100% 지원되진 않지만 레이아웃이 변경이 되면 일부 컨텐츠들은 반응형처럼 작동되는게 보기 좋다. 핵심은 코드는 아래와 같다 눈여겨 볼 속성은 height와 padding-bottom 이다. height를 0으로 설정함으로써 기본 보여주는 속성을 완전히 지우고, padding-bottom 속성을 주면서 width 기준으로 간접적으로 height를 1.6배 증가하라고 설정한다. padding을 %로 설정하면 width값에 비례한다고 한다. https://developer.mozilla.org/en-US/docs/Web/CSS/padding Percentages: refer to the width of the containing .. 2024. 4. 13.
앞으로 개발자는 어떻게 일해야 할것인가? 요즘 세상이 어떻게 변할지 모르겠고, 일하는 방식도 많이 변할거 같은데, 현 상황을 마주친 우리는 그 누구에게 조언을 줄 수 없다. 몇몇 유튜브 영상을 보면서 살짝 나만의 가닥을 잡아보았다. 내가 내린 결론은 기계가 할 수 없는 일을 하고, chatgpt를 최대한 활용하여 생산성을 최대한 높혀야 한다. 기계가 아무리 발전해도 할 수 없는 일은 휴먼터치이다. 휴먼터치를 하는 직업은 스님, 목사님 등이다. 즉 사람의 마음을 잘 해아리고 이끌줄 알거나 조직에 잘 스며들어야 한다. 실무자라면 리더라면 나에게 원하는게 무엇일지 고민하면서 일하고, 리더라면 실무자를 올바른 방향으로 안내하고 적절한 역할 분배 조직 성장에 노력해야 한다. 어떤 역활을 담당하던지 프로젝트 관리에 모두 능숙해야 살아 남을 수 있다고 생각.. 2024. 4. 9.
[react] CRA 대신 webpack으로 react 프로젝트 구성하기 들어가기 전 코드만 보고 싶다면, 아래의 링크를 확인해보세요 https://github.com/insidedw/minified-cra GitHub - insidedw/minified-cra Contribute to insidedw/minified-cra development by creating an account on GitHub. github.com 프로젝트 구성 npm init -y package.json에 의존성 설치 리엑트 설치 리엑트는 runtime에서 읽혀야 하니 dependencies에 추가합니다. npm install react react-dom webpack 설치 npm install -D webpack webpack-cli webpack-dev-server html-webpack-pl.. 2024. 4. 3.
[git] .env file 무시 설정 반영되지 않을 때 .gitignore 파일에 들어가기 전에 파일이 이미 tracking되어 있었다면, ignore 파일에 해당 파일을 추가하였음에도 불구하고 계속 tracking되어 있을 수 있다. 이 문제를 해결한다 git rm .env --cached git commit -m "Stopped tracking .env" https://stackoverflow.com/questions/38983153/git-ignore-env-files-not-working git ignore .env files not working I have a laravel project. In the root directory are these 4 files: .env .env.example .env.local .env.staging I have.. 2024. 3. 31.

티스토리툴바