티스토리

twingkle

검색하기

블로그 홈

twingkle

construct.tistory.com/m

개발을 사랑하고 노력하는 모습을 기록하는 곳입니다.

구독자: 0

방명록 방문하기

주요 글 목록

Next.js13 프로젝트 시작부분 정리 프로젝트 시작 npx create-next-app@latest 1. cmd에서 위와 같은 명령어를 입력하여 설치 2. 프로젝트 이름 입력 3. 필요한 사용 언어 체크 ESLint: 자바스크립트 코드에서 발견되는 문제 패턴들 식별하기 위한 정적 코드 분석 도구. `src/` directory : 소스 디렉토리 사용유무 import alias: 어떤 경로에 별명(Alias)를 붙이고 모듈을 불러올때 이 Alias를 사용하는 것. (@ 와 ~ 중 사용할 별명 선택) 사용예시: `../../app/layout` => `@/app/layout` 파일분류 1. public: 사이트 이미지, 파비콘 등 누구나 접근 가능한 폴더 2. src: 안에 app을 둠. (혹시 다른 종류의 주요 파일이 들어갈 가능성이 존재하기.. 공감수 1 댓글수 2 2024. 1. 25.
styled-components vs emotion vs tailwind React 를 사용하다보면 CSS-in-Js 를 많이 사용하게 되는데, 나는 프로젝트할 때, styled-components만 사용해봐서 다른 라이브러리도 궁금하고 써보고 싶어서 찾아보았다. 우선 요새 트렌드는 emotion의 사용량은 떨어지고 있고, tailwind와 styled-components가 엎치락뒤치락하면 인기를 누리고 있는 추세인 것 같다. 이 기술들의 차이는 어떤게 있을지 궁금해졌다. 참고 우선 차이점을 보자면 LibraryAttaching Props Media Queries Global Styles Nested Selectors Server Side Rendering Theming Support Composition styled-components YES YES YES YES YES Y.. 공감수 0 댓글수 0 2023. 5. 22.
OS | Process | Thread OS(운영체제) Software 중 하나로 Hardware를 제어하고 응용 프로그램을 실행하는 기본 프로그램 Process - Program 이 OS에 의해 MEMORY 영역을 할당받고 실행중인 것 - 싱글스레드와 멀티 스레드 모두 memory 영역은 하나만 생성된다. - multi-thread-process : 같은 Process 안에서는 메모리를 공유하기때문에 다른 스레드의 실행결과값을 바로 알 수 있다. - 여러개의 process를 사용하면, 메모리 점유가 증가한다는 단점이 있지만, 각각의 메모리를 할당받기 때문에 보안적인 측면에서 좋다. Code PC(다음번에 실행될 명령어의 주소를 갖고 있는 레지스터와 코드를 저장) Data global variables, static variables 저장 S.. 공감수 0 댓글수 0 2023. 5. 12.
크롬 브라우저 아키텍쳐 크롬 브라우저는 기본적으로 Browser Process가 여러 Process들과 연결되어 있다. 중요! Browser Process안에는 Renderer Process와 Plugin Process가 여러 개 있다. 각각의 Process Renderer Process 여러 개가 있다. 탭 하나당 RendererProcess가 하나씩 있다고 보면 된다. 때문에 다른 탭에서 응답없음이 뜨더라도 다른 탭에는 영향이 없다. Plugin Process 웹사이트 내에서 사용하는 모든 플러그인을 제어하는 것으로, 여러 개가 있다. GPU Process 모든 전체 화면을 그리는 걸 담당하는 역할을 한다. 단점 Renderer Process가 무한으로 늘어날 수 있기때문에 고유한 메모리영역도 그만큼 많아진다. 극복 Pro.. 공감수 0 댓글수 0 2023. 5. 12.
TypeScript img파일 모듈 또는 해당 형식 선언을 찾을 수 없습니다. 문제 JS에서 TS로 리팩토링을 진행하던중 imgs 폴더 안의 이미지들을 못 읽어오는 현상이 발생했다. 구글링을 해본결과 모듈을 다른 곳에서도 쓸수 있도록 파일을 하나 만들어줘야했다. 해결방법 src 폴더 아래에 custom.d.ts 를 만들어준뒤, 우리 프로젝트에 쓰이는 이미지 확장자들을 넣어주었다. declare module "*.jpg"; declare module "*.png"; declare module "*.jpeg"; declare module "*.gif"; declare module "*.webp"; 참고링크 공감수 0 댓글수 0 2023. 4. 12.
Netlify 배포자동화 기존에는 팀원들의 코드가 고쳐져서 dev로 merge가 되면 다시 pull 받고 build해서 내가 다시 배포하는 방식을 사용했었다. 그냥 파일만 새로 올리면되니까 그냥 진행했던 배포가 이제 TypeScript로 refactoring이 들어가면서 어려워질 것 같아 배포자동화를 시도해봤다. 1. 우선 Netlify에 들어가서 Deploy탭으로 들어간다. 들어가면 지금 민트색은 우리가 배포한 사이트고 현재는 배포자동화가 완료된 화면이라서 Deploys from 옆에 우리 깃 레포지토리가 뜨는데 저것도 Deploy settings 에서 연결시켜주었다. 우리가 쓰는 프로젝트는 dev가 default 브랜치고, 이곳에 merge 하면 배포되게 하고있어서 head가 dev를 가리키고있다. 2. build는 어떻게 .. 공감수 0 댓글수 0 2023. 4. 12.
Warning: A component is changing an uncontrolled input to be controlled 💡문제 input value에 undefined로 들어갔을 때 생기는 문제가 다음과 같이 콘솔에 찍혔다. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components 💪🏻해결 .. 공감수 0 댓글수 0 2023. 3. 12.
Next.js + styled-component 에서 table 요소에 hover 넣기 💡문제 처음엔 div요소로 작성했던 마감임박 투표 부분을 선겹침을 방지하기위해 table 요소로 바꾸고 border-collapse를 넣어줬었다. 그런데 이 border-collapse 요소 때문에 맨 처음 블록 제외하고는 위쪽 border가 잡히지 않는 현상이 있었다. #카테고리 D-3 Lorem ipsum dolor sit amet 작성자 {/* 2023.01.16 */} . . . export const DeadLineCards = styled.table` display: table; border-collapse: collapse; `; export const DeadLineCard = styled.tr` ... border: 2px solid #d6d9dc; scroll-snap-align: st.. 공감수 0 댓글수 0 2023. 2. 2.
이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다. 💡문제 아래의 코드에서 반복되는 코드를 줄여 map으로 돌리려고 하자 에러가 나타났다. 전체 맛집추천 생활 이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다. 💪🏻 해결 처음에는 Container 밑에서 바로 map을 돌리려고 했으나, 하나의 자식이 필요하다고 했으므로 Tabs안에서 map을 돌려주었다. const category = ['전체', '일반', '음식', '쇼핑', '패션뷰티', '반려동물', '취미운동']; {category.map((ele)=>{ return({ele}) })} 공감수 0 댓글수 0 2023. 1. 31.
Next.js 에서 alert창을 띄우고 확인 버튼을 눌렀을 때 navigate 하는 법 💡문제 다음과 같은 코드에서 취소하기 버튼을 누르면 href에 적힌 링크로 가도록 만들고 싶었다. //main.tsx import * as S from './style'; 취소하기 등록하기 // style.ts import Link from 'next/link'; export const Cancle = styled(Link)` width: 10vw; border: 1px solid #4285F4; color: #4285F4; background-color: white; border-radius: 12px; padding: 1.3vh 1.4vw; margin-right: 1vw; cursor: pointer; white-space: nowrap; text-decoration: none; display: f.. 공감수 0 댓글수 0 2023. 1. 30.
React DatePicker + React-hook-form + typescript select error 💡 문제 React DatePicker를 사용하면서 가장 애먹었던 부분은 이 부분이다. 요청 데이터는 yyyy-MM-dd hh:mm:ss 이 형식으로 보내야하는데 selected의 형식은 Date가 들어가야해서 onChange값을 string으로 보내면 오류가 나는것이었다. Uncaught RangeError: Invalid time value at Module.format 💪🏻 해결 상단에 useState를 통해 selected에 들어갈 값을 onChange에서 할당해주고 onChange의 값은 선언한 day로 넣어줬다. const [startDate, setStartDate] = useState(new Date()); { const day = date.toISOString().replace("T", .. 공감수 0 댓글수 1 2023. 1. 29.
제네릭 정의 함수를 파라미터처럼 사용하는 것. 기본 문법 function logText(text: T): T { console.log(text); return text; } logText('hi'); ❗️유니온 방식을 이용한 제네릭 타입의 문제점 function logText(text: string | number) { console.log(text); return text; } const a = logText('hi'); a.split(''); logText(10); 코드를 위와 같이 작성했을때 split은 에러가 난다. 에러코드를 살펴보자면 아래와 같이 string에서는 가능하지만 number 형식에서는 사용이 불가능하다는 문구가 나타나게된다. 제네릭의 타입추론에서의 이점 확실하게 어떤 타입인지 선언해주기때.. 공감수 0 댓글수 0 2022. 12. 26.
이넘(Enums) ❓이넘 특정값들의 집합을 의미하는 자료형. 숫자형 이넘 초기값을 주지않으면 0부터 시작한다. enum Shoes { Nike, Adidas } var myShoes = Shoes.Nike; console.log(myShoes) //0 초기값을 주게 된다면 초기값부터 차례대로 1씩 증가하게 된다. enum Shoes { Nike = 10, Adidas } var myShoes = Shoes.Nike; console.log(myShoes) //0 문자형 이넘 문자형은 숫자형과 다르게 auto-incrementing이 없으므로 모든 값에 특정문자 또는 다른 이넘 값으로 초기화 시켜주어야 한다. enum Shoes { Nike = '나이키', Adidas= '아디다스' } var myShoes = Shoes.N.. 공감수 0 댓글수 0 2022. 12. 23.
Union type | intersection type Union type function logMessage(value: string | number) { console.log(value); } logMessage('hello'); logMessage(100); 타입가드 조건문에서 객체의 타입을 좁혀나갈 수 있다. 참고링크 var jong: string | number | boolean; function logMessage(value: string | number) { if(typeof value === 'number') { value.toLocaleString(); } if(typeof value === 'string'){ value.toString(); } throw new TypeError('value must be string of nubmer') .. 공감수 0 댓글수 0 2022. 12. 23.
인터페이스 / 타입 별칭 * 인터페이스는 타입을 정의하는 것. * 타입을 정의해 놓은걸 똑같이 반복해서 쓰고 싶지않으면 extends를 써서 확장으로 쓰면 된다. 인터페이스 interface User { age: number; name: string; } //변수에 인터페이스 활용 var seho: User = { age: 33, name: 'seho' } //함수에 인터페이스 활용 function getUser(user: User){ console.log(user); } const capt = { name: 'captine', age: 100 } getUser(capt); //함수의 스펙(구조)에 인터페이스를 활용 interface SumFunction{ (a: number, b: number): number; } var su.. 공감수 0 댓글수 0 2022. 12. 22.
기본 타입 && 함수타입 기본타입 //TS 문자열 선언 let str: string = 'hello'; //TS 숫자 let num: number = 10; //TS 배열 let arr: Array = [1, 2, 3]; let items: number[] = [1, 2, 3]; //11번째줄과 같은 선언 let heroes: Array = ['Capt', 'Thor', 'Hulk']; //TS 튜플 let addr: [string, number] = ['gangnam', 13069]; // TS 객체 let obj: object = {}; let person: object = { name: 'capt', age: 100 }; let people: {name: string, age: number} = { name: 'thor',.. 공감수 0 댓글수 0 2022. 12. 21.
기초설정 🔥처음 시작할 때, 인스톨 먼저 시켜주고 시작한다. npm i typescript -g ❓만약 ts로 작성한 파일을 js파일로 만들고 싶다면 tsc 다음 파일명을 써주면된다! ※ 플레이그라운드에서 tsc를 돌렸을 때의 결과물을 볼 수 있다. 타입스크립트 플레이그라운드 tsc index.ts 🚧 설정 파일 만들기( tsconfig.json ) { "compilerOptions": { "allowJs": true, "checkJs": true, //js에서 @ts-check 를 썼던 것과 같은 역할 "noImplicitAny": true } } 우선 설정은 간단하게 세개만 했는데 기타 설정들을 참고하려면 공식문서를 참고해서 추가하면 된다. 공감수 0 댓글수 0 2022. 12. 21.
Ascii code를 사용한 문제풀이 ❓프로그래머스 대문자와 소문자 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제설명 문자열 my_string 이 매개변수로 주어질 때, 대문자는 소문자로 소문자는 대문자로 변환한 문자열을 return하도록 solution 함수를 완성해주세요. 입출력 예 my_string result "cccCCC" "CCCccc" "abCdEfghIJ" "ABcDeFGHij" 💪🏻 풀이 방법 function solution(my_string) { var answer = ''; let ascii = 0; for(let i = 0; i < my_string.length; .. 공감수 0 댓글수 0 2022. 12. 16.
성능 최적화(Lighthouse 이용) 💡문제 메인페이지가 랜더링이 늦으면 유저 입장에서 좋지않기에 Lighthouse를 이용해 성능최적화를 시도해보기로 했다. 💪🏻해결 첫째, png 파일은 모두 webp로 변환해서 다시 적용했다. WebP 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다. 둘째, link에 rel="preload" 를 사용한다. 참고링크 최대 콘텐츠풀 페인트 최적화 Largest Contentful Paint(최대 콘텐츠풀 페인트, LCP)는 페이지의 메인 콘텐츠가 화면에 모두 렌더링되었을 때를 결정하는 데 사용됩니다. 느린 서버 응답 시간, 리소스 로드 시간, 클라이언트 측 렌더 web.dev LCP 요소에서 사용된 이미지를 미리 로드하여 LCP 시간을.. 공감수 0 댓글수 0 2022. 12. 7.
중첩된 링크로 나는 에러로그 ❓문제 Warning: validateDOMNesting(...): cannot appear as a descendant of . 🚧 에러메세지 Warning: validateDOMNesting(...): cannot appear as a descendant of . 아래는 현재 내가 쓰고 있는 코드인데, 처음에는 상세보기로 들어가는 링크를 제목인 BrandName 에 걸었다가 다른 사이트를 둘러보니 전체를 눌러서 상세보기로 들어가는 곳이 많아 전체로 다시 링크를 거는 작업을 거쳤었다. //첫번째 상세보기 > //두번째 {[order.orderProducts[0].brandName]}{order.orderProducts[0].title} 외 {order.orderProducts?.length}개 색상: .. 공감수 0 댓글수 0 2022. 11. 29.
`value` prop on `input` should not be null 💡문제 input 입력은 되지만 콘솔에서 계속 뜨는 에러메세지 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. react_devtools_backend.js:4026 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide betw.. 공감수 0 댓글수 0 2022. 11. 25.
useRef()를 사용한 onClick이벤트(Object에서 map 사용하기) ❓쓰게된 이유 처음 프로젝트를 시작할땐 탭의 수가 별로 많지 않았기에 그냥 하드코딩하는 방식으로 useRef()를 썼는데, 진행을 하다보니 브랜드의 수만큼 탭수가 늘어나고, 브랜드가 추가되면 또 일일이 추가해줘야하는 번거로움이 생겼다. 💡목적 그래서 map으로 돌려주어 한번만 쓰려고하는데 찾아보니 click했을때 이동되는 탭으로 만들어두신 글은 잘 없었다. 여러개의 글들을 참고하여 구현해봤다. 우선 내가 구현해야할 기능은 탭을 눌렀을 때, Ref가 되어있는 곳으로 내려가야 하는 기능이다. 위의 화면에서 아래의 화면같이 저 위의 탭들을 누르면 탭안에 있는 곳으로 스크롤이 이동되는 기능이었다. 아직 헤더높이를 계산하지않아서 제목이 보이지않지만 헤더가 없으면 브랜드이름있는 부분이 헤더의 밑으로 오게되는 것이다.. 공감수 0 댓글수 0 2022. 11. 24.
마크다운 에디터 적용 toast-ui를 쓰면서 생긴 이슈 npm i -S @toast-ui/editor 했을때 오류파티🤗 구글링결과 리액트 18은 안되고 17로 다운그레이드를 시켜야 한다고했다. 우선은 --legacy-peer-deps를 붙여서 해결했지만, 추후 문제가 생긴다면 다운그레이드를 진행해야할 듯 싶다. 다운그레이드 하는 방법은 아래 코드를 쳐서 진행한다. npm install --save react@^17.0.1 react-dom@17.0.1 이후 Edit.js 에서 임포트 진행시켜주고 진행했다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; // Editor 스타일 function .. 공감수 0 댓글수 0 2022. 10. 28.
재귀 POWER 솔루션 function power(base, exponent){ if(exponent === 0) return 1; return base * power(base,exponent-1); } FACTORIAL 솔루션 function factorial(x){ if (x < 0 ) return 0; if (x 공감수 0 댓글수 0 2022. 10. 13.
Light house Lighthouse 란? Lighthouse는 웹 앱의 성능, 품질 및 정확성을 개선하기 위한 자동화된 오픈 소스 도구입니다. 페이지를 감사할 때 Lighthouse는 페이지에 대해 대규모 테스트를 실행한 다음 페이지가 얼마나 잘 수행되었는지에 대한 보고서를 생성합니다. 여기에서 실패한 테스트를 앱을 개선하기 위해 무엇을 할 수 있는지에 대한 지표로 사용할 수 있습니다. * Lighthouse 사용에 대한 빠른 시작 가이드: https://developers.google.com/web/tools/lighthouse/ Chrome에서 실행하기 크롬에서 검사하고 싶은 페이지의 url을 입력합니다. 개발자 도구를 엽니다. lighthouse 탭을 클릭합니다. ※ Node CLI에서 실행하기 1. Lightho.. 공감수 0 댓글수 0 2022. 10. 7.
스터디하면서 배우는 것들 너무 늦게 시작한 포스팅이지만......지금이라도 블로깅을 시작해본다..! 숫자로 변환시켜줌! (e => +e) 비트연산자 http://www.tcpschool.com/c/c_operator_bitwise 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com getDay() const birthday = new Date('August 19, 1975 23:15:30'); const day1 = birthday.getDay(); // Sunday - Saturday : 0 - 6 console.log(day1); // expected output: 2 https://developer.mozilla.org/ko/docs/Web.. 공감수 0 댓글수 0 2022. 9. 27.
Bundling과 Webpack Webpack에서의 모듈 Webpack?? 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러. ※모듈 번들러: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고 이를 저합해 하나의 묶음으로 번들링하는 도구 **번들링: 여러제품이나, 코드, 프로그램을 묶어서 패키지로 제공하는 행위 Webpack은 왜 필요할까? 웹페이지를 구성하는 코드의 양이 많아지면 우리는 흔히 무겁다고 표현한다. 이렇게 웹페이지가 무거워질수록 로딩속도와 성능은 저하가 되므로 유저들은 기다리지않고 이탈해버린다. 웹팩이 없다면 각 자원들을 일일히 서버에 요청해 얻어와야 하지만, 웹팩이 있다면, 같은 타입의 파일들은 묶어서 요청 및 응답을 받을 수 있기 때문에 네트워크 코스트가 획기적으로 줄어든다. 그래서 웹팩.. 공감수 1 댓글수 1 2022. 9. 26.
리플로우 & 리페인트 개념정리 리플로우 어떤 웹 인터렉션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것. 즉, 렌더링을 다시 하는 것. 배치를 위한 연산을 해야해서 실제로 cpu를 많이 차지. 리페인트 페인트 과정을 반복해 수행하는 것. 즉, 페인트를 다시 하는 것. 픽셀을 다시 화면에 찍어 그려야 하기 때문에 GPU를 많이 차지. =>프레임 드랍현상과 연관 예) DOM 조작 최적화 불필요한 레이아웃은 줄이기 레이아웃 과정에서 불필요하게 계산해야 할 것이 많아지면 엔진도 결국 컴퓨팅 파워에 기대기 때문에 과부하가 불가피하게 생기게 때문에 이런 레이아웃을 발생시키는 속성을 피하면 해당 과정이 발생하는 횟수를 줄일 수 있다. CSS에서 레이아웃, 페인트를 발생시키는 속성들 리플로우시 리페인트는 필연적으로 일어.. 공감수 0 댓글수 0 2022. 9. 22.
Graph 여러개의 점들이 서로 복잡하게 연결되어 있는 관계 구조 - 직접적인 관계가 있는 경우 두 점 사이를 이어주는 선이 있다. -간접적인 관계라면 몇 개의 점과 선에 걸쳐 이어진다. -하나의 점을 그래프에서는 정점이라고 표현하고, 하나의 선은 간선이라고 한다. Graph의 표현 방식 인접행렬 서로 다른 정점들이 인접한 상태인지를 표시한 행렬로 2차원 배열의 형태로 나타낸다. ex) A와 B가 이어져 있다면 1(true), 이어져 있지않다면 0(false) if) 가중치 그래프라면 1대신 관계에 서 의미 있는 값을 저장한다. 가장 빠른 경로를 찾고자 할 때 주로 사용된다. 인접리스트 각 정점마다 하나의 리스트를 가지고 있으며, 이 리스트는 자신과 인접한 다른 정점을 담고 있다. 메모리를 효율적으로 사용하고 싶을.. 공감수 0 댓글수 0 2022. 9. 22.
트리 단방향 그래프의 한구조로, 하나의 뿌리로부터 가지가 사방으로 뻗은 형태가 나무와 닮아 있다고 해서 트리구조 라고 부른다. 사이클이 없는 하나의 연결 그래프 부모노드 : A는 B와 C의 부모노드 자식노드 : B와 C는 A의 자식노드 리프노트 : 자식이 없는 노드 깊이(depth) 루트로부터 하위 계층의 특정 노드까지의 깊이. 예) A의 depth: 0 / B,C의 depth: 1 / D,E,F,G의 depth : 2 레벨(level) 같은 깊이를 가지고 있는 노드를 묶어서 레벨로 표현한다. 높이(Height) 리프 노드를 기준으로 루트까지의 높이 부모노드 : 자식 노드의 가장 높은 height값에 +1 한 값 위 그림에서 H, I, E, F, J의 높이 : 0 D, G 의 높이 : 1 B, C 의 높이 :.. 공감수 14 댓글수 1 2022. 9. 21.

문의안내

티스토리
로그인
고객센터

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