티스토리

CODE_PLAN

검색하기

블로그 홈

CODE_PLAN

smileagain72.tistory.com/m

CODE_PLAN 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[ppt] 공부내용 기록 - ppt에서 특정 기능이 작동이 오류가 날 경우 -> window 업데이트를 안 하거나 일시적 오류일 수도 있으니 컴퓨터를 다시 껐다가 키면 잘 작동됩니다 ex) 표-> 셀 분할 공감수 0 댓글수 2 2024. 2. 17.
[PM] 기획에 대한 팁(공부 및 정리) 기획 고수는 통찰력으로 정보를 다룹니다 그래서 고수의 기획은 심플합니다. 고수는 이번 프로젝트의 핵심 문제가 뭘까부터 생각합니다. 문제점을 찾으면 해결점은 찾기쉽습니다(탑다운) 문제점이 해결 점이 포함되어 있기 때문입니다(바텀업) 해결점이 탄탄하려면 역으로 문제점이 탄탄해야 합니다. 책의 저자는 말합니다. 훌륭한 기획은 예술과 같습니다. 설득하지 않습니다 매료시킵니다. 그림으로 쉽게 전체적인 구조를 보면 이와 같습니다. 참고> 기획자 데이먼, (책) 기획은 2형식이다 공감수 0 댓글수 0 2024. 2. 9.
[Figma] autolayout 사용법 정리 장점 1) 네모박스안에 상자를계속만들때 일일히1. 박스크기 키우고 2. 상자생성 이렇게 할필요없이 상자를 만들면 자동으로 박스커지고 상자도 생깁니다. 장점 2) 반응형구현 (큰화면,작은화면에 따른 구현) 즉, 우리가 미리 만들어준 미리 우리가 레이아웃을 만들어준 개념 - tip) 전체 frame창 부분 누르면 Clip content가 있는데 해제할경우 -> 아트보다 바같에있던 숨겨진 요소를 볼수가있습니다. - auto layout 장점 활용예제) 원이 여러개 있을경우 원 전체 드래그후 autolayout 후 한개 원누르고 ctrl+c -> ctrl +v 하면 서식이복사된채로 원이 옆에 생성됩니다. -위 그림과같이 > 플레이 버튼을 하나더 밑에 추가하고싶을때 밑에 화면구성부분도 같이 내려가고 플레이버튼이 .. 공감수 0 댓글수 0 2024. 2. 3.
[Figma] 와이어프레임 상세페이지(+auto layout 응용) - Pages 추가방법 : Pages의 +버튼을 누르면됩니다. - 복사한것 새로운 프레임에 옮길때 먼저 그룹화한뒤에 옮길때도 있습니다. (필요영역 드래그로 전체 감싼후 ctrl+g) - stroke는 그림그린후 테두리 검은색으로 만들때도 사용 - 도형2개 사이 가운데 두껍게 2줄로 생겼을때 1줄로 하는법 : 도형 하나 클릭후 마우스 클릭하기(다시 공부) - 드래그할때 ctrl+ 드래그하면 선택한부분에 대해서만 가져오게 됩니다 - ex) 수강하기(네모버튼)을 만들려고할때 방법2가지가 있습니다. 1. 직접 사각형 그리기 2. text 생성후 글씨작성후 group화 만든후 auto layout 볼수있음(일반적인 atuo layout 사용법) ex) 18강 ' 3시간에서 ' 아이콘같은것은 글자로 써도되는데 이모.. 공감수 0 댓글수 0 2024. 2. 2.
[Figma] 와이어프레임(메인페이지) 그리기 요약 - Frame 크기 키우는법 : 오른쪽 설정에서 height 의 숫자를 지정해주거나 Frame을 잡아서 밑으로 당겨주면 높이가 증가합니다. - 도형(그림) 그리고 정렬방법: 도형클릭후 오른쪽설정창에서 중앙정렬 클릭후 ,맨위 이런식으로 조정가능합니다. - 실제 디자인을 할때는 간격이나 이런거 다 신경써야하는데 와이어프레임 단계에서는 굳이 그런것까지 디테일하게 신경쓸필요가없다.(대략적으로만) - alt + 누르고 드래그할때 숫자표시 -> 숫자만큼 움직일수있음 - figma 안에서 plugin 해서 이미지 불러올수있음/ 다른 사이트에서도 이미지를 가져올수도있다 - plugin으로 이미지 다운로드해서 사용가능 - ctrl+option+c -> 원래 적용된 스트로크등 서식을 복사 - ctrl+option+v ->.. 공감수 0 댓글수 0 2024. 2. 2.
[Figma] UI의 요소정리 - Header : 상단에 붙어있는 UI / 여기서 가장많이쓰이는 형태 : GNB - Banner : 플랫폼에서 많이쓰이는형태 - Card : UI에서 자주나타나는 카드형태의 UI -Depth : 한페이지에서 다른곳으로 넘어갔다는 의미 (UI-> 상세) 즉, 서비스에서 안쪽으로 들어간 단계 (1Depth, 2Depth, 3Depth...) - Toggle : 열고 닫기만 할수있는형태를 말합니다 - Accoddion : Toggle에서 펼쳐서나오는 부분 강의 목차같은것 - Floating Button : 계속 따라다니는 버튼 - CTA(Call to Action) : 액션을 유도하는 버튼 - Side Bar(Menu) : 메뉴or검색버튼을 눌렀을때 오른쪽에서 나오는 바 공감수 0 댓글수 0 2024. 2. 2.
[서비스 기획] 기획/디자인하기(노션,액슈어,피그마) How 1. Notion을 이용해서 문서를 정리 2. 간단한 와이퍼프레임을 그리거나 프로토타입이 필요할때는 Axure를 사용 3. 디자인은 Figma Summary - EPIC 은 어떠한 제품안에서 중요한 꼭지꼭지들이라고 보면됩니다. US= 유저스토리의 약자 에픽에 필요한 유저스토리를 나열하게됨 - 와이어 프레임이나 디자인을 하기전에 text로 필요한 기능들을 먼저 정리할수 있습니다. - 회사마다 제품을 기획하는 방법은 다르다. 보통 많은회사들이 와이어프레임을 그리고 거기에 기능명세를 그리게됨 기능명세 -> 와이어 or 디자인을 작성하면 꼭 필요한 제품을 중심으로 제품을 디자인하고 만들어갈수 있다는 장점이 있습니다. 이렇게 text가 정리가되면 제품팀이 모여서 아이데이션 회의를함 -> 이 기능이 진짜 필.. 공감수 0 댓글수 0 2024. 1. 31.
[Figma] 공부내용기록 Summary - Figma는 UXUI Design 툴 - UX/ UI 란? user experience / user interface == 모바일 서비스 / 웹서비스 -피그마에서 왼쪽 Pages 부분에 버전으로 관리 또는 네이밍으로 관리하기도 합니다. + 컴포넌트 단위로도 관리 -프로토타이핑 -> 개발자들에게 알기쉽게 작동하는 방식을 만드는것 + 테스트 서버로 생각하면쉬움 - 플레이버튼( 우리가 만든 프로토타입을 실제로 실행해볼수있는 버튼) - figma는 저장이라는 개념이 따로 없고 실시간으로 웹환경에서 저장이됨 - Hantool (화면이동할때쓰임) -> move툴에서 스페이스바 누르면 동일하게 사용가능하기때문에 많이안쓰임 기능/코맨트 달고 싶을때 맨오른쪾 코멘트누르고 스면됨 ( 디자이너, 개발자와 .. 공감수 0 댓글수 0 2024. 1. 31.
[PM/PO/기획] 웹사이트 기준 해상도 정하는법(statcounter/Google Analytics) 기획에 필요한 해상도관련 공부를하면서 해상도때문에 사용자가 불편하게 보이거나 사용에 불편함이 생길수 있다는것을 깨달았습니다. - statcounter 라는곳에서 나라마다 웹사이트에서 해상도를 몇으로 쓰고있는지 확인가능합니다. (신규사이트를 제작하면서 어떤 통계데이터가 필요할때 statcounter 추천) - 개발자도구에서 웹사이트에 대한 해상도설정을 좀 더 정확히 할수있어서 추천합니다 - 기존에 운영하던 사이트를 새롭게 리뉴얼하는 경우에서는 그동안 축적되온 통계데이터를 참고하는게 좋습니다. -> 이때 GA(Google Analytics)에서 브라우저 해상도의 통계 확인가능 실전 tip) 브라우저의 해상도 확인하는경로는 잠재고객-> 기술-> 브라우저 및 운영체제 최초로 어떤 브라우저를 많이사용하는지 볼수있.. 공감수 0 댓글수 0 2024. 1. 31.
[PM] 서비스 정책 정리법 tip) 파워포인트/노션/엑셀/스프레드 시트 에서 본인이 편한방식으로 정리하기 기획자가 서비스를 설계하다보면은 정책을 결정해야되는 경우가 많습니다. 파워포인트같은곳에 한눈에보기 쉽게 표로 적어놓고 비교하면 이해하기 쉽습니다. 1. 회원가입 옵션 ex) 1안 이메일인증 2안 휴대폰인증 3안 이메일+휴대폰인증 방식 장점 단점 2. 결정을 위한 판단 기준 ex) 배달서비스를 만든다고하면은 1. 주문확인 및 배달을 위해 정확한 고객 연락처 필요 2. 40.50대도 쉽게 가입할 수 있어야함 3. 신규 가입자 프로모션을 적극 활용하기위해 중복 가입자를 필터 해야함 참고> 기획자 데이먼님 공감수 0 댓글수 0 2024. 1. 28.
[PM] IA 설계법 Summary - IA는 정답이 없습니다. 어떻게 해야되다는것이 없기에 데이먼님 IA설계를 참고하였습니다. - SI, 에이전시여서 산출물이 필요한경우에는 산출물을 작성할수있습니다. Product 전체 규모 파악 짜임새 있는 Product 구축 데브옵스/에자일 방식으로 바로 피드백받고 바로 product 만드는경우에는 IA가 필요없을수있음 근데 프로젝트 사이즈가 크고 협업하는 관계자가 많아질수록 IA가 필수적으로 필요하다고 생각하면됩니다 참고> 기획자 데이먼님 공감수 0 댓글수 0 2024. 1. 28.
[PM] 제품 관리자의 문서 작성 가이드 정리 애자일 조직에서 주로 사용하는 프로덕트 매니저의 문서 살펴보기 => 주로 Word로된 문서를 많이작성 ( 이럴때 많이 사용하는게 EPIC/USERSTORY 기반으로 작성) Title(ex.호텔 예약관리 시스템)= 테마개념 대단위의 묶음들을 에픽이라함 유저스토리는 고객의 니즈를 바탕으로 고객이 무엇을 원하는지 기능을 문장으로 정리한것 스토리보드 - 해외에는 거의없고 국내 에만 거의있는 형태의 문서 (UI/정책/기능명세 등이 담기게 됩니다) 기획자가 스토리보드를 만들고 디자이너가 디자인/ 개발자가 개발 그래도 디자이너, 개발자는 주로 제작단계에 참여하게됨 - 중간중간에 기획자가 기획리뷰를 하긴하지만 그때는 주로 이제 기획안에 대해서 가능여부와 궁금한점을 물어보는 형태로 끝나는경우가 많다. - PM, PO는 .. 공감수 0 댓글수 0 2024. 1. 25.
[PM,PO] 일정관리법 잘 알려진 IT 프로젝트 방법론으로 워터폴/에자일방법이 있습니다. 워터폴 방식 : 프로세스에 따라 단계적으로 구현하는 방식 에자일 방식 : 최소단위 제품(MVP)을 빠르게 출시해서 고객 피드백을 바탕으로 제품을 개선하는 방식 프로젝트 성격에 따라서 워터폴이 적합한경우/ 애자일이 적합한경우가 있습니다 금융 플랫폼, 운영체제와 같이 한번에 완제품을 출시해야 하는 경우- 워터폴 방식 적합 고객을 사로잡아야 사업의 성패가 결정되는 프로덕트의 경우 - 애자일방식 적합 EX) Backlog 1. 경영진과 커뮤니케이션에서 나오는 Roadmap 2. 개발하다 나오는 내부이슈, 기술부채 3. 고객 요구사항 -> 전체적인 일정관리 cf) 많은 회사들이 Atlassian JIRA 로 Task 를 관리하고 Confluence.. 공감수 0 댓글수 2 2024. 1. 25.
[AWS] 공부기록 -리전이란 화면에서 내모상자를 나타내며 전 세계에 그 하나 이상의 데이터 센터가 있는 물리적인 위치를 말합니다. - 하나의 리전안에는 여러가지 가용영역 availability zone = az로 표기됨 , 즉 여러가지 az로 구성이 되어있습니다. az는 데이터 센터라고 생각하면 됩니다. -> 더 안정적인 서비스 운영가능 = 고가용성라고함(백엔드 서버에서 중요) - aws에서 서비스를 만들때 리전을 선택해야 해줘야하는데 가까이 있을수록 당연히 더빠릅니다 but 특정한 서비스들은 Region 별로 되는게 아니라 Region 선택없이 해야할것들이 있습니다. 이런 경우에는 강제로 미국 NorthEast로 선택해서 해야하는 경우도 있습니다. - Region은 그 지역을 이야기하고 이 안에 여러개의 AZ가 있을수 .. 공감수 0 댓글수 0 2024. 1. 23.
[서비스 기획/PM] 화면설계서(스토리보드) 작성방법 목차 - 히스토리 - 메뉴구조 - 화며목록 설계 - 프로세스 - 정책 - UI, 기능정의 - 마무리 표지 (감사인사) 화면설계서나 스토리보드를 만들때 첫페이지는 표지로 시작 같은 버전의 문서를 보는지 체크하는것도 중요 메뉴구조- 프로젝트 사이즈 한눈에보기 쉬움 프로젝트를 하게되면 information 아키텍처라는 포멧을 정리하게됨 IA 화면목록중 변경되거나 삭제되면 아에 행을 삭제하는게 아니라 시각화해서 표시해주는게 좋다 - 간단한 UI 몇개있는 페이지를 만들면 FlowChart를 작성할필요가 없다 조금 복잡한 프로세스가 들어가게되면 FlowChart를 먼저 작성하는것이 좋다 ( 프로세스 - 평행사변형/ 분기 - 마름모/페이지단위(ex: 인증방식 선택-네모난 직사각형으로 표시) -비밀번호 찾기같이 입력폼.. 공감수 0 댓글수 0 2024. 1. 21.
[Axios] 공부기록 Axios의 Instance를 활용하면 API 요청에서 반복되는 구조를 줄이고 함수명을 통해 어떤 요청인지 직관적으로 파악할 수 있습니다 Instance의 핵심 개념은 기본 URL, 헤더, 시간 초과 및 기타 기본 매개 변수와 같은 미리 구성된 설정으로 인스턴스를 생성할 수 있다는 점입니다. 더 이상 API 요청을 만들 때마다 반복되는 설정을 지정할 필요가 없으므로 시간을 절약하고 코드를 효율적으로 작성할 수 있습니다. 2. Interceptor Axios의 Interceptor는 요청이나 응답이 응용 프로그램에 의해 처리되기 전에 인터셉트하는 데 사용할 수 있는 함수입니다. Interceptor를 활용하면 요청 또는 응답 데이터를 수정하거나 오류 또는 인증을 처리하는 데 사용할 수 있습니다. NOTE .. 공감수 0 댓글수 0 2024. 1. 16.
[SourceTree] 협업에서 잘 사용하는 팁(+간단한 사용법) 대표적인 사용법은 pull -> commit -> push 입니다. 이걸 최대한 자주하는게 소스트리에서 충돌안날 가능성이 높고, 늦게할수록 안좋다고 합니다. 따라서, 풀 커밋 푸쉬를 자주할수록 일의 효율성을 높이고 소스트리 자체가 협업할때 소통을 자주하게 만들어주는 장치인것 같습니다. +tip) 중간중간 npm install 을 해줘야할때가 있습니다. (협업시 새로운것이 변동 됬다든지의 경우) 공감수 0 댓글수 0 2024. 1. 14.
[React] react에서 이미지파일 불러올때 경로 작성법 간단히 요약하면 1. public 파일안에 있는경우 2. src 폴더안에 있는경우 를 생각해볼수있다. 또한, 이미지는 자동완성이 안됨으로 경로를 일일히 지정해줘야한다 ex) ../../../example.jsx + require 를 사용해서 이미지를 보여주게 하는방법도 있다. 공감수 0 댓글수 0 2024. 1. 14.
[CSS] 화면에서 보이는 세로높이 최대로 하는법 vh viewheight는 말 그대로 눈에 보이는 높이를 지칭하기 때문에 해당 div 태그의 높이만 100vh 라고하면 전체 세로로 보이게 됩니다. 만약 footer 태그가 화면 중앙으로 말려 올라오는 문제를 해결하고 싶으면, body태그의 min-height를 100vh로 설정하는 것이 하나의 문제 해결 방법이 될 수 있다고도 합니다. 참고> https://query.tistory.com/entry/CSS-%ED%99%94%EB%A9%B4-%EA%B0%80%EB%93%9D-%EB%86%92%EC%9D%B4-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95 [CSS] 화면 가득 높이 설정 방법 CSS 높이 속성의 원리 (height property) CSS를 배워서 작업을 하다 보면 누구나 .. 공감수 0 댓글수 0 2024. 1. 14.
EsLint 관련 에러가 나올때 해결법 case-1 1. VSCode 확장프로그램(Extensions)에서 'ESLint'를 검색합니다 2. 명령어 팔레트(shift + alt + P)를 열어서 setting.json에 들어갑니다. 3. setting.json에 아래코드를 추가하고 저장합니다. "editor.codeActionsOnSave": { "source.fixAll": true, }, "editor.formatOnSave":true, 참고> https://ek12mv2.tistory.com/223 VSCode ESLint 자동으로 적용하기 [참고자료] [VSCode] ESLINT 자동 적용하기 How to apply eslint automatically blog.whitekiwi.link eslint: error Parsing error: The .. 공감수 0 댓글수 0 2024. 1. 14.
[SourceTree] 소스트리 연결 끊긴이유 case-1 위와같이 소스트리가 갑자기 연결이 끈긴것처럼 보이고 실제로 끈겼는데 이건 git remote -v 를 해서 끊긴것같다.. 조심하자 공감수 0 댓글수 0 2024. 1. 11.
[Github] 협업시 공용 프로젝트에 코드가 잘못 올라갈경우 case-1 에러상황 소스트리를 사용하는도중 내 프로젝트를 github에 등록할려고 했으나 전체 공용 프로젝트에 내 코드가 올라가는 오류가 발생.. 프로젝트 등록부터 시작부터 already exist 라는 문구가 보여서 이상했고, 또한, 아래와같은 에러가 나오기도했다. ➜ test git:(master) git push -u origin master To ex) https://github.com/~~~ ! [rejected] master -> master (fetch first) error: failed to push some refs to ' ex) https://github.com/~~~ hint: Updates were rejected because the remote contains work that you .. 공감수 0 댓글수 2 2024. 1. 10.
[Github] git clone 해서 vscode에서 폴더열고 바로 실행하는법 1. github에서 code url 복사 -> 2. vscode에서 F1 누르고 git clone 검색후 복사한 주소 붙여넣기 or 레포지토리 선택후 실행 2. vscode 에서 저장후 실행 공감수 0 댓글수 0 2024. 1. 10.
[팀프로젝트시작] day1 - 현업자분의 설명 각자 목표설정 공감수 0 댓글수 0 2024. 1. 10.
[Vscode] 작업중 AMD 성능 로깅창이 떠서 코드치기 불편할때 에러 해결법! 바탕화면 검색창에 amd 검색후 amd 파일실행-> 설정-> 단축키 -> 성능 로깅 토글 None으로 변경하면 vscode 이용시 불편함없이 작업가능합니다. 공감수 0 댓글수 0 2024. 1. 10.
[VsCode] 파일에는 없는파일인데 실행안되는 오류 해결법 case-1 vscode 서버를 껐다가 다시키면 실행 될 수 있습니다! 공감수 0 댓글수 0 2024. 1. 10.
토큰 보통 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있다. 지만 토큰은 세션과는 달리 서버가 아닌 클라이언트에 저장되기 때문에 Access Token은 접근에 관여하는 토큰이고, Refresh Token은 재발급에 관여하는 토큰 이므로 행하는 역할이 다르다고 보면 된다. 공감수 0 댓글수 0 2024. 1. 9.
[코딩테스트] 쇠막대기 나의 풀이 function solution(s) { let answer = 0; let stack = []; for (let x of s) { stack.push(x) if () let rt = stcak.pop(); let lt = stack.pop(); } //3+2+5+7 = 17, // return answer; } let a = "()(((()())(())()))(())"; console.log(solution(a)); 모범 답안 function solution(s){ let answer=0; let stack=[]; for(let i=0; i 공감수 0 댓글수 0 2024. 1. 8.
[코딩테스트] 후위식 연산(postfix) 나의 풀이 function solution(s) { let's answer ; stack = []; // stack.push( '+' ) // answer = if (str.includes( '+' || '*' || "/" || "-" )) { answer.push() } return answer ; } for ( let i=0; i 공감수 0 댓글수 0 2024. 1. 7.
[코딩테스트] 크레인 인형뽑기(카카오 기출) 나의 풀이 function solution(board, moves) { let answer = 0; let stack = []; let garo = a.length; // if (board) // return answer; for (let i = 0; i < garo; i++) { for (let j = 0; j < garo; j++) { // if(board[i]) stack.push() if (board[i][j] === b[i]) answer++; else{ [i][j] } } } } let a = [[0, 0, 0, 0, 0], [0, 0, 1, 0, 3], [0, 2, 5, 0, 1], [4, 2, 4, 4, 2], [3, 5, 1, 3, 1]]; let b = [1, 5, 3, 5, 1, 2,.. 공감수 0 댓글수 2 2024. 1. 7.

문의안내

티스토리
로그인
고객센터

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