strawberry fields

🧚🏻‍♀️ vanilla JS로 momentum 만들기를 완성했다. 새로 추가한 기능은 아래 세가지이다. 날씨 API 가져와서 추가하기 할 일 목록 추가하기 할 일 목록 지우기 🧚🏻‍♀️ 날씨 API 추가하기 open API로 날씨 정보를 가져와서 추가해 주었다. API는 공식문서만 잘 따라하면 가지고 올 수 있는데, 공식문서 따라하는게 어렵다(나만 그런걸까..?) VS code의 live server로 작동 시켰는데, 내 위치 정보를 가지고 오지 못해서 구글링을 해보았다. 서버가 실행되지 않을 경우에 VScode Live Server settings에서 Use Local Ip as host를 체크로 변경하면 된다! 설정을 변경하니 날씨도 화면에 제대로 구현되었다. 😝 🧚🏻‍♀️ 할 일 목록 추가하기 이..

🎒 vanilla JS로 momentum 만들기! 이번주 과제였다. 랜덤으로 이미지를 변경 시켜주고, 실시간 시계를 띄워준다.(초단위로 시간이 변경되도록 구현할 것) 그리고 내 이름을 입력하면 'Hello, ㅇㅇㅇ!' 이렇게 입력된 이름 값을 가져와서 인사를 시키는 것(?) 전체적인 디자인은 시중에 나와있는(?) momentum과 흡사하게 구사했다. 추후 하단에 todo list를 추가해야 하고, 날씨 api도 불러와야 한다. 🎒 배경화면 랜덤 변경/ 시간 띄우는 것은 어렵지 않게 했는데, 이름을 입력 받고, 그 값을 인사와 함께 화면에 띄워줄 때 오류가 생겼다. 제대로 뜨긴 하는데 약 1~2초 후에 초기화가 되고 사라진다는 것.. 왜때문일까? 배경을 랜덤으로 변경할 때 setInterval 함수를 사용..

