#design

Conversation designer/ 대화 디자이너는 어떻게 시작하나요?

안녕하세요 현재 전혀 다른 직무를 가지고 있습니다 그러다가 대화 디자이너에 관심이 생겼는데요 제가 ai나 개발에 대해 전혀 아는 게 없더라구요 이 직무를 사람인, 잡코리아에 검색해봐도 아무 정보도 없고, 그러다가 커리어리가 떠서 바로 설치해봤습니다. 혹시 이 직무는 어디서 찾을 수 있는지 어디서부터 시작해야하는지 알 수 있을까요?

주니어 개발자가 읽었으면 하는 책 추천 있을까요

최근 프로그래머의 뇌, 소프트 스킬, 실용주의 프로그래머, 프로그래밍 면접 이렇게 준비한다, 한 권으로 읽는 컴퓨터 구조와 프로그래밍 이정도 읽었습니다. head first design pattern 지금 70% 읽어서 아마 차주 중에 마저 읽을 것 같은데 다음에 뭐 읽을지 고민되네요 리팩토링은 사뒀는데 영 생겨먹은게 맘에 안 들어서 손이 안 가고, 이 책 괜찮다 혹시 추천해주실 수 있을까요? 가능하면 이북으로 있으면 좋겠네요 특정 기술에 국한되도 좋고, 개발 전반에 관한 것도 좋습니다

React Atomic design patten에서 Mocules 컴포넌트 작성 방법

안녕하세요. 리액트에서 아토믹 디자인 패턴 적용 중 궁금한 점 있어 글 올립니다. 프로젝트 초기 단계이고 해당 디자인 패턴을 처음 적용시켜 봐서 mocule 컴포넌트의 구성 방식이 조금 고민됩니다. 첫번째는 molecule 컴포넌트에 하위 요소, 즉 atom 컴포넌트를 렌더링만 시켜주는 로직으로 작성했고, 두번째는 molecule 컴포넌트 내부에 atom 컴포넌트를 위치 시켰습니다. 각자 장단점이 있을거 같은데 제가 생각했을땐 첫번째 방법은 props drilling이 어느정도 완화되고, 컴포넌트 계층 구조를 한번에 파악하기 쉽고, 두번째 방법은 재사용이 용이하고 디자인 패턴의 규칙을 잘 따른 것 같습니다. 일단은 첫번째 방법은 재사용이 불가능한 컴포넌트에서 사용하고, 두번째 방법은 재사용이 가능한 컴포넌트에서 사용하자고 잠정 결론 내렸는데, 나중에 혼란스러워질 것 같다는 걱정도 듭니다. 좋은 의견 주시면 감사하겠습니다.

리액트에서 compound component pattern과 atomic design pattern을 동시에 사용 할 수 있나요?

프로젝트 설계 단계에서 디자인 패턴에 대해 리서치 중 compound componen pattern과 atomic design pattern 두 개 다 좋아 보여 도입을 고려 중에 있는데요. 만약 두 디자인 패턴을 동시에 적용하게 된다면 아래 코드 중 FlyOut.Item은 compound component의 관점에서 FlyOut의 props이니 FlyOut이라는 폴더에 저장을 해야 할지, 아니면 다른 컴포넌트에서도 재사용이 가능하도록 atomic 폴더 안에 두고 import 해서 사용해야 하는지 고민입니다. 제가 생각했을때 다른곳에서도 재사용이 가능하면 atomic 폴더 안에, 가능하지 않다면 해당하는 organizaion 폴더 안에 두는게 좋을 것 같은데 재사용 가능한 컴포넌트를 만들기 위해 디자인 패턴을 적용하는건데 좀 모순인거 같고 안티 패턴인거 같아서요. 두 패턴을 한 프로젝트에 동시에 적용 하는게 가능할까요? 가능하다면 어떤 방향으로 설계를 해야 좋은 설계일까요?

Nextjs 에서 부분적으로 FOUC 가 발생하는 것 같습니다.

안녕하세요. 오늘도 Next의 심오함에 허우적대고 있는 주니어 프론트엔더 입니다. Next 에서 디자인관련 프레임워크와 라이브러리로 Ant-Design 과 Styled-components를 선택하여 프로젝트를 진행하는 중입니다. 그리고 방식은 기본 Antd의 컴포넌트를 import 하여 필요 부분만 Styled-components로 덮어 커스텀하는 방안으로 택하였습니다. 이전에 Next는 기본적으로 서버에서 html을 생성하려는 경향이 있기에 css-in-js는 가끔가다 hydrating 과정으로 인해 스타일이 적용되지 않는 부분만 먼저 보여진다고 들었습니다. 그래서 현재 next 13을 사용하고 있어 (app routing 방식이 아닌 구 버전인 pages routing 방식을 사용하고 있습니다.) next.config.js에서 styled-components를 인식하게 도와주는 설정 코드를 작성하였습니다. - 해당 설정은 최하단에 첨부하였습니다. 문제는 FOUC 관련 이슈가 일부 컴포넌트에만 나타납니다. Button컴포넌트와 Input컴포넌트를 위와 같은 스타일 방식으로 제작을 하였는데, 페이지가 리프레쉬가 되면 Button 컴포넌트는 기존 styled-components의 커스텀을 유지하지만, Input 컴포넌트는 styled-comopents의 커스텀을 입히기 전의 Ant-Design의 기본 디자인으로 렌더링되는 문제가 발생하였습니다. 그래서 제가 진행했던 FOUC 관련 설정에 문제가 있는지 궁금하여 질문을 드리려고 합니다!

