개발/React

[React] 부모-자식 컴포넌트 간 데이터 전달 방법 (Passing Data Between a Parent and Child in React)

React에서 부모 컴포넌트와 자식 컴포넌트 사이에 데이터가 전달되는 방식에 대해 알아보겠습니다. 데이터가 갈 수 있는 방향은 두 가지이며 다음과 같습니다. 부모 -> 자식 자식 -> 부모 부모에서 자식으로 데이터 보내기 (Passing Data From Parent to Child) 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야되는 경우 props를 사용하면 쉽게 해결할 수 있습니다. 예를 들어 부모와 자식이라는 두 개의 컴포넌트가 있고 부모의 상태를 자식에게 전달하려고 한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다. // Parent Component import Child from "./components/Child"; export default function App() { retu..

개발/Vue

Vue 슬롯(slot) 사용법 및 예제 (Understanding Slot in Vue.js)

Vue.js에서 컴포넌트를 활용해서 코드를 재사용함으로써 업무 효율성 및 생산성을 향상시킬 수 있습니다. 추가적으로 컴포넌트에 슬롯(Slots)을 활용하면 훨씬 재사용하기 용이하게 만들 수 있습니다. 이번 포스팅은 이미 컴포넌트 기초를 이해하고 있다 가정하고 작성한 내용이기 때문에 혹시 컴포넌트라는 개념을 아직 모르신다면 오늘 소개할 슬롯(Slots) 패턴을 이해하기 조금 까다로울 수 있습니다. 🤔 슬롯(Slots)이란? 일반적으로 슬롯이라고 하면 1) (무엇을 집어넣도록 만든 가느다란) 구멍, 2) (가느다란 구멍·자리에) 넣다 라는 뜻을 가지고 있는데 Vue 개발팀도 작명하는데 꽤 고심했다는 것이 이런 부분에서 느껴집니다. 정말 간단하게 표현하자면, 슬롯이란 컴포넌트에 콘텐츠나 다른 컴포넌트를 또 다..

개발/Vue

Vue $nextTick 이란? | 사용법 및 간단 예제 (Understanding $nextTick in Vue.js)

Vue는 DOM 업데이트를 비동기(asynchronously)로 합니다. 데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프(event loop)에서 발생하는 모든 데이터 변경을 버퍼에 담습니다. 같은 Watcher가 여러 번 발생하면 대기열에서 한 번만 푸시됩니다. 이 버퍼링된 중복의 제거는 불필요한 계산과 DOM 조작을 피하는 데 있어 중요합니다. 그 다음, 이벤트 루프 "tick"에서 Vue는 대기열을 비우고 실제 (이미 중복 제거 된) 작업을 수행합니다. 해당 포스팅에서 이벤트 루프에 대한 개념까지 다루기엔 조금 무리가 있기 때문에 추후에 따로 설명드리고, 지금은 Vue.js에서는 데이터를 통해 업데이트된 DOM에 바로 접근하기 위해선 nextTick을 활용해야 된다고 이해하시면 됩니다. ..

개발

패키지 잠금 파일(package-lock.json, yarn.lock)이 도대체 무엇일까?

자바스크립트 프로젝트에서 개발을 하는 개발자분들은 package-lock.json 또는 yarn.lock 파일이 굉장히 익숙할 것입니다. 직접 생성한 파일은 아니기 때문에 무심코 그냥 지나갈 수 있는 부분이지만 프로젝트 관리 및 협업을 위해서 굉장히 중요한 부분이기 때문에 제대로 이해해야되는 부분입니다. 이번 포스팅에서는 패키지 잠금 파일은 무엇인지, 왜 패키지 잠금 파일이 중요한지에 대해서 다뤄보도록 하겠습니다. 자바스크립트 패키지 매니저 자바스크립트로 개발하는 개발자라면 npm과 yarn 두 가지 패키지 매니저가 굉장히 익숙할 것입니다. yarn과 npm은 자바스크립트에서 사용하는 패키지들을 관리하는 도구입니다. 패키지라고 하면 프론트엔드 개발에서 활용하는 React, Vue 같은 라이브러리와 ant..

개발/Javascript

자바스크립트 스크롤 맨 위로/맨 아래로 올리기/내리기

