전체

Review

<읽기 쉬운 코드> 도서 리뷰

안녕하세요. dawonny 입니다. 오늘 리뷰할 도서는 입니다. 1.코드를 작성해서 프로그램이 동작하게 하는 것. 이렇게 단순히 프로그램이 ‘실행’이 되게 하는 것도 개발자로서 중요한 임무이고 가장 기본이 되는 것이지만, 더 나아가서 고려해볼 것이 있다면 무엇 일까요? 개발에 대해 잘 모르는 분야에 있는 사람있는 사람이라면 서비스 자체가 잘 실행되는 것이 더 중요할 수 있겠지 만요. 코드를 깔끔하게 짜는 것, 다양한 패턴을 적용하고 구조를 잘 설계하는 것… 등등 모두 답이 될 수 있을 것 같습니다.하지만 저는 이 책을 읽고 이 모든 것이 결국에는 이 목표를 향해야 하겠구나-라는 생각이 들었어요. 바로 사람이 읽기 쉬운 코드를 짜야한다는 것입니다.  2.개인 프로젝트가 아닌이상 개발자들은 팀으로써 팀원과..

Review

<실전 스벨트 & 스벨트킷 입문> 도서 리뷰

안녕하세요 dawonny 입니다.오늘 리뷰 할 도서는  입니다.  저는 웹 프론트엔드 분야 공부를 하며, 주로 리액트라는 라이브러리를 학습하고 있는데요.하지만 이번 도서를 좋은 기회로 제공받아 스벨트에 대해서 처음 접해보게 되었습니다!  아무래도 당장 대중적으로 쓰이고 취업시장에서 수요가 많은 것은 리액트이겠지만, 자바스크립트 현황 2022 보고서를 보면 꾸준히 스벨트의 인기도가 우상향하고 있는 것을 알 수 있어요.그만큼 계속 사람들이 관심을 가지고 있는 스벨트에 대해서 저 또한 흥미가 생겼는데요. 무엇보다 저는 동일한 기능을 구현하는 스벨트 코드와 리액트 코드를 비교한 것을 보면서, 스벨트가 정말 궁금해졌어요. 스벨트의 구문이나 템플릿 언어 자체가 쉽게 느껴졌거든요.  스벨트의 특징은 다음과 같이 정리..

Develop/React.js

[React] api 호출 결과 캐싱하기 (feat. session storage)

요즘 프로젝트를 개발하면서 api 호출하는 부분에 대해서 최적화할 수 있는 부분이 있다면 조금씩 리팩토링해보는 중이다.그 중에서도 똑같은 내용으로 api 를 호출했을 때, 다시 응답을 새롭게 기다려야하는 부분을 개선해보고 싶었다. 캐싱 이란?캐싱이란 어떤 데이터를 한번 응답으로 받으면, 임시로 데이터를 다른 곳에 저장해서 필요시에 더 빠르게 불러와서 사용할 수 있는 프로세스를 말한다. 즉, 똑같은 요청을 또 하는 불필요한 요청을 줄일 수 있다. 캐싱을 어디에하지?localStorage, sessionStorage 등 다양한 곳에 저장할 수 있다.나는 브라우저가 닫히면 캐시 데이터 또한 깔끔하게 삭제되길 원했기에 sessionStorage에 저장하는 방법을 택했다. * 영구적으로 저장하고 싶으면 local..

Review

<개발자 기술 면접 노트> 도서 리뷰

안녕하세요 dawonny 입니다. 오늘 리뷰 할 도서는 입니다. 마침 면접을 준비해야하는 상황에 놓인 저의 막막함을 조금이나마 달래준, 그리고 앞으로의 지원에도 방향성을 알려준 고마운 책이었어요.이 책에서는 현직 카카오 면접관이 IT 기업 취업과 이직 전략을 상세하게 다룹니다. 면접관의 입장에서 지원자에게 바라는 모든 내용들, 예를들어 기본CS지식, 포트폴리오, 코딩테스트, 면접 팁 등 정말 알차게 담겨있어요.그 중에서 개인적으로 기억에 남는 내용은 다음과 같아요.  📖 p.50 신입을 뽑을 때 중요하게 보는 것회사 규모가 클 수록 신입사원 공채 때 특정 언어 구사 능력을 보는 경우는 드물다. 특정 언어를 구사하면 우대 사항은 있을지라도 그보다는 개발에 흥미가 높아서 빠르게 배울 수 있는지, CS 전..

