본문 바로가기

분류 전체보기68

간단하게 사용해볼 수 있는 와이어프레임 제작 AI툴 신규 서비스 구축을 위해 와이어프레임을 제작할 일이 생겼다.프론트엔드 개발자로서 기존에는 클로드로 모든 것을 해결했지만, 결과물을 프롬프팅뿐만 아니라 직접 수정해보고 싶기도 했고기술이 넘쳐흐르는 시대에 실제 UX/UI 디자이너들은 어떤 툴을 쓸지 궁금해서 여러가지를 사용해봤다. '자산 관리 시스템'에 대해 자산 등록, QR코드 프린트 및 실사 기능 등등의 기능을 포함해서chatGPT를 사용해 프롬프트를 작성해 동일하게 요청했다. 1. Figma - Wireframe DesignerFigma 플러그인에 설치해서 바로 사용 가능하다.💰 한달에 10회 무료 요청 가능 / Pro 업그레이드 비용 : $5상당히 저렴한 가격으로 제공되는데 결과물도 저렴하다. 한장짜리 오버뷰로 나옴.그리고 대화형 프롬프트가 .. 2025. 8. 22.
[React] useState/setState에서 실수하기 쉬운 점 버튼을 클릭하면 숫자가 1씩 늘어나는 코드이다.그런데 콘솔창에는 setCount(count + 1)을 통해 늘어난 값이 아닌 이전 값으로 프린트 되는 이유는? import { useState } from "react";export default function Counter() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); // 다음 렌더링에서 count = 이전 count + 1 console.log("after setCount:", count); } return ( {count} +1 );} 아래의 간단하게 구현된 useState를 보자.u.. 2025. 8. 19.
개발자 영어 표현 Under the Hood (내부적으로는 / 실제 구현에서는)직역하면 "보닛 아래에"라는 뜻으로, 겉으로는 보이지 않지만 내부에서 중요한 역할을 하는 자동차 부품처럼내부적으로 이렇게 동작하고 있다! 라고 설명할 때 덧붙여 쓸 수 있는 표현이다. JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects.= JSX는 겉보기에는 HTML 같지만, 실제 동작 원리는 자바스크립트다. immutable (불변의)OOP에 있어서 immutable objects는 생성 후 그 상태를 바꿀 수 없는 객체를 말한다.이는 실행 중인 쓰레드 간 sync 불일치 문제를 원천적인 차단해주므로 설계/구현/사용이 편리하다.한편으로는.. 2025. 8. 18.
[React] 리액트의 훅이란? 함수형 컴포넌트에서 상태(state)와 리액트의 여러 기능을 사용할 수 있게 해주는 특별한 함수 1. useState상태 관리용 Hook. React 컴포넌트 안에서 지역 변수(local variable)는 단순히 함수가 실행되는 동안만 존재한다.그래서 한 번 렌더링된 후 값이 바뀌더라도, 다음 렌더링 때는 완전히 새로 그려지므로 이전 값이 유지되지 않는다.또한 지역 변수의 값이 변한다고 해서 React가 다시 그려야겠다 라고 판단하지 않기 때문에 리렌더링도 발생하지 않는다. 컴포넌트가 새로운 데이터로 업데이트되려면 두 가지가 필요한데:렌더링 사이에서도 값이 보존되어야 하고값이 변할 때 React가 리렌더링을 트리거해야 한다.이를 해결하는 도구가 바로 useState 이다.useState는 상태 값을 렌.. 2025. 8. 18.
자바스크립트와 타입스크립트의 차이점 🔑 자바스크립트 (JavaScript)정의: 웹 브라우저에서 실행되는 대표적인 스크립트 언어. 현재는 서버(Node.js)에서도 널리 사용.특징동적 타입 언어 → 변수에 어떤 타입이든 넣을 수 있음.실행 시점(Runtime)에서 오류를 발견.별도의 빌드 과정 없이 바로 실행 가능.function add(a, b) { return a + b; // 문자열, 숫자 등 뭐든 들어올 수 있음}console.log(add(2, 3)); // 5console.log(add("2", "3")); // "23" 🔑 타입스크립트 (TypeScript)정의: 마이크로소프트가 만든 자바스크립트의 상위 집합(Superset).특징정적 타입 언어 → 변수와 함수에 타입 지정 가능.실행 전에(컴파일 시점) 오류.. 2025. 8. 18.
Lombok이란 / cannot find symbol 에러 Lombok이란,Getter, Setter, ToString, 생성자 등의 반복되는 메소드를 Annotation을 사용해서 자동으로 작성해주는 자바의 라이브러리이다. 1. Lombok 없이 만든 User 클래스public class User { private String name; private String email; private int age; public User() {} public User(String name, String email, int age) { this.name = name; this.email = email; this.age = age; } public String getName() { ret.. 2025. 4. 4.
React 테이블 커스텀하기 / MUI X DataGrid를 파헤쳐보자 Importimport { DataGrid } from '@mui/x-data-grid';  행/열 정의하기import * as React from "react";import { DataGrid, GridRowsProp, GridColDef } from "@mui/x-data-grid";const rows: GridRowsProp = [ { id: 1, title: "컴플리트 언노운", director: "제임스 맨골드", status: "완료" }, { id: 2, title: "첫 번째 키스", director: "츠카하라 아유코", status: "완료" }, { id: 3, title: "미키17", director: "봉준호", status: "완료" }, { id: 4, title: ".. 2025. 3. 23.
React 테이블을 만드는 방법 / react-bootstrap-table, material ui 1. react-bootstrap-tabledeprecated 된 상태이므로 react-bootstrap-table2를 사용할 것을 권장한다.https://allenfang.github.io/react-bootstrap-table/ React Bootstrap Table allenfang.github.io 예시는 요기 더 잘 나와있다.https://react-bootstrap.netlify.app/docs/components/table/ Tables | React BootstrapExamplereact-bootstrap.netlify.app  2. react-bootstrap-table22020년을 마지막으로 더이상 업데이트 되지 않고 있다.https://react-bootstrap-table.githu.. 2025. 3. 23.
이바이트 창업자 셀리나 토바코왈라 👨‍🦰 “알과 함께 일하는 게 좋니?”👩‍🦰 “네, 정말 좋아요. 알에게서 많은 것을 배우고 있고, 서로 도전하며 즐겁게 일하고 있어요.” 👨‍🦰 “네가 하고 있는 일을 즐기니?”👩‍🦰 “네, 저희가 개발하는 것이 웹을 더 효과적으로 활용하는 데 도움이 될 것 같아서 정말 좋아요. 현재의 제품도 만족스럽고, 목표도 분명해요.” 👨‍🦰 “그 과정에서 배우고 있니?”👩‍🦰 “그럼요. 지금 배울 수 있는 속도가 그 어떤 상황보다도 빠르다고 생각해요.” 셀리나의 대답을 들은 아버지는 그녀에게 이렇게 말했습니다. 👨‍🦰 “위험을 감수하는 게 무슨 해가 되겠니? 뒤돌아보지 말고 온 마음을 다해 도전해보렴.”  출처 : https://maily.so/day0insight/posts/e9o0e.. 2025. 3. 16.

티스토리툴바