WonnyDocs

Review

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

2024.04.18

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

Finds & Notes

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

2024.04.08

오랜만에 깃허브 리드미 꾸미기를 하다가 기술스택 부분을 작성해보고져서 서치를 하던 중 괜찮은 것을 발견해서 공유합니다! 결과물은 위와 같아요. 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 이용)

2024.03.29

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

Develop/React.js

[React] TailwindCSS font 적용하기

2024.03.27

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 인사이드] 도서 리뷰

2024.03.23

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

Develop/TypeScript

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

2024.03.07

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

2024.03.07

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

2024.03.06

개념 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] 도서 리뷰

2024.03.06

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

Develop/TypeScript

[Typescript] declare & ambient module

2024.03.04

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

2024.03.04

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

Finds & Notes

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

2024.02.25

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

Review

[프로덕트 매니지먼트의 기술] 도서 리뷰

2024.02.25

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

Review

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

2024.02.22

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

Review

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

2024.02.21

안녕하세요. dawonny 입니다. 얼마전 카이스트에서 열리는 SPARCS 2024 해커톤에 다녀왔습니다!전국에서 80명, 총 20팀이 참여하게 되는 해커톤이었는데요.저는 PM / 디자인 / iOS / 서버 개발이 다 되는... 다재다능한 친구에게 같이 나가자고 졸라서 2인으로 참여하게 되었어요!(개인 또는 2인 팀 신청이 가능했습니다) 밖에서 일정이 끝나고 카페에 가서 부랴부랴 지원서를 쓰고 제출했는데 합격했더라구요!지원서는 아래과 같이 작성했습니다.[지원 동기]저는 컴퓨터공학부에 입학한 후 처음엔 개발자는 혼자 공부하고 일하는 직업이라고 생각했습니다. 하지만 컴퓨터공학부 학회장이나 구글 학생 개발자 동아리 운영진 활동 등을 하면서 개발자에게 필요한 것은 소통과 협업이며, 단순히 프로그램을 구현하는 것..

Develop/React.js

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

2024.02.09

문제 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..

Finds & Notes

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

2024.02.09

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 사용하는 법

2024.01.16

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 소노마] 도서리뷰

2024.01.13

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

Develop/TypeScript

[Typescript] Generic

2024.01.13

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

2024.01.13

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

2024.01.12

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

2024.01.12

객체 지향 언어에서 제공하는 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)

2024.01.04

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

Finds & Notes

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

2023.12.08

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

Review

Mobile App Developer's Conference (MADC) 후기

2023.12.07

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

Ambassador/DEVOCEAN YOUNG

[데보션영] 데보션영 2기 수료후기 & 데보션영이란?

2023.11.20

안녕하세요. 데보션영 2기로 활동한 서다원입니다! 벌써 수료식까지, 2기의 모든 활동이 마무리되었어요. 9개월 동안 길다면 긴 시간인데 정말 빠르게 지나간 것 같아요. 제가 데보션영 2기로 활동하면서 주변에서 데보션영에 관한 질문을 굉장히 많이 받고, 인스타를 통해서도 벌써 3기에 대해서 물어보시는 분들도 계신데요. 그래서 한번 수료 후기와 함께 데보션영에 대해서 소개해보는 포스팅을 작성해볼까합니다. 데보션영이 뭐야? 데보션영(DEVOCEAN YOUNG)은 SKT 개발자 커뮤니티인 '데보션'을 기반으로 활동하는 대학생 테크 인플루언서 인데요. 개발과 프로그래밍 관련 콘텐츠들을 창작하며 개발자 생태계 내의 소통과 공유 문화를 확산하는 것이 주 활동이에요! 데보션(DEVOCEAN) 은 SKT가 SK하이닉스,..

Review

2023 Devfest WebTech : 책쓰는 개발자 후기

2023.11.04

오랜만의 후기 컨텐츠인 것 같다! 이번엔 성수 앨리스랩에서 열린 2023 Devfest WebTech 에 다녀왔다. GDG Korea WebTech에서 준비한 오프라인 이벤트인데, 이번에는 "책쓰는 개발자"라는 주제였다. GDG DevFest 는 GDG 커뮤니티에서 전 세계적으로 진행하는 캠페인이며 그 예시로 현재 GDG Songdo, Busan 등에서도 에서도 DevFest 참가신청을 받고 있는 중이다. 개발자인데 책을 쓴다- 라는 주제가 궁금하기도 했고, 세미나 중에 '기술 블로그를 운영하며 개발 조직의 성장 과정을 기록하는 방법' 에 관심이 생기기도 해서 얼리버드 티켓을 구매해 갔다. 시간표 14:40 ~ 15:00 - 입장 및 참가 등록 15:10 - 키노트 15:10 - 15:40 책쓰는 개발자..

Develop/Flutter & Dart

[Flutter][오류] unable to load image asset 이미지 추가 오류 해결

2023.10.30

문제 이미지를 추가했는데 'unable to load image asset' 이라는 오류가 뜨면서 이미지가 렌더링 되지 않는다. 1. pubspec.yaml 파일 제대로 썼는지 확인 띄어쓰기도 올바르게 작성했다. 2. 이미지 경로를 잘 썼는지 확인 오타없이 잘 작성했다. 3. 최후의 수단 실행시키던 걸 중단하고, 터미널에 들어가 flutter clean 명령어를 작성하고 enter 를 누른다. 이후에 코드들에 오류가 갑자기 엄청 많이 생기는데, 신경쓰지말고 다시 디버깅을 실행한다. 이미지가 잘 렌더링 되는 것을 확인할 수 있다.

Develop/React.js

[React.js] react-cookie / 만료시간 설정하기

2023.10.21

관리자 페이지의 간단한 로그인 기능을 구현하려고 하는데 백엔드 없이 로그인 기능을 구현해야하는 상황이었다. 하지만 단순하게 특정 비밀번호를 입력했을 때 특정 페이지를 보여줄 수 있도록 코드를 짜면 새로고침 했을 때 다시 로그인을 해야한다는 불편함이 있었다. 그래서 어떤 방식을 쓸까 생각하다가 쿠키를 사용해보기로 했다. 나는 쿠키를 구현하는데 react-cookie(리액트 쿠키)를 사용했다. 쿠키란 localStorage 를 이전에 쓴 적이 있는데 이것과 유사하다고 느꼈다. 기본적으로 key와 value, 만료기한이 있는 저장소 개념이며, 브라우저에 저장이 된다. 브라우저(클라이언트)에 300개까지 저장이 가능하며 1개의 쿠키 당 4KB 정도의 크기를 가지고 있다고한다. 설치 npm install reac..

전체 글

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

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

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

[React] TailwindCSS font 적용하기

[멀티모달 생성 AI 인사이드] 도서 리뷰

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

[Typescript] implements / object index signatures

[Typescript] d.ts File

[모던 리액트 Deep Dive] 도서 리뷰

[Typescript] declare & ambient module

[Typescript] Tuple type

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

[프로덕트 매니지먼트의 기술] 도서 리뷰

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

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

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

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

[Typescript] React에 Typescript 사용하는 법

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

[Typescript] Generic

[Typescript] type import export & namespace

[Typescript] protected, static

[Typescript] public, private

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

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

Mobile App Developer's Conference (MADC) 후기

[데보션영] 데보션영 2기 수료후기 & 데보션영이란?

2023 Devfest WebTech : 책쓰는 개발자 후기

[Flutter][오류] unable to load image asset 이미지 추가 오류 해결

[React.js] react-cookie / 만료시간 설정하기

티스토리툴바

티스토리툴바