본문 바로가기
728x90
반응형

전체 글416

[Svelte] 공급업체 접두사 설정 안녕하세요. J4J입니다. 이번 포스팅은 공급업체 접두사 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 공급업체 접두사란? 공급업체 접두사는 여러 브라우저들 중 자신의 브라우저가 아직 다른 브라우저에서 지원하지 않는 CSS기능을 테스트하거나 또는 사용하는 것을 도와줍니다. 또는 동일한 기능을 수행하지만 각 브라우저마다 사용되는 속성명이 다른 경우에도 사용될 수 있습니다. 알고 있는 가장 대표적인 케이스는 transition이 있습니다. 현재는 transition만 명시하여 CSS를 작성해도 어느 브라우저에서든 문제가 되지 않지만 예전에는 각 브라우저마다 사용되는 접두사를 붙여서 작성해줘야만 했다고 합니다. 사용되고 있는 브라우저 접두어의 대표 케이스들은 다음과 같습니다. Chrom → -web.. 2021. 10. 6.
[Svelte] SCSS 환경 설정 안녕하세요. J4J입니다. 이번 포스팅은 SCSS사용을 위한 환경 설정하는 방법에 대해 적어보는 시간을 가져보려고 합니다. SCSS 환경 설정 [ 1. 패키지 설치 ] $ npm install -D svelte-preprocess node-sass [ 2. rollup 설정 파일 수정 ] import sveltePreprocess from 'svelte-preprocess'; ... export default { ... plugins: [ svelte({ preprocess: sveltePreprocess(), // preprocess 등록 ... }), ], ... }; [ 3. style태그에 lang="scss" or type="text/scss" 추가하여 사용 ] or 에러 발생할 경우 위와 같이.. 2021. 10. 4.
[Svelte] 초기 환경 세팅하기 안녕하세요. J4J입니다. 이번 포스팅은 Svelte 사용을 위한 초기 환경 세팅에 대해 적어보는 시간을 가져보려고 합니다. Svelte에서도 React에서 기본 환경 세팅이 되어 있는 템플릿인 CRA와 같은 기능들이 존재합니다. 다만 어떤 번들러를 사용하냐에 따라 사용되는 명령어가 구분되어집니다. SPA기술들을 사용할 때 일반적으로 많이 사용되는 번들러는 Webpack이 있습니다. 그리고 최근에 관심도가 높아지고 있는 번들러 중에 Rollup이라는 것이 있습니다. Svelte에서 제공해주는 CRA기능에선 Webpack을 사용하냐 또는 Rollup을 사용하냐에 따라 명령어가 구분되고 그에 따라 사용하기 원하는 번들러에 맞게 명령어를 입력해주시면 됩니다. 번들러 사용에 있어 부가적인 정보를 더 드리자면 S.. 2021. 10. 4.
[Java] URLConnection을 이용한 API 호출 안녕하세요. J4J입니다. 이번 포스팅은 url connection을 이용한 api 호출에 대해 적어보는 시간을 가져보려고 합니다. 최근 회사 업무와 카카오 공채 2차 알고리즘 준비를 하다 보니 자바를 이용하여 rest api를 호출하는 코드를 자주 다루게 되었습니다. 하지만 시간이 지나면 결국에 다시 까먹게 될 것이고 현재 알고 있는 내용을 정리해 보고자 작성하게 되었습니다. 자바에서 rest api를 호출하는 방법은 여러가지가 있는 것으로 보입니다. 그리고 그런 방법들은 어떨지는 모르겠으나 제가 사용하는 방법은 json클래스를 사용하기 위해 jar파일을 등록해야 하기 때문에 jar파일부터 프로젝트에 집어넣어 보도록 하겠습니다. 들어가기에 앞서 아래 내용들은 자바를 위한 내용들입니다. 만약 스프링에 사.. 2021. 10. 2.
[React] React.memo로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 React.memo로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. React.memo란? React.memo는 함수형 컴포넌트에서 동일한 파라미터로 생성된 함수들을 메모이제이션을 이용하여 재사용하게 도와줍니다. 예를 들어 다음과 같은 상황이 있다고 가정해보겠습니다. 이름, 나이, 주소값을 useState를 이용하여 표현하고 있고 주소를 제외한 이름, 나이를 파라미터로 받는 컴포넌트가 있습니다. 여기서 이름, 나이 값이 변경되면 해당 값을 가져다 사용하는 컴포넌트도 당연히 리 렌더링이 발생되어 수정된 화면을 보여줘야 됩니다. 하지만 주소값이 변경될 경우는 어떨까요? 주소 값이 변경되더라도 useState로 정의된 값들은 같이 리 렌더링이 발생되기 때문.. 2021. 9. 30.
[React] Hooks - useReducer 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useReducer에 대해 적어보는 시간을 가져보려고 합니다. useReducer란? useReducer는 hooks에서 useState와 동일하게 데이터 변화에 따른 반응성을 제공해주는 역할을 담당합니다. ※ [React] Hooks - useState 하지만 useState와의 차이점은 명확합니다. 일반적으로 리액트를 이용하여 개발하다 보면 보통 useState를 이용하여 데이터에 반응성을 제공해주고는 합니다. 여기서 만약 사용해야 되는 하위 변수값들이 많을 경우 어떻게 될까요? 예를 들어 A라는 객체에 해당되는 변수가 10개, B라는 객체에 해당되는 변수가 10개 있다면 각각의 useState들이 어떤 목적을 위한 데이터인지가 점점 헷갈리기 시작.. 2021. 9. 27.
[CSS] 터치 슬라이드 CSS 안녕하세요. J4J입니다. 이번 포스팅은 터치 슬라이드 CSS에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서 슬라이드 구현 원리에 대한 간단한 설명은 여기를 참고해주시면 됩니다. 터치 슬라이드 CSS 기본적인 슬라이드 구현은 위의 링크를 참고해주시면 되고 이곳에서는 웹 페이지에서 마우스를 클릭하여 슬라이드를 넘기거나 또는 모바일 웹 페이지에서 손으로 화면을 터치하여 슬라이드를 넘기는 CSS를 구현해보려고 합니다. 해당 기능을 구현하기 위해 필요한 이벤트는 각각 총 3가지입니다. 화면을 처음 클릭(터치)할 때 화면을 클릭(터치) 한 상태로 움직일 때 화면에서 클릭(터치)을(를) 멈출 때 화면을 처음 클릭(터치)할 때 필요한 것은 클릭(터치) 한 위치의 좌표값입니다. 좌표값을 구해서 저장해둔 뒤.. 2021. 9. 22.
[CSS] 슬라이드 배너 CSS 안녕하세요. J4J입니다. 이번 포스팅은 슬라이드 배너 CSS에 대해 적어보는 시간을 가져보려고 합니다. 화면을 개발하다 보면 정말 자주 만드는 CSS 중 하나로 슬라이드가 있다고 생각합니다. 일반적인 광고 등의 목적을 위해 사용되는 배너역할로써도 사용되고 또한 모바일 웹 페이지를 개발할 때 손가락을 터치하여 좌/우로 넘기를 효과를 주기 위해서도 만들어지고는 합니다. 개인적으로 공부하면서도 자주 접하고 있는데 접할때마다 어떻게 만들었었는지 가끔씩 까먹을 때가 있어서 나중에 참고해보고자 알고 있는 내용을 간단히 적어보려고 합니다. 슬라이드 CSS 우선 가장 기본적으로 버튼을 클릭했을 때 좌우로 넘어가는 슬라이드를 만들어보려고 합니다. 구현하기 전 원리에 대해 간단하게 말씀드려 보겠습니다. 제가 생각하는 슬.. 2021. 9. 22.
[React] Hooks - useMemo 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useMemo에 대해 적어보는 시간을 가져보려고 합니다. useMemo란? useMemo는 hooks에서 메모이제이션을 이용하여 변수 값들을 재사용함으로 써 최적화를 해주는 역할을 담당합니다. 예를 들어 컴포넌트 내부에 상황에 따라 변경되지만 자주 변경되지 않는 A라는 값이 있다고 가정해보겠습니다. 또한 컴포넌트는 리렌더링이 빈번하게 일어난다고도 가정해보겠습니다 이런 상황에서 리 렌더링이 일어날 때마다 A라는 값은 계속 동일한 값임에도 불구하고 같이 리 렌더링이 되기 때문에 다시 그려주는 작업을 수행해야 합니다. 만약 메모이제이션을 이용하여 값을 저장해 두고 있으면 어떨까요? 메모이제이션을 이용한다면 리 렌더링이 일어남에도 불구하고 단순히 저장된 값을.. 2021. 9. 22.
[React] Hooks - useCallback 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useCallback에 대해 적어보는 시간을 가져보려고 합니다. useCallback이란? useCallback은 hooks에서 메모이제이션을 이용해 함수를 재사용함으로 써 최적화를 해주는 역할을 담당합니다. 예를 들어 어떤 상황에서든 항상 동일한 결과값을 제공해주는 함수(= 순수 함수)가 있다고 가정해보겠습니다. 리액트를 개발하다보면 빈번하게 리 렌더링의 상황이 발생되는데 이때 항상 동일한 결괏값을 제공해주는 함수들도 함께 리 렌더링이 이루어집니다. 이것은 다른 말로 데이터를 지웠다가 똑같은 상태의 함수를 다시 생성하는 불필요한 작업을 한다고도 말할 수 있습니다. 그리고 이런 작업들이 한 개, 두 개 점점 쌓여나가면 결국 서비스의 속도에 영향을 미칠.. 2021. 9. 15.
[React] Hooks - useRef 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useRef에 대해 적어보는 시간을 가져보려고 합니다. useRef란? useRef는 hooks에서 컴포넌트의 전 생명주기 동안 객체 값을 유지해주는 역할을 담당합니다. 여기서 값을 유지해준다는 것은 말 그대로 어느곳에서라도 한번 저장된 값을 그대로 유지시켜 준다는 것입니다. 리액트를 이용하여 어느정도 개발해보신 분들이라면 useState나 또는 let을 이용한 일반 변수값을 선언한 뒤 데이터를 업데이트할 때 본인이 생각한 데이터로 업데이트가 되지 않았던 현상을 겪어보셨을 수도 있습니다. 예를 들어 setTimeout, setInterval을 사용한다거나 또는 액션함수에서 업데이트한 데이터가 업데이트되지 않고 그대로 유지되는 등의 케이스들이 있습니다... 2021. 9. 13.
[React] Hooks - useState 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useState에 대해 적어보는 시간을 가져보려고 합니다. useState란? useState는 hooks에서 데이터 변화에 따른 반응성을 제공해주는 역할을 담당합니다. 여기서 말하는 반응성이라는 것은 말 그대로 화면에 사용되는 데이터가 변경될 때 변경된 데이터가 화면에 업데이트되어 보이는 것인지를 말합니다. 예를 들어 숫자 값을 증가시킨다고 할 때 반응성이 제공될 때에는 숫자를 증가할 때 마다 숫자가 증가되는 것이 실시간으로 화면에 보이게 되는 것이고, 반응성이 제공되지 않을 때에는 실제로 숫자는 증가하지만 화면에는 기존 값이 유지되어 있는 것입니다. 클래스형 컴포넌트에도 useState와 동일한 역할을 처리해주는 것이 있었습니다. 클래스형 컴포넌트.. 2021. 9. 5.
[React] Hooks - useEffect 안녕하세요. J4J입니다. 이번 포스팅은 hooks의 useEffect에 대해 적어보는 시간을 가져보려고 합니다. useEffect란? useEffect는 hooks에서 컴포넌트가 마운트, 언마운트, 업데이트될 때 원하는 작업이 수행될 수 있도록 도와주는것을 담당합니다. 클래스형 컴포넌트에서 사용되는 유사한 라이프 사이클 메서드는 다음과 같이 있습니다. ComponentDidMount ComponentDidUpdate ComponentWillUnmount useEffect의 사용방법은 간단합니다. 우선 useEffect는 리액트 사용을 위해 impor해오는 'react' 패키지에서 제공해주는 기능이기 때문에 import만 해준다면 바로 가져다 사용할 수 있습니다. 그리고 vscode에서 제공해주는 use.. 2021. 9. 2.
[React] StyledComponents Tree Shaking 적용 안녕하세요. J4J입니다. 이번 포스팅은 styled-componets에 tree shaking을 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전에 올렸던 글인 [React] Tree Shaking으로 최적화하기를 통해 리액트에서 webpack을 이용하여 tree shaking 하는 방법은 모두 끝났다고 생각을 했었습니다. 하지만 css사용을 위해 제가 즐겨 사용하던 styled-components에 tree shaking이 적용되지 않는 현상을 발견할 수 있었습니다. 해결방법을 알게 되어 서로서로(?) 공유하고자 글을 적게 되었습니다. StyledComponetns Tree Shaking 적용 방법 우선 tree shaking이 적용되지 않는 상황을 간단하게 보여드리겠습니다. 이전 글에 .. 2021. 9. 1.
[React] Tree Shaking으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 tree shaking으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Tree Shaking이란? tree shaking은 나무 흔들기라는 뜻으로 소스코드에서는 명시되어 있지만 실제로 프로그램 실행에 영향을 주지 않는 코드들을 빌드 단계 때 제거하는 것을 의미합니다. tree shaking을 이용하여 프로그램 실행에 영향을 주지 않는 코드들을 제거했을 때 돌아오는 이점은 번들 파일의 크기 최적화입니다. 서비스의 규모가 커짐에 따라 프로그래밍되는 코드들도 많아지고 결국 번들 파일의 크기가 커지는 것은 당연한 상황이 됩니다. 그리고 번들 파일의 크기가 커지게 되면 브라우저가 번들 파일을 로드할 때 더 많은 시간을 소비하게 만듭니다. 이런 상황에서 tr.. 2021. 8. 31.
[React] 타입 스크립트 환경에서 정적 이미지 파일 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 타입 스크립트 환경에서 정적 이미지 파일 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전에 작성된 포스팅을 확인해보면 타입 스크립트를 사용하지 않을 때 정적 이미지 파일 사용하는 방법에 대해서 확인할 수 있습니다. 타입 스크립트를 사용한다고 해서 달라질 것은 거의 없지만 설정이 어떻게 되어 있는지에 따라 에러가 표출될 수도 있습니다. 에러 표출없이 이미지 파일 사용하는 방법에 대해 적어보겠습니다. 정적 이미지 파일 불러오는 방법 [ 1. 패키지 설치하기 ] $ npm install file-loader [ 2. webpack설정 파일에 로더 등록 ] module: { rules: [ { // babel loader }, { test: /\.(png|.. 2021. 8. 24.
[React] 정적 이미지 파일 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 정적 이미지 파일 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 리액트를 이용하여 개발하다 보면 프로젝트 내부에 이미지 파일을 저장해둔 뒤 화면에 불러오는 작업을 쉽게 마주할 수 있습니다. 저의 경험담이기도 하지만 여기서 당황스러웠던 점은 html에서 하던 방식으로 이미지를 불러올 경우 정상적으로 동작되지 않는다는 것입니다. 리액트에서는 부가적인 설정을 해줘야 하는데 해당 방법에 대해 글을 적어보도록 하겠습니다. 정적 이미지 파일 불러오는 방법 [ 1. 패키지 설치 ] $ npm install file-loader [ 2. webpack설정 파일에 로더 등록 ] module: { rules: [ { // babel loader }, { test: /\... 2021. 8. 24.
[React] 지연 로딩(Lazy Loading)으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 지연 로딩으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 지연 로딩이란? 지연 로딩이라고 하는 것은 말 그대로 로딩을 바로 하지 않고 지연시켰다가 로딩을 나중에 해준다는 뜻입니다. 간단한 예시로 더 자세하게 말씀드리겠습니다. 예를 들어 한 페이지에 많은 양의 사진이 사용된다고 가정해보겠습니다. 요즘 만들어지는 사진들은 용량이 크기 때문에 화면을 처음 로드할 때 많은 양의 사진을 한 번에 로드를 하는 것은 서비스의 속도를 늦추는 요인이 될 수 있습니다. 심지어 이렇게 로드되는 많은 사진들이 한 화면에 전부 보이는 일은 드뭅니다. 그럼 만약 페이지를 로드할 때 페이지에서 사용되는 모든 사진을 한 번에 로드하는 것이 아니라 실제 화면에 보이는 사진들만 .. 2021. 8. 18.
728x90
반응형

티스토리툴바