Review

<클라우드 네이티브 스프링 인 액션> 도서 리뷰

안녕하세요 :) dawonny 입니다. 오늘 리뷰할 책은 입니다! 저는 현재 프론트엔드를 공부하고 있어서 확실히 클라우드나 스프링에 관한 내용을 많이 접할 일은 상대적으로 적었는데요. 이번에 좋은 기회로 책을 읽어보게 되어서 이 참에 클라우드에 대해서 관심을 가져보는 경험을 해보자! 싶었습니다. 책의 첫 목차를 보았는데 그동안 몰랐던 점과 부족했던 지식을 채울 수 있을 거란 기대감이 들었습니다. 책의 구성은 16개의 목차가 4개의 파트로 나누어져 있었고 책을 읽기 전 가장 기대했던 파트는 첫 번째 파트입니다. 첫 번째 파트는 클라우드 네이티브에 대한 설명이 있었는데 그동안 주워들었던 개념들을 정리할 수 있는 점이 좋았습니다. 또한, 클라우드 환경의 장점을 보며 왜 이 책을 읽어야 하는지 스스로 이유를 찾..

Tips

Github README 기술 스택 쉽고 예쁘게 꾸미기

오랜만에 깃허브 리드미 꾸미기를 하다가 기술스택 부분을 작성해보고져서 서치를 하던 중 괜찮은 것을 발견해서 공유합니다! 결과물은 위와 같아요. 8가지 정도 추가해봤는데, 예쁜 것 같아요. 위 이미지처럼 기술 스택을 뱃지형태로 만드는 방법이 제일 많이 쓰는 방법인 것 같은데요. 저는 이것 말고, 좀 더 둥글둥글하고 로고가 더 돋보이는 디자인을 원했어요! 마침 편리하게 추가할 수 있는 기능을 제공하는, 레포지터리를 찾을 수 있었는데요. 바로 skill-icons 입니다. 사용법 사용법은 간단합니다. [![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev) 위 코드를 Github README 에 복붙하기만 하면..

Develop/React.js

[React] 외부 영역 클릭시 메뉴 닫기 (feat. useRef 이용)

프로젝트에서 메뉴 기능을 개발하면서 useRef 기능을 이 참에 잘 이해하고 써보려고 했다. 햄버거 모양의 메뉴 버튼을 클릭하면 → 메뉴가 펼쳐진다 햄버거 모양의 메뉴 버튼을 다시 클릭하면 → 메뉴가 닫힌다 펼쳐진 메뉴를 제외한 화면의 다른 부분을 클릭하면 → 메뉴가 닫힌다 👉 이걸 구현하고자 함!! useState, useRef, useEffect 훅을 사용해서 메뉴의 열림/닫힘/메뉴 바깥 영역 클릭시 메뉴 닫힘 기능을 구현해보자. const [isMenuOpen, setIsMenuOpen] = useState(false); const menuRef = useRef(); // 드롭다운 메뉴에 대한 참조 먼저 useState 훅을 사용해서 메뉴의 열림/닫힘 상태를 나타내는 isMenuOpen 이라는 상..

Develop/React.js

[React] TailwindCSS font 적용하기

TailwindCSS 에 폰트 적용하는 법을 정리해보려한다! 이전에 했었는데 생각이 안나서 다시 찾아봤다. 나중에 또 안 찾아보도록 ... 폰드 다운로드와 저장 https://fonts.google.com/ Browse Fonts - Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 우선 위 사이트에서 폰트를 다운받는다 폰트 ttf 파일을 프로젝트에 넣어둔다. 나는 src > assets 폴더에 fonts 라는 폴더를 하나 만들어서 여기에 ttf 파일을 저장했다. font-face @font-face { font-family: "Roboto"; src: url("../src/..

Review

<멀티모달 생성 AI 인사이드> 도서 리뷰

안녕하세요! 이번에 읽은 도서는 제가 평소에 접하던 웹, 프론트엔드 분야와 조금 다른 AI에 관련된 도서였어요. 도서의 제목은 입니다. 저는 평소에 개발을 할 때, 개인 작업을 할 때에도 GPT4를 정말 잘 사용하고 있는데요! 유료 버전을 구독하고 사용하고 있을만큼, 이제 GPT4가 없던 때로는 돌아가지 못할 것 같습니다. 제일 유명한 모델이 흔히들 아시는 GPT 이지만 저는 이 책을 통해서 다른 모델들도 어떤 다양한 특징이 있는지 알 수 있었어요. 멀티모달 생성 AI 의 기초적인 개념부터, 어떻게 활용하면 좋을지, 그리고 미래에는 어떨지 전망까지 다루고 있어서 생성 AI 에 관심이 있으신 분들이라면 흥미롭게 읽어볼 구석이 많을 것 같았습니다. 또한 적절히 멀티생성 AI에 대한 예시와 이해하기 쉬운 설명..

Develop/Typescript

[Typescript] keyof / Mapped Types / 조건부타입 / infer

keyof keyof 키워드는 object 타입의 모든 key 를 가져와서 유니온 타입으로 반환한다. 아래의 예시를 보자 interface Person { age: number; name: string; } type PersonKeys = keyof Person; // "age" | "name" 위에서 PersonKeys 타입은 age와 name 중 하나의 문자열 값만 가질 수 있는 리터럴 타입이다. Mapped Types Mapped Types 를 이용하면, 기존의 타입을 새로운 타입으로 변환할 수 있다. object 의 각 속성에 대해 반복적으로 적용을 할 수 있어서 타입 변환 과정을 간결하게 만들어 준다. type TypeChanger = { [Key in keyof MyType]: NewType;..

Develop/Typescript

[Typescript] implements / object index signatures

interface와 implements 를 사용한 class 타입 확인 interface 는 object 의 타입을 지정할 때 사용할 수 있다. 그리고 또 다른 용도로, class 의 타입을 확인할 때에도 사용할 수 있다. 이 때, implements 키워드도 필요하다. 아래의 예시를 보자. class Car { model: string; price: number = 1000; constructor(a: string) { this.model = a; } } let 붕붕이 = new Car('morning'); 위의 Car 클래스에서 생성된 객체들은 model 과 price 속성을 가진다. 클래스가 특정 속성을 가지고 있는지 타입으로 확인하고 싶을 때, interface 와 implements 키워드를 사..

Develop/Typescript

[Typescript] d.ts File

개념 d.ts 파일은 TS에서 타입 정의를 저장하는 파일이다. 여기서 'd' 는 Definition 의 약자이다. 이 파일들은 TS 컴파일 과정에서 JS로 변환되지 않으며, 타입 정보만 포함한다. 주로 2가지 용도로 사용된다. 1. 타입 정의 저장 : 타입 정보만을 분리하여 저장하고, 필요한 곳에서 import 해서 사용한다 2. 레퍼런스 용 : 프로젝트에서 사용하는 타입을 정리해놓은 문서로 활용할 수 있다. d.ts 파일에서 타입 정의하기 d.ts 파일 내에서는 주로 type 키워드, interface, 함수 타입 정의를 포함할 수 있다. 함수 본문을 정의할 수는 없고, 파라미터과 return 타입만 지정할 수 있다. export type Age = number; export type Multiply ..

Review

<모던 리액트 Deep Dive> 도서 리뷰

안녕하세요 오늘 리뷰할 도서는 입니다. 제가 웹 프론트엔드 학습을 하면서 가장 주요하게 공부하고 있는 라이브러리가 React 인 만큼, 정말 읽어보고 싶었던 책인데요. 이 책에서는 React 개발자로써 알아두어야 할 내용을 정말 다양하게 다루고 있어요. 책에서 다루는 내용을 나열해보자면 다음과 같습니다. -리액트에서 자주 쓰는 자바스크립트 -함수, 클래스, 클로저, 이벤트 루프, 비동기 통신, -리액트 코드를 효과적으로 작성하기 위한 타입스크립트 활용법 -JSX, 가상 DOM과 리액트 파이버 -함수/클래스 컴포넌트, 렌더링 -메모이제이션, 리액트훅 -서버 사이드 렌더링, Next.js 톺아보기 -상태관리, 디버깅하기 위한 리액트 개발 도구 -좋은 리액트 코드 작성을 위한 환경 구축, 리액트 테스트 라이브..

Develop/Typescript

[Typescript] declare & ambient module

JS 파일에 선언된 변수 TS 파일에서 사용하기 JS 파일에서 선언된 변수를 TS 파일에서 사용하고 싶을 때에는 declare 키워드를 사용한다. declare 키워드를 사용하면 TS 파일 내에서 JS 파일에 정의된 변수나 함수의 타입을 명시할 수 있다. declare let a: number; 위 예시처럼 TS 파일에 declare 를 선언하면 '변수 a 는 number 타입이며, 이미 어딘가에 정의되어 있다' 라고 TS 컴파일러에게 알리는 것이다. declare global 'declare global' 은 TS 모듈 내에서 전역 변수나 타입을 선언할 때 사용된다. 일반적으로 TS 파일은 자체 scope 를 가지고 있어, 파일 내에서 선언된 변수나 타입은 그 파일 내에서만 접근이 가능하다. 하지만 때..

Develop/Typescript

[Typescript] Tuple type

Tuple type Tuple 은 타입스크립트에서 고정된 수의 요소를 가지면서, 각 요소의 타입이 명시적으로 지정된 배열의 타입이다. 각 요소의 타입은 다를 수 있고, 배열의 길이는 고정된다. 예를 들어 첫번째 요소가 문자열이고, 두번째 요소가 숫자인 배열을 정의하고 싶다면 다음과 같이 작성할 수 있다. let exampleTuple: [string, number] = ['hello', 42]; Tuple 응용 : Rest Parameters 함수의 매개변수로 '...' (rest 연산자)를 사용하면 인자를 배열로 받을 수 있다. 이 기능을 tuple 이랑 결합해보자. 예를 들어 첫번째 인자는 문자열이고, 두번째 인자는 숫자여야 하는 경우에 다음과 같이 작성할 수 있다. args 라는 배열에 string..

Tips

README 작성 꿀팁 / 프로젝트 구조도 트리 만들기(feat. file-tree-generator)

README를 작성하다보면 Architecture 소개 부분에 아래와 같이 폴더 구조도를 넣고싶은 경우가 있다. 구글링 해보니까 쉽게 할 수 있는 VSCode 확장 프로그램이 있길래 소개한다. VSCode Extension 에서 file-tree-generator 를 설치한다 원하는 폴더에서 오른쪽 클릭을 하고 [Generate to Tree] 를 클릭한다 그럼 이렇게 프로젝트 구조도가 보기좋게 만들어져서 나온다. 아이콘은 [icon on] [icon off] 버튼을 통해서 만들수도, 지울수도 있다. 내용을 복사해서 README 작성 란에 추가할 때 위 아래에 백틱을 3개씩 추가하면 완성! ``` (복사한 내용 붙여넣기) ``` 자주 쓸 것 같다!

Review

<프로덕트 매니지먼트의 기술> 도서 리뷰

안녕하세요 dawonny입니다. 이번에 읽어본 도서의 제목은 입니다 저는 프로젝트 개발 과정에서 팀원들과 소통하며, PM 역할을 수행하는 팀원과의 협업 경험도 자주 있었는데요. 협업 과정 중에 저는 프로덕트 매니저(PM) 직무에 대해 정말 존경스러워졌고 또한 매력을 느끼게 했습니다. 이 책은 프로덕트 매니저가 프로덕트의 성공을 위해 나아가야 할 방향과 현실적인 문제들을 솔직하게 다룹니다. 특히, 개발자, 디자이너, 임원, 사용자와의 효율적인 소통 방법에 대한 내용은 매우 흥미롭게 다가왔어요. 정말 ‘모두와’ ‘잘’ 소통할 수 있는 사람이어야 되겠구나 싶더라구요. 저자는 다양한 문제 상황을 시나리오로 보여주면서, 이런 문제상황들을 해결하기 위한 실질적인 조언을 해줍니다. 이를 통해 '사람을 대하는 커뮤니케..

Review

<개발자 오늘도 마음 튼튼하게 성장하기> 도서리뷰

안녕하세요, dawonny입니다. 이번에 읽어본 책은 입니다. 다른 개발자 관련 서적들과는 제목과 표지의 분위기가 달라서 그런지 첫인상이 귀여웠어요. 이 책은 개발자들을 위한 자기계발서 같았습니다! 저는 사실 ‘어떻게 살아야한다.’, ‘성공하는 방식은 이렇다’ -와 같이 말하는 책들은 비판적으로 읽고 부담스러워서 거리를 두게 되는데요. 이 책에서는 개발자들이 본인들의 생산성을 어떻게 높일 수 있는지, 이를 높이기 위해서 어떤 구체적인 방법을 적용해야하는지, 이 방법에 대한 과학적인 근거는 무엇인지에 대해서 자세하게 설명해줍니다. 그래서 굉장히 흥미롭게 읽었어요. 되새기고 싶은 문장에는 인덱스를 붙이고 표시도 해가면서 읽었는데, 덕분에 자기반성을 많이 했답니다 🥲 무언가에 몰입하는데에 구체적인 노력을 기울..

Review

SPARCS 서비스 해커톤 2024 후기(feat. 호텔에서의 해커톤🛏️)

안녕하세요. dawonny 입니다. 얼마전 카이스트에서 열리는 SPARCS 2024 해커톤에 다녀왔습니다! 전국에서 80명, 총 20팀이 참여하게 되는 해커톤이었는데요. 저는 PM / 디자인 / iOS / 서버 개발이 다 되는... 다재다능한 친구에게 같이 나가자고 졸라서 2인으로 참여하게 되었어요! (개인 또는 2인 팀 신청이 가능했습니다) 밖에서 일정이 끝나고 카페에 가서 부랴부랴 지원서를 쓰고 제출했는데 합격했더라구요! 곧 팀매칭 안내가 나와서, 바로 팀 톡방을 만들어서 소통을 시작했어요. 저는 웹 프론트로 지원했고, 나머지 두분은 안드로이드앱과 Django 서버 개발자이시더라구요. 이 해커톤은 특이하게 해커톤 며칠전에 미리 주제를 알려주고, 데이터 분석 미션을 내주었습니다. 그래서 미리 개발을 시..

Develop/React.js

[오류] Vercel 배포 시 404: NOT_FOUND react-router 관련 에러 해결 (feat. React, Vite)

문제 Vite로 생성한 React 프로젝트를 개발하는 과정에서 나는 react-router-dom 라이브러리를 활용해서 라우팅을 진행했다. import { Route, Routes } from "react-router-dom"; import TreeBranchView from "./pages/TreeBranchView"; import MemberBranchView from "./pages/MemberBranchView"; function App() { return ( ); } export default App; 코드를 모두 작성하고 Vercel 로 배포한 후 배포된 주소로 접속하는데 분명 로컬에서는 잘 라우팅 되어 접속되었던 주소가, Vercel로 배포한 주소로 들어갔을 때에는 404: NOT_FOUNT..

Tips

아이폰(모바일)에서 localhost 개발 서버 열기

Vite 으로 생성한 React 프로젝트를 개발 서버에서 실행시킬 때 보통 터미널에서 npm run dev 로 실행하는데 모바일 기기로도 확인할 수 있으면 좋을 것 같아서 방법을 찾아봤다. 맥북과 아이폰을 사용한다는 전제하에 설명해보겠다. 방법 1. 먼저 아이폰과 맥북은 동일한 와이파이에 접속해야한다. 2. 맥북 터미널에서 다음과 같은 명령어를 입력한다 ipconfig getifaddr en0 그러면 IP 주소가 뜨는데, https:// 로 모바일에서 사파리로 접속하면 된다. 하지만 나는 제대로 연결되지 않아서 추가적인 과정을 하나 더 해줘야했다. ref:https://dev.to/bhendi/how-to-open-your-vite-dev-server-on-your-mobile-k1k 3. React 프..

Develop/Typescript

[Typescript] React에 Typescript 사용하는 법

React 프로젝트 생성 타입스크립트의 셋팅이 완료된 새로운 프로젝트를 생성하는 법이다 npx create-react-app 프로젝트명 --template typescript 만약 기존 프로젝트에 타입스크립트만 추가하고 싶다면 다음과 같이 터미널에 입력한다 npm install --save typescript @types/node @types/react @types/react-dom @types/jest Typescript로 만든 React 프로젝트 일반 프로젝트와 다른 점은 컴포넌트 파일에 js 가 아닌 tsx 확장자를 사용해야한다는 것이다. 그러면 리액트 프로젝트에서 typescript 문법을 어디에 응용할 수 있을지 알아보자 JSX 타입지정 리액트에서는 변수나 자료에 를 담아서 쓸 수 있다. 리액트..

Review

《된다! 맥북&아이맥 - 맥OS 소노마》도서리뷰

안녕하세요 dawonny 입니다. 개발자 직무를 희망하는 저는 개발을 할 때에 맥북이 좋다는 말을 정말 수없이 들어왔는데요. 아이폰, 아이패드, 애플워치, 에어팟… 모든 게 다 애플꺼면서 정작 노트북은 다른 기업 제품을 쓰고 있었어요. 그래서 저도 6개월 전쯤에 처음으로 맥북을 구매하게 되었는데, 정말 다른 기기들과의 연동성이 최고더라구요. 현재 아주 잘 쓰고 있어요! 하지만 지금까지 써왔던 윈도우 기반이랑은 꽤 많이 다르기에 처음엔 많이 헤맸던 기억이 나네요. 주변 맥북 유저 지인들을 보면서 설정이나 유용한 기능들을 하나하나 물어보고 구글링하면서 저만의 맥북 환경을 열심히 커스텀 했어요. 그러다 《된다! 맥북&아이맥 - 맥OS 소노마》 도서를 좋은 기회로 받아보게 되었는데요. 처음에 맥북을 샀을 때 이..

Develop/Typescript

[Typescript] Generic

Generic function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a) 위와 같은 코드를 보자. unknown 타입의 array 자료를 입력하면, array의 맨 앞 첫번째의 요소를 리턴해주는 함수가 있다고 해보자. console.log 로 콘솔에 찍힌 a 의 타입은 뭘까? unknown 이다. 입력하는 array 도 unknown 타입이기 때문이다. function 함수(x: unknown[]) { return x[0]; } let a = 함수([4,2]) console.log(a + 1) 때문에 이런 경우에는 에러가 날 것이다. 왜냐하면 a 는 unknown 타입인데, 숫자인 1을 더하려고 했기 때문이다. 이런 문제를 해결..

