전체 글 183

TOPCIT 벼락치기로 고득점 하는 법 (610점 후기) (TOPCIT 준비하는 법 / TOPCIT 공부법 / TOPCIT 에센스 Ver.3 공유 / TOPCIT 기출문제 공유)

작성일 기준 약 한 달전인 22년 10월 29일에 TOPCIT(탑싯)을 응시하고 왔다. 오늘 결과가 발표되어 오늘 포스트를 작성한다. 높은 점수는 아니지만 꽤 짧은 시간에 얻은 점수이기에 준비한 방법을 공유하고자 한다. 준비의 준비 탑싯은 준비하기 참 어려운 시험이다. 일단 시험을 잘 볼 동기가 적기에 많이 활성화 돼있는 시험이 아니며 그에 따라 정보도 적기 때문이다. 필자도 소프트웨어 마에스트로라는 프로그램에서 개인 평가로 들어가기에 어쩔 수 없이 준비했던 시험이었다. 어찌 되었든 이 글을 보는 사람들은 각자의 이유로 '짧은 시간'내에 '어느 정도'의 점수를 받길 원하는 사람들이라 생각한다. 필자는 시험보기에 앞서 3일 정도 준비했기에 이 글이 도움이 될 것이라 생각한다. 먼저, 탑싯 공부 준비를 위해..

[Typescript / Dayjs] 1분만에 글 작성 경과 시간 구현하기 (몇 분 전, 몇 시간 전, 며칠 전) (measure time elapsed on typescript, javascript)

유튜브 등을 보면 영상이 올라온 경과 시간등이 표시된다. 커뮤니티 등을 개발하다보면 글 작성 경과 시간을 표시해줄 필요가 있는데 Dayjs를 사용하면 간단하게 구현할 수 있다. Dayjs는 기존의 구린 자바스크립트 기본 날짜 함수인 Date를 개선시켜준 라이브러리로 무척 가볍고 사용하기 편하다. Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org 자바스크립트에서 날짜를 다룬다면 무조건 무조건 무조건 쓸 것을 추천한다. 우선 dayjs 라이브러리를 설치해준다. npm i dayjs 경과시간 함수를 만들기 위해선 duration 플러그인을 사용해야한다. Day.js · 2kB JavaScript ..

[React / Typescript] props에 기본 값 설정하는 법 (react props default value typescript)

우선 기존에 사용되던 defaultProps는 더 이상 사용되지 않는다. (참고↓) RFC: createElement changes and surrounding deprecations by sebmarkbage · Pull Request #107 · reactjs/rfcs This proposal simplifies how React.createElement works and ultimately lets us remove the need for forwardRef. Deprecate "module pattern" components. Deprecate defaultProps on function components. ... github.com 가장 쉽게 사용할 수 있는 방법은 optional argume..

Front-End/React.JS 2022.10.22

[AirTable / Zapier / Slack] 고객 문의/건의 내용 알림 및 관리 자동화하기

빠른 피드백을 통해 서비스를 빠르게 개선시키기 위해서 전달 받은 고객의 문의/건의 사항을 모으고 정리하는 일은 굉장히 중요하다. 이를 위해서 고객 문의/건의 사항에 대한 자동화된 처리가 필요했고 그에 따라 사용하게 된 툴들을 소개하고자 한다. AirTable 고객 문의/건의 사항등을 데이터베이스에 넣기에는 애매한 부분이 있다. 이에 대안으로 AirTable을 알게되었다. 구글 스프레드시트와 구조는 거의 비슷하며 테이블을 만들면 자동으로 rest api가 생성된다. Airtable | Everyone's app platform Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate..

자동화 툴 2022.10.11

[NextJS] Next.js 프로젝트에 Google Analytics 붙이기

GA를 붙이는 여러 라이브러리들이 있다. 하지만 유럽권에서 개인정보를 활용한 마케팅에 규제를 가하고 있는 이유로 구글 새로운 방식의 마케팅 지원을 할 수 있게 변화를 주고 있다. 이런 변화에 대응할 수 있도록 라이브러리 없이 Vercel에서 제공하는 가이드 라인에 따라 조금은 투박하게 직접 붙여보기로 했다. _app.js 파일에 GA 측정 ID 추가 보통 태그나 태그 안에 들어갈 내용을 커스텀하기 위해 _document.js 파일을 이용한다. 하지만 아래 예제에 따르면 Next 11 버전에서 추가된 next/script를 이용해 _app.js에서 구현하기를 권고하고 있다. GitHub - vercel/next.js: The React Framework The React Framework. Contribu..

