목록TIL (60)
\(@^0^@)/
배열메서드를 쓰면, for문보다 성능이 좋지는 않지만, 연달아 사용하기 때문에 편리함. ✨ forEach : for문에 비해 좀 더 깔끔하고, 직관적인 코드. 인수로 함수를 받고, 배열의 요소 하나 하나에 인수로 받은 함수를 각각 적용함. 이때 요소 순서대로 함수를 적용하므로 반복문의 역할을 하게 됨. ✨ map : forEach 역할을 하면서, return이 있어서 기존 배열은 건드리지 않고, 새로운 배열을 생성해줌. ✨ fill ※ 참고 : ZeroCho Tv - ES2021 자바스크립트 강좌 ※ MDN : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array ※ 더 알아보기 : http://tcpscho..
무작위 숫자를 만드는 함수는 Math.random() (0 이상 1 미만의 수를 무작위로 생성) 만약, 1에서 9까지의 숫자가 필요할 경우 Math.random()에 9를 곱한 후 1을 더하면 1 이상 10 미만의 수가 만들어짐. 숫자를 자연수로 만들려면 내림, 올림, 반올림을 해야 함. 숫자의 내림은 Math.floor() 올림은 Math.ceil(), 반올림은 Math.round() 로 할 수 있음. // 0
JS강의를 들으면서 어떤 것을 TIL로 적어야 할지 잘 모르겠다는 생각이 드는 요즘이다. 뭘 적어도 되게 사소하고 애매한 것 같은 느낌적인 느낌이랄까?? 그래서 그냥 사소한 거라도 내가 몰랐던 것을 알게 되었다면 그게 TIL인 거 같으니까 부담 갖지 말고 편안하게 생각하기로 했다. 함수는 호출하면 어떤 값을 반환한다. (어떤 값은 숫자나 문자열, boolean 값 등으로 제한되어 있지 않고, JS의 모든 자료형이 될 수 있다) 즉, 함수가 함수를 반환할 수도 있다. const func = () => { return () => { console.log('hi JS'); }; }; func 함수를 호출하면 함수를 반환한다. 반환된 함수는 아래처럼 다른 변수에 저장할 수 있고 변수에 저장된 함수를 다시 호출할..
최근 듣고 있는 강의에서 코드를 에디터에 입력하기 전, 내가 만들 프로그램이 어떤 절차로 돌아갈지 미리 생각해야 한다고 한다. 그치만 생각이 안나... ㅜㅜ 최대한 구체적으로 순서를 정해야 프로그래밍 사고를 할 수 있고, 순서가 머릿속에 있지 않으면 프로그램을 작성할 수 없다고 하니 최대한 구체적으로 그리는 연습을 해보자! ✨ 프로그램 절차를 만들 때의 원칙 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..
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..