twingkle

프로젝트 시작 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을 둠. (혹시 다른 종류의 주요 파일이 들어갈 가능성이 존재하기..

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

OS(운영체제) Software 중 하나로 Hardware를 제어하고 응용 프로그램을 실행하는 기본 프로그램 Process - Program 이 OS에 의해 MEMORY 영역을 할당받고 실행중인 것 - 싱글스레드와 멀티 스레드 모두 memory 영역은 하나만 생성된다. - multi-thread-process : 같은 Process 안에서는 메모리를 공유하기때문에 다른 스레드의 실행결과값을 바로 알 수 있다. - 여러개의 process를 사용하면, 메모리 점유가 증가한다는 단점이 있지만, 각각의 메모리를 할당받기 때문에 보안적인 측면에서 좋다. Code PC(다음번에 실행될 명령어의 주소를 갖고 있는 레지스터와 코드를 저장) Data global variables, static variables 저장 S..

크롬 브라우저는 기본적으로 Browser Process가 여러 Process들과 연결되어 있다. 중요! Browser Process안에는 Renderer Process와 Plugin Process가 여러 개 있다. 각각의 Process Renderer Process 여러 개가 있다. 탭 하나당 RendererProcess가 하나씩 있다고 보면 된다. 때문에 다른 탭에서 응답없음이 뜨더라도 다른 탭에는 영향이 없다. Plugin Process 웹사이트 내에서 사용하는 모든 플러그인을 제어하는 것으로, 여러 개가 있다. GPU Process 모든 전체 화면을 그리는 걸 담당하는 역할을 한다. 단점 Renderer Process가 무한으로 늘어날 수 있기때문에 고유한 메모리영역도 그만큼 많아진다. 극복 Pro..

문제 JS에서 TS로 리팩토링을 진행하던중 imgs 폴더 안의 이미지들을 못 읽어오는 현상이 발생했다. 구글링을 해본결과 모듈을 다른 곳에서도 쓸수 있도록 파일을 하나 만들어줘야했다. 해결방법 src 폴더 아래에 custom.d.ts 를 만들어준뒤, 우리 프로젝트에 쓰이는 이미지 확장자들을 넣어주었다. declare module "*.jpg"; declare module "*.png"; declare module "*.jpeg"; declare module "*.gif"; declare module "*.webp"; 참고링크

기존에는 팀원들의 코드가 고쳐져서 dev로 merge가 되면 다시 pull 받고 build해서 내가 다시 배포하는 방식을 사용했었다. 그냥 파일만 새로 올리면되니까 그냥 진행했던 배포가 이제 TypeScript로 refactoring이 들어가면서 어려워질 것 같아 배포자동화를 시도해봤다. 1. 우선 Netlify에 들어가서 Deploy탭으로 들어간다. 들어가면 지금 민트색은 우리가 배포한 사이트고 현재는 배포자동화가 완료된 화면이라서 Deploys from 옆에 우리 깃 레포지토리가 뜨는데 저것도 Deploy settings 에서 연결시켜주었다. 우리가 쓰는 프로젝트는 dev가 default 브랜치고, 이곳에 merge 하면 배포되게 하고있어서 head가 dev를 가리키고있다. 2. build는 어떻게 ..

💡문제 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 💪🏻해결 ..

💡문제 처음엔 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..

💡문제 아래의 코드에서 반복되는 코드를 줄여 map으로 돌리려고 하자 에러가 나타났다. 전체 맛집추천 생활 이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다. 💪🏻 해결 처음에는 Container 밑에서 바로 map을 돌리려고 했으나, 하나의 자식이 필요하다고 했으므로 Tabs안에서 map을 돌려주었다. const category = ['전체', '일반', '음식', '쇼핑', '패션뷰티', '반려동물', '취미운동']; {category.map((ele)=>{ return({ele}) })}

💡문제 다음과 같은 코드에서 취소하기 버튼을 누르면 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..