Front-End/Next.JS 2022.10.09

목표, 꿈, 돈

나의 인생의 목표, 나는 무엇을 하고 싶을까? 궁극적으로 이루고 싶은 게 무엇일까? 오늘 문득 생각을 가져본 지 오래되었다는 생각을 하였다. 스스로 묻고 스스로 답하는 생각. 나에게 묻는 생각들. 어쩌면 대한민국 이 땅에 사는 많은 사람들이 그러한 것 같다. 한국의 많은 사람들이 ‘평범’해지기 위해 노력한다. 하지만 이 평범의 기준은 무척 높다. 사실 나는 이 평범보다도 더 뛰어나고 싶다. 남들이 오지 못한 곳을 더 오르고 나의 뛰어남을 증명하고 싶다. 하지만 나와 비슷한 또래가 훨씬 앞에서 달려나가는 것을 볼 때 종종 무기력함을 느낀다. 어떻게 보면 내가 특별하지 않다는 걸 인정하기 싫은 것 같다. 그럼 나는 왜 특별하고 싶은걸까? 남들보다 특별해서 얻는 게 뭐지? 사람들의 인정인가? 사랑인가? 명성인..

볕뉘 생각 2022.09.23

NextJS + Typescript + TailwindCSS 초기 세팅하기 (NextJS Typescript TailwindCSS project create and setting)

Create NextApp with Typescript npx create-next-app@latest --ts # or yarn create next-app --typescript 프로젝트가 만들어지고 폴더가 생기면 해당 프로젝트 폴더로 이동 Install TailwindCSS npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Configure template paths /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", ]..

Front-End/Next.JS 2022.09.12

[Web / CSS] WebView 버튼 클릭 시 생기는 파란색 박스 해결 (웹을 앱처럼 보이게 하는 법)

스마트폰으로 웹페이지를 둘러볼 때 웹페이지가 App 스럽지 못하다는 생각을 해본적이 있을 것이다. 이는 테두리와 박스 때문이다. 또한 링크나 이미지를 길게 누르면 주소를 복사하거나 이미지를 저장할 수 있는 옵션이 나타난다. 이런 요소들은 웹페이지일 때는 상관없지만 App 처럼 동작하는 것을 방해한다. WebView의 기본 스타일과 동작을 제어할 수 있어야 App과 비슷한 느낌으로 웹페이지를 만들 수 있다. 이는 Webkit CSS의 속성을 통해 제어할 수 있다. html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } -webkit-touch-callout 속성 : 화..

Front-End/HTML&CSS 2022.09.06

[NextJS / Typescript] Zustand Persist middleware localStorage 접근이 안되는 문제 (+ Zustand Persist Typescript 환경 type 에러)

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com Zustand의 Persist라는 middleware를 사용하면 localStorage와 연동하여 자동으로 전역 상태 관리 내용을 localStorage에 저장시키고 관리할 수 있다. (위 링크 참고) localStorage는 브라우저를 닫아도 그대로 남아있기에 창을 닫아도 상태 값이 남아있어야 하는 경우 유용하게 사용할 수 있다. 필..

Front-End/Next.JS 2022.08.04

[NextJS / Typescript] Eslint + Prettier 설정 후 husky로 자동화하는 법

npx eslint --init 터미널을 키고 위 명령어를 입력하여 .eslintrc.js 파일 만들기 위와 같이 질문에 체크하면 된다. 중간에 Which style guide do you want to follow?에는 에어비엔비 스타일로 해도되고 취향것 하면 된다. 그럼 추가로 dependencies가 필요하다고 하는데 설치하면된다. 필자는 npm으로 설치했다. .eslintrc.js module.exports = { env: { browser: true, es2021: true }, extends: [ 'plugin:react/recommended', 'standard' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: {..

Front-End/Next.JS 2022.07.27
반응형