오늘은 리액트 공식문서의 자습서 Tic-Tac-Toe 게임만들기를 해봐따 push an existing repository > git remote add origin https:// git branch -M main git push -u origin main

✨ 참고 - 아래는 이 링크의 일부분을 정리한 것입니다. https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/ 최종 완성본은 여기로 https://minbok-1998.github.io/GhibliAPI/ 목표 우리는 Studio Ghibli API를 연결하여 JavaScript로 데이터를 검색하여 웹 사이트에 보여주는 간단한 웹앱을 만들 것입니다. 무엇을 배울 수 있을까? : Web API가 무엇인가 HTTP request GET을 JavaScript에 어떻게 사용하는가 어떻게 JavaScript로 HTML요소를 생성하고 보여주는가 API란? API(Application Program Interface)는 소프트웨어가 다른 소프트웨어와 통신할 수 있게하는 소프트웨어 구성 요소 간의 통신 방법 집합입니다. Create - POST - 새로운 resource 생성

손으로 쓰면서 공부하는게 이해가 잘된다. 2021 가장 잘산 물건 : 아이패드 ![](https://images.velog.io/images/minbok/post/4508ca08-8d84-463

React를 사용하는 이유 : 코드를 컴포넌트화해서 컴포넌트를 재사용하기 위함 React 프로젝트 생성하기 1) npx create-react-app my-app &nbsp&nbsp&nbsp&nbsp(my-app말고 다른 폴더 이름 사용해도 됌) 2) cd my-app 3) npm start 4) 필요없는 자동 생성파일 삭제하기 JSX 1. JSX란? Javascript에 XML을 추가한 문법 React 프로젝트를 개발할 때 사용, 공식적인 자바스크립트 문법은 아님 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됌 2. JSX 문법 최상위 부모요소는 1개 className으로 클래스를 정의함 camelCase 사용함 주석 { }로 JS를 사용함 🐱‍🐉 참고 출처: https://goddaehee.tistory.com/296

😜 코드 보러 가기 https://github.com/minbok-1998/Components 코드펜에서 본 디자인이 예뻐서 따라해봤당 https://codepen.io/ManassehPierce/pen/eBvYVL 나중에 포폴에 넣어야징

포폴에 넣을 햄버거 버튼 만들었당 눌렀을 때 x로 변하는 건 구현을 했는데, 또 누르면 되돌아오는 건 고민을 좀 해봐야겠다 어찌저찌 해결은 되는데 좀 더 깔끔했으면 좋겠어서 일단 보류.. 😊 코드 보러 가기 https://github.com/minbok-1998/Components

서울에 있으니까 자꾸 뭔가 의무적으로 나가게된다. 집에 있기 아깝다는 생각이 든다. 그래서 오늘은 별마당 도서관에 다녀왔다.✨ 책이 정말 많았다. 근데 맨 위쪽에 진열된 책은 어떻게 꺼내는 걸까 내일은 뮤지컬 펜레터랑 샤갈 특별전 표를 예매했다. 오전에는 공부하고 저녁에는 문화활동(?)해야지 크크 고등학교 때부터 펜레터 보고 싶었는데 이제야 보는구나...! 내일이 2021년 마지막 날이라니 실감이 안난다. 내년부터는 뮤지컬 청소년 할인도 못 받는구나 흑흑😭 암튼 오늘 오전부터 튜터링 웹을 만들기 시작했다.😁 이번 프로젝트의 목표는 `` 안쓰기! 근데 ` 대신에 `을 남발하고 있는거 같은데 이게 맞나싶네...ㅋㅋㅋ 일단 코딩부터하고 로고나 폰트, 내용은 추후에 변경할 생각이다. 아래는 오늘 진행한 분량...! 나도 손이 좀 빨랐으면 좋겠다. HTML CSS

Git 명령어 git branch one : 브랜치 생성 git checkout one : one 이라는 브랜치로 들어감 git checkout one : 메인으로 돌아감 git push origin one : one 이라는 브랜치에 push git merge one : one이라는 브랜치와 merge 😢 fork/pull request Node.js ✨ Node.js 공식 문서 &nbsp&nbsphttps://nodejs.org/dist/latest-v16.x/docs/api/index.html ✨Node.js 학습 &nbsp&nbsphttps://nodejs.dev/learn 01. Node.js란? : Javascript 런타임 (Javascript 실행기/실행 소프트웨어) 😢 REPL(Read, Eval, Print, Loop) 02. 모듈 &nbsp&nbsp&nbsp&nbsp**2.1

