티스토리

INDUSTRY BABY

검색하기

블로그 홈

INDUSTRY BABY

jyecoding.tistory.com/m

jyee 님의 블로그입니다.

구독자: 4

방명록 방문하기

반응형

주요 글 목록

[Typescript] any 타입 대체 방법 처음에 실무 시작하게 되면서 TypeScript를 접했을 때 타입 정의가 어려웠다. 일단 익숙하지 않았던 것도 있었고 그냥 any를 써도 넘어 가길래 애매하다 싶으면 타입을 any로 지정하고 자꾸 쓰게 되었는데... 하지만 any를 마구잡이로 사용하면 생기는 문제1. 타입 체크가 무의미해짐 any를 사용하면 TypeScript의 장점인 자동완성과 타입 체크를 포기하는 셈이다.const fetchData = async (): Promise => { const response = await fetch("https://api.example.com/data"); return await response.json();};const data = await fetchData();console.log(data.tit.. 공감수 0 댓글수 0 2025. 3. 2.
[error] npm 문제 ❌발생 에러 ✅시도한 해결방법 1.VSCode의 기본 터미널이 powershell로 설정 되어 있었음 터미널의 종류를 바꿔주면 됨Command Prompt으로 바꿔서 해보기! ✅시도한 해결방법 2.npm이 설치되어 있지 않은 경우 node.js를 깔아야함 내 경우는 버전이 안 맞아서 이전 버전 삭제하고 다시 깔았는데 인식을 못해서 안되는거였다.인식되니 에러가 사라졌다 해결완! 공감수 0 댓글수 0 2025. 2. 25.
토이 프로젝트 나만의 반려식물 만들기(진행 중) 이전부터 만들어 보고 싶었던!!!! 푸망처럼 나만의 맞춤형 테스트를 만들고 싶었다!예전부터 생각은 했지만 어떤 주제로 할까 계속 고민이 많았다.처음에는 세계문학 책들 중 취향을 찾아서 맞춤형 책들을 추천하는 식으로 하려고 했는데 내가 관련 책들을 많이 안 읽어서 잘 모르기도 하고 데이터 수집해서 기획하기도 번거로워서 계속 미루고만 있었다. (하지만 올해 안에 이 주제로도 꼭 만들어야지) 🌱 이 테스트를 만들게 된 이유그러다 작년부터 함께한 식물 모임에서 기획 아이디어가 떠올랐다.우리 모임은 반려 식물을 키우며 자연과 함께 힐링하는 활동을 중심으로 한다.그런데 모임원들이 어떤 식물을 키울지 고민하는 시간이 꽤 길었다는 걸 깨달았다.언제까지 미룰 셈인가!! 여기서 만들게 된 이유가 총 세 가지가 있는데, .. 공감수 4 댓글수 0 2025. 2. 16.
CORS 와 SOP 개념 정리 1. SOP 동일 출처 정책? ▶ SOP(Same-Origin Policy) 웹브라우저의 보안정책으로, 서로 다른 출처의 리소스 간 데이터 접근을 제한한다.동일 출처란?먼저 출처(Origin): 프로토콜 + 도메인 + 포트로 구성되어 있다. 이 세가지가 동일해야지만 동일 출처이다! ▶ SOP의 역할보안강화 : 동일출처 정책은 위험할 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여주는 역할을 수행한다 만약 이런 제약이 없다면 CSRF (Cross-Site Request Forgery) 나 XSS(Cross-Site Scripting)등의 공격에 매우 취약해질 가능성이 생긴다.자동 로그인 예시: 브라우저는 로그인시 발급된 토큰이나 쿠키를 저장한다. 동일한 출처에 재접속 시 이 정보가 자동으로 포.. 공감수 2 댓글수 1 2025. 2. 2.
[React] 초기로딩속도 줄이기! 최적화 방법 로딩 속도가 3초가 넘어가면 50%이상의 사용자가 떠나며 5초를 넘으면 90%의 사용자가 떠난다는 통계가 있다. 그만큼 초기 렌더링 속도 개선은 중요하다.그런데 지금 회사 내 React 초기 렌더링 속도가 굉장히 느려서 속도 개선이 필요하다고 생각했고 최적화에 대해서도 알아보고 싶었기에 하나도 모르는 상태에서 호기롭게... 도전을 하게되었다. 하나씩 검색하면서 찾아보게 된 여러 최적화 방법들을 정리한 기록들이다. Lighthouse 이용하기여러 블로그들을 돌려보니 lighthouse랑 pageSpeed Insights가 많이 나왔다.Lighthouse는 웹페이지 품질을 개선하는데 도움이 되는 오픈소스 자동화 도구이며 성능, 접근성, 검색엔젠 최적화 등 Lighthouse 툴을 이용해서 웹사이트를 분.. 공감수 5 댓글수 1 2025. 1. 19.
2024 개발 회고록 2023년 연말에 썼던 2024년도 목표를 다시 보았다.그 어느 하나 제대로 지킨 게 없는....🥲 이게 맞나사실 회고록을 써야 할지 말아야 할지 고민도 엄청 했다.슬프지만 일단 반성문 같은 회고록을 써야겠다. 이래저래 잘 모르겠지만 일단 고... [ 인강 공부 ]React 인강을 사 놓았지만, 처음부터 끝까지 하나씩 다 봐야겠다고 생각했음에도 필요한 부분만 부분적으로 보았다. 완강을 꼭 해야겠다고 마음먹었지만 다 듣지 못한 것이 아쉽다는 생각이 들었다. 오히려 유튜브에 나와있는 개념 동영상들을 더 열심히 들었었다. 유료 강의를 사놓고 무료 강의들을 들은 게 웃기긴 하지만, 이래저래 나에게 도움이 되었다면 괜찮지 않나 싶다. [ 프로그래밍 책 읽기 ]시작과 동시에 덮어버렸던 모던 자바스크립트 딥다이브... 공감수 6 댓글수 0 2025. 1. 5.
코드스플리팅(Code splitting) Code splitting은 왜 하는걸까?웹 애플리케이션은 점점 더 복잡해지고 규모가 커지고 있다. 이런 변화 속에서 애플리케이션의 코드 역시 방대해지고, 모든 코드를 하나의 번들 파일로 묶는 방식은 초기 로딩 속도와 사용자 경험에 있어 한계를 보이게 된다. 이런 문제를 해결하기 위한 기술이코드스플리팅이다. 자바스크립트 프로젝트 만들 때 모든 코드를 하나의 번들로 묶어서 만들게 되는데 앱이 비교적 간단한 편이면 괜찮지만 프로젝트가 커지면서 전달해야 하는 파일도 커지고, 유저의 브라우저가 파싱(parsing) 해야하는 정보도 많아지기 때문에 퍼포먼스 문제들이 생길 수 밖에 없다. 코드 스플리팅은 애플리케이션의 코드를 더 작은 단위로 나눠 필요한 코드만 로드하고, 나머지 코드는 필요한 순간에 로드하도록 만.. 공감수 1 댓글수 1 2024. 12. 22.
[React] react-hook-form과 zod로 validation 유효성 검사 회사에서 react-hook-form을 쓰는데 zod로 유효성검사를 하는데 할 때마다 헷갈렸던 부분 한번 정리해보려고 한다. React hook formReact Hook Form은 React에서 폼을 관리하기 위한 경량 폼 라이브러리이다. 최소한의 리렌더링과 간결한 API를 통해 폼 상태를 효율적으로 관리할 수 있다. 주요 장점:간단한 API: useForm 훅을 사용하여 폼 상태와 검증 로직을 선언적으로 관리할 수 있음.퍼포먼스 최적화: 입력 필드별로 리렌더링을 최소화하여 성능을 높임.유연한 검증: 사용자 정의 검증 로직 및 다양한 검증 라이브러리와 통합 가능. React Hook Form(RHF)의 다양한 기능들1. resolver역할: 외부 검증 라이브러리(Zod, Yup 등)를 React H.. 공감수 0 댓글수 0 2024. 11. 24.
[React] react-daum-postcode 우편번호, 주소 검색 https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net 우편 번호로 주소를 찾아야 할 때 자주 보이는 다음 우편번호 서비스 API를 사용하는 법! 리액트에서 쓸 수 있는 react-daum-postcode 패키지를 사용할 것이다. 1. 설치 npmnpm install react-daum-postcodeyarnyarn add react-daum-postcode 먼저 패키지 다운 받고 잘 받아졌는지 확인 2. 사용import DaumPostcode from 'r.. 공감수 1 댓글수 2 2024. 11. 15.
쿠키 세션 캐시 차이 1. 쿠키(Cookie)정의:클라이언트(브라우저)에 작은 데이터 조각을 저장하는 방식.특징:클라이언트 측에 저장됩니다.주로 사용자 인증, 세션 유지, 사용자 맞춤 설정에 사용됩니다.서버와의 통신 시, HTTP 요청에 자동으로 포함되어 전송됩니다.속성:크기 제한: 약 4KB.유효기간 설정 가능:만료 기간이 설정된 쿠키는 일정 시간 동안 유지됩니다.세션 쿠키는 브라우저 종료 시 삭제됩니다.장점:서버 부하 감소(클라이언트에 저장되므로).간단한 데이터 저장 가능.단점:보안 취약: 데이터가 평문으로 저장될 수 있어 민감한 정보는 저장하지 않음.브라우저 제한: 크기와 개수 제한.예시:로그인 유지: 쇼핑몰에서 로그인 후, 페이지를 닫았다가 다시 열어도 로그인 상태가 유지되는 것.사용자 설정 저장: 웹사이트에서 다크 .. 공감수 4 댓글수 4 2024. 11. 12.
[Network] OSI 7계층 모델 OSI 7계층 모델이란? OSI 7계층 모델은 네트워크에서 통신이 일어나는 과정 데이터흐름을 파악하기 쉽게 단계 별로 계층을 7단계로 나눈 (독립적일 수 있는 모듈화)를 말하는것브라우저에 도메인을 입력하면 여러 단계의 프로세스가 진행되며, 이를 OSI 7계층과 연관지어 설명할 수 있습니다.1. 응용 계층 Appllication Layer (Layer 7):이 계층은 웹서비스의 UI 부분, 사용자의 입출력(I/O)를 담당합니다.사용자가 브라우저에 도메인을 입력하면, 먼저 DNS 서버에 요청을 보내어 해당 도메인의 IP 주소를 받아온 후, 그 주소로 HTTP/HTTPS 요청을 보냅니다. 여기서 HTTP/HTTPS 프로토콜이 사용됩니다.예시 : 사용자가 브라우저에 "http://www.example.com"을.. 공감수 1 댓글수 0 2024. 11. 4.
Node.js란? node.js를 배워보고 싶은데 기본 지식이 전혀 없어서 공식문서, 블로그, 유튜브등 찾아보면서 정리해보았다. Node.js란?Node.js는 자바스크립트를 서버나 로컬 컴퓨터에서 실행할 수 있게 해주는 "자바스크립트 런타임 환경"이다. 자바스크립트는 브라우저 내에 포함된 인터프리터 덕분에 별도 설치 없이 실행되지만 스크립트 언어라 특정한 프로그램 안에서 동작하는 프로그램이기 때문에 웹 브라우저(크롬, 사파리, 익스플로러, 파이어폭스 등)가 없으면 사용할 수 없는 프로그램이다.자바스크립트를 웹 브라우저에서 독립시킨 개념으로 컴퓨터나 서버에서 자바스크립트를 실행하려면 Node.js가 필요하다. Node.js는 V8 자바스크립트 엔진을 기반으로 동작하며, 파일 시스템 접근이나 네트워킹 기능과 같은 서버 측 .. 공감수 5 댓글수 3 2024. 10. 27.
[글또] 글또 10기 다짐글 📝 글또를 시작하게 되다!작년 취준생일 때 글또 참여 중이신 분들을 보고 굉장히 부러워 했던 기억이 난다. 글또 9기가 진행 중이였고 당시에는 잘 몰라서 취준생은 참여를 못하고 개발직군에 일하는 분들만 참여할 수 있는 줄 알았다. 그래서 내년에는 꼭 직장도 가지고 일하면서 글또 다음 기수 참여할 수 있으면 좋겠다 라고 생각만 했었는데... 그것이 이루어졌습니다!!!! 우연히 이 포스팅을 보게 되신 분들 중 글또가 어떤 모임인지 모르시는 분들 혹은 궁금하신 분들은https://zzsza.notion.site/ac5b18a482fb4df497d4e8257ad4d516 글 쓰는 또라이가 세상을 바꾼다 - 글또 페이지 | NotionURL : https://bit.ly/geultto_introzzsza.no.. 공감수 5 댓글수 1 2024. 10. 13.
[React] Props로 전달되는 문자열 줄바꿈 하기 React에서 모달 창을 띄우려고 하는데바텀모달로 만든게 반복되는게 많다보니 재사용하기 좋도록 컴포넌트로 만들고 문자열들을 props로 전달 받아서 그래서 어떤건 한줄이고 어떤건 두 줄로 나눠서 나올 수 있도록 하였다. 해당 코드는 css는 tailwind css로 작성됨 ✅ 하는 방법 {blocker.state === "blocked" ? ( blocker.reset()} onLater={() => blocker.proceed()} textHead="나중에 이어서 쓰시겠어요?" textcontent={`혹시 몰라, 지금까지 쓴 내용을 \n 임시 저장해두었어요.`} .. 공감수 0 댓글수 0 2024. 9. 26.
[글또] 삶의 지도💫 본 글은 글또 10기 지원을 위해 작성하는 글입니다.양식 : [글또를 신규로 참여하는 분들은 “자신이 어떻게 살아왔는지 - 삶의 지도”에 대한 글을 작성해서 제출해주셔야 합니다] 막상 나에 대해 글을 쓰려고 하니 어떻게 써야 하나 생각이 먼저 들어 바로 못 쓰겠더라구요... 그래서 추석 연휴 기간 쉬는 김에 차분하게 저의 삶을 돌이켜보고자 합니다. 우선 글또에서 제시해준 삶의 지도는 '자신이 어떤 사람이고 어떤 성격을 가지고 있고, 어떤 사건으로 지금의 내가 되었는가' 라고 자세하게 나열해주셔서 요약하여 제 삶을 풀어보면 되지 않을까 생각했습니다. 🤔 다이나믹한 나의 삶?저는 제 삶이 제법 다이나믹한 삶이라고 생각합니다. 다른 사람들에 비해 마냥 평범한 삶은 아니였던거 같아요. (좋은 뜻에서요!!.. 공감수 19 댓글수 8 2024. 9. 18.
[React]페이지 이탈 시 확인 모달창 띄우기 보호되어 있는 글입니다. 공감수 3 댓글수 0 2024. 9. 13.
[React]useCallback ✔️useCallback이란? useCallback은 함수를 메모이제이션합니다. 주어진 종속성 배열이 변경되지 않으면, 동일한 함수 인스턴스를 반환합니다. 이는 컴포넌트가 불필요하게 다시 렌더링되는 것을 방지하는 데 도움을 줍니다.언제 사용: 컴포넌트가 자주 다시 렌더링되면서 동일한 함수가 다시 생성되는 것을 피하고 싶을 때, 특히 자식 컴포넌트에 콜백 함수를 props로 전달할 때 사용합니다.usememo랑 너무 헷갈렸는데 둘 다 비슷하긴 하지만 usememo는 특정 결과값을 재사용하는 반면, usecallback은 특정 함수를 새로 만들지 않고 다시 재사용하는 것이다. 1. useCallback의 구조import React, { useState, useCallback } from 'react';fu.. 공감수 0 댓글수 0 2024. 9. 3.
[React] useMemo ✔️useMemo란?useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다.useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.그래서 복잡한 계산이 있을때 사용을 하는 것이며 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다.너무 많이 남용해서 안되는 이유가 의존성 값 비교를 수행해야 하기 때문에 컴포넌트 함수가 재실행되어야 하는 함수가 .. 공감수 2 댓글수 2 2024. 9. 3.
[React] 리액트 반응형 useMediaQuery 리액트 디바이스 자체의 화면 폭을 확인해서 true/ false를 반환해주는 useMediaQuery 리액트 전용 훅을 사용할 수 있다. 디바이스 폭 기준이라, 창을 늘리거나 줄여도 반응하지 않는다.그래서 모바일,태블릿, pc 같이 디바이스 자체를 가늠하려는 경우 사용하면 유용하게 쓸 수 있음 1. install 필요함 터미널창에서 react-responsive 설치npm install react-responsive 2. import 해주기 import { useMediaQuery } from "react-responsive"; 3. 변수 세팅 const isDesktop = useMediaQuery({ query: "(min-width: 1024px)" }); const isMobile =.. 공감수 0 댓글수 0 2024. 8. 30.
[React] useContext api useContext 훅은 어떻게 사용할까?리액트의 일반적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 '단방향'으로 흐른다. 엄청 큰 컴포넌트 트리가 있다고 가정할 때 공통적으로 필요한 전역적인 데이터가 있을 수 있다. 예를 들어 userdata전역 데이터를 일일이 props로 단계별로 전달해야 한다면 정말 비효율 적이다.리액트는 이러한 문제점을 해결해 주는 Context API를 제공한다.Context는 앱 안에서 전역적으로 사용되는 데이터를 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. Context를 사용하면 Props로 데이터를 일일이 전달해 주지 않아도 해당 데이터를 가지고 있는 상 위 컴포넌트에 그 데이터가 필요한 하위 컴포넌트가 접근할 수 있다. 즉 사용자 .. 공감수 0 댓글수 0 2024. 8. 27.
[git] git merge 전 병합완료 취소하기 git pull 이후 conflict 난 부분 병합하고 서버 안돌리고 병합완료 버튼 눌렀더니만 해당 페이지만 오류가 났다ㅠㅠ그나마 다행인건... merge push 하지 않았다는점...? merge push 하기 전 되돌리는 방법! 1. 병합 중단 및 리셋 병합 하고 있던 작업들을 다 취소하고 병합 전 파일로 돌아가는 것이다. git merge --abort 2. 병합 중단 후 특정 파일 되돌리기이 방법은 특정 파일만 되돌리는건데여기서 --theirs 옵션은 병합할 때 반대쪽(여기서는 pull 받아온 브랜치)의 변경 사항으로 파일을 덮어씌우겠다는 의미 즉, 그 브랜치의 내용을 그대로 가져오게 되는것이다.git checkout --theirs 되돌리고자 하는 파일path를 적어줌 git checkou.. 공감수 0 댓글수 0 2024. 8. 22.
[React]useReducer 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 8. 20.
gpt노예에서 탈출하기!!!!!! 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 8. 19.
[React] react-hook-form 사용하기 React-hook-form왜 기존 form 사용 대신 이걸 쓰는게 더 편리한지 어떤 장점이 있는지 찾기 제어 컴포넌트 우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.출처 : 리액트 공식문서 제어 컴포넌트 제어 컴포넌트는 리액트에 의해 값이 제어되는 입력 폼 엘리먼트를 뜻한다. 제어 컴포넌트는 실시간으로 값이 동기화 되는 특징이 있다. 기존 리액트에서 input값을 받아올 때 아래 .. 공감수 0 댓글수 0 2024. 8. 13.
[React] react-hook-form useRef 사용 보통 javascript 에서는 getElementById , querySelector 같은 DOM Selector 함수 사용해서 DOM 선택 리액트는 ref 이용해서 DOM 선택 특히 자주 쓰이는 함수형 컴포넌트는 useRef 사용 DOM을 직접 선택해야 할 경우들 1. 엘리먼트 크기를 가져와야 할 때2. 스크롤바 위치를 가져와야 할때3. 엘리먼트에 포커스 설정 해줘야 할때 등등 ** useRef를 이용해서 어떻게 password와 password confirm이 같은지 알 수 있는걸까? 흐름은 이렇게 됨 1. ref 생성 2. watch를 이용해서 password 필드 값 가져오기 const password = useRef();password.current = watch("password").. 공감수 0 댓글수 0 2024. 8. 13.
[Tailwind css] 셀렉브박스 화살표 표시 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 7. 26.
git branch사용법 브랜치 사용법브랜치 생성git branch 브랜치명브랜치를 생성하는 명령어는 git branch이다.$ git branch 브런치명다. 브랜치명 변경하기이 경우 master/main 브랜치에 위치해 있는지 확인 후 git branch -m [브랜치명] [새로운 브랜치명]git branch -m master mymaster 브랜치명 변경되었는지 확인/ 모든 브랜치명 확인git branch 그러면 여러 브랜치 명들이 나열됨 이런식으로 나옴 * 있는 곳이 내가 있는 위치 브랜치 이동하기(Checkout)git checkout (브랜치)현재 master 브랜치에서 mm 브랜치로 이동하려면 checkout 명령어를 사용한다.git checkout mm 브랜치 생성과 체크아웃git checkout -b (.. 공감수 1 댓글수 0 2024. 7. 5.
[tailwind css] 사용법 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 7. 3.
[vus.js] Vuex란? ✔ Vues란 상태(state)를 관리하는 라이브러이이다. 여기서 상태란? new Vue({ // 상태 data () { return { count: 0 } }, // 뷰 template: ` {{ count }} `, // 액션 methods: { increment () { this.count++ } } }) 여기서 data()를 상태(state)라고 부르는데 컴포넌트 간의 공유할 수 있는 데이터를 말한다. 이 상태를 관리하는 것이 Vuex이다. prop나 ref등 컴포넌트 간 데이터(상태)를 공유할 수 있는데 왜 Vuex가 필요한걸까? 공통의 상태를 공유하는 여러 컴포넌트가 있는 경우, 지나치게 중첩된 컴포넌트를 통과하는 prop이 생기게 된다. 이는 나중에 유지보수하기 힘든 난해한 코드가 될 수 있.. 공감수 0 댓글수 0 2024. 4. 19.
Vue.js 입문 https://v2.ko.vuejs.org/v2/guide 시작하기 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 v2.ko.vuejs.org Vue.js는 웹 프론트엔드 프레임워크이다. - 컴포넌트 기의 SPA(Single Page Application)을 구축할 수 있게 해주는 프레임워크 컴포넌트(Component) -웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹페이지 내의 다양한 UI dyth - 재사용 가능하도록 구조화 한 것 SPA Single Page Applicaion) - 단일 페이지 어플리케이션 -하나의 페이지 안에서 필요한 영역 부분만 로딩되는 형태 - 빠른 페이지 변환 - 적은 트레픽 양 React랑 Vue는 공통점을 공유함 -가상 DOM을 활용한다. -반응.. 공감수 0 댓글수 0 2024. 4. 19.

728x90

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.