자바스크립트로 스크롤 최상단, 최하단으로 이동시키기 위해 전역객체(window) scrollTo 메서드를 활용하면 굉장히 간단하게 해결할 수 있습니다. window.scrollTo(x-좌표, y-좌표) x-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 가로축입니다. y-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 세로축입니다. 맨 아래로 스크롤 이동 방법 window.scrollTo(0, document.body.scrollHeight); 맨 위로 스크롤 이동 방법 window.scrollTo(0, 0);

개발/Next.js

[Next.js@^11] Typescript, Prettier, ESLint 통합하기 with VSCode

들어가기 전에 버전정보 VSCode@1.60.2 Next.js@^11 prettier@^2.4.1 eslint@8.0.1 typescript@4.4.4 VSCode에서 Next.js Typescript, Prettier, ESLint 통합하는 과정은 아래와 같습니다. VSCode 기본 설정 Next.js 설치 ESLint 기본구조 개선 Prettier 플러그인 설치 및 ESLint 연동, 자동 포맷팅 적용 ESLint + Typescript 연동 VSCode 기본 설정 세팅을 위해 비주얼 스튜디오 코드(VSCode, Visual Studio Code) 기본 설정을 진행하시기 바랍니다. VSCode용 ESLint 플러그인 설치 VSCode 설정에 아래 구성 추가 "editor.formatOnSave": f..

개발/Javascript

자바스크립트 encodeURI encodeURIComponent 차이 | URL 한글 인코딩 디코딩 방법과 예시

자바스크립트에서 인코딩 처리를 할 때 자주 사용하는 encodeURI, encodeURIComponent 함수가 있는데요. 똑같은 문자열 인코딩 처리를 하는 것처럼 보이지만 문자열 인코딩 처리 방식이 조금 다릅니다. 상황에 따라서 제대로 활용하기 위해 이번 포스팅에서 해당 구문을 정리해보도록 하겠습니다. encodeURI / decodeURI encodeURI() 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩 하지 않습니다. 이스케이프 하지 않는 문자: A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # 예시) // http://webruden.tistory.com/path/to/file.php?foo=123&bar=this has spaces e..

개발/기타

카카오톡 오픈그래프(og:image) 이미지 캐시 삭제

카카오톡에 특정 사이트 URL을 공유할 때 설정해뒀거나 업데이트한 대표 이미지가 표시되지 않거나 갱신되지 않는 경우가 있는데요. 이렇게 이전 페이지 정보가 표시되는 이유는 카카오톡에서 데이터를 효율적으로 활용하기 위해 캐시(cache) 처리를 하기 때문인데요. 캐싱된 데이터가 바로 갱신되길 원한다면 카카오톡 오픈그래프 캐시 초기화 도구를 활용해서 카카오톡 서버에 남아 있는 캐시를 삭제함으로써 해결할 수 있습니다. 이번 포스팅에서는 카카오톡 오픈그래프 캐시 초기화 도구를 활용해서 데이터 캐시를 삭제하고, 업데이트한 오픈그래프 이미지가 정상적으로 표시되게 하는 방법에 대해서 살펴보겠습니다. 카카오톡 캐시 초기화 방법 카카오톡 캐시 초기화 방법 절차는 아래와 같습니다. 카카오톡 오픈그래프 캐시 초기화 도구로 ..

개발/기타

