전체 글 (115) 썸네일형 리스트형 this - this 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이며 this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있다. 즉, 실행한 주체를 가리키며, 호출되는 방식에 따라 동적으로 결정된다. - this의 여러 case this는 전역 객체로 window를 기본적으로 참조하고 있다. 일반 함수 호출의 경우 this는 window를 참조한다. (호출 주체가 window기 때문에) 화살표 함수 호출의 경우 상위 객체를 참조한다. var obj = { name: 'B', print: function () { var inner1 = function () {console.log(this.name, name)}; inner1(); var inn.. TIL - 2022.04.02 1. 면접 준비 면접을 대비하여 자기소개부터 CS 지식, 자바스크립트 관련 개념, 리액트 관련 개념을 산책하면서 입으로 뱉어봤다. 개발은 오류가 나면 고치면 되지만 그것과 다르게 면접 때의 말은 한번 내뱉으면 끝이기 때문에 잘 못 말하거나 주제에서 벗어난 말을 하게 되면 정말 당황할 것 같다. 아예 스크립트를 외우는 방향으로 가야 될 것 같다. 그리고 기업에 대한 자료도 확인하고 파악하자. 두괄식도 기억하자! 2. 코딩 테스트 문제 풀기 오늘 원티드에서 주관하는 쇼미 더 코드 코딩 테스트를 보았다. 총 세 문제가 나왔고, 내 추측이지만 DP / 그래프 관련 문제 / DP (문자열) 이렇게 나온 것 같고, 결과는 한 문제도 제대로 못 풀었다. 두 번째 문제 같은 경우에는 나름 맞게 풀었다 생각했는데 자꾸 .. TIL - 2022.04.01 1. 면접 준비 면접 스터디를 진행하였다. 인성 / 협업 관련 주제로 면접 스터디를 진행하였고, 다음과 같이 피드백을 받았다. - 확실히 예상치 못한 질문에 대한 준비가 안되어 있다 보니 정돈되지 않은 문장으로 대답하였다. - 위와 같은 문제로 질문에 대한 답이 주제와 벗어난 경우도 있었다. - 면접관이 듣기 거북한 내용이 있을지 생각하며 대답한다. - 두괄식으로 대답할 수 있도록 생각한다. - 어색한 시선처리에 의해 자신감이 부족해 보였다. (비대면 면접의 단점이다. 평소에도 카메라 렌즈만 보면 시선처리가 불안하고 얼어붙는 습관이 있어서 고치려면 많은 연습이 필요할 것 같다.) 두괄식 및 정돈된 문장으로 말할 수 있도록 문장 입에 붙이기, 시선처리에 대한 연습이 많이 필요하다. 2. 코딩 테스트 문제 .. JWT(Json Web Token) - JWT (Json Web Token) 쿠키와 세션의 단점을 보완하기 위해 나온 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰 인증에 필요한 정보들을 Token에 담아 암호화시켜 사용하는 토큰 JWT를 이용하면 유저가 자신의 데이터를 볼 수는 있는데 수정은 서버를 통해서만 할 수 있다 - JWT 구조 위 그림과 같이 header, payload, signature 세 파트로 나뉘어져있고, 각 파트는 . 으로 구분한다. 모두 Base64Url로 인코딩되어 있다. 1. header : 토큰의 타입, 서명 생성에 어떤 알고리즘이 사용되었는지 설정 { "typ" : "JWT", "alg" : "HS512" // HS512 알고리즘이 적용되어 private key를 암호화 } 2. payload :.. TIL - 마치며 사실 저번 주 금요일에 끝이 났지만 지금에서야 남겨 본다. 약 5주 동안 재밌게 보냈다. 그 전에는 Git도 제대로 써먹질 못하고, JavaScript나 React, Redux에 대해서 어설프게( 물론 지금도 많이 부족하지만 ) 알고 있었는데, 확실한 것은 이전보다 훨씬 더 많은 것을 더 알아간 시간이었다. 팀원들과 정신없이 기업 과제들을 하면서 몰입, 성장하는 것이 처음에는 몰랐지만 점점 다음 과제를 만나면서 느껴지게 되었고, 기업 과제가 이기나 내가 이기나 해보자라는 마음으로 아름답지 않은 코드들과 각종 버그들과의 싸움(?)도 그것들을 나름 개선하고, 문제를 해결했을 때, 그 느낌이 정말 좋았다. TIL라고 했는데 자꾸 일기장이 되어가는 모습이 좀 민망하지만 🙄 오늘은 이제 슬슬 코딩 테스트 준비와 .. SOP(Same-Origin Policy), CORS(Cross-Origin Resource Sharing) 1. SOP (Same-Origin Policy) : 동일 출처 정책을 뜻하며, MDN에선 다음과 같이 정의한다. 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식 정리하자면 "같은 출처의 리소스만 공유가 가능하다" 라는 정책이다. - 출처 (Origin) : Protocol, Host, Port의 조합으로 되어있다. ex) https://help-solomon.tistory.com:443/ https = Protocol , help-solomon.tistory.com = Host, 443 = Port 이 중 하나라도 다르면 동일한 출처로 보지 않는다. SOP가 있어서 다른 사이트와의 리소스 공유를 제한하기 때문에 사용자 정보(ex. Log.. TIL - 23 - Keyword 배포 / Netlify / keyframes / Promise.all / 429 Error Github Page로 배포했다가 404 error 두둘겨 맞고 Netlify로 전환했다. proxy, 배포는 진짜 할 때마다 어렵다.. build에 CI= 을 꼭 붙이자 keyframes으로 Animation을 구현하였다. styled-components에서 props를 이용하여 keyframes에 변수로 넣어주는 게 신박했다. const donutMotionAnimation = (color, degree) => keyframes` from{ background: conic-gradient(${color} 0deg, #ebebeb 0deg); } to{ background: conic-gradi.. TIL - 22 - Keyword Data / Event / Json / Canvas / Graph / Donut Chart 기업 과제 중 제공되는 Json file을 import 해서 사용했다. 그냥 import만 하면 끝이라 간단했지만 이걸 사용해도 되는지 의문이다. Data parsing을 효율적으로 하는 로직 짜는 것이 생각보다 힘들다. enter key와 mouse click을 동시해 할 수 있는 input을 구현하였다. if (e.type === "click" || (e.type === "keyup" && e.key === "Enter")) 이렇게 해도 되려나.. input에 onBlur event 때문에 modal에 있는 list onClick event가 발생하지 않았는데, onClick 대신에 onMou.. 이전 1 2 3 4 5 6 7 ··· 15 다음
