본문 바로가기

전체 글

 (40)
개발하면서 소통을 해야하는 이유 1. 소통우리는 일상생활에서 사람과의 언어로 대화를 위해 소통이란 것을 하고 있습니다.지금 저와 여러분이랑도 소통을 하고 있고요. 소통은 국어사전에서는 서로 막힘 없이 통하는 것 이라고도 정의를 합니다. 이 글에서는 개발이라는 키워드 안에서의 소통에 대해서 다룰 것입니다.  2. 개발개발이라는 키워드 안에서 가장 중요할만한 요소는 어떤 것이 있을까요?지금 당장 글을 쓰면서 떠오르는 것으로는 개발 실력, 영어 타자속도, 컴퓨터 지식 등등이러한 것들이 있겠죠. 근데 개발은 저희가 혼자서 하나요?아닙니다.큰 회사인 네카라쿠배나 작은 소프트웨어 기업들도 모두 똑같이 개발은 팀원들과 하고 있습니다.그만큼 회사들이 개발팀을 꾸려서 개발한다는 것은 아무래도 혼자서 하는 것보다는효율이 더 잘 나오고 회사에게 더 생산성..
스토리북 env 설정 trouble shooting 1. 상황 설명 처음에 나이스 API의 학교 검색 기능을 사용하려 api key를 발급받고평소처럼. env.local 파일에 해당 api key를 넣었습니다. page.tsx에서의 console.log는 잘 찍혔지만 storybook에서도 console.log로 잘 되는지 api key를 테스트해보니 undefined가 반환되는 에러가 생기고 말았습니다.처음에는 사소한 버그인 줄 알고 storybook 재시작과 기기 자체를 재시동 하기도 해 보았습니다. 하지만 그런 사소한 버그가 아니란 것을 깨닫고 바로 구글링을 시작했습니다. 2. 첫 번째 해결방법 첫번째 해결방법은 Next.js환경에서는 환경변수를 저장할 때 항상 앞에 NEXT_PUBLIC을 붙여주어야 합니다.마침 내가 설정한 환경 변수에는 NEXT_..
lazy loading이 뭘까? (feat SSR) 저번에 블로그를 서로 공유하다가 어떠한 개발자 분께서 next/image관련해서 발표를 하셨는데관련 정보를 찾아보다가, lazy loading이 관련되어 있어서 알아보게 되었습니다.  1. lazy loading?lazy loading은 말 그대로 해석을 해본다면 게으른 로딩? 이 됩니다. 말 그대로 중요도가 떨어지거나 혹은 화면에 즉시 보여질 필요가 없는 요소의 로딩을 게으르게 함으로써웹 페이지의 로딩을 최적화 하는 기술을 뜻합니다.  2. 왜 사용할까?lazy loading은 이미지, 동영상, 스크립트를 한 번에 불러올 시에 로딩시간이 길어질 수 있다는 부분을 보완하여실제로 먼저 볼 부분만 로드하고, 나머지 부분은 후에 로드 시켜서 초기 로드 시간을 단축시킬 수 있습니다. 또, 이러한 부분에 의해서 ..
JS 고차함수란 고차함수를 할기 전에, 먼저 알면 좋은 일급 함수에 대한 개념을 정리하고 들어가 보겠습니다.1. 일급 함수란? 일급 함수는 함수를 일급 객체로 취급하는 것을 말합니다.JS는 함수도 객체로 처리하기 때문에 일급 함수라고도 부릅니다. 근데 이 일급 객체는 또 무엇이냐?2. 일급 객체란? 일급 객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다.예를 들어, 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때를 말합니다. 그렇다면 JS에서는 변수에 담기, 파라미터로 전달, 함수의 반환 값, 동적 프로퍼티 생성 등이 있을 수 있습니다. 3. 고차 함수란? 고차함수는 함수를 인자로 받거나 함수를 반환함으로써 작동하는 함수를 말합니다예를 들어 JS의 내부 고차함..
React에서 라이브러리 없이 Pull To Refresh 구현해보기 1. Pull To Refresh란?Pull To Refresh란 말 영문 그대로,  Pull 당겨서 Refresh 세로고침이라고 합니다.저희가 주로 보는 인스타그램이나 여러 앱들이 당겨서 세로고침 하는 것을 확인할 수 있습니다. 2. Real?근데 과연 진짜로 배민, 인스타그램 다른 소프트웨어 어플들이 사용을 할까?라는 궁금증이 생겨서, 실제 배달의 민족 프론트엔드 분에게 질문을 해보았습니다.이런 식으로 답변을 해 주셨습니다.3. Why Web?근데 이건 앱 같은 경우에만 해당할 것 같은데 왜 웹에서 구현하려 하나요?라고 할 수도 있습니다. 1. 사용자 경험의 일관성 : 서비스가 동일한 기능을 제공을 한다면 전반적인 사용자 경험이 일관되고 예측 가능해집니다.2. 기술적 일관성 : 웹과 앱에서 동일한 기..
interface와 type alias 저희가 웹 개발을 하다 보면, 어쩔 수 없이 TypeScript를 많이 접하고 또 사용하게 될 것입니다.TypeScript는 컴파일 시간에 코드의 타입을 확인해 주는 JavaScript의 상위 집합 언어입니다. 이 글에서는 그 TypeScript에서의 타입을 선언하는 interface 방식과 type alias 방식에 대해 알아보겠습니다. 1. interfaceinterface는 객체 타입에 대한 선언으로 주로 아래와 같은 형식으로 사용이 됩니다.interface Me { name: string; age: number;} 2. type aliastype alias는 alias 뜻이 한글로 번역했을때 별명인 것과 마찬가지로,type에 별명을 붙여 사용한다. 라고 해석하면 편합니다. interface는 ..
프론트엔드로 간단 크롬 확장 프로그램 만들기 1. 세팅하기 일단 CRA로 프로젝트를 생성해 주면 public 폴더에 아래 사진처럼 manifest.json 파일이 생길 것 입니다. 크롬 확장 프로그램을 만들기 위해서는 이 파일을 수정을 해줘야 합니다.  먼저, 저 같은 경우에는 공식문서를 참고해서 이런 식으로 파일을 세팅해 주었습니다. 2. 실행시켜 보기 크롬 확장 프로그램 같은 경우에는 개발 방식이 특이한데, dev나 start로 프로젝트를 확인하기보다build를 통해서 로드를 합니다. build를 완료하였다면 chrome://extensions/으로 이동해, 개발자 모드를 켜, 압축해제된 확장 프로그램을 로드합니다.라는 버튼을 클릭하여, 방금 build 한 파일을 로드시켜, 디바이스의 chrome에 설치를 시켜주면 확인할 수 있습니다.  일단 ..
Chart.js 사용해서 나만의 커스텀 차트 만들기 1. Chart.js? Chart.js는 이름부터 Front-End에서 차트를 더욱 쉽게 만들 수 있게 해주는 라이브러리입니다. 2. 설치하기npm install chart.jsyarn add chart.jspnpm install chart.js 3. 선택한 이유어느 날 진행하고 있는 프로젝트의 Admin의 디자인이 끝나 확인을 해보니,이런 식으로 차트가 있는 디자인이 되어 있었습니다. 일단 제가 개인적으로 다양한 라이브러리를 사용하는 것을 좋아하기도 하고,또, 라이브러리로서 한 번쯤은 들어봤던 유명한 라이브러리라 한번쯤 사용하고 싶어, 사용하였습니다. 4. 구현Chart.js를 사용을 하게 된다면, Chart라는 것을 Chart.js에서 가져와, 사용을 해야 합니다. 제 코드를 통해 설명을 해 보자면,..

티스토리툴바