crabLab

프론트엔드 올인원 강의를 처음 시작했다.. 꼭 잘 진행하여 개인프로젝트들도 많이 만들고 프론트엔드의 전문가가 될 것이다. 시간이 촉박하다. 앞으로 조금있으면 자취하며 독립을 시작해야하는데 잘 해나갈 수 있을지... 우선 최대한 열심히 노력해 봐야한다. 오늘은 티스토리 업데이트와 강의의 개요와 vscode를 배웠다. 강의 내용은 아는것이 절반정도 되었지만 모르는 절반이 꽤나 실용적이었다. 앞으로가 기대된다. 티스토리 업데이트는 깃허브에 비해 밀린것이 많은데 반해 하루 제한량이 있는 것 같아 15개씩 올리기로 결정했다. 나중에 꼭 쓸모있기를

🎯이번 챕터는 vscode에 관한 내용이었다. 몇개는 이미 알고 있기도 한 내용이었지만 상당히 유용하고 실용적인 내용들이 가득했다. 전에 vscode 설정때문에 2일정도 날린경험이 있어서인지 이번 내용이 매우 크게 다가왔다. 이번 내용을 잘 습득해서 생산성을 늘려야 한다. ⭕01. 설치 및 실행 📌강의 정리 vscode라는 코딩을 위한 에디터를 설치해볼 것이다. vscode를 구글에서 검색해서 첫번째 링크를 들어가서 설치하면된다. IDE가 아닌 code를 다운받아야한다. mac이라면 그대로 mac을 받으면 되고 운영체가 다르다면 우측 상단의 다운로드에서 맞는 운영체제로 받으면 된다. 바탕화면에 starter라는 폴더를 만들고 vscode를 실행시켜보자. mac에서는 cmd, window에서는 ctrl을 ..

🎯이번 챕터는 본격적인 강의에 앞서 기초적인 내용들과 진행하면서 알아두고 있으면 좋은 것들을 배웠다. 들으면서 프론트엔드는 항상 최신을 달려야한다는 점을 조금 느끼게 되었다. 각종 정보들을 잘 기억해 두어야 겠다. ⭕01. 첫 인사 및 강의 개요 📌강의 정리 앞으로 업데이트되는 프론트엔드 소식들은 heropy.blog에 올라오니 알아두면 좋다. 웹프론트엔드 개발의 핵심 줄기를 학습하는 과정이다. 난이도가 높고 중요도가 낮은 내용은 가볍게 학습하거나 생략한다. 프론트엔드 개발이란 HTML, CSS, JS를 사용해서 데이터를 그래픽 사용자 인터페이스(GUI) 로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것이다. 프론트엔드는 앞단이라는 뜻을 가지고 있다. 즉 사용자와 상호작용하는 것이다. 비즈..

📌강의 정리 단순히 등수를 측정하는 것에서 이제 중복등수를 계산해야한다. 이중 포문을 돌리는데 먼저 앤서배열에 1로 다 값을 준다. i를 주인공으로 자기보다 큰 점수가 있으면 자기 등수를 ++한다. 처음에 배열에 값을 다 1로 주고 그 앤서배열을 비교하며 카운트하면 중복값을 쉽게 처리할 수 있다. 배열을 다 1로 초기화 하기 위해서 Array.from을 써야한다. Array.from({length:n}, ()⇒1); n은 배열의 길이이고 ()은 콜백함수이다. 이중 포문을 돌리면서 i보다 j가 크면 앤서값을 ++하면 끝이다. 📌느낀점 정말 알고리즘의 세계는 아는 것이 힘이고 머리가 나쁘면 코드가 고생하는게 맞다. 알고나면 쉬운데 왜 그 생각을 못했는지 모르겠다. 이 문제는 풀긴했지만 전혀다른 풀이였는데 강..

📌강의 정리 문제가 길다고 겁먹지말자 1이 들어오면 cnt를 ++하면 된다. 그리고 이것을 answer에다가 누적하면된다. 그러다 0을 만나면 cnt를 0으로 초기화하면된다. 이렇게 계속 누적되면 answer가 답이 된다. 포문 돌릴때 x of arr 쓸 수 있다면 쓰는게 편리하고 좋다. 📌느낀점 푸는 방법도 코드도 다 강사님과 내가 같았다. 문제는 길었지만 쉬웠다. 번뜩이는 아이디어가 중요하다. 코드에서 문제가 읽히게 하자. //나의 코드 //강사님 코드

