IT,Programming 22

리엑트에서 카카오톡 API 공유 시 에러발생.(Helmet, undefined)

1. Helmet 사용 시 에러 Helmet을 다운로드 받아서 사용하다가 갑자기 아래와 같은 에러가 발생했다. Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. https://github.com/nfl/react-helmet/issues/623 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. · Issue #623 · Do you want to request a feature or report a bug? Wh..

IT,Programming/TIL 2022.08.05

리엑트에서 카카오톡 메세지 공유 API 사용 방법

1. 카카오톡 메세지 공유 API 사용 방법 카카오톡 메세지 공유 API는 쉽게 자바스크립트를 보고 다운로드 받을 수 있다. 아래 유튜브를 참고하면 쉽게 따라할 수 있다. https://www.youtube.com/watch?v=KttKrcCc6bU 문제는 리엑트에서 어떻게 적용하는가이다. 리엑트에 적용할때는 주의할 점이 있다. 2. 리엑트에 적용하기 먼저 카카오 파일을 하나 만들어준다. 나는 React + TypeScript 를 사용하기 때문에 확장자가 tsx이다. 하지만 안에 들어가는 내용은 다른 파일 확장자라도 상관없다. 참고로 카카오톡 공유 API의 이미지는 URL만 가능하고 URI는 불가능하다. https://devtalk.kakao.com/t/url/713 [카카오링크] 전송할 이미지가 url..

IT,Programming/TIL 2022.08.05

프론트엔드 개발자가 되기 전에 알았으면 좋았을 20가지

* 본 내용은 태곤님의 강의 내용을 필기 한 것입니다* 개발자의 역량이란 무엇일까요? 보통 아래와 같습니다. 개발자의 능력 = Hard Skills(30~50%) + Soft Skills(50~70%) 즉, 프로그래밍 능력 + 커뮤니케이션, 협업, 글쓰기,커리어관리 등 프로그래밍 외적 능력이 개발자의 역량입니다. 그래서 오늘의 주제... 그렇다면 Soft Skills을 어떻게 기를까? 1. 테스트에 용이한 코드를 작성하자 a. 테스팅 프레임워크를 활용 cypress / playwright 등 사용할 수 있다. b. 최대한 코드를 쪼개서 작성 코드를 기능별로 쪼개서 작성하면 문제가 발생하는 코드를 발견하기 쉽다. 2. 읽기 쉬운 코드를 작성하자 a. 코드에 배려심을 담느냐의 문제 회사에서 동료들과 협업을 ..

IT,Programming/TIL 2022.06.17

13일차_속성 선택자(Selector), CSS Combinator, Flex

속성 선택자(Selector) 이제 선택자 심화부분을 배워보자! 1. emmet에서 사용했던 방법(p[one=two]) 처럼 Class의 특징을 가지고 선택자를 지정할 수 있다! 예시: */a태그의 url을 직접 지정하여 select/* a[href="http://www.paullab.co.kr"] { font-size: 48px; } */class명을 직접 지정하여 select(물론 이렇게 쓸 일은 없다. 보통은 ".클래스명" 을 사용.)/* p[class="paullab"] { font-size: 48px; } CSS Combinator 자세한 내용은 아래 참고 https://www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference W3S..

IT,Programming/TIL 2022.04.13

TIL_네트워크 7계층

정보처리 기사를 준비하던 중 네트워크 부분이 너무 어려웠다. 그러던 중 유튜브 배민테크에서 한 영상을 발견했다. 네트워크 7계층(OSI 7 Layer) 한 방에 이해하기 https://www.youtube.com/watch?v=1pfTxp25MA8&ab_channel=%EC%9A%B0%EC%95%84%ED%95%9CTech 통신이 어떻게 이루어지는지 갈피가 잡히지 않았는데, 전자기파가 어떤 형태로 전달이 되며, 각 계층마다 하드웨어/소프트웨어 적으로 어떻게 구현이 되었는지 아주 이해하기 쉽게 설명해준다. 거의 떠먹여주는 느낌이다. 글로 자세히 정리하는 것 보다 이 영상을 한 번 시청하길 강력히 추천한다!

IT,Programming/TIL 2022.03.01

프로그래머스 코딩테스트 JavaScript 풀이 _직사각형 별찍기

다른 사람 풀이 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); console.log((('*').repeat(a)+`\n`).repeat(b)) });​ 나의 풀이 process.stdin.setEncoding('utf8'); process.stdin.on('data', data => { const n = data.split(" "); const a = Number(n[0]), b = Number(n[1]); let answer = "" for(i=0 ; i

프로그래머스 코딩테스트 JavaScript 풀이 _문자열 내림차순으로 배치하기

나의 풀이 function solution(s) { return Array.from(s).sort().reverse().join(''); } 다른 사람 풀이 function solution(s) { return s .split("") .sort() .reverse() .join(""); } TIL 1. string을 array로 바꿔주는 방법과 array를 다시 string으로 바꿔주는 방법. - String To Array : (a) .split("") , (b) Array.from() - Array to String : (a)with comma : .toString() (b)without comma : .join() 2. 문자열 배열을 내림차순과 오름차순으로 바꾸는 방법 - 내림차순 : .sort()..

프로그래머스 코딩테스트 JavaScript 풀이 _키패드 누르기

다른 사람 풀이 function solution(numbers, hand){ const keypad = { 1:[0,3], 2:[1,3], 3:[2,3], 4:[0,2], 5:[1,2], 6:[2,2], 7:[0,1], 8:[1,1], 9:[2,1], '*':[0,0], 0:[1,0], '#':[2,0], } const len = numbers.length; let answer = ''; let leftFinger = '*'; let rightFinger = '#'; for (let i = 0; i < len; i++) { let num = numbers[i]; if (num % 3 === 1) { answer += "L"; leftFinger = num; } else if (num !== 0 && nu..