티스토리

ssund의 기술블로그

검색하기

블로그 홈

ssund의 기술블로그

ssund.tistory.com/m

ssund 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

클로저 함수와 렉시컬환경의 조합함수가 생성 될 당시의 외부변수를 기억, 생성 이후에도 계속 접근 가능외부변수의 은닉화 (외부함수의 변수를 변경할 수 없다.) 함수 내부 렉시컬환경에서 변수가 없는경우 하나씩 외부로 나가서 변수를 찾게된다. 내부함수 -> 외부함수 -> ... -> 전역환경 let one;one = 1;function addOne(num) { console.log(num + one); //인수 5 + 전역변수 one값을 가져온다}addOne(5); 함수가 생성 될 당시의 변수를 기억해서 이후에 계속 사용할 수 있다. function makeAdder(x) { return function (y) { return x + y; };}const add3 = makeAdder(3);console.. 공감수 0 댓글수 0 2025. 1. 2.
ios 비동기로 input에 focus 프로젝트에서 특정 버튼을 클릭 시 사용자정보를 fetch해서 response에 따라 비동기로 input에 focus하는 로직을 구현했습니다. 안드, 웹에서는 정상작동했지만 ios에서 input에 focus가 안되는 이슈가 있었습니다. 찾아보니 Ios는 사용자 인터렉션에 의해서만 input focus를 시킬 수 있다고 합니다. 해결방법이라기보다 제가 사용한 꼼수는 ios경우 버튼클릭 시 인풋에 포커스가 가게하고 비동기로 response받아서 이후 프로세스 처리하는 것으로 진행했습니다.사실 ios의 경우 활성화가 되면안되는경우도 활성화가 되었다가 비활성화 된다는 현상이 있었지만 사용성을 생각했을 때 키보드에 포커스가 가는게 더 낫다 생각을 했기때문에 진행했습니다. 참고 https://gist.github.. 공감수 0 댓글수 0 2024. 12. 27.
draggable ui npm package 모바일, PC에서 draggable layer UI를 구현했습니다. animation plugin을 사용해서 자체적으로 구현을 할까 고민했지만 npm 패키지를 커스텀을 했습니다.react-spring-bottom-sheethttps://www.npmjs.com/package/react-spring-bottom-sheet optionsopen: 열기/ 닫기 Boolean 값onDismiss: layer닫는경우 실행될 콜백함수 snapPoints: 드래그 했을 때 멈추는 포인트 blocking: aria-hidden 기능 설정, default는 truescrollLocking: 페이지 스크롤 막기 정리한거 말고도 많은 옵션들이 있다. 스타일 커스텀 root에 선언 된 css 변수 오버라이드 하기:root.. 공감수 0 댓글수 0 2024. 12. 26.
Next.js with CSS-in-JS 순수 css 별다른 처리가 필요하지 않아 서버컴포넌트에서 호환문제가 발생하지 않는다. css 전처리기 sass, less, postcss등 css 전처리기는 빌드타임에 순수css로 컴파일된다. css modules 빌드타임에 css가 생성된다. Tailwind css 빌드 타임에 css가 생성된다. CSS-in-JS 자바스크립트를 사용하여 스타일 정의를 한다. 런타임에 동적으로 스타일이 적용된다. 빌드타임에 css가 완성되냐, 런타임에서 js통해 동적으로 css가 렌더링 되냐 Next.js 서버컴포넌트 호환성을 결정해준다. 공감수 1 댓글수 0 2024. 12. 26.
로컬환경을 인터넷에서도 확인 할 수 있는 ngrok 사용방법 ngrok을 사용하면 로컬환경을 인터넷으로 공유할 수 있다. https://ngrok.com./1. Mac 설치 방법❯ brew install ngrok/ngrok/ngrok 2. ngrok 회원가입한다. 3. Tunnel Agent Authtokens 를 만들어준다. 4. 터미널에 토큰을 저장해준다. ngrok config add-authtoken '발급받은토큰'4. 프론트 로컬 서버를 띄어준다. 5. ngrok http (프론트서버 포트번호)를 터미널에 입력하여 사용한다. ngrok http 8080 공감수 0 댓글수 0 2024. 12. 17.
[테스트 with Jest] 섹션 1. Jest 배워보기 Jest자바스크립트 제일 유명한 테스트 프레임 워크프레임워크란? 테스트에 필요한 모든것을 갖춰두었다.babel, typescript, Node, React, Angular, Vue 테스트 할 수 있다.Jest (Javascript + Test) 대체제Vitest(Vite), Jasmine, Mocha + Sinon + Chai 등.. 테스트 커버리지테스트 코드가 내코드를 얼마나 커버하고 있나 테스트를 왜 해야하는지 ?예전에 났던 코드가 또 오류가 나는경우를 위해 회귀 테스트를 해야한다.회귀테스트 - 오류난 부분에서 오류 안나게 테스트하는 것코드가 복잡한데 많이 바뀌어야하는경우하나의 코드를 수정했더니 import 한 다른곳에서 에러가 나는 경우장시간에 걸쳐 내가 유지보수 해야하는 경우TDD - Test D.. 공감수 6 댓글수 4 2024. 10. 17.
[Next + React Query로 SNS 서비스 만들기] 섹션 5 정리 섹션5request memoization과 data cacheNext 13 앱라우트 부터는 프론트서버에 부담이 늘었다. 서버컴포넌트 도입next 캐시는 4종류가 있다. request memoization, Data Cache, Full Route Cache, Router CacheBUILD TIME은 개발하고 배포할 때, Request Time은 페이지에 접근하는 경우를 말한다.Request memoization같은 서버컴포넌트에서 동일한 api를 두번찌르는경우 부담이 가는것 아닐까 하는데Next에서 알아서 최적화해서 한번으로 요청을 줄여준다.Duration (지속기간)한페이지에 중복된 api 요청을 최적화 해주는 기능이기때문에지속기간은 한페이지에 한한다. 다른페이지로 이동하는경우 다시 불러와진다. Re.. 공감수 12 댓글수 5 2024. 9. 15.
[Next + React Query로 SNS 서비스 만들기] 섹션 4 정리 섹션4백엔드 서버 세팅하기백앤드 환경설정 - node 설치- postgresql 설치 설치방법postgres라는 db 관리자가 생긴다. 비밀번호 설정해준다. 포트는 5432로 설정한다. - redis 설치 (로그인 할 때 사용)https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-mac-os/ - Nest-prisma 세팅https://github.com/zerocho/nest-prisma 폴더다운로드 해서 사용한다. npm install 로 패키지 설치하기 .env 파일 수정DATABASE_URL="postgresql://postgres:비밀번호입력@localhost:5432/zcom?sche.. 공감수 3 댓글수 1 2024. 9. 12.
[Next + React Query로 SNS 서비스 만들기] 섹션 3-2 정리 (react-query, Suspense) react queryreact-query를 사용하는 이유 - React Application에서 서버상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리- 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있다. - React Query에서 제공하는 캐싱, Window focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업없이 핵심로직에 집중할 수있다. react-query의 기본옵션refetchOnWindowFocus, //default: true - 브라우저에 포커스가 들어온 경우refetchOnMount, //default: true -.. 공감수 0 댓글수 0 2024. 8. 24.
[Next + React Query로 SNS 서비스 만들기] 섹션 3-1 정리 (msw, server-action, next-auth) mswmsw 없을때에는 process.env.NODE_ENV로 구분해서 개발, 운영 api주소를 따로 만들어 사용해야했다. msw를 사용하면 개발환경, 운영환경 구분없이 실제주소로만 요청 보내면 된다.개발환경에서만 서비스워커를 실행해서 실제주소로 가는 요청을 가로채면 된다.msw는 오류를 내거나, 로그인을 하지 않아도 되는 환경을 만들어 테스트하기 용이하다. 설치하기npx msw init public/ --savepublic 폴더에 설치하면 mockServiceWorker 파일이 생긴다. 요청을 보내면 serviceWorker가 요청을 가로채서 원하는 response로 내려주는 기능을 한다. package.json에도 추가해준다. npm install msw@latest --save-dev app 폴더.. 공감수 0 댓글수 0 2024. 8. 24.
Next serverActions serverActions서버에서 실행되는 비동기 함수 서버컴포넌트에 비동기 함수를 작성, 함수 본문에 'use server'를 작성한다. 클라이언트 컴포넌트에서는 서버액션 함수 작성불가, module로 작성 된 서버액션 함수를 import해서 사용server action 함수 사용하는 곳 form 태그 action propformAction propuseTransition() 훅에서 제공하는 startTransition과 사용 (suspense 폴백의 깜박임 없이 비동기로 데이터를 받아서 처리 가능)form 요소내에 , , 이렇게 3가지 요소에만 formAction prop 을 허용한다.서버 액션이 어떻게 작동하는가?빌드단계에서 서버액션마다 고유한 40자인 랜덤한 문자열이 생긴다. Request .. 공감수 0 댓글수 0 2024. 8. 10.
[Next + React Query로 SNS 서비스 만들기] 섹션 2 정리 useSelectedLayoutSegment();최상위 세그먼트만 나온다 compose/tweet 인 세그먼트에서 tweet만 나옴클라이언트 컴포넌트에서 작동함 useSelectedLayoutSegments();compose/tweet 에서 여러개의 세그먼츠가 배열로 나옴 ['compose', 'tweet'] 참고https://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segmenthttps://nextjs.org/docs/app/api-reference/functions/use-selected-layout-segments 훅을 사용하거나, 이벤트 리스너가 있는경우는 클라이언트 컴포넌트로 빼주는게 좋다 .참고https://nextj.. 공감수 0 댓글수 0 2024. 8. 5.
[Next + React Query로 SNS 서비스 만들기] 섹션 1 정리 Next + React Query로 SNS 서비스 만들기 강의를 듣고 정리한 내용입니다. 이 글은 섹션 1의 정리내용입니다. Next 프로젝트 생성npx create-next-app@latest 프로젝트 이름타입스크립트 사용여부ESLint 사용여부Tailwind css 사용여부src 디렉토리 사용여부app router 사용여부import alias 커스터마이징 사용여부 (@를 ~,! 다른 문자로 변경할거냐 여부)Public 폴더는 next 서버에서 누구나 접근할수있게 해준다.사이트에 필요한 이미지들 넣으면 된다 (누구나 접근할 수 있는 이미지)/app 폴더에는 라우터와 관련된 파일이 들어간다.라우터 관련없는 파일이 들어갈 수 있으니 src/app 이렇게 패스를 가져가는게 좋다. (예를들어 /compo.. 공감수 0 댓글수 0 2024. 7. 21.
[Next + React Query로 SNS 서비스 만들기] 섹션 0정리 Next 13 이후 변경 점앱라우터가 생김 (이전까지는 페이지 라우터)디렉토리 구성에 많은 변화가 생김레이아웃이 생겼다.미들웨어가 더 업그레이드 되었다. (헤더설정이나, redirect 기능) 미들웨어는 Next12에 도입React18 버전 서버컴포넌트를 지원한다. (서버컴포넌트 이점 - 클라이언트로 전송되는 js파일의 용량을 줄여 초기로딩속도 줄임)서버컴포넌트가 Next서버에서 돌아가다보니 부담을 줄 수 있어서 캐시기능을 기본적으로 지원스트리밍 - 로딩상태를 표현하고 렌더링되는대로 UI를 스트리밍한다.Turbopack 포함되어있음next/image 기능 향상@next/font 기능 향상next/link 사용시 a태그를 자식으로 두지 않도록 형태 변경참고https://www.inflearn.com/cou.. 공감수 0 댓글수 0 2024. 7. 21.
css로 password인풋 처럼 masking 처리하기 보호되어 있는 글입니다. 공감수 0 댓글수 0 2024. 7. 15.
css로 부모선택자 선택하기 css작성하면 부모를 선택할수 있는 방법은 없을까 불편함을 느끼곤 했는데 부모를 선택할 수있는 css 속성이 생겼다.has() 이번에 작업을 하면서 포커스 된 인풋의 부모에 스타일을 줘야하는 경우가 생겼는데 focus, blur 이벤트 없이 css has 속성으로만 처리할 수 있었다. 넘나 간편하고 좋군이번기회에 새로나온 css 속성을 한번 훝어봐야겠다 공감수 0 댓글수 0 2024. 7. 4.
gitignore에 dist추가해도 tracking 되는 이슈 git에서 dist 폴더 추적하지 않게 .gitignore파일에 추가했는데계속 추적이 되는 이슈 gitignore하기 전에 한번 올렸던 적이있어서 색인이 되어 gitignore에 추가를 했음에도 계속 추적이 되고 있었다. 그런경우 기존에 올렸던 색인을 삭제해줘야한다. git rm -r --cached //git rm -r --cached dist 폴더는 로컬에서 유지되지만 더이상 추적되지 않음 공감수 0 댓글수 0 2024. 6. 27.
react-hook-form validate with zod react hook form을 사용하면서 validate를 위해 zod패키지를 많이 사용하는것 같다, 패키지 용량도 작고 유효성검증(이메일..등등 다양한 폼요소)도 간단하게 할 수 있다. 각각 폼에 넣는것이아니라 한번에 컨트롤 할수있어서 좋은듯하다. zod 설치하기 npm add zod @hookform/resolvers import { zodResolver } from '@hookform/resolvers/zod'; import * as z from 'zod'; const schema = z.object({ selectReason: z.string().nonempty('이유를 선택해주세요'), detailReason: z.string().trim().nonempty('디테일 이버력해'), refundN.. 공감수 0 댓글수 0 2023. 8. 17.
typescript 배열 중 하나 타입으로 선언하기 export const CLAIM_TYPE_MAP = { CANCEL: '취소', RETURN: '반품', EXCHANGE: '교환' }; keyof typeof CLAIM_TYPE_MAP 으로 사용하면 된다. interface IClaimTypeMap { claimType: keyof typeof CLAIM_TYPE_MAP //CANCEL | RETURN | EXCHANGE } 공감수 0 댓글수 0 2023. 8. 16.
react 패키지를 next로 컴파일 하는 패키지 react에서 사용했던 패키지를 next환경에서 써야하는 상황 next 환경에서 작동할수있도록 컴파일 해주는 패키지 발견 https://www.npmjs.com/package/next-transpile-modules 1. npm 모듈 설치 npm i next-transpile-modules 2. next.config 파일 설정하기 const config = require('config'); const { format } = require('date-fns'); const { ko } = require('date-fns/locale'); /** @type {import('next').NextConfig} */ const withTM = require("next-transpile-modules")([ "@f.. 공감수 0 댓글수 0 2023. 8. 6.
리액트 오류: React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node React DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node 리액트 프로젝트 중 위와같은 오류메세지가 나왔다. {state && test} 리액트에서 i태그를 node로 인지하지 않아서 그러는 이슈같다. 인지할수 있는 node로 감싸주면 해결 완료 {state && test} 공감수 0 댓글수 0 2023. 8. 5.
styles jsx react컴포넌트에 스타일을 적용하는 방법으로 styles jsx를 사용하는 방법도 있다. styles jsx는 nextJS에만 있는 고유의 방법이다. styles jsx를 사용하면 이점 별도의 파일이 필요없다는 점 styles jsx를 적용했을때도 module.css를 적용했을때와 동일하게 클래스명이 난수로 표현된다. 중복우려 없음! 컴포넌트안에 html style태그를 넣어주고 jsx props를 입력해준다. 그리고 그 안에 스타일을 작성한다. 이슈! a태그에 스타일을 적용하는데 적용이 안될때 해결법 1. 글로벌로 선언한다 2. legacyBehavior 사용하여 이전버전 link를 커버한다. Home 3. link > span태그를 넣어서 클래스를 span태그에 적용한다. Home 컴포넌트 안에서 .. 공감수 0 댓글수 0 2023. 7. 7.
react module.css 컴포넌트 스타일을 적용시키는 방법 중 제일 기본적인 방법 Nav.js 컴포넌트가 있다면 Nav.module.css 파일을 만들어서 import해준다. import Link from "next/link" import styles from './Navbar.module.css'; import { useRouter } from "next/router" export default function NavBar() { const router = useRouter(); return( home about ) } className에 적용하는 방법 다중 클래스 적용하는 방법 1. 백틱 이용하기 home 2. join을 이용하기 className={[styles.link, router.pathname === '/about'.. 공감수 0 댓글수 0 2023. 7. 7.
5월 21일 알고리즘 연습문제 1. https://school.programmers.co.kr/learn/courses/30/lessons/181892 2. https://school.programmers.co.kr/learn/courses/30/lessons/181891 3. https://school.programmers.co.kr/learn/courses/30/lessons/181890 4. https://school.programmers.co.kr/learn/courses/30/lessons/181889 5. https://school.programmers.co.kr/learn/courses/30/lessons/181888 6. https://school.programmers.co.kr/learn/courses/30/lesso.. 공감수 0 댓글수 0 2023. 5. 21.
5월 17일 알고리즘 연습문제 https://school.programmers.co.kr/learn/courses/30/lessons/181901 const solution = (n,k) => Array(n/k).fill(k).map((v,i)=>v*(i+1)) https://school.programmers.co.kr/learn/courses/30/lessons/181900 function solution(m, a) { var answer = ''; for(let i = 0; i !(idx % c)); break; default: break; } return answer; } solution(4, [1, 5, 2], [1, 2, 3, 4, 5, 6, 7, 8, 9]) case 4에서 c번째 간격으로 출력하는 로직 filter를 사용.. 공감수 0 댓글수 0 2023. 5. 18.
5월 15일 알고리즘 연습문제 1. https://school.programmers.co.kr/learn/courses/30/lessons/181910 2. https://school.programmers.co.kr/learn/courses/30/lessons/181909 3. https://school.programmers.co.kr/learn/courses/30/lessons/181908 4. https://school.programmers.co.kr/learn/courses/30/lessons/181906 5. https://school.programmers.co.kr/learn/courses/30/lessons/181905 6. https://school.programmers.co.kr/learn/courses/30/lesso.. 공감수 0 댓글수 0 2023. 5. 15.
5월 14일 알고리즘 연습 https://school.programmers.co.kr/learn/courses/30/lessons/181916 function solution(a, b, c, d) { let dict = new Map(); let numbers = [a, b, c, d]; let answer = 1; numbers.map((number) => { dict.set(number, (dict.get(number) || 0) + 1); }) switch(dict.size) { case 1: answer = 1111 * a; break; case 2: const [p, q] = dict.keys(); if (dict.get(p) === 3) { answer = Math.pow(10 * p + q, 2); break; } i.. 공감수 0 댓글수 0 2023. 5. 14.
5월 8일 알고리즘 연습문제 https://school.programmers.co.kr/learn/courses/30/lessons/181923 https://school.programmers.co.kr/learn/courses/30/lessons/181921 범위에 배열을 초기화 할 때 만들어주고 , 정규표현식을 이용해 0, 5문자가 있는 경우만 추출한다. function solution(l, r) { const result = Array.from({length: r - l + 1}, (_, i)=> i + l).filter(n=>!/[^05]/.test(n)); return result.length ? result : [-1]; } // /[^05]/ 0,5이외에 다른문자열이 있는지 확인 true가 나오면 다른문자열 있는것 ht.. 공감수 0 댓글수 0 2023. 5. 9.
5월 5일 알고리즘 연습문제 https://school.programmers.co.kr/learn/courses/30/lessons/181928 https://school.programmers.co.kr/learn/courses/30/lessons/181927 구조분해 할당 길이가 맞지 않아도 대입할 수 있다. function solution(num_list) { const [a, b] = [...num_list].reverse(); // [6, 1, 2] a는 6, b는 1 return [...num_list, a > b ? ( a - b ) : a * 2]; } solution([2, 1, 6]); https://school.programmers.co.kr/learn/courses/30/lessons/181926 https://.. 공감수 0 댓글수 0 2023. 5. 6.
5월 4일 알고리즘 연습문제 https://school.programmers.co.kr/learn/courses/30/lessons/181934?language=javascript const operations = { '>=': (n, m) => n >= m, '!': (n, m) => n > m, ' 공감수 0 댓글수 0 2023. 5. 5.

문의안내

티스토리
로그인
고객센터

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