티스토리

디자이너 노트

검색하기

블로그 홈

디자이너 노트

donoteatpasta.tistory.com/m

꾸준히, 매일, 한 걸음씩

구독자: 1

방명록 방문하기

주요 글 목록

반응형 디자인 작업 PC 1920 저해상도 1320 브레이크 포인트 설정시 주의점 1. 내가 의도한 디자인에서 많이 벗어나지 않게 하는 것 2. 엘리먼트 간에 서로 충돌이 일어나지 않게 하는 것 홈페이지 마진: 36 테블릿 마진: 24 모바일: 16 공감수 0 댓글수 0 2024. 12. 9.
디자인 시스템 디자인 시스템- 재사용 가능한 UI 구성 요소의 모음- 파운데이션: 색상, 아이콘의 모양 등- 컴포넌트: 파운데이션의 조합 사용 이유 - 일관성 보장(브랜딩으로 이어짐) - 디자인과 개발이 용이해짐 아토믹 디자인 시스템- UI를 더 작은 단위로 분해하여 재사용성과 일관성을 높이고, 효율적인 협업을 가능하게 하는 것- 계층적 구조 차용: 원자 - 분자 - 조직체 - 템플릿 - 페이지UI 컴포넌트 - 버튼, 폼, 카드 등의 재사용이 가능한 디자인 요소 스타일 가이드 - 타이포 그래피, 컬러 팔레트, 아이콘, 여백 등의 시각적 요소 규칙 정의 디자인 패턴 - 로그인 양식, 검색창 등의 기능에 대한 패턴 정의디자인 원칙 - 사용자 경험 제공을 위한 철학이나 기본 규칙 피그마 토큰을 이용하는 이유?- 다크 모드.. 공감수 3 댓글수 0 2024. 12. 6.
광고 디자이너 | 카달로그 작업 | 입사 1주차 회고 1028 : 카달로그 작업 오늘은 첫 출근이었다. 이제는 업무 일지를 꾸준히 써서 내가 어떤 사람인지 쌓아온 기록으로 설명하고 싶었다. 그래서 오랜만에 티스토리를 방문했다. 오늘은 첫날이라 크게 어려운 일은 없었는데, 일러스트레이터로 카달로그 만드는 작업을 했다. 기존 작업들은 상세페이지로 psd로 완성이 되어있었기에, 일러스트레이터로 옮기는 작업을 했으나 마음처럼 되지 않았다. psd에서 복사한 것들이 일러스트레이터에서 붙여넣기 되지 않았기 때문이다.(도대체 왜?) 그래서 psd를 일러스트레이터로 변환하는 방법을 생각해냈고, 이건 내일 적용해보기로. 또 새로 알게된 것인데 카달로그는 한 페이지를 반으로 접어 앞뒤로 4페이지를 제공하기 때문에, 4의 배수 페이지만 가능하다. 아트보드의 순서가 왼쪽 -> .. 공감수 0 댓글수 1 2024. 11. 3.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 4주차(0723) 2주차 - 7/22 ~ 7/267/22 애니마피그마에서 작업파일을 만들어 개발자님께 전달 드리면, 애니마라는 플러그인을 통해 html로 변환시킨다이 과정에서 모든 코드가 div로 출력되어, 디자인 동료님이 각각의 태그명을 댓글로 남겨주었다불필요한 과정을 없애기 위해 챗지피티에게 물어봤고, 로컬 스타일즈로 h1, h2같은 텍스트를 지정하라는 답변을 받았다.결론적으로 div 대신 h1 태그를 적용시키는데 성공했고, 개발자님께서도 만족해주셔 기분이 좋았다. 콘텐츠 작성- 아무래도 업무 특성상 여행 콘텐츠 작성하는 일이 많다. 호텔 소개글을 주로 쓰고있다. 그 안에 광고를 자연스럽게 녹여내는 일이다. - 퍼포먼스 마케팅과도 유사하다. - 다른 블로그는 어떤 소구점을 발굴하는지 찾아볼 필요가 있다 소프트웨어- 적.. 공감수 1 댓글수 0 2024. 7. 28.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 4주차(0717) 7/15 - 7/19 7/17 퍼블리싱글쓰기 블로그 퍼블리싱을 하고 있다 이건 집에 와서 개인적으로 진행한 건데, chatgpt한테 물어보니 다 알려주었다.python을 설치했고Jinja2Jinja2는 파이썬용 템플릿 엔진으로, HTML, XML 등의 마크업 언어를 동적으로 생성할 수 있게 한다. Jinja2는 템플릿 내에서 변수와 제어 구조를 사용하여 데이터를 동적으로 삽입하거나 조작할 수 있다. {% if user %} Welcome, {{ user.username }}!{% else %} Welcome, Guest!{% endif %}{% for item in items %} {{ item }}{% endfor %} FlaskFlask는 경량의 파이썬 웹 프레임워크로, 빠르고 .. 공감수 0 댓글수 0 2024. 7. 21.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 3주차(0712) 3주차 - 7/12 7/12 프로젝트 결과 발표프로젝트 결과 발표날이었다. 첫번째 발표라 스무스하게 발표했고, 마음 편안하게 다른 팀원분들이 했던 작업을 확인할 수 있었다.UX UI에 대해 배우고 싶었는데, 앉아 있기만 해도 여기저기서 들리는 전문 용어 덕분에 많이 배울 수 있었다. 실무 가면 더 많이 배울 수 있겠다는 마음이 들었다. 공감수 0 댓글수 0 2024. 7. 12.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 3주차(0711) 3주차 - 7/11 7/11 디자인 시스템variable만들 때 그룹화하여 색을 설정하면 관리하기 편하다 토큰토큰(별명) : Hex 컬러값을 이해하기 쉬우려고 이름을 정해주는 것 회고내일 발표라 오늘은 pt 마지막으로 정리하고, 대본 썼다.팀별로 프로젝트를 진행하며, 역시 집밖에 나가면 뭐라도 배워온다는 것을 느꼈다. 어깨너머 배우는 것만큼 좋은게 있냐구. 공감수 0 댓글수 0 2024. 7. 11.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 3주차(0710) 3주차 - 7/10 7/10 타이포그래피 타이포 그래피타이포그래피는 활자를 의미하는 'Type'과 기술을 의미하는 'Graphy'의 합성어 활자의 서체나 글자 배치 다위를 구성하고 표현하는 것을 말한다Type: 글자 하나하나의 모양(셰리프, 산셰리프 등)Font: 완성된 한 벌의 글자(가, 나, 다, -파..)Typephograh: 글자의 글자가 위치한 공간, 레이아웃 된 모양 등 완성된 한벌의 글자인 font들의 조합으로 이루어지는 그래픽 과정 기본 용어Baseline - 수평 기준선Leading - 문자 행의 수직 간격Serif - 돌기(삐침) - 폰트들이 디바이스별로 보이는 것이 다르다Kerning - 낱문자 사이의 간격 Universe헬베티가와 더불어 제목 또는 본문에 많이 사용하는 폰트 .. 공감수 3 댓글수 2 2024. 7. 10.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 3주차(0709) 3주차 - 7/9 7/9 피그마 디스코드 UI 개선스레드 페이지둘러보기 페이지 공감수 0 댓글수 0 2024. 7. 9.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 3주차(0708) 3주차 - 7/8 7/8 UX / UI 핵심 이론 고객 서비스 이용 프로세스BX - 접근(유입 동기 부여)UI - 기능(페이지, 버튼, 메뉴 등)UX - 핵심 가치 이용(서비스, 배송, 제품 등)Goal(구매, 목표 등) 휴리스틱고민하지 않고 버튼을 누르게 하는 것확률로 휴리스틱이 사용미적 유용성(The Aesthetic Usability Effect)디자인 및 구도에 대한 매력에 대한 강한 임팩트로 더 값진 서비스 또는 제품을 받을 것이라는 착가을 불러일을키는 심리적 효과분위기 좋은 커피숍쓰임이 분명한 디자인 이성과 감성 웹사이트 이성은 정량적인 단서를 많이 씀감성은 사진을 많이 씀 인지부하(Cognitive Load)과도한 상품을 나열해서 선택하라는 등의 여러가지 고민을 한 번에 제공하는 실수를 .. 공감수 0 댓글수 0 2024. 7. 8.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 2주차(0705) 2주차 - 7/57/5 Material Design 안드로이드 가이드앱바: 브랜딩, 탐색, 컴색 및 작업에 사용되는 도구들이 위치탭바: 안드로이드의 탭바는 화면 상단에 위치바텀네비케이션바: 화면 하단에 고정식으로 위치네비게이션 드로어: 햄버거 메뉴를 이용한 네비게이션 드로어시스템 글꼴한국어는 영문보다 1px 더 크게 사용한다아이콘 터치 사이즈아이콘은 24*24dp, 둘러싸는 패딩은 48 * 48dp 디자인시 주의 사항긍정적인 액션버튼은 우측 배치시각적 단서 제공 - 마이리얼트립 카테고리버튼의 위계 - 한 화면 내에 버튼이 2개 이상이라면 시각적 위계를 준다. 어떤 버튼을 먼저 누르게 할 것인가?사용자에게 한 화면에서 한 가지 행동만 유도사용자가 콘텐츠에 집중하도록 유도콘텐츠가 많을 경우 시각적인 계층구조.. 공감수 0 댓글수 0 2024. 7. 5.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 2주차(0704) 2주차 - 7/47/4 UX Strategy 가치Think different 포지셔닝 재설정포지셔닝을 왜 할까? 데이터를 시각적으로 표현하기 위해 User Flow사용자가 서비스를 이용하는 흐름외부탐색: 서비스 접근 전에 외부에서 이루어지는 탐색과 이를 통해 서비스에 접근하기 전까지의 과정접근: 서비스를 들어와서 탐색을 시작하기 전까지의 과정탐색: 콘텐츠, 메뉴, 검색, 추천 탐색조회: 정보 조회, 큐레이션 정보, 통계 정보, 사용자 리뷰주활동: 구매나 예약, 거래와 같이 사용자가 서비스의 핵심 기능 실행이탈: 앱 종료 DeliverIA: 디자인을 위한 정보 구조도 설계User Flow: 특정 작업을 위해 움직이는 경로 설계와이어 프레임: 화면 단위의 레이아웃 설계UI/GUI 디자인 상세 설계 Info.. 공감수 0 댓글수 0 2024. 7. 4.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 2주차(0702) 2주차 - 7/27/2 특강: 웹사이트의 구성 요소 버튼웹사이트는 괜찮은데, 모바일 사이즈의 경우 최소 44*44이상이어야 한다기본, 마우스 호버, 포커스(tab으로 이동했을 때), 비활성화(disable)풋터모든 페이지의 맨 아래에 위치한 영역사용자가 페이지의 품질을 측정하는 중요한 기준점 피츠의 법칙사용자는 오른손을 주로 사용하기 때문에 화면 우측에 중요한 정보를 배치하는 것이 좋다손가락이 닿기 쉬운 중간 부분에 중요한 정보를 배치(우측 중간) 드로어 메뉴햄버거 메뉴를 누르면 나온다사용자가 필요할 때만 메뉴를 열어서 사용장점: 좁은 모바일 화면에서 효율적으로 사용 가능 모달부정(왼쪽)/긍정(오른쪽) Bottom Sheet텍스트, 이미지, 액션 또는 컨텐츠를 포함한 컨테이너 영역으로 화면 하단에 고정되.. 공감수 0 댓글수 0 2024. 7. 2.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 2주차(0701) 2주차 - 7/17/1 특강: 플랫폼 구축을 위한 사고와 습관 기획과 UX, UI의 개편시장에서 UI UX 기획자라 적혀있는 JD가 많음기획자와 디자이너의 차이? 디자이너는 화면의 프로토타입, 유저의 경험을 만든다면, 기획자는 정책적인 것부터 - 고객과의 커뮤니케이션, 완료보고 등을 하게 됨내가 만든 산출물을 어떻게 의사전달을 하고, 공감을 이룰 것인가?의외로 피그마, 노션 등을 사용하지 않는 경우가 많다. 클라우드 기반으로 만들어 있어서 보안상의 문제가 발생할 수 있기 때문이제는 음성보이스가 중요한 시대가 왔음 플랫폼이란?인간의 관계에서 생성되는 교류의 정류장 역할기업과 개인이 공동의 이익을 형성하는 곳'화면을 이용한다'를 넘어, '잘 이용하게' 만들 수 있어야 함플랫폼의 진화 - 관계/ 수단(정보의 .. 공감수 0 댓글수 0 2024. 7. 1.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 1주차(0628) SWOT 분석, 포지셔닝 맵 1주차 - 6/286/28 SWOT 분석, 포지셔닝 맵 웹의 개념월드 와이드 웹WWW, W3, 웹 웹의 특징그림, 사진, 영상, 텍스트 등의 멀티 미디어를 하이텍스트 방식으로 연결HTTP의 특저 규칙에 따라 인터넷을 통해 문서 및 기타 웹 리소스에 참조 적응형 웹특정 뷰포트 크기에 맞게끔 웹 페이지를 만들어서 별도로 제공데스크탑과 모바일을 따로 만들어서 접속하는 디바이스에 맞게 랜딩되어지도록 설계된 웹네이버데스크탑 랩탑으로 진입시 naver.com 웹페이지를 보여주고, 태블릿 모바일로 진입 시 m.naver.com 웹 페이지를 보여줌. 서로 다른 URL -> 디바이스에 따라 화면을 대응네이버는 1%일지라도 접속하는 인원이 많다보니, 제일 작은 모니터를 기준으로 만든다 반응형 웹하나의 웹 페이지가 뷰포트의.. 공감수 0 댓글수 0 2024. 6. 28.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 1주차(0627) 1주차 - 6/276/27 UX 여정 조회최종 목적지까지 가는 역할캐치테이블은 별점과 리뷰 조회, 쿠켓은 사용자 후기 조회 주활동탐색, 조회를 거처 구매, 예약 등 서비스의 핵심 기능을 실행하는 단계하나 이상의 화면으로 구성복잡하지 않게 구성주의할 점사용자가 예상하는 순서를 그대로 따른다.다른 정보는 시각적 그룹핑으로 직관적으로 디자인.필요 이상의 많은 정보를 요구 X흐름에서 벗어날 경우 상황을 빠르게 이해하고 적절하게 대처할 방법 알려주기 하나의 주활동을 향한 여러 단계가 있을 경우, 시각적 그룹핑을 잘 해야한다. 프로젝트 내에서 주활동조회방 선택채팅채팅이 주기능이라 목적 도달까지 군더더기 없는 기능. 부가 활동사용자의 편의를 위한 기능을 수행하는 활동 프로젝트 내에서 부가 활동각각의 서버 위치를 우.. 공감수 0 댓글수 0 2024. 6. 27.
[유데미x스나이퍼팩토리] UI/UX 디자이너 인턴형 프로그램 5기 - 1주차 1주차 (6/24~6/28)6/24 오리엔테이션 추후 일정6/24 - 7/12 : 직무 교육7/15 - 9/6 : 매주 월요일 (특강) 학습 일지 작성법학습 과정을 돌아보고, 개선을 파악할 수 있기에 권장직무 교육 기간: 매일 제출인턴 기간: 총 8회 제출(기업에서 공개 가능한 범위 내에서)보여주기 식이 아니라 내가 나중에 볼 수 있는 용도로 작성 필요 제출 서류참여자격 확인서참여신청서개인정보 활용 동의서신분증 사본 (.png형식만 인정) → PDF/HWP 형식 X통장 사본 6/25 UX UI 이론 UX UI 디자인이란?문제를 정의하고 해결방법을 도출하는 것UX - 사용자의 관점에서 좋은 경험을 제시하는 장치사용자의 진짜 문제점과 니즈를 아는 것 사용자 경험 단계Anger: 감정 최악의 단계우리은행.. 공감수 0 댓글수 0 2024. 6. 26.
classnames 라이브러리를 사용하여 동적 class 추가하기 공부 계기 📚https://byolsfolio.netlify.app/인터랙티프 포트폴리오를 만드는 중, hover를 하면 데이터에 있는 원하는 배경화면 색상이 나오지 않는 상황이 발생했다. 문제 원인 📃Tailwind CSS 설정은 맞은 상태인데, Tailwind CSS의 ‘hover’상태 클래스는 직접 문자열 템플릿으로 동적으로 추가할 때 원활히 추가되지 않는 경우가 있다. Tailwind CSS가 빌드 과정에서 동적으로 생성되는 클래스를 미리 인식하지 못하기 때문이다. Tailwind CSS는 빌드 시, 사용되는 클래스를 분석하여 CSS를 생성한다. 만약 클래스 이름이 문자열 템플릿이나 동적 변수로 지정된 경우, Tailwind는 이를 감지하지 못하고 CSS를 생성하지 않을 수 있다. 해결 방법.. 공감수 0 댓글수 1 2024. 6. 14.
자바스크립트+ 자바스크립트의 엔진이 함수 호출의 순서를 유지하고, 실행하기 위해 사용하는 Call Stack에 대해 알아보자 Call Stack이란 자바스크립트가 함수 실행을 핸들하는 방법 중 하나이다. 자바스크립트가 실행해야 하는 함수를 보면, 스택(Stack) 위에 올린다. 함수를 스택 위에 올리고, 함수 실행이 모두 완료되면, 제거한다.call-stack 공감수 0 댓글수 0 2024. 6. 11.
자바스크립트의 기초 (데이터 타입과 함수) 개념 📃기본으로 돌아가자! 학습 이유 🪄최근에 자바스크립트의 기초를 많이 잊었다는 것을 알게 되었다. 또한 프로젝트 경험 이후, 자바스크립트를 이제 좀 알 것 같은데, 이런 상태에서 공부하면 더 효과적일 것 같아 다시 시작하게 되었다. 자바스크립트의 역사1995년 12월 10일만에 만들었음.넷스케이프 브라우저가 인터랙티브하길 바래서 탄생.자바스크립트가 가장 훌륭한 프로그래밍 언어는 아니다.모든 브라우저들은 딱 세가지의 언어를 이해한다. HTML, CSS, Javascript → 그래서 따로 설치할 필요가 없다.(만약 파이썬을 사용하고 싶으면, 파이썬을 설치해야 한다.) Basic Data Types자바스크립트 뿐 만 아니라, 프로그래밍 언어의 기본적인 데이터 타입.자바스크립트에는 type이라는 .. 공감수 1 댓글수 0 2024. 6. 11.
부드러운 전체 스크롤 설치(Lenis) 공부 계기 📚https://lenis.darkroom.engineering/ Lenis를 이용하여 포트폴리오에 부드러운 전체 스크롤을 설치해보자. - 부드럽고, 쾌적한 경험을 제공- 시각적인 인상을 향상시킨다. 활용 예시 🪄설치 방법은 굉장히 심플하다.1. 라이브러리 설치npm i lenis 2. 관련 코드를 메인에 넣기const lenis = new Lenis()function raf(time) { lenis.raf(time) requestAnimationFrame(raf)}requestAnimationFrame(raf) 요즘 영상으로 개발 공부하고 있는데, 막연히 읽는 것보다 확실히 효과가 좋다. 나와 핏이 맞는 선생님을 찾는 것이 중요하다. 영상 + 읽기 + 프로젝트 경험을 잘 버.. 공감수 0 댓글수 0 2024. 6. 4.
Next.js를 Vercel에 배포하기 공부 계기 📚- 지금까지 Netlify를 통해서만 프로젝트를 배포했는데, Vercel을 통해 배포할 수 있다고 하여 공부하게 되었다.- 니꼬쌤 수업 중 정리. 개념 📃 .module.css배포전, CSS를 만들어 보자.여기에서 중요한 건 .module.css를 붙이는 것이다. 그리고 이 파일을 import 해주고, 적용하고자하는 곳에 class이름을 적용한다.import styles from "../styles/navigation.module.css" 이렇게 하면 class간의 이름 겹침 충돌을 예방할 수 있다. css파일 내에서는 클래스나 id명이 반드시 들어가야만 적용이 된다.다른 configuration은 필요 없다. 단지 파일 명을 명확히 작성하고, 임포트 후 클래스명을 지정해주면.. 공감수 0 댓글수 0 2024. 5. 31.
Next.js data fetching 하는 방법 공부 계기 📚본격적인 프로젝트에 들어가기 앞서, next.js로 data feting하는 방법에 대해 공부해보자. 개념 📃data를 Fetching하는 동안 화면에 아무것도 나오지 않기 때문에 Loading 페이지를 보여준다. 활용 예시 🪄기존에 했던 data fetching 방식"use client";import { useEffect, useState } from "react";export default function Page() { const [isLoading, setIsLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const response = a.. 공감수 0 댓글수 0 2024. 5. 25.
Next.js 입문하기 사실 지금까지 잘 이용해왔는데 Next.js를 공부하기로 했다. 개념 📃Next.js는 프레임워크다. 프레임워크는 우리의 코드를 호출한다. 우리가 Next JS를 호출하는 것이 아니다. 우리가 올바른 폴더에 코드를 작성하면, 올바른 이름을 가진 폴더 안에 정확한 이름의 파일이 들어가 있으면, NextJs 우리의 코드를 사용해서 웹사이트를 만들어준다. Next js 사용 시 변화1. react-router를 사용하지 않는다. 내가 직접 url을 적지 않아도 된다. Client Side Rendering의 문제점1. SEO에 적합하지 못하다.html에 웹사이트에 유용한 데이터가 들어있어야 한다.2. 사용자가 첫 화면을 보기까지 로딩이 오래 걸린다 Server Side Rendering의 재등장1. 자.. 공감수 0 댓글수 0 2024. 5. 15.
리액트에서 Google Maps API(구글맵 API) 사용하기(+ 커스텀 마커) 공부 계기 📚개인 프로젝트 원더렌즈 개발 중, Home 화면에 구글맵 API를 추가하고자 했다. 1. Google Maps API(구글맵 API) 추가2. 갔던 여행지에 색상 추가 중요 포인트 ✧1. API 키값 발급받아 index.html에 있는 script에 API와 key값을 입력했다. key값은 깃허브에 올렸을 때 노출되지 않기 위해 .env파일에 넣었기에 변수명을 사용했다. 2. 공식 문서에 있는 코드 React로 수정하기초반부엔 당황했지만, 이미 다른 분들이 작성한 코드와 공식문서를 참고하면 맞게 수정할 수 있다.import { useCallback, useEffect, useRef } from "react";const locations = [ { title: "vancouver", po.. 공감수 1 댓글수 0 2024. 5. 10.
타입스크립트란? Hello World 출력 방법 개념 📃타입스크립트란?타입스크립트란 Typed JavaScript로, 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다. 자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 하지만 타입 스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 Babel을 통해 자바스크립트 코드로 변환된다. 장점코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고, 미리 타입을 결정하기 때문에 실행 속도가 빠르다는 장점이 있다. 단점코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있다. 활용 예시 🪄npm install -g typescript 타입스크립트를 설치한다. app.ts 파일에 다음.. 공감수 0 댓글수 0 2024. 5. 7.
DOM 개념 📃Vanilla JS를 능숙하게 다루기 위해서는 DOM을 조작하는 방법을 알아야 한다. 활용 예시 🪄 00:00:00 Start Stop Reset getElementById()const myStart = document.getElementById('start'); 이 메서드는 전달된 이름 id가 포함된 엘리먼트를 반환. id는 고유해야하기 때문에 원하는 요소를 가져오는 데 매우 유용. getElementByClassName()const myContainer = document.getElementByClassName('container'); 이 메서드는 전달된 특정 이름 클래스를 포.. 공감수 0 댓글수 0 2024. 5. 7.
Styled-component의 CSS Reset하는 방법 공부 계기 📚'카공여지도' 프로젝트에서 Styled-component를 사용했었다. 당시 기분 좋게 프로젝트 배포 후, 아이폰 사파리로 확인하는데 우리가 의도하지 않은 폰트 색상이 화면에 떴다. 알고보니 프로젝트 세팅 초반에 CSS reset을 하지 않아 생긴 문제였다. 개념 📃크로스 브라우징이란?브라우저마다 HTML 시멘틱 태그에 대한 기본값이 다르다. 크로스 브라우징은 이토록 다양한 웹 브라우저에서 웹 페이지가 일관되게 표시되고 기능하도록 만드는 기술이다. 이를 통해 크롬, 파이어폭스, 사파리 등 어떤 브라우저에서도 개발자가 의도한 대로 이용하게 만들 수 있다. CSS Reset을 통해 브라우저간 스타일의 일관성을 확보할 수 있다. Styled-component은 기존에 있는 패키지를 통해 CS.. 공감수 0 댓글수 0 2024. 5. 4.
[0418] 폴더 수정, useEffect 남용 않기 오늘 한 것 폴더명 수정 - main, map 등등 하나씩 만들기 styled 컴포넌트 function 바깥으로 빼기 public 절대경로로 수정 (src=”/vite.svg”) Navbar: NavLink 그냥 Link로 수정 개선할 부분 .env 파일에 있는 변수명 활용 (하드 코딩 제거, VITE_CLIENT_ID) 로그인 했는데 메인페이지로 돌아가는 것 개선 개발 데이터 등록: DB Init 추가적으로 등록 나눔스퀘어라운드 폰트 에러 수정 콘텐츠 완성도 높이기 커피(coffee) 1 + 디저트(dessert)1 카페 소개 의미있는 데이터화 코드 리뷰 오늘 코드 리뷰 시간에 선생님으로부터 'useEffect 남용'이라는 말을 들었다. 사실 나는 useEffect를 단순히 '화면에 렌더링 해주기 위해.. 공감수 0 댓글수 0 2024. 4. 18.
240416 .env, 북마크 .env 파일 gitignore에 추가하기 멘토님께서 코드를 봐주시다 .env파일은 gitignore에 넣어야 한다고 말씀해주셨다. 사실 gitignore가 어떤 것인지 제대로 알 지 못하고 써왔다. .gitignore 파일은 Git 저장소에서 추적하지 않을 파일이나 디렉토리를 지정하는데 사용되는 파일. 이 파일에 명시된 파일, 디렉토리는 Git에 의해 무시되며, 변경사항이 추적되거나 커밋되지 않는다. 즉, staging Area에 올라가지 않아 tracking 되지 않는다. 우리 프로젝트에서는 쇼핑몰API와 지도API가 .env에 들어가 있다. 참고로 우리 팀은 이 사실을 뒤늦게 알아서 .gitignore에 뒤늦게 넣었다. 이미 커밋이 되었다면 다음과 같은 방법을 취한다. git rm filename .. 공감수 0 댓글수 0 2024. 4. 16.

문의안내

티스토리
로그인
고객센터

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