jfmam 개발 블로그

modal 창 달기 modal 창 달기 시 컴포넌트가 여기저기 분리가 되어 있다. menu icon에 있는 state에 따라 modal창이 켜질지 말지 여부가 정해져 있다… modal창은 header영역의 색도 같이 변해야 한다. 때문에 또한 어떤 페이지에서도 동작해야 하기 때문에 위치해야 하는 컴포넌트는 app.tsx가 되야 될거같다. 방법 이번 프로젝트 중 modal창 toggle 기능을 만들어야 했다. modal창을 켰을 때 menu icon 버튼 디자인 변경 header background color 변경 contents component 대신 modal창 켜져야함 다양한 컴포넌트에서 변경이 일어나기 때문에 modal toggle state를 전역적으로 관리하기로 변경하였다. 그래서 해결방법으로 ..

문제 스토리북 실행 시 실행이 안되는 이슈가 발생하였다. 찾아보니 scss에서 다른 scss 파일을 import 할 때 해당 부분을 인식 할 수 없다는 문제였다. 해결방법 https://github.com/storybookjs/presets/tree/master/packages/preset-scss GitHub - storybookjs/presets: 🧩 Presets for Storybook 🧩 Presets for Storybook. Contribute to storybookjs/presets development by creating an account on GitHub. github.com 위의 링크를 보고 따라 하면 된다. css-loader, sass-loader, style-loader, s..

문제 import {} from '@/styles/~.scss' import 시 module alias를 인식하지 못하는 문제 발생 해결방법 tsconfig 설정 storybook main.js 설정 tsconfig 설정 https://nextjs.org/docs/advanced-features/module-path-aliases nextjs에서 module alias를 설정하는 방법을 보고 적용해 보았다. ts config에서 paths와 baseurl을 설정해서 module alias를 구현한다. "paths": { "@/*": ["./*"] // tsconfig 파일 위치 기준 }, "baseUrl": "." // hierarchy - tsconfig.json - pages - .storybook ..

Clean Architecture Clean Architecture란? 출처:Clean Architecture는 모바일 개발을 어떻게 도와주는가? - (1) 경계선: 계층 나누기 클린 아키텍처는 소프트웨어 구조 중 하나이며 다음 사진과 같은 계층 분리를 주 목적으로 하고있다. 클린 아키텍처의 바깥 원은 저 수준에 해당하며 중심으로 갈수록 고 수준에 해당한다.고 수준일수록 추상적이고 비즈니스 규칙을 나타내며 저 수준일수록 고 수준에 대한 내용을 바탕으로 구체적이고 세부적인 개념으로 들어간다. 의존성 규칙(Dependency-Rule) 모든 의존성은 저 수준에서 고 수준으로 향해야한다. 고 수준(High-Level) Entity 정의 원의 가장 중심에 있는 부분으로 비즈니스 규칙의 데이터를 나타낸다.개발언어..

스토리북 사용하기 프로젝트를 진행하면서 현재 컴포넌트를 만들고 있다. 실제로 이제 스타일링을 적용하고 이벤트를 적용하는 과정에서 잘 동작하는지를 원하는데로 잘 구현이 되는지 확인해 보고 싶었다. 처음엔 마크업을 다른 tsx파일에 작성해 한번 테스트를 해볼까 했지만 최근 테스트 관련한 글을 읽고 UI가 잘 나오는지 확인하기 위해서 스토리북을 사용하는 글을 본적이 있어 스토리북을 사용해 보게 되었다. 문제 발생 storybook을 설치하면서 발생한 문제점이나 의문점들이 발생한 부분에 대해 정리하려한다. 설치환경 yarn berry next.js storybook v6 babel-loader v8 @babel/core v7이슈 node_modules파일이 생성되었다... node_linker의 경우 pnp로 ..

문제 텍스트가 긴 경우 UI에서 모두 보여주게 되었을 때 밑에 오는 컴포넌트 요소들이 묻히거나 디자인 의도대로 나오지 않는 경우가 발생한다. 이 부분을 개선하기 위해 나름 생각했던 부분에 대해 정리를 해보려 한다. 단순하게 maxLength 제한하기 input 태그에서 maxLength를 제한하여 디자인이 깨질 수 있는 것을 미리 방지한다. 그러나 별로 좋은 방법은 아니다.왜냐하면 영어나 한글의 경우 i 와 A 같이 뚱뚱함의 정도가 다르기 때문에 i가100자 들오가는 것과 A가 100자들어가는 것에는 큰 차이가 있다. css 이용하기 css를 이용하여 처리하는 많은 방법이 있고 몇가지 방법을 정리 하려 한다 컴포넌트 width를 제한하여 해당 width만큼은 채우게 하는 방법 overflow: hidde..

https://jfmam.tistory.com/31 이번에 프로젝트를 시작하기 전 환경설정 후 개발을 진행하고 있었다. 개발을 진행 후 commit 하려 하는데 stylelint 저장 시 자동적용이 동작을 안하는 문제와 eslint 쪽에서 계속 failed가 발생하였고 알고보니 eslint extend에 prettier와 관련되였고 의존성 미설치 관련해서 에러가 발생하였다. 오늘 겪은 문제에 대해서 정리한 글을 추가적으로 올려보려 한다 prttier 문제 yarn berry에서 바이너리 파일을 잘 못 불러와서 문제가 발생한다. 문제상황 stylelint를 설정하고 ctrl + s를 누르면 자동으로 설정되길 바라는데 설정이 되지 않는 문제가 발생하였다… 알고보니 바이너리 파일을 잘 못불러와서 문제가 발생한..

💡 실행중인 프로그램을 일컫는다. 메모리에 다수의 프로그램들을 실행 시키게 되면서 프로세스 개념 등장 병행실행 가능 프로그램 카운터 + 프로세스레지스터 프로세스 메모리 배치 고정 텍스트: 실행코드 데이터: 전역변수 (초기화, 미 초기화) 가변 힙: 동적 메모리 스택: 임시 데이터 저장장소 (함수,지역변수,매게변수, 복귀주소) 스택과 힙은 양방향으로 크기를 확장 시켜나가며 겹치지 않도록 조심해야한다. 프로세스 상태 new: 프로세스 생성 running: 프로세스를 할당받아 명령어 실행 wating: 프로세스가 이벤트가 일어나기를 기다린다 (입출력완료) ready: 프로세스를 할당받기를 기다린다. terminated: 프로세스 종료 프로세스 제어블록 💡 프로세스의 정보를 저장해 놓는 공간 프로세스 상태 프로..