📌강의 정리 가위바위보 정보가 숫자로 들어온다. a배열 b배열로 받았다. 두 배열의 길이는 같기에 a.length를 써서 포문돌리면 다 돈다. 승부결과는 a입장에서만 보면 이길 수 있는 경우는 3가지이다. 1,2,3으로 이기는 경우이다. a가 1을 내면 && b가 3을 내야한다. 마찬가지로 2,3을 간다. 그리고 else는 b가 이기는 경우 앞서 같은경우는 비기는 경우로 한다. 📌느낀점 나는 a가 이기는 경우와 b가 이기는 경우를 코딩하고 else로 비기는경우를 했는데 그러지말고 비기는경우 a가 이기는 경우하고 b가 이기는 거는 else로 하는게 더 유리한것같다. 그리고 이렇게 해서 코드를 절약하면 하드코딩으로 1,2,3 다 한줄씩 지정해준다. 나의 방식이던 둘을 뻈을때 1 && 3,1은 의미가 확장되면..

📌강의 정리 앞에 사람보다 크면 보이고, 작거나 같으면 안보인다. 배열만 솔루션으로 받으면 된다. i를 정해서 i가 앞에보다 크면 count하면 되는데 이걸 이중포문 쓰면 시간 복잡도가 O(N^2)가 된다. 그러므로 포문 하나만 써야한다. max값을 i일때 i앞에서의 제일 큰사람으로 정한다. max값은 새롭게 보일때마다 카운팅해주면서 다시 정해주면 된다. 처음은 무조건 보이니까 카운트 1로 시작하고 max값은 arr[0]으로 시작한다. 반복문도 1부터 시작한다. 📌느낀점 나와 다른점은 처음에 카운팅을 하나해주고 max값을 arr[0]으로 시작한다는 점이다. 그래서 반복문이 1부터 시작하는데 아직은 나와 강사님 중 어떤게 더 효율적인지 시간복잡도를 잘 몰라서 모르겠다. 나중에 시간복잡도를 알아봐야 한다. ..

📌강의 정리 1차원 배열을 탐색하는 문제이다. 배열을 리턴으로 받으니까 우선 앤서를 배열로한다. 첫번째 숫자는 무조건 받으니까 우선 푸쉬로 받는다. 우리는 입력값에서 배열만 넘기는 거로 한다. 이후 for문을 돌려 배열을 하나씩 탐색하는데 이때 if문으로 앞뒤 하나씩비교하여 크면 출력하면 된다. 📌느낀점 내가 푼 풀이방식이랑 똑같다. 쉽다. //나의 코드 //강사님 코드

📌강의정리 n개의 문자열중에서 중복된 단어를 제거하고 내라는 문제이다. 앞에서 사용했던 indexOf를 써서 풀어보자. s라는 배열은 문제에서 제공받은 문자열이다. 먼저 indexOf("time")을 해서 어떤 값이 반환되는지 알아보자. answer=s.filter(); 를 하면 s라는 객체가 filter()라는 메소드를 호출했다. filter는 원본배열을 바꾸는게 아닌 변환된 배열을 새로만든다. filter(function(v,i){이 내부는 콜백함수의 내부이다.}); filter라는 메소드가 의미하는 것은 s라는 객체의 value를 하나씩 거치면서 콜백함수를 호출한다. 이제 if(s.indexOf(v)===i) 가 성립되면 return true; 를 하면 filter는 true인 값만 새로운 객체에 ..

📌강의정리 단어가 들어오면(소문자로 된) 중복제거하고 출력하는 문제이다. indexOf라는 메소드를 사용할 것이다. console.log(s.indexOf("k"));를 하면 0이뜬다. indexOf는 문자열에서 제일 처음있는 문자의 인덱스를 출력한다. indexOf('k', 1)을 하면 1번인덱스부터 찾아서 나오는 k의 인덱스를 반환한다. 이거 이용하면 특정문자찾기도 가능하다. for of 쓰면 안되고 for(;;)써야 한다. i를 변수로 콘솔을 다 찍으면서 indexOf의 흐름을 알아보자. 이제 if(s.indexOf(s[i])===i) 를 이용해서 처음발견된 위치와 본래의 위치가 같으면 answer 에 s[i]를 누적하면 된다. 특정문자의 개수를 찾는 것도 가능하다. let pos=s.indexOf..