-

8.1 ESLint를 활용한 정적 코드 분석8.1.1 ESLint 살펴보기ESLint는 어떻게 코드를 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서로 코드를 구조화한다.2번에서 구조화한 트리 AST를 기준으로 각종 규칙과 대조한다.규칙과 대조했을 때 이를 위반한 코드를 알리거나 수정한다.ESLint는 파서 espree를 사용하여 자바스크립트 코드를 분석한다. AST 트리 예시를 확인하고 싶다면 아래 사이트를 참조해보자.https://astexplorer.net/ no-debugger 규칙Eslint에는 debugger; 선언을 금지한 규칙이 존재한다. 해당 규칙은 다음과 같이 작성되어있다.module.exports = { meta: { type: 'probl..

그동안 회사에서 3개 정도의 굵직 굵직한 프로모션 페이지 개발을 맡게 되었다.프로모션 페이지는 잠시동안만 사용자에게 오픈되는 페이지지만, 다양한 디자인과 애니메이션 기법들을 사용하여 사용자들의 이목을 끌어야하고, 여러 제휴사나 관련 부서와 협업해야 하므로 준비 기간 동안 많은 사람들과 커뮤니케이션 등이 필요하게 된다.프로모션 페이지 개발을 하면서 알게 된 레슨 런드에 대해 정리해보고자 한다. (ᵔ๑ᵕ̳ ᴥ ᵕ̳๑)っ‧⁺.* ೃೀ 프로모션 페이지 개발의 특징1. 로직은 매우 단순하다.다양한 예외 처리나, 오류 케이스 처리가 있는 서비스 개발 프로젝트와는 다르게, 프로모션의 경우 로직이 매우 단순한 편이다. 이벤트 내용을 보여주는 것이 주된 로직이고, 이외의 로직 처리는 이벤트 응모 버튼이나, 응모 내역 조..

빅뱅, 캐플러의 법칙 등 고등학교 때 배웠던 내용들이 새록새록 기억나면서 너무 재미있게 읽었다. 과학이란 당연하다고 생각했던 것을 이론으로 정립하고 원리를 설명하게 해줌으로써 세상을 잘 이해하게 해준다는 점에서 매력적인 것 같다. 이 광활한 우주에서 이렇게 극히 드문 확률로 지구라는 곳에 살고 있는 우리들. 국가를 이루고, 법을 만들고, 책도 만들고, 영화도 만들고, 집도 짓고 이렇게 옹기 종기 살고 있다는 게 어떻게 보면 너무 귀엽고 하찮은 것 같다. ㅋㅋㅋ 나는 로또 확률이 매우 낮다는 걸 알기 때문에 절대 로또를 안 사는 사람인데, 사실 지구에 인간으로 태어나서 이렇게 살고 있다는 걸 생각해보면 로또 당첨 확률은 엄청 높은걸지도 모르겠다는 생각을 했다. 어쨌든 나는 인간으로 태어난 것에 만족하고 있..

2.1 JSX란? JSX는 리액트가 등장하면서 페이스북에서 소개한 새로운 구문이지만, 반드시 리액트에서만 사용하라는 법은 없다. JSX는 XML과 같은 내장형 구문이며, 리액트에 종속적이지 않은 독자적인 문법이다. JSX는 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미있는 자바스크립트 코드로 변환된다. JSX의 설계목적 다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환한다. 2.1.1 JSX의 정의 JSX를 구성하는 가장 기본 요소 JSXOpeningElement: JSXClosingElement: JSXSelfClosingElement: JSXFragment: JSXChildren(optional) JSX 식별자로 가능한 것 $,..

7장 창의적 마인드셋 1. 올바른 창의적 분위기 만들기 아-하 모멘트는 사색과 휴식 중 의식적인 사고에 이어 무의식이 작동하는 순간이다. 즉, 매너리즘에 빠졌을 때 영감을 주는 휴식을 취하는 순간 창의적 마인드셋을 가지게 되면서 창의성을 발휘하게 된다. 우리의 잠재의식 속의 자아는 분별력 있고, 재치와 섬세함을 지니며, 선택하는 방법과 영감을 얻는 방법을 알고 있다. 일이 너무 고될 때에는 약간의 장난을 치는 것으로 다시 기력을 되찾고 아이디어의 흐름을 이어갈 수 있다. 2. 딥 워크의 흐름 시간이 순식간에 흘러가는 듯한 현상 플로(flow)는 깊은 즐거움, 창의성, 삶에 대한 전적인 참여를 유발한다. 명확한 목표를 염두에 둔다. 모든 활동에는 즉시 피드백이 뒤따른다. 도전과 기술 사이에 균형이 있다. ..

