scss(sass) 의 html data-theme속성을 toggle해서 구현했습니다. https://github.com/taehyunkim3/TODOList GitHub - taehyunkim3/TODOList: react react. Contribute to taehyunkim3/TODOList development by creating an account on GitHub. github.com https://todolist-pre.vercel.app/ React App todolist-pre.vercel.app
알고리즘에서 문자열로 정보가 뒤섞여 들어오는 경우가 많은데, 이때 정규표현식으로 이 문자열을 사용하기 좋게 다듬는건 필수적이다. 이때, 구분자가 없이 들어오는 경우 split 이나 replace등을 사용할수가 없는데, 이때 사용하는것이 match매소드이다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/match String.prototype.match() - JavaScript | MDN match() 메서드는 문자열이 정규식과 매치되는 부분을 검색합니다. developer.mozilla.org 예를들어 https://school.programmers.co.kr/learn/courses/30/les..
https://school.programmers.co.kr/learn/courses/30/lessons/68644?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(numbers) { const set = new Set(); for (i in numbers){ for (s = 0; s a-b); } 인덱스..
https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 계속 시도했으나 시간복잡도에서 실패한 코드 function solution(arr) { const answer = []; for(i in arr){ if(i===0){ answer.push(arr[0]); }else if (answer[answer.length-1]!==arr[i]){ answer.push(arr[i]); } } return answer } 이게 for문을 돌면서 i가 0인지 계속..
이름 지우는게 너무 힘들었다. 항해99 과정에서 선의의 경쟁? 을 위해 출석체크를 하는 페이지가 있는데, 이 페이지의 시계는 5시간정도 뒤에 보면 1시간이상 느려져있다. 우리는 아마 항해99의 서버시간을 get요청으로 가져와서, 현재시간을 기반으로 setTimeout으로 타이머를 작동시키는 것으로 보인다. setTimeout은 세팅한 시간이 되면 브라우저가 큐로 던져주고, 이벤트루프가 콜스택이 비어있는걸 확인하게 되면 settimeout를 스택으로 던져주고, 내부의 콜백함수가 실행되게 된다. 즉, setTimeout에 세팅한 시간은 해당 시간이 되면 콜백함수를 실행해줘! 가 아니라, 해당 시간이 지나면 콜백함수를 실행해줘! 의 의미인 것이다. 이런 오차는 계속 쌓이기때문에, 아무리 콜스택이 비어있더라도 ..
어제 스터디에서 보게된 whireshark가 흥미로워서 HTTP, HTTPS, wireshark에 대해 검색하다가, 위키하우의 아주 단순한 해킹 매커니즘을 보게되었다. 우리가 프론트엔드에서 작성하는 거의 모든 정보는 대중에 공개되어있고, 소스보기등으로 코드를 확인할수 있다. 그리고 이용자가 해당 html을 복사하여 조작한뒤, 변조된 코드로 사이트에 접근할 수 도 있다. 만약 비밀번호 검증등의 알고리즘이 프론트엔드에서 끝나고, 사용자가 코드에 접근할 수 없는 서버측 코드에 이런 공격에 대비되어있지 않다면 아래와 같은 아주 단순한 공격에 노출되어 있는 것이다. https://ko.wikihow.com/HTML-%EC%BD%94%EB%93%9C%EB%A1%9C-%EC%9B%B9%EC%82%AC%EC%9D%B4..
회고 이번주는 많은 일이 있었다. 우선 TIL을 쓰기 시작했다. 알고리즘에 약간 재미를 느끼기 시작함. 알고리즘 스터디를 시작함. -> 간단하게 파이썬 사용방법 알면 좋음. CS스터디 청강함. -> 브라우저의 랜더링과 호이스팅 개념에 대하여 새로운 과제를 받음(리엑트로 투두리스트 만들기) 이번주 키워드 JavaScript 의 ES란? ES는 EcmaScript의 약자로, 자바스크립트 문법을 표준화하기 위해 만든 규격. 자바스크립트가 넷스케이프에서 개발된 뒤, MS에서 J스크립트를 개발하고 두 언어가 호환되지 않는 문제가 발생하자, 유럽컴퓨터제작연합(ECMA)에 표준화 요청을 하였기 때문에 이렇게 이름이 붙었다. 지금 ECMA는 업무가 유럽에만 국한되지 않으므로 Ecma라는 하나의 단어로만 사용하고 풀네임..
썸네일을 위해 춤춰주신 도영님. 0. 작성일? 2023년 6.17 토요일 1. 오늘 어떤 일을 했는지? 리엑트 투두리스트 만들기 알고리즘풀이 알고리즘 게시글 작성 3개. 2. 내가 모르는것? 몰랐던 것? html&css 기본적인 스타일링 지식 부족함 fontawsome 리엑트에서 사용방법 다름 3. 알게된점? 어떤 성장을 이루어냈는지? 알고리즘- 매소드 사용 방법(게시글) 내가 기본적인 css부터 다시 다져야겠구나 그리고 지식보다, 어떤걸 계속 끊임없이 만들면서 실제로 모르는걸 찾아보면서 해나가야 기억에 남는구나. 4. 어떤 삽질을 했는지? 왜? html, css 기본 스타일링에서 시간 너무 오래 잡아먹음. 5. 깨달은 점? 6. 참고링크, 공부내용 https://school.programmers.c..
https://dudghsx.tistory.com/18 hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com
https://school.programmers.co.kr/learn/courses/30/lessons/64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이 문제는 설명이 너무 길어서 링크를 참고해야 한다. 우선 작성을 해보았는데, 여기서는 사용자의 move가 이미 다 주어져서, 생각보다 어렵진 않다. board에 있는 2차원 함수에서 move의 x축에 있는 숫자를 하나씩뽑아서 바구니에 push하고, 바구니에 똑같은 인형 2개가 만나면 2개를 터트리고, 2개를 카운트 하면 된다. 아마 pop쓰라고 일부러 터트리는걸로 한듯.. 최종 답안은 그 터트린..
https://school.programmers.co.kr/learn/courses/30/lessons/42576 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(participant, completion) { for (name of completion){ let index = participant.indexOf(name); participant.splice(index, 1); } return participant.join(); } 이렇게 풀었으나 시간초과가 나왔다. 아무래도 array말고 object를 사용해서 해봐야겠는데..
https://school.programmers.co.kr/learn/courses/30/lessons/67256 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr level.1, 정답률 50% 어려웠던 점 - 키패드의 x, y좌표를 잘못 설정해서 한참 찾음 - 대, 소문자 틀려서 한참 찾음. - 삼항연산자 사용법 (다중 연산시 return은 맨뒤에) 숙지 필요 삼항연산자에서 return은 마지막 표현식의 결과만 반환되므로 return hand === 'right' ? (true, rightP = keypad[givenKey]) : (false, leftP ..
0. 작성일? 2023년 6.15 수요일 1. 오늘 어떤 일을 했는지? 알고리즘 풀이 큐/스택 민승님 글 수정 테스트 기술매니저님 면담 새로운 과제 받음(리엑트로 투두리스트 만들기, 다크모드쿠현, 미디어쿼리 구현, 상태관리->나중에 useContext까지) 2. 내가 모르는것? 몰랐던 것? 큐.스택 알고리즘 3. 알게된점? 어떤 성장을 이루어냈는지? 새로운 과제 받음. 월요일까지 완료 예정. 4. 어떤 삽질을 했는지? 왜? 5. 깨달은 점? 6. 참고링크, 공부내용 https://kthdev.tistory.com/144 [React] 가상돔 Virtual DOM 브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다. 첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔..
브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다. 첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔을 때 거치는 과정이다. 이때 브라우저는 새로운 DOM을 만든다. (참고 : 렌더링이란 브라우저에 리소스(html,css,js)를 그리는 작업을 뜻한다.) 두번째, 업데이트시의 렌더링은 다른 페이지로 이동했을때 발생하는 렌더링을 말한다. 브라우저는 업데이트된 DOM을 만들고 기존에 있던 DOM은 전부 날리는 식으로 업데이트가 진행된다. 하지만 리엑트는 이것과 다르게 동작한다. [리엑트의 렌더링 과정] 내용이 바뀌어 업데이트된 DOM을 새로운 사본으로 만든 뒤, 그 사본에 업데이트된 항목을 표시한다. 사본과 기존의 DOM을 비교하면서 달라진 점이 없는지 확인한다. D..
0. 작성일? 2023년 6.14 수요일 1. 오늘 어떤 일을 했는지? 문법종합반 3주차 완료 야구게임 페어프로그래밍 및 리팩토링 -> 매소드명으로 분리하기! this 바인딩 ->너무 시간 많이 써서, 잠시 내려두고 며칠뒤 머릿속에서 정리가 되면 다시 접근하기로 함.(금~토요일 예정) 콜백함수 개념정리 -> 이건 얼마 안걸렸는데, 생각보다 쉽게 받아들여짐. 다만 this바인딩에 정신을 빼앗겨서 블로그 글 정리는 못함. 아래쪽은 슬슬 정리한것. github star많은 레포, 항해99 실전프로젝트 우수작 코드 구경 문법종합반 4-5주차 보면서 흥미로운 부분만 먼저 미리 읽어보기.(클로저, 콜백함수, 콜백지옥의 개념) 클린코드(로버트C.마틴) 책 배송와서 훑어봄. 2. 내가 모르는것? 몰랐던 것? this..
스크린샷 찍으려고 보니 아무도 없음.. 0. 작성일? 2023년 6.13. 화요일 1. 오늘 어떤 일을 했는지? 항해99 JS 문법종합반 2, 3주차 정리 블로그 글 3-4개정도 작성 -> this 개념에 대해 좀 많이 찾아봄. 단순하면서 이해가 어려운 개념이라 조금 확인작업이 필요했다. https://kthdev.tistory.com/137(이건 12일 밤에..) JS의 String https://chat.openai.com/share/3c93f263-b068-4c6b-bc75-3de7989b4bcc ChatGPT A conversational AI system that listens, learns, and challenges chat.openai.com 위에는 내가 자바스크립트의 String이 C언어..
var fullname = 'Ciryl Gane' var fighter = { fullname: 'John Jones', opponent: { fullname: 'Francis Ngannou', getFullname: function () { return this.fullname; } }, getName: function() { return this.fullname; }, getFirstName: () => { return this.fullname.split(' ')[0]; }, getLastName: (function() { return this.fullname.split(' ')[1]; })() } console.log('Not', fighter.opponent.getFullname(), 'VS', ..
다들 버그에 맞게 코드를 써버려서 아직까지 고쳐지 못하고 있는 자바스크립트 버그 typeof '' // string typeof '123' // string typeof 1 // number typeof true // boolean typeof {} // object typeof /test/index // object typeof function () {} // function typeof undefined // undefined 위에는 논리적으로 맞는 결과값인데 참고 : 자바스크립트의 원시타입은 number, String, Boolean, null, undefined, Symbol, Bigint 가 있음. 아래는 ? NaN은 뭐 number가 비어있는거라 치고, null은 심지어 원시타입인데 왜 obj..
https://school.programmers.co.kr/learn/courses/30/lessons/12915 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 처음 내가 테스트한 답은 function solution(strings, n) { strings.sort((a, b) => { return a[n] - b[n]; }); return strings; } 이거였다. 제일 간과한 문제가 C언어와 다르게 자바스크립트에서는 문자열끼리 뺄 경우 ASCII코드로 자동 변환해서 빼주지 않고, NaN을 반환한다는것. 그래서 문자열의 ASCII코드를 가져오려면, ..
https://chat.openai.com/share/3c93f263-b068-4c6b-bc75-3de7989b4bcc ChatGPT A conversational AI system that listens, learns, and challenges chat.openai.com 위에는 내가 자바스크립트의 String이 C언어처럼 참조형이 아니고 원시값인게 이해가 안가서 gpt에게 물어본 내용이 들어있는 대화록 링크. GPT내용 요약하자면 자바스크립트는 효율적이 사용을 위해 문자열을 원시값으로 만들어 빠른 엑세스가 가능하도록 했고, 원시값임에도 동일한 문자열이 여러개 있는 경우 자바스크립트 엔진에 자체적으로 한군데의 메모리값을 여러군데 할당해서 메모리 사용을 효율적으로 관리한다. 이때 C언어와 다르게 가비지..
0. 작성일? 2023년 6.12.월요일 1. 오늘 어떤 일을 했는지? 항해99 JS 문법종합반 1주차. 기본문법 복습, 블로그 내용 정리 https://kthdev.tistory.com/133 git 사용 연습 자바스트립트 문법종합반 1주차 / 복습 역사 2005년 ajax 2008년 구글의 V8엔진. 2009년 node.js등장, 서버개발 2015년 ES6 출시 특징 객체지향 프로그래밍 지원. 동적 타이핑 함수형 프로그래밍 지원 ( 함수를 first-class object로 취급(일반 값처럼 kthdev.tistory.com 2. 내가 모르는것? 몰랐던 것? cli이용한 git 사용방법, 전반적인 git의 기본 기능을 command 로 사용하는 방법(fork, clone 등) git의 fork 개념,..
역사 2005년 ajax 2008년 구글의 V8엔진. 2009년 node.js등장, 서버개발 2015년 ES6 출시 특징 객체지향 프로그래밍 지원. 동적 타이핑 함수형 프로그래밍 지원 ( 함수를 first-class object로 취급(일반 값처럼 변수할당, 반환 가능)함, 고차함수(함수를 인자로 받거나 반환하는 함수 지원) 비동기처리 클라이언트/서버 모두 사용 가능 -- 변수와 상수 변수 : var, let -> 메모리에 저장, 읽어들여 재사용. var는 재선언시 경고 안함. let사용. 상수 : const -> 선언 후 변경 불가. 변수 이름 : 저장된 값의 고유 이름 변수 값: 변수에 저장된 값 변수 할당 : 변수에 값을 저장하는 것 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알림 변수 참고 : ..
useEffect코드는 페이지가 로드된 다음 실행되는 코드임. 서버로부터 불러오는 작업이나, 기타 복잡하고 시간 오래걸리는 함수들은 여기에 넣어주면 사용자가 좀더 빠르다고 체감이 가능함. 사용방법은 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } 요렇게 사용하면 되고, 실제로 2초후 사라지는 안내문을 만들어보자. let YellowBox = styled.div` background : yellow; height : 100px; width: 100%; font-size:30px; ` functi..
CSS대신에 아래처럼 JS파일 안에 css스타일링을 할 수 있고 심지어 props(약간 사용법 다름 유의)로 조건식등을 넣어서 스타일링도 가능함. 터미널에 아래 입력해서 설치해줌 npm install styled-components 근데 설치가 안될수 있음! (최근 버전이 npm과 충돌이 있는듯 함. 이 경우 아래 처럼 입력 yarn add styled-components 아래처럼 사용. 이렇게 컴포넌트에 넣어서 사용도 가능함. import styled from 'styled-components'; let YellowBtn = styled.button` background : ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white'..
기본셋팅 터미널에서 router설치 npm install react-router-dom@6 index.js import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); app.js import { Routes, Route, Link } from 'react-router-dom' 기본셋팅은 끝. 페이지 주소, 내부 내용 설정 app.js 아래와 같이 로 감싸준 형식 내부에서 로 지정해줌. 이게 위치한 곳에서 html을 생성하므로, navbar 바로 아래에 작성함. 상세페이지 같은건 map돌려서 생성도 가능함. // 이걸로 감싸줌 /..
데이터가 너무 많거나 등등 파일을 분리하는 경우 불러오는 방법을 크게 두가지로 사용할 수 있음. 1. default export 대부분 이걸 사용하며, 모듈에서 한가지 주요한 것을 내보낼때 사용함. data.js 생생하고 아래와 같이 작성 let a = 10; let b = 20; let data = [ { id: 0, title: "White and Black", content: "Born in France", price: 120000 }, { id: 1, title: "Red Knit", content: "Born in Seoul", price: 110000 }, { id: 2, title: "Grey Yordan", content: "Born in the States", price: 130000 }..
1. 외부 이미지 링크 가져오는건 똑같이 url 넣어주면 됨. 2. CSS에서 background-image: url로 가져오기 app.css에서 아래 코드처럼 경로를 넣어줌. .main-bg { height: 300px; background-image: url("/src/img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg"); background-size: cover; background-position: center; } 3. JSX 내부에서 가져오기. 위와 똑같은 이미지를 app.js에서 가져오려면, import 이미지 from './img/F2BAC502-1A50-4268-9068-E882282EFE1E_1_105_c.jpeg'; 요렇게 app.js 위..