chartjs Canvas D3 CSV(영어: comma-separated values)는 몇 가지 필드를 쉼표(,)로 구분한 텍스트 데이터 및 텍스트 파일이다. D3는 서버환경에서 실행된다. git 명령어 (=리눅스 명령어) git add . : 모든 변경내역을 업로드

정규표현식 /일반문자열/ /^일반문자열/, /일반문자열$/ : 처음과 끝 /h.llo world/ : 모든 문자(dot, '.') h[eay]llo world : 택1 /[a-zA-Z0-9]/ : 범위 // : 부정(not) /.(a|e|o)ll./ : group 수량자 8.1 [eay]{3} : e, a, y 중 택 1이 3개 ({3,} : 3개 이상, {1,3} : 1개 ~ 3개) 8.2 _* : 앞에 있는 문자가 0개 ~ N개, 예를 들어 [eay]*면 e, a, y 중 택 1이 0개~ N개 8.3 _+ : 앞에 있는 문자가 1개 ~ N개 8.4 _? : 앞에 있는 문자가 0개 ~ 1개 캐릭터 클래스 9.1 /\w/gm : 워드 9.2 /\w{5} /gm : 5개의 글자와 스페이스 하나 9.3 /\W/gm : not 워드 9.4 /\d/gm : 숫자 9.5

window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. Git 명령어 시작하기: git init 유저 이름 설정: git config --global user.name "minbok-1998" 이메일 등록: git config --global user.email #######@gmail.com 파일 추가: git add . (전체 파일이 한번에 선택됨) 메세지 입력: git commit -m "first commit" 보낼 곳 등록: git remote add origin https://github.com/minbok-1998/Anniversarycalculator.git 보낼 곳으로 코드 전송: git push origin master ![](https://images.velog.io/images/minb

멋사에서는 자바스크립트 진도를 열심히 나가고있다. 그리고 나는 이해를 못하고 있지 하하 멍하니 앉아있기는 시간이 아까워서 도저히 이해가 안될때는 개인적으로 책을보면서 공부를 하고있다. 언젠가는 이해하는 날이 오겠지 아이패드 정말 잘산거같다. 흐흐 문제는 타자치기싫어서 TIL을 안쓰게된다는거..?

킥복싱 3주차 후기: 살은 안빠지고 부상을 얻었다. 아야 벨로그보다 노션이 훨씬 편하고, 귀엽고 심지어 앱도 있다. 노션을 주로 써야겠다 룰루쓰😘 요즘 소코도모 회전목마랑 비오 리무진이 너무 좋다. 특히 회전목마 하루에 3시간씩은 듣는듯 🧡 Notion https://www.notion.so/Map-Set-eb1cf35cdee845349d4ee178a7cca0d9 1. Map 1.1 Map이란? : key와 value의 쌍을 가지는 객체자료형, Map은 'Map'이라는 새로운 자료형이라고 생각해라! (array 처럼 typeof 하면 object 로 나옴) ✨object는 Interable 하지 않으며, Map은Interable 함 (Interable: 순회가 가능함) 1.2 Map의 이용 1.3 Map의 활용 2. Set 2.1 Set 이란? :

