분류 전체보기
리엑트 주특기 1일차
경원님 블로그 보고 정리 잘 해주셔서 그걸로 공부하고, 모르는 부분을 여기에 남겨보기로 함. https://rosie0418.tistory.com/114 리액트 입문주차 1주차 - 1 1. React란? ⅰ. React란? A JavaScript library for building user interfaces 공식문서에서 소개내용 유저 인터페이스를 빌딩하기위한 자바스크립트 기반의 라이브러리 UI란 사용자에게 보여주기 위한 사용자가 rosie0418.tistory.com 중요한 부분 모음 단축속성 const name = "wonjang"; const age = 21; const testObj = { name, // age: age, 키와 value가 같은 모양이 있으면 ES6에서 이를 생략할수 있게해줌 ..
2023.06.23 TIL
2023.06.23 21:25작성 1. 오늘 한일 리엑트 주차 시작 리엑트 todolist 제작 https://github.com/taehyunkim3/todolist_99_1/tree/main GitHub - taehyunkim3/todolist_99_1: 항해99 15기 주특기1주차 레벨1 항해99 15기 주특기1주차 레벨1. Contribute to taehyunkim3/todolist_99_1 development by creating an account on GitHub. github.com 코드리뷰 특강 https://tech.kakao.com/2022/03/17/2022-newkrew-onboarding-codereview/ 효과적인 코드리뷰를 위한 리뷰어의 자세 안녕하세요, 톡FE파트에서 ..
23.6.22 TIL
1. 오늘 한 일 알고리즘 시험(6/6) react localstorage 이용해서 다크모드 상태 저장하기. 기술매니저님 미팅 랜선 술자리 2. 토요일까지 할일 토요일 9시 리엑트 스터디 -> 페이지네이션 3. 일요일까지 할일 시간포멧 라이브러리 firebase -> 로그인 기능 json server API DB 변수명 정리 라우터 -> 상세정보 useEffect, useState 정리 오늘 푼 문제 답안 function solution(n) { let array = n.toString().split('').reverse(); //문자열화->배열화->뒤집기 const sum = array.reduce((acc, curr) => acc + Number(curr), 0); //합계 계산 return arra..
2023.06.21 TIL
1. 오늘 한 일 https://kthdev.tistory.com/165 [프로그래머스]소수 만들기 https://school.programmers.co.kr/learn/courses/30/lessons/12977 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 kthdev.tistory.com https://kthdev.tistory.com/164 [프로그래머스]신규 아이디 추천. 정규식 문제 https://programmers.co.kr/learn/courses/30/lessons/72410 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와..
[프로그래머스]소수 만들기
https://school.programmers.co.kr/learn/courses/30/lessons/12977 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 여기서 가장 시간을 많이 잡아먹은 부분은 쓸데없이 중복을 제거해버린것. 여기서 가능한 모든 소수의 경우의 수를 구하는 것이라 중복이 있어도 별개의 소수로 계산이 되는건데 쓸데없이 set을 이용해서 중복을 제거해서 계속 오류가 나왔다. 이건 1차로 해매다가 결국 지워버렸던 것 function solution(nums) { let set = new Set(); for(i in nums){ for(le..
[프로그래머스]신규 아이디 추천. 정규식 문제
https://programmers.co.kr/learn/courses/30/lessons/72410 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 완전한 정규식 문제. 여기 나오는 정규식 사용법은 어느정도 다 익히고 있어야 할듯 함. 여기서 가장 시간을 많이 잡아먹은건 new_id를 할당을 안해줘서, 아무리 해도 변경 없이 나와버렸던 것. new_id = new_id.어쩌구 로 바뀐걸 기존꺼에 할당을 해줘야하는데 자꾸 깜박한다. 기본중의 기본. 아래는 나의 코드 function solution(new_id) { new_id = new_id .toLowe..
[프로그래머스] 실패율. array말고 object
https://school.programmers.co.kr/learn/courses/30/lessons/42889 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 딱 객체로 하면 좋은 문제인데, 객체를 다루는 방법을 계속 고민하다가 결국 배열로 풀기는 했다. 다만 시간복잡도가 엄청나게 증가해서 3000ms이상 걸리는 테스트케이스가 존재함. 아래는 내가 작성한 답안 function solution(N, stages) { let points = []; let stageSort = []; for(let i = 1; i a>=i).length; let clear ..
23.06.20 TIL
1. 오늘 한 일 팀원들과 알고리즘 풀이, 리뷰 나머지 일정은 개인 사정으로 거의 못하고, 대신 다음날 5시부터 하는중. 잠에서 깨는데 3-4시간정도 소요되어서, 새벽에 일찍 일어날 필요성이 있음. 2. 오늘 한 삽질 멘탈, 텐션 관리가 정말 중요함. 이게 관리가 안되면, 아무것도 할 수가 없고, 시간을 흘러감. 결과적으로 항해 99일의 1%을 반쯤 날리며 큰 교훈을 얻음. 공부하는게 문제가 아니라, 공부하고 싶은 마음을 계속 유지하는게 중요한 것임. 하지만 그 중요성을 깨달은 것을 양분삼아 남은 기간을 더 알차게 채우기로 함. 3. 그래서 다음날(21일, 사실 오늘) 할 일 투두리스트 리펙토링 (로컬스토리지 이용해서 새로고침에 대응하고, 리스트도 저장되게 해보기. ) 알고리즘 2시간, 최대 3시간 이하..
2023.06.19 TIL
0. 작성일? 2023년 6.19 월요일 1. 오늘 어떤 일을 했는지? 리엑트 투두리스트 다크모드 완성. 최원장님 면담 이현주 기술매니저님 면담 알고리즘풀이(하루2~3시간씩) 항해 출석체크 프로그램 소스코드 분석(타이머부분만) -> 블로그글 작성 https://kthdev.tistory.com/156 [react/jotai]항해99 출석체크 페이지 시간이 계속 느려지는 이유 이름 지우는게 너무 힘들었다. 항해99 과정에서 선의의 경쟁? 을 위해 출석체크를 하는 페이지가 있는데, 이 페이지의 시계는 5시간정도 뒤에 보면 1시간이상 느려져있다. 우리는 아마 항해99의 kthdev.tistory.com 코드변조의 위험성과 웹 보안에 대한 간단한 고찰 https://kthdev.tistory.com/155 코드..
[React]Todo List 다크모드 구현
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
[JS][1차]다트게임 / 정규표현식으로 문자열 분리하기
알고리즘에서 문자열로 정보가 뒤섞여 들어오는 경우가 많은데, 이때 정규표현식으로 이 문자열을 사용하기 좋게 다듬는건 필수적이다. 이때, 구분자가 없이 들어오는 경우 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..
[JS/python]두 개 뽑아서 더하기
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); } 인덱스..
[JS]스택/큐 같은숫자는싫어
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인지 계속..
[react/jotai]항해99 출석체크 페이지 시간이 계속 느려지는 이유
이름 지우는게 너무 힘들었다. 항해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..
WIL 23.06.18
회고 이번주는 많은 일이 있었다. 우선 TIL을 쓰기 시작했다. 알고리즘에 약간 재미를 느끼기 시작함. 알고리즘 스터디를 시작함. -> 간단하게 파이썬 사용방법 알면 좋음. CS스터디 청강함. -> 브라우저의 랜더링과 호이스팅 개념에 대하여 새로운 과제를 받음(리엑트로 투두리스트 만들기) 이번주 키워드 JavaScript 의 ES란? ES는 EcmaScript의 약자로, 자바스크립트 문법을 표준화하기 위해 만든 규격. 자바스크립트가 넷스케이프에서 개발된 뒤, MS에서 J스크립트를 개발하고 두 언어가 호환되지 않는 문제가 발생하자, 유럽컴퓨터제작연합(ECMA)에 표준화 요청을 하였기 때문에 이렇게 이름이 붙었다. 지금 ECMA는 업무가 유럽에만 국한되지 않으므로 Ecma라는 하나의 단어로만 사용하고 풀네임..
23.06.17 TIL
썸네일을 위해 춤춰주신 도영님. 0. 작성일? 2023년 6.17 토요일 1. 오늘 어떤 일을 했는지? 리엑트 투두리스트 만들기 알고리즘풀이 알고리즘 게시글 작성 3개. 2. 내가 모르는것? 몰랐던 것? html&css 기본적인 스타일링 지식 부족함 fontawsome 리엑트에서 사용방법 다름 3. 알게된점? 어떤 성장을 이루어냈는지? 알고리즘- 매소드 사용 방법(게시글) 내가 기본적인 css부터 다시 다져야겠구나 그리고 지식보다, 어떤걸 계속 끊임없이 만들면서 실제로 모르는걸 찾아보면서 해나가야 기억에 남는구나. 4. 어떤 삽질을 했는지? 왜? html, css 기본 스타일링에서 시간 너무 오래 잡아먹음. 5. 깨달은 점? 6. 참고링크, 공부내용 https://school.programmers.c..
작성중 [React] useState가 const로 선언되는 이유
https://dudghsx.tistory.com/18 hooks에서 useState가 const로 선언되는 이유 카카오톡 오픈 채팅방에 따르면 요즘의 기업들은 클래스형이 아닌 훅스를 사용한다고 한다. 남들하는건 다 할줄 알아야지.. 그래서 공식 문서를 하나씩 읽어보기 시작했다. ko.reactjs.org/docs/hooks-s dudghsx.tistory.com
[JS]크레인인형뽑기게임
https://school.programmers.co.kr/learn/courses/30/lessons/64061 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 이 문제는 설명이 너무 길어서 링크를 참고해야 한다. 우선 작성을 해보았는데, 여기서는 사용자의 move가 이미 다 주어져서, 생각보다 어렵진 않다. board에 있는 2차원 함수에서 move의 x축에 있는 숫자를 하나씩뽑아서 바구니에 push하고, 바구니에 똑같은 인형 2개가 만나면 2개를 터트리고, 2개를 카운트 하면 된다. 아마 pop쓰라고 일부러 터트리는걸로 한듯.. 최종 답안은 그 터트린..
[JS]완주하지못한 선수
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를 사용해서 해봐야겠는데..
[JS]키패드누르기(프로그래머스)(feat.삼항연산자 사용법)
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 ..
23.06.15 TIL
0. 작성일? 2023년 6.15 수요일 1. 오늘 어떤 일을 했는지? 알고리즘 풀이 큐/스택 민승님 글 수정 테스트 기술매니저님 면담 새로운 과제 받음(리엑트로 투두리스트 만들기, 다크모드쿠현, 미디어쿼리 구현, 상태관리->나중에 useContext까지) 2. 내가 모르는것? 몰랐던 것? 큐.스택 알고리즘 3. 알게된점? 어떤 성장을 이루어냈는지? 새로운 과제 받음. 월요일까지 완료 예정. 4. 어떤 삽질을 했는지? 왜? 5. 깨달은 점? 6. 참고링크, 공부내용 https://kthdev.tistory.com/144 [React] 가상돔 Virtual DOM 브라우저는 크게 초기 렌더링, 업데이트시의 렌더링, 이렇게 2가지의 렌더링을 거친다. 첫번째, 초기 렌더링은 말 그대로 처음 웹사이트를 들어왔..