순수객체로 추상화 되었다는 말의 의미?

블로그 글을 읽다가 이해가 안가는 부분이 있어서 찾아왔습니다.. "순수객체로 추상화" 되었다라는 말이 어떤 말인가요? 순수 객체가 무엇인지는 알겠는데, 저 말을 보니 제가 제대로 이해하고 있지 못한 것 같아 질문 올려 봅니다. 블로그 글: https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_3-%E1%84%80%E1%85%A1%E1%84%89%E1%85%A1%E1%86%BC%E1%84%83%E1%85%A9%E1%86%B7-virtualdom

ant design 4,5 ssr 지원안하는거 맞죠?

안녕하세요, ant design을 쓰면서 next js 앱에서 개발중인데, css가 프리렌더에서 깨지더라구요 그래서 인터넷 찾아봤는데 명확한 답이 안나오는데 보니 지원을 아직 안하는거 같은데 맞나요?

exe파일에서 DB가 돌아가는 원리가 어떻게 되는건가요?

파이썬에서 Designer로 간단한 프로그램을 만들었는데 현재는 db 정보를 pymysql.connect(host='127.0.0.1', user='root', password='1234', db='infra', charset='utf8') 이런식으로 불러오고 있습니다. 하지만 프로그램을 다 만들고 든 생각이 다른 DB연동된 소프트웨어들을 보면 내 컴퓨터에 아무것도 안깔려있어도 데이터 정보를 생성, 수정, 삭제할수 있네? 어디에 저장하는거지? 였습니다. github에서 다른분이 만든 작은 프로젝트를 봤는데 이 프로젝트에는 .db라는 파일이 있던데 이 파일은 어디서 만드는 것이고(mysql? pycharm?) 데이터가 많아져서 용량이 방대해지면 어떻게 되는지 궁금합니다. 구글에서 찾아봐도 전부 본인컴퓨터 DB와 연동하는 내용뿐이네요ㅠㅠ

react 오픈소스 UI 라이브러리 쓰시나요?

이번에 사이드 프로젝트에 새로 합류하게 되었는데, 전임 프론트 개발자 분이 Ant Design을 적용해놓고 가셨더라고요. 프로젝트 코드도 다 Ant Design 컴포넌트들로 적용이 된 상태입니다. 저는 사실 회사에서 이런 UI 라이브러리를 써본적은 없고 bootstrap 이나 tailwindcss로 구현된 내부 컴포넌트들 밖에 안 써봤는데요. 혹시 실제 사용하는 서비스에서도 Ant Design 같은 UI 라이브러리를 사용하는지 궁금합니다! 추가로 최근 Storybook을 잠깐 봤는데, 이거는 UI 라이브러리인가요?

next.js 폴더나 컴포넌트 구조를 어떻게 짜시나요?

회사에서 next.js 폴더 구조랑 컴포넌트를 한 번 리팩토링하려고 하는데, 어떤 구조로 접근하는게 좋은지 의견을 좀 구하려고합니다 ㅎㅎ 현재는: pages, templates, components, elements 형태로 폴더가 나뉘어져있고, pages → templates → components → elements 형태로 의존하도록 설계가 되었다고 하더라구요. 그치만 설계와는 달리 여러 훅 (비즈니스, UI 모두)들이 혼용되어서 pages, templates, components에 범벅이 되어 있는 상태입니다. 제가 생각한건: pages → templates → components → elements 형태는 유지하고, pages는 최소한의 로직만 있고 templates 에서 비즈니스 로직을 아래로 넘겨주는 형태를 생각하고 있어요. 어떤 방식일지는 케바케일 것 같은데, 가장 단순한 방법은 prop으로 넘겨주는 형태를 생각하고 있습니다. 컴포넌트 간 상태가 공유되어야한다면 카카오 형님들 블로그 (https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/) 를 좀 참고해서 compound pattern으로 만들어볼까 생각중이구요. 막상 고민하다보니 다른 분들은 어떻게 작업하시는지 궁금해서요. 혹시 여러분들은 next.js 쓰시면서 구조 같은거는 어떻게 잡으셨나요??