\(@^0^@)/

최근 듣고 있는 강의에서 코드를 에디터에 입력하기 전, 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각해야 한다고 한다. 그치만 생각이 안나... ㅜㅜ 최대한 구체적으로 순서를 정해야 프로그래밍 사고를 할 수 있고, 순서가 머릿속에 있지 않으면 프로그램을 작성할 수 없다고 하니 최대한 구체적으로 그리는 연습을 해보자! ✨ 프로그램 절차를 만들 때의 원칙 1. 프로그램 절차의 개수는 정해져 있어야 한다. 2. 각 절차는 항상 같은 내용이어야 한다. 3. 모든 가능성을 고려해야 한다. 4. 예시는 절차를 검증하는데 사용한다. ※ 참고 : ZeroCho Tv - ES2021 자바스크립트 강좌 ※ 프로그래밍 순서도 : https://m.blog.naver.com/PostView.naver?isHttpsRe..

오늘 들은 제로초 JS 강의에 나온 배열 메서드들을 한 줄 정리해보자! 그중에서 특히 splice를 좀 더 자세히 다뤄보고 정리해보자! 아직은 딱히 vscode를 쓸 필요가 없는 것 같아서, 브라우저 console 창으로 공부하는 중인데 문득 요새 깃헙 잔디를 안 심어서 이런 거라도 남겨야 하나..? 하는 생각이 드네...🤔🤔😵 ✨ unshift : 배열 앞에서부터 요소 추가 shift : 배열 앞에서부터 요소 제거 ✨ push : 배열 뒤에서부터 요소 추가 pop : 배열의 마지막 요소를 제거 ✨ includes : 주어진 값이 배열 내부에 존재하면 True가 되고, 존재하지 않으면 False ✨ indexOf : 몇 번째 인덱스에 위치하는지 (앞에서부터) , 결괏값이 없으면 -1 ✨ lastIndex..

✨ 정규표현식 문법 🧐 문법을 토대로 어떻게 정규표현식을 만들어야 할지 알아보자! \d == digit 숫자 { } == n번 반복 [ ] == 문자셋, 괄호 안의 어떤 문자든 digit숫자 2-3개 ' - ' , ' ' , ' . ' 중 어떤 문자 digit숫자 3개 ' - ' , ' ' , ' . ' 중 어떤 문자 digit숫자 4개 [ ] == 문자셋, 괄호 안의 어떤 문자든 + == 하나 또는 많이 (one or more) \. == 특수문자가 아닌 문자 " . " a-z 또는 A-Z 또는 0-9 또는 ' . ' , ' _ ' , ' + ' , ' - ' 를 포함한 하나 또는 많이 ' @ ' a-z 또는 A-Z 또는 0-9 또는 ' - ' 를 포함한 하나 또는 많이 ' . ' a-z 또는 A-Z ..

최근에 HTML, CSS에 대한 강의를 각 잡고 본 것도 아니고 중요한 내용들만 살짝 보는데도, 보면서 내가 진짜 겉핥기 식으로 HTML과 CSS를 사용했는지 깨닫는 중.. HTML을 사용할 때, 매번 div태그로 떡칠을 했던 과거의 나.... 무릎꿇고 반성해! ✨ Semantic Tags : 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻으로, 문서의 구조와 의미를 브라우저와 개발자 모두에게 명확하게 설명할 수 있도록 도와준다. 🧐 시맨틱하지 않은(non-semantic) elements의 예시 : 와 : element는 내용물에 대한 어떠한 것도 알려주지 못한다. 물론 와 으로만 이루어진 코드들이 실제로 돌아가긴 하겠지만, 나중에 내용물에 대한 어떤 정보도 알 수 없게 됨. 🧐 시맨틱한(s..

🔥 public APIs : https://public-apis.xyz/page/1 🔥 public APIs : https://github.com/public-apis/public-apis 🔥 gif 관련 : https://developers.giphy.com/ 🔥 음악 관련 : https://developer.spotify.com/ 🔥 요리 레시피 관련 : https://developer.edamam.com/ 🔥 meme 관련 : http://apimeme.com/?ref=apilist.fun 🔥 공공 데이터 : https://www.data.go.kr/tcs/dss/selectDataSetList.do 👍 꾸준히 업데이트 예정

REACT로 프로젝트를 할 때, 모든 CSS 요소들에 절대적인 유닛을 적용하는 것보다 상대적인 유닛을 쓰는 것이 맞는 줄 알았고, 강의 때도 그렇게 들은 기억이 있었다. 또한, 같이 공부한 팀원들도 당연히 같은 마음이어서 상대적인 유닛 (vw, vh, %)을 제공받은 wireframe을 토대로 프로젝트에 적용하였는데, 나중에 알고보니 프로젝트 디자인해주시는 디자이너분들께서 (현업에 계심) 모두 px로 사이즈를 주셔서 유닛들을 전부 다시 px로 바꾼 기억이 있다.(그 후에 미디어 쿼리로 하나하나 변경) 나는 아직 배우는 입장이다보니 현업에서 둘 중 무엇을 사용하는지 잘 모르겠다.. 어쨌든 프로젝트때도 Relative length units을 사용하긴 했지만, 정확한 개념이 아직 덜 잡힌 것 같아서 한번 짚..

- 어제에 이어 드림코딩 엘리의 프론트엔드 개발자 되기 입문편을 듣고 있는 중 이번 주는 좀 천천히 가려한다 - FlexBox만 제대로 이해해도 웹사이트의 레이아웃을 쉽게 구성할 수 있다고 하니 완벽히 내 것으로 소화해서 유용하게 써먹어보자 :) 다시 보니까 핑크색 넘넘 촌스러운데 귀찮아서 그냥 냅두겠ㅠ.ㅠ Flex Box : Box와 Item들을 행 또는 열로 자유자재로 배치시킬 수 있는 유연한 속성 ✨ [ Container 와 Item 속성 ] 1. FlexBox는 위의 그림처럼 Box(Container)와 Item에 적용할 수 있는 속성 값들이 각각 존재한다. FlexBox를 쉽게 공부할 수 있는 사이트! 개구리 세 마리들이 각각 같은 색깔의 연못으로 들어가게 만들어야 하는 게임이다. Flex-di..

새로운 블로그에 새로운 마음으로 다시 시작! CSS, HTML JS를 먼저 배워 기초를 쌓고 나서 REACT를 했어야 하는데, 기초 없이 REACT를 공부하는 바람에 개인적인 생각으론 위의 비둘기 짤처럼 진짜 '돌아만 가는' 코드를 구현한 거 같아서 이번 기회에 개념을 싸그리싹싹 머릿속에 집어넣고 제대로 된 코드를 작성해보고 싶다. 아무래도 REACT를 조금 배운 상태라, 기초를 배우면 조금 더 쉽게 다가오지 않을까 생각 중이다. 제발 그러길 오늘은 우선 프론트엔드 개발자의 마인드?를 심어놓기 위해서 드림코딩 엘리의 '프론트엔드 개발자 되기 입문편'을 순차적으로 보다가 내가 정말 기초가 없다고 느끼게 된 부분이 REACT를 하면서 계속 CSS를 써왔지만, 나는 지금 position: fixed; 와 po..