Develop/Typescript

[Typescript] type import export & namespace

type import export a.ts 파일에 있는 것을 b.ts에서 쓰고싶다면 다음과 같이 코드를 작성할 수 있다. (a.ts) export type Name = string | boolean; export type Age = (a :number) => number; (b.ts) import {Name, Age} from './a' let 이름 :Name = 'kim'; let 함수 :Age = (a) => { return a + 10 } namespace 과거에는 자바스크립트의 import export 문법이 없었다 그래서 코드를 써서 다른 파일들을 일종의 첨부처럼 했는데 이러면 파일이 많아질 수록 변수명이 겹치는 위험이 발생할 수 있었다. 그래서 외부파일에서 사용하지 않을 변수들은 함수로 감쌌었..

Develop/Typescript

[Typescript] protected, static

protected class 에 관련해서, extends 라는 문법을 쓰면 class 를 복사해서 사용할 수 있다. 근데 private 으로 선언한 것은 기존 class 안에서만 사용할 수 있다. extends 로 만든 class 에서 원본의 class 속성을 쓰고 싶다면 protected 로 선언하면 된다. private 이랑 같으면서도, extends 된 class 안에서도 사용가능하게 해준다. class User { protected x = 10; } class NewUser extends User { doThis(){ this.x = 20; } } NewUser class 는 User class 를 extends 한다. NewUser 에서 this.x 처럼 x 를 쓰려고 하면, 기존에 privat..