🍐 미디어쿼리란? CSS를 공부하다보면 미디어쿼리에 대해 자연스레 알게된다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 보통 스크린 사이즈를 조건으로 많이 사용하며, 특정 스타일이 인쇄된 문서 또는 화면 판독기에서만 사용되도록 할 수 도 있다. 🍐 미디어쿼리 기본문법 미디어 쿼리 기본문법은 아래와 같다. css 코드와 함께 작성하며, 사이즈조건 부분에는 'max-width: 1024px'과 같은 조건을 넣어주면 된다. 또한 all / screen / print / speech 네 가지 미디어 유형을 지정해 줄 수 있다. @media screen and (사이즈조건) { body { background-color: green; }..

💌 HTML, CSS, JS를 사용해서 프로필 만드는 과제를 부여 받았다. 자기 PR의 시대인데(?) 나는 나에 대해 설명하는게 어렵고, 어필하는건 더 어렵다.. 프로필에 어떤 내용을 써야하지? 고민을 많이 했는데 그럼에도 불구하고 매우 축약 되어 있는 내 프로필..😳 최대한 깔끔한 레이아웃으로 작업하려고 했고, 블로그/ 깃허브도 HTML 태그를 이용해서 연동 시켰다. CSS 효과도 나름 넣으려고 사진을 확대하는 transform/ transition 도 사용하였다. JS는 딱히 어디에 사용할 곳이 없어서 패스함..  추후에는 프로젝트도 추가하고 더 다채로운 나의 프로필이 되기를 바라며.. 본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

🌷 HTML 강의를 듣고 safe homes 랜딩페이지 클론코딩 과제를 부여 받았다. 클론코딩이라고는 하지만, HTML로 뼈대 잡는 것만 우선 하라고 하셨는데 CSS 작업을 안하니 정렬도 안되고 내가 잡는 뼈대가 이게 맞는건지(?) 더 헷갈려서 CSS도 함께 작업했다. 시맨틱 태그의 중요성을 강조하셔서, 최대한 의미있는 태그들을 써보려고 했지만 header/ footer외에는 거의 div와 span을 남발하여 쓴 것같다. CSS도 display, poisition, grid등의 개념이 헷갈려서 자꾸만 구글링 하는 나를 발견.. 조금 더 딥하게 공부해야겠다고 생각했다. 🌷 코드를 올려 놓은 깃허브 주소도 첨부합니다. https://github.com/udemy-team13/training/tree/main..

🍐 시맨틱 태그란? HTML 을 쪼금 공부해보셨다면 '시맨틱 태그'에 대해 모두 들어보셨겠지오 처음 공부를 할 땐 div 태그도 무엇인지 잘 몰라서.. '시맨틱 태그' 에 대해 이해할 여력도 없었는데 이제 여력이 조금 생겼다(?) 오늘 강사님이 HTML 전반적인 내용을 설명해 주셨고, 시맨틱 태그의 중요성에 대한 과제를 내주셨다. 시맨틱 태그란 무엇인가? 시맨틱(semantic)은 '의미의, 의미론적인' 이라는 뜻을 가지고 있기 때문에 말 그대로 시맨틱 태그는 '의미가 있는 태그'라고 할 수 있다. 우리가 주로 쓰는 div, span은 이름만 보고 어떤 내용인지 유추가 어려운 반면, header, nav, main, section, aside, footer등의 태그는이름만으로도 내용을 정확하게 명시해준다..

🤹🏻‍♀️ 아이디어 스케치란 무엇인가? 공상 속에 있는 80%를 20%의 현실로 만드는 것이다. 혼돈(경험) -> 스토리맵 -> 아이디어 스케치의 과정을 거쳐서 '상품화'가 된다고 할 수 있다. 말 그대로 내 머릿속에 나열되어 있는 아이디어들을 스케치 하는 것 🤹🏻‍♀️ 스케치의 효율성은? 시간을 절약할 수 있다. (공상을 현실적 밑그림으로 만든다) 큰 구조를 파악할 수 있다. (전체스토리를 알 수 있음) 스토리텔링 -> 진행과정의 스토리를 파악할 수 있다. 🤹🏻‍♀️ 효과적인 스케치 한 장에 한 개의 주제만을 담아야 한다. 그리는데 3분 이상의 시간을 소요하지 말자. 스토리를 그려라. 알고 있는 개념은 생략하라. 🤹🏻‍♀️ 실무에서의 아이디어 스케치 흐름 전개 상품에 들어갈 요소 정의 -> 카피 확장 ..

🍎 이전 시간 강의들을 토대로 액티비티 다이어그램을 만들어 보았다. 처음 들어보는 주제 + 해보는 과제라 생각보다 어렵고, 나의 생각의 가지들이(?) 매우 편협함을 발견 .. 매우 단순하지만 첫 시간에 내가 기획했던 '반려견 기록' 플랫폼을 토대로 다이어그램을 만들어 보았다. 플랫폼 자체가 '기록'에 목적을 두었기 때문에 어떤 광고 효과나, 플랫폼을 통해서 얻는 무언가가 없어서 그런지 더 심플하게 느껴졌다. 관리자는 그냥 기록한 것들을 관리만 하면 되는..? 만약 이것이 흥행하면(?) 추후에 광고등을 어떻게 관리할지도 추가할 수 있지 않을까 싶었다. 🍎 Activity Diagram을 구성할 때 화살표나 노드를 표시하는 도형들이 더 있는데, 나는 생략했당.. 동그라미는 Initial node, 마름모는 ..

🦭 UML이란? UML은 Unified Modeling Language의 약자로 소프트웨어 개발뿐만 아니라 많은 산업 전반의 비 소프트웨어 시스템에서도 중요한 역할을 담당한다. UML은 시스템 상호작용, 업무흐름, 시스템 구조, 컴포넌스 관계 등을 그린 도면이다. 예를들어 어떤 집의 구조를 설명할 때, '방2개에 화장실이 1개가 있고.. 화장실 옆에 통창이 있는 베란다가 있으며...'이렇게 구구절절 설명하는 것보다 집의 도면을 한번에 보여주는 것이 더욱 효과적이다. UML 다이어그램을 사용하는 이유도 비슷하다. 프로그래밍을 단순화 시켜 표현하여 의사소통하기 좋고 또 대규모 프로젝트 구조의 로드맵을 만들거나 개발을 위한 시스템 구축에 기본을 마련한다. 🦭 UML 모델링의 이점 시각화, 이해도, 정확성, 의..

유데미 x 스나이퍼 팩토리 부트캠프 1일차에는 플랫폼 관련 강의를 들었다. PM 23년차인 당근대장님이 무려 4시간이나 강의를 진행해주셨다! 틈틈히 싸이월드나^^,, 도토리 등등,, 내 연배에 맞는 이야기가 나와서 반가웠다(?) ✓ 플랫폼이란? 한 문장으로 정의 하자만 교류 속에 이뤄지는 다양한 소통, 거래를 통해 발생하는 트래픽을 기준으로 기업과 개인이 공동의 이익을 형성하는 곳이다 기차가 정차하는 곳도 '플랫폼'이라고 하지만 우리가 사용하는 구글이나 인스타그램, 유튜브 등도 플랫폼이라 할 수 있다 ✓ 플랫폼의 진화 근 몇 십년 동안 플랫폼은 굉장하게 진화하였고, 이제는 자동화되어 OpenAI chatGPT의 시대까지 도래하였다. 내가 보고, 듣고, 만드는 것을 넘어서서 AI가 인간의 영역으로 존재하고..