![](https://images.velog.io/images/minbok/post/93e9ccc9-ce35-4c92-aad4-4c5d626b7052/56455105-681A-4E96-9199-37B132B215D3.j

운동은 정말 재밌다. 식단조절만 좀 잘하면 몸짱될 수 있을거같은데, 세상에는 맛있는게 너무 많다.😁 오늘 샌드백을 잘못찼는지 발목이 좀 아프다. 자고일어나면 괜찮아야할텐데... 어제와 오늘은 멋사 수업에서 Flex와 Grid를 정리하는 시간을 가졌다. Flex와 Grid 둘다 어렵다고 생각했는데 한번 더 정리해주시니까 한결 이해가 잘되는것같다. CSS 🔷 Transition 1. Transition의 속성 delay : transition 실행을 지연시킴, s/ms사용가능, 기본값은 0s(지연없음), 음수의 경우는 절댓값을 적용 duration : transition의 지속시간을 설정, s/ms, 기본값 0s(transition 실행X) property all : 모든 속성에 transition 적용 none : 모든 속성에 transition 값 적용X **property :

아 온몸이 쑤신다. 심지어 갈비뼈도 쑤신다. 오늘은 절대 운동모태 스트레칭만 하고 자야지😎 CSS 🔷Flex (for. Flex-container) 1. Flex? : display 속성 중 하나로 block 요소의 속성을 가진다. 부모(Flex-container)요소가 자식(Flex-item)요소를 컨트롤한다. * 1.1 display: flex;* 1.2 display: inline-flex; 2.flex-direction : 메인축의 방향을 정하는 속성 (가로 / 세로) **row

오늘 킥복싱가서 스파링을 했다. 저 이틀찬데요........😅 주먹막고 발차기막고 정신이 하나도 없었다. 나름대로 열심히 막았지만, 다 맞은거같다 하하😂 정말 세상엔 쉬운일이 하나도 없는거같다. CSS 🔷 Position 1. Position? : 페이지의 레이아웃을 결정하는 속성 2. 종류 - static (기본값) : HTML상의 순서에 따른 위치를 가짐, 부모 요소의 Position 속성을 무시하기위해 사용되기도 함 - relative : 자신의 본래 위치에서 상대적(static)인 속성을 가짐 즉, top:10px;은 staic위치에서 위로 10px 이동한것 - absolute : html을 기준점으로 하며, 왼쪽 가장 상단이 자신의 본래 위치라고 생각하고 이동함 만약 부모 요소가 relative, absolute, fixed 속성을 가지고 있다면, 부모 요소를 기준으로 이동함 **- f

오늘부터 킥복싱을 시작했다. 너무 재밌다 진짜. 오랜만에 미트랑 샌드백치니까 스트레스가 다 풀리는 기분이다. 열심히 다녀야지😊 아 그리고 멋사 캐릭터 경진대회에서 받은 선물도 도착했다. 노트북 파우치만 올 줄 알았는데 열쇠고리, 스티커, 손코딩하기 좋아보이는 공책 두 권도 같이 왔다. 귀엽당 😘 CSS 🔷 Box Model box-sizing : 박스크기에 대한 기준을 정함 1. box-sizing: content-box (기본값) 박스의 크기가 width, height와 같음

오늘은 mediaquery, button, perspective에 대해서 배웠다. 졸업과제하면서 미디어쿼리가 가장 어려웠기때문에, 미디어쿼리 부분에 가장 관심이 많았는데 간단하게 가르쳐주셔서 좀 아쉬웠다😥 진도 못 따라간 부분을 혼자서 공부하고 있는데, 내가 공부하는 속도보다 매일 진도 나가는 속도가 더 빠르다😅 아 이건 오늘 만든 버튼이다. 짧은 시간동안 만든거 치고는 예쁘게 만들어진거같다. 주말에 시간이 생기면 더 예쁘게 만들어봐야지 룰루✨ ✨ 코드는 여기! CSS 🔷 reset CSS 수업을 통해 reset CSS라는 것을 알게되었다. 기본 스타일을 초기화시켜서 디자인을 쉽게할 수있도록하는 역할을 한다고 한다. ✨reset css 링크 https://meyerwe

이제 졸업전시가 끝났다! 맨날 "아 집에 가고싶다~ 자퇴하고싶다~"를 입에 달고살았었는데, 막상 졸업을 앞두니 싱숭생숭하다. 졸업하기싫다. 나 그냥 평생 학생 시켜주세요😢 지난주는 졸업전시때문에 멋사 수업을 많이 빠졌다. 그래서 그런지 수업진도를 따라가기가 어렵다. 흑흑 이제 전시도 끝났으니 velog업로드도 열심히 하고 수업도 열심히 들어야겠다.😥 진도를 따라가기가 벅차서 혼자 강의 교안을 보면서 공부해봤다. 아래에는 공부하며 배운점을 정리할 예정이다. #1 HTML 🔷 글자태그 🔷 콘텐츠 그룹 태그 🔷 폼 태그 Form이란? : 정보를 입력하는 영역 ex) 로그인창, 회원정보 기입창 등 Form 동작 방식 : 브라우저에서 데이터 입력 발생 -> 웹 서버로 데이터 이동 -> 데이터 처리위해 웹 서버가 APP호출 -> 데이터를 DB로 전송(CRUD) -> APP -> WEB -> 클라이언트