Develop/Typescript

[Typescript] public, private

객체 지향 언어에서 제공하는 public, private, static, protected 와 같은 키워드들을 타입스크립트에서 사용가능하다. public 타입스크립트는 class 안에서 public 키워드를 사용가능하다 class User { public name: string; constructor(){ this.name = 'kim'; } } let user1 = new User(); user1.name = 'park'; 위 코드에서는 public 으로 선언된 name 이라는 속성이 있다. 이렇게 name 처럼 public 이 붙은 속성은 user1과 같은 자식 object 들이 마음대로 사용/수정이 가능하다. 만약 public 을 안 붙인 채로 만든다고 해도, 기본적으로 자동으로 아무것도 안붙인 경..

Develop/React.js

[React] 스크롤에 따라 애니메이션 적용하기 (feat. Framer Motion)

서비스 홍보 페이지를 만들면서 스크롤에 따라서 화면에 특정 컴포넌트가 나타날 때, 위에서 자연스럽게 올라오는 애니메이션을 적용해보고싶어졌습니다. 라이브러리 선택 구글링을 해보니 react-reveal 과 framer motion 이라는 2가지 라이브러리를 찾을 수 있었는데, react-reveal 은 마지막 업데이트가 오래되기도 했고 npm install 을 해보니 버전때문에 충돌이 나는 부분이 있어, framer motion 라이브러리를 선택했습니다. framer motion 설치 npm install framer-motion 적용 방법 일단 제가 구현하려는 것은 다음과 같았습니다. 스크롤에 따라서 화면에 자식 컴포넌트가 나타나면, 자식컴포넌트에 애니메이션이 실행될 것. 스크롤을 올려서 자식컴포넌트가 ..