==와 ===의 차이 JavaScript에서 ==와 ===는 두 값의 동등성을 비교하는 데 사용되는 연산자입니다. 하지만 이 둘은 다른 방식으로 동작합니다. == (동등 연산자): ==는 값의 동등성을 비교합니다. 하지만 엄격한(strict) 동등성이 아니라 변환된 동등성을 비교합니다. 이것은 필요에 따라 다른 데이터 타입을 변환하여 비교를 수행합니다. 예를 들어, 0 == false는 true를 반환합니다. 이는 JavaScript가 숫자 0을 불리언 false로 변환하여 비교하기 때문입니다. === (일치 연산자): ===는 값의 엄격한(strict) 동등성을 비교합니다. 이것은 값뿐만 아니라 데이터 타입까지 고려하여 비교를 수행합니다. 예를 들어, 0 === false는 false를 반환합니다. 이..

6장 호기심 1. 호기심은 창의력의 원동력 미하이 칙센트미하이가 창의적인 천재들을 인터뷰한 결과, 창의적인 성공을 위한 가장 중요한 두 가지 성격 특성은 호기심과 인내심이다. 호기심은 무언가를 만들려는 동기를 만든다. 그리고 인내심으로 작업을 마무리한다. 2. 커져 가는 호기심과 방랑벽 우리의 잠재력을 최대한 발휘하는 힘은 모두 마음에 달려 있다. 고정된 사고방식 vs 성장 사고방식 - 고정된 사고방식: 자신의 재능과 능력이 이미 정해져 있다는 믿음. 이러한 사고방식을 가진 사람들은 자신에게 부족한 자질을 가진 다른 사람을 부러워하거나, 반대의 경우에는 자질이 부족한 사람들에게 거만해지고 경멸한다. - 성장 사고방식: 자신의 재능과 능력이 시간이 지남에 따라서 배양하고 성장할 수 있다는 믿음. 코딩을 절..

비루함, 자긍심, 경탄, 경쟁심, 야심, …. 정말 다양한 48가지의 감정을 소설의 한 구절과 철학자 스피노자의 말을 빌려 설명해준다. 철학자 스피노자는 나 자신을 완전하게 해주는 감정을 기쁨의 감정, 반대로 나를 불완전하게 해주는 슬픔의 감정으로 분류했다. 이 때, 제 3자의 평가 등이 개입되면 안된다. 따라서 제 3자에게 인정받으려 하는 명예욕과 같은 야심은 기쁨의 감정이 될 수 없다. 내가 이 사람을 미워하는 걸까? 감정에 휘감겨 힘들어하고 있다면 먼저 이 감정이 ‘기쁨’에 해당하는 지, ‘슬픔’에 해당하는 지 구분해보고 어떤 감정인지 파악해보자. 내가 느끼는 감정을 먼저 파악하는 것만으로도 해결에 큰 도움이 될 수 있으니. 소설을 읽는 것 만큼 내가 다른 사람의 입장을 100% 몰입하여 이해하는 ..

회상에 근거한 불행감을 갖지 마라. 온갖 회상을 하면서 과거에 대해서 생각하고, 아 내가 그때 왜 그랬을까 걱정하는 INFP인 나에게 제일 와닿는 말이었다. 중요한 것은 지나간 일이 아니라 현재라는 것. 과거에 행복했을 때에는 왜 그 때의 내가 행복하다는 사실을 잘 몰랐을까? 현재의 내가 행복하다는 사실에 무뎌지지 말고 현재 내가 하는 일에 충실하게 하는 것이 가장 중요하다. 그러기 위해서 하루하루 감사하고 내 자신을 돌아보는 시간을 가지고 싶다. 질투는 자연스러운 감정이다. 사람은 사회적 동물이기 때문에 그런 것 같다. 한국이라서 조금 더 남의 눈치를 보는 것 같기도 하다. 외모, 재력, 인간관계, 등등 여러 면에 대해서 끊임없이 비교하면서 왜 내가 더 못난 사람인가 좌절하기도 한다. 나도 SNS를 보..

5장 비판적 사고 1. 창의적인 비판적 사고 창의적 사고와 비판적 사고는 모두 창의적 노동의 결실을 거두기 위한 필수 조건이다. 창의적 사고는 독창적인 아이디어를 창출하고, 비판적 사고는 아이디어를 검증하거나 피드백을 요청하고 올바르게 해석하며 많은 인지적 편견을 극복하게 해준다. 2. 창의적인 프로세스 창의적인 프로세스는 총 5단계로 설명 가능하다. 참여: 창의적인 결과물을 위해 오랜 기간에 걸친 준비 작업 배양: 참여하기를 잠시 멈춘 채 거리를 두고 프로세스를 중단하는 기간. 무의식적으로 통찰의 속도를 높인다. 조명: 참여 중 번뜩이며 떠올리는 통찰력을 발견한 순간 검증: 그만한 가치가 있는 지 확인하고 그렇지 않다면 다시 시작한다. 발표/수용: 사회적으로 발표하고 수락되어야 진정으로 창의적이라고 할..