페이스북 오픈그래프(og:image) 이미지 캐시 삭제 (How to clear Facebook's image cache)

페이스북에 특정 사이트 URL을 공유할 때 설정해뒀거나 업데이트한 대표 이미지가 표시되지 않거나 갱신되지 않는 경우가 있는데요. 이렇게 이전 페이지 정보가 표시되는 이유는 페이스북에서 데이터를 효율적으로 활용하기 위해 캐시(cache) 처리를 하기 때문인데요. 캐싱된 데이터가 바로 갱신되길 원한다면 페이스북 공유 디버거를 활용해서 페이스북 서버에 남아 있는 캐시를 삭제함으로써 해결할 수 있습니다. 이번 포스팅에서는 페이스북 공유 디버거를 활용해서 데이터 캐시를 삭제하고, 업데이트한 오픈그래프 이미지가 정상적으로 표시되게 하는 방법에 대해서 살펴보겠습니다. 페이스북 캐시 초기화 방법 페이스북 캐시 초기화 방법 절차는 아래와 같습니다. 페이스북 공유 디버거 사이트로 이동 공유 디버거 메뉴에 캐시 삭제할 UR..

개발/기타

cURL HTTP 구간별 응답시간 체크하는 방법 (How to get response time from curl request (via command-line))

개발을 하다보면 cURL 명령어를 활용해서 각 구간별 HTTP 응답시간을 체크해야될 경우가 생깁니다. 이때 활용하면 굉장히 심플하게 HTTP Response를 체크할 수 있는 방법이 있습니다. vi curl-format.txt // or code curl-format.txt DNS lookup time (s) : %{time_namelookup}s\n Connection establish time (s) : %{time_connect}s\n SSL connect time (s) : %{time_appconnect}s\n Pre-transfer time (s) : %{time_pretransfer}s\n Redirect time (s) : %{time_redirect}s\n Start-transfer ti..

개발/CSS3

테이블 테두리 둥글게(라운딩) 만드는 방법 | table with border radius css

요즘 실제 웹서비스를 구현할 때 레이아웃에 테이블을 사용하진 않지만 Email HTML 템플릿 코딩을 하다보면 테이블 태그를 꽤 많이 사용합니다. 아래 이미지와 같이 테이블 테두리를 라운딩 처리를 하기 위해 border radius 속성값을 부여했을 때 제대로 동작하지 않는 경우가 생깁니다. 해결방법 만약 테이블 태그에 해당 이슈가 발생했다면 border-collapse: collapse; 속성 때문일 것입니다. .... border-collapse: separate (기본값)으로 설정하면 정상적으로 border radius 속성을 적용할 수 있습니다.

개발/Javascript

자바스크립트 모바일 키보드 닫는 방법(비활성화) | Close Mobile Keyboard & Menu on Return

모바일에서 Input 태그에 포커싱이 들어가면 자동으로 키보드가 활성화 되는데요. input 태그에 값을 모두 입력하고 return을 눌렀을 때 키보드만 hide 처리하는 방법이 있습니다. 보통 form 태그에 감싸져있는 input이라면 return을 눌렀을 때 자동으로 form submit 이벤트가 발생할 것입니다. 해결방법 해결방법은 keypress 이벤트 흐름을 중단시키고 현재 input 포커스를 blur처리를 하면 됩니다. // Javascript document.querySelector('input').addEventListener('keypress', (e) => { if (e.keyCode === 13) { e.preventDefault(); document.querySelector('inp..

개발/AWS

Elastic Beanstalk Amazon Linux 2 마이그레이션 방법 (Migrating your Elastic Beanstalk Linux application)

기존에 사용중인 Amazon Linux AMI 플랫폼이 Deprecated됨에 따라서 Amazon Linux 2로 마이그레이션을 진행하게 되었습니다. 개발환경 Node@12.21.0 Nuxt@2.11.0 as-is Node.js running on 64bit Amazon Linux/4.17.7 to-be Node.js 12 running on 64bit Amazon Linux 2/5.4.2 기존 구성 파일 files: # Found at https://stackoverflow.com/a/42096244/9074640 # Runs right before `npm install` in '.../50npm.sh' "/opt/elasticbeanstalk/hooks/appdeploy/pre/49_yarn.sh"..

개발/기타

[Mac OS] 파일 및 폴더 위치(경로) 확인하는 방법 (How to copy path of a file)

맥에서 파일이나 폴더 위치를 확인하고 싶을 때가 있습니다. 간편한 기능이긴 하지만 사용해보지 않았다면 분명 귀찮게 한번씩 찾아보게 될 것 인데요. 이번 포스팅에서는 굉장히 쉽고 간편하게 파일 및 폴더 위치(경로)를 확인하는 방법에 대해서 알아보도록 하겠습니다. 경로 확인 방법 맥에서 경로를 확인하는 방법에는 파인더를 사용하는 방법과 터미널을 사용하는 방법이 있습니다. 각 방법 별로 간단한 예시와 함께 사용하는 방법에 대해서 알아보도록 하겠습니다. 파인더(Finder) 모하비 이전까지 Finder에서 파일의 정보 가져오기 메뉴를 통해서 일반적인 복사를 사용하면 그대로 경로가 붙여넣기 되었는데 버전 업그레이드가 된 이후로 해당 기능이 적용되지 않더라구요. (아래 이미지처럼 정보를 확인하려는 이미지(동영상)을..

개발/기타

brew update 403 forbidden 해결방법 (brew update returns 403 Forbidden while accessing)

Homebrew(홈브루)를 활용해 패키지를 설치하려고 했으나 아래 이미지와 같은 에러가 발생했습니다. brew install ffmpeg 디버깅을 위해 검색을 해보니 Homebrew 버전 이슈였고, brew update를 정상적으로 진행하기 위해 메시지에서 나온 GIt 경로의 파일을 받은 후 업데이트를 진행해야 합니다. Homebrew v3.1.0 replaced Bintray with GitHub packages. Running brew update will update to the newest version of Homebrew and solve this issue. 해결방법 git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch -..

개발/Vue

Vue render 함수에서 innerHTML 사용하는 방법 (How to use v-html in JSX)

일반적으로 React에서는 dangerouslySetInnerHTML, Vue에서는 v-html을 활용해서 innerHTML 처리를 합니다. 하지만 일반적인 방식이 아닌 렌더 함수(Render Function)를 사용하는 경우도 있는데요. 이때는 아래와 같이 처리하면 굉장히 간편하게 처리할 수 있습니다. 예시 this.$alert({ content: (h) => h('div', { domProps: { innerHTML: err.message } }) }) 좀 더 축약된 방식은 아래와 같습니다. domPropsInnerHTML 활용한 방법 this.$alert({ content: () => { return // return } }) export default { name: "app", data() { r..

개발

텔레그램 오픈 그래프(Open Graph, og:image) 이미지 캐시 삭제

텔레그램(Telegram)에 링크를 보내면 URL에서 제공하는 Open Graph 데이터를 자동으로 읽고 페이지 미리보기를 생성합니다. 동일한 페이지의 오픈 그래프 데이터가 변경되어도 텔레그램은 한번 캐싱한 데이터를 내보내기 때문에 바로 업데이트가 되지 않습니다. 그래서 바로 갱신이 필요하다면 오픈 그래프 데이터 캐시를 지워야 합니다. 미리보기 예시 특정 페이지의 메타 태그로 추가된 오픈 그래프 데이터를 활용해서 미리보기를 생성합니다. 아래 이미지와 같이 텔레그램은 오픈 그래프 데이터를 기반으로 미리보기를 제공할 것입니다. 하지만 해당 사이트의 오픈 그래프 데이터가 변경되었을 때 우리는 변경된 오픈 그래프 데이터를 보는 것을 기대했지만 실제로는 이전에 등록된 오픈 그래프 데이터를 보게 될 것 입니다. 이..

개발/Vue

vue cli 버전 확인하는 방법 (How can I check vue cli version)

아래 명령어로 vue cli를 설치하면 vue 바이너리에 액세스할 수 있습니다. npm install -g @vue/cli # OR yarn global add @vue/cli vue --version은 CLI 버전을 알려줍니다. vue --version // @vue/cli 4.5.13

개발/기타

VSCode를 사용한다면 포스트맨(Postman) 대신 Thunder Client (API 실행, 사용법)

개발할 때 API 요청에 대한 결과를 확인하기 위해 포스트맨(Postman)이라는 프로그램을 사용하곤 하는데 VSCode를 사용하는 개발자라면 썬더 클라이언트(Thunder Cient)도 좋은 대안이 될 것 같아서 공유차 포스팅을 남깁니다. Thunder Client 썬더 클라이언트(Thunder Cient)는 일단 추가적으로 프로그램을 따로 설치하지 않아도 되고, VSCode 익스텐션으로 관리되기 때문에 꽤 편리하게 사용할 수 있습니다. 썬더 클라이언트를 추가하는 방법은 굉장히 간단합니다. 아래 이미지처럼 VSCode에서 좌측 익스텐션 메뉴를 통해 Thunder Client를 검색하고 설치하면 끝입니다! 혹시 VSCode를 아직 설치하지 않았거나 설치를 고민중이시라면 아래 포스팅을 통해 정보를 얻을 수..

개발/트러블슈팅

타입스크립트(Typescript)에서 JSON import하는 방법

일반적으로 자바스크립트에서 json을 import하는 방법은 아래와 같습니다. // *.ts import sampleJSON from '../sample.json'; 자바스크립트로 작성했을 때는 문제가 없는 구문인데 만약 타입스크립트로 전환하게 된다면 타입스크립트는 기본적으로 JSON 파일 확인을 지원하지 않기 때문에 json을 가져오기 위해 몇 가지 설정이 필요합니다. // tsconfig.json { "compilerOptions": { "resolveJsonModule": true } } // 또는 tsc 실행시에 --esModuleInterop, --resolveJsonModule 옵션을 추가한 후 빌드