Tips

ai 로 Flow Chart, 시스템 구조도 그리기 (feat. mermaid.live)

한 프로젝트를 기획하면서, 시스템 설계에 대한 플로우차트(flow chart)나 시스템 구조도를 그릴 일이 많을 것이다. 이 때 ai 를 사용해서 그리는 방법을 소개해보려고한다. 두 가지만 있으면 되는데, chatGPT와 mermaid live 사이트이다. Flow Chart 그리기 먼저, chatGPT에 다음과 같이 프롬프트를 작성한다. 나는 예시로 한 프로젝트의 플로우차트를 그려보려한다. 이 ~~~ 프로젝트에서 학생이 강의실을 대여하고 대여를 취소하며 대여 여부를 확인할 수 있는 시스템을 mermaid.live에서 사용가능한 flowchart 코드로 작성해줘 나는 이 코드를 복사해서 mermaid live 라는 사이트에 들어가 왼쪽 코드를 작성할 수 있는 공간에 붙여넣기를 했다. https://mer..

Review

Mobile App Developer's Conference (MADC) 후기

안녕하세요. 얼마전에 건국대학교에서 열린 MADC 에 다녀왔어요! 일시 2023년 12월 02일 (토) 오후 01:00 - 오후 07:00 주최 MobileAppDeveloper'sConference 행사 개요 Mobile App Developer’s Conference (이하 MADC)는 12월 2일, 건국대학교 학생회관에서 개최되는 Android, iOS, Flutter를 모두 아우르는 국내 최초의 모바일 개발자 컨퍼런스입니다. 선언형 UI라는 새로운 기술의 등장으로 세 플랫폼의 차이가 점점 줄어들고 있는 가운데, MADC는 세 플랫폼의 공통점과 차이점을 모두 살펴보고, 개발자들이 자신에게 맞는 플랫폼을 선택할 수 있도록 도와주는 자리입니다. 또한, 주니어 개발자들을 위한 특별한 세션도 마련되어 있습..

dawonny
'분류 전체보기' 카테고리의 글 목록