1. FOUC(Flash of Unstyled Content)란? FOUC란 의 약자로, 페이지가 로드될 때 스타일이 적용되지 않은 상태의 콘텐츠가 잠깐 깜빡이는 현상을 뜻합니다. 주로 서버 사이드 렌더링(SSR) 환경에서 발생하며, HTML이 먼저 렌더링되고 이후에 CSS가 로드되기 때문에 발생합니다. 예시: 로딩 애니메이션이 있는 페이지가 있을 때, FOUC가 발생하면 스타일이 적용되지 않은 HTML이 잠깐 노출될 수 있습니다. 이는 사용자 경험에 좋지 않은 영향을 줄 수 있어, 초기 스타일을 잘 적용해 깜빡임을 최소화하는 것이 중요합니다. 2. Emotion 사용 시 FOUC 발생 원인 Emotion과 같은 CSS-in-JS 라이브러리는 SSR 환경에서 자주 FOUC 문제를 일으킵니다. SSR에서는 서버가 HTML을 먼저 렌더링한 후, 클라이언트에서 JavaScript로 CSS를 동적으로 로드합니다. 이 때문에 초기 렌더링 시 클라이언트와 서버 간의 스타일 불일치가 발생하여 …

브라우저 렌더링 과정 브라우저 렌더링 과정은 웹페이지를 표시하는 데 필요한 리소스를 다운로드하고 화면에 표시하는 과정을 크게 4단계로 나눌 수 있습니다. DOM + CSSOM 생성 DOM (Document Object Model): HTML 파일을 분석하여 브라우저가 이해할 수 있는 DOM 트리를 만듭니다. 각 HTML 요소가 노드로 변환되어 트리 구조를 형성합니다. CSSOM (CSS Object Model): CSS 파일을 분석하여 CSSOM 트리를 생성합니다. 이 트리는 CSS 규칙을 이해하고 각 DOM 요소에 스타일을 적용할 수 있도록 도와줍니다. Layout DOM과 CSSOM 트리를 조합하여 렌더 트리를 생성합니다. 각 요소의 위치와 크기를 계산하고 화면에 요소들을 배치합니다. 이 과정을 통해 브라우저는 각 요소가 화면에서 어디에 위치할지 결정합니다. Paint 레이아웃 과정에서 배치된 요소에 색을 칠하고, 그림자나 테두리 같은 시각적 스타일을 적용합니다. 이 단계에서 …

글또 10기를 시작하면서 매번 바쁘다는 핑계로 지난 기수에서는 글또 활동을 충분히 하지 못했다. 이번 기수는 마지막이라는 생각에, 그동안 아쉬웠던 부분을 채우고, 적극적으로 참여하고자 한다. 특히 이번 글또를 통해 글쓰는 즐거움을 찾고 싶다. 글을 자연스럽게 표현하는 것이 개발뿐만 아니라 삶에도 큰 도움이 될 것이라고 믿기 때문이다. 글또 10기가 끝났을 때 나의 모습 1. 글쓰기 매력을 느낀다. 개인적으로 좋아하는 개발자 분들이 글쓰기의 중요성을 강조하는 것을 보고, 나 역시 공감했다. 단순한 의무감이 아니라 글쓰기의 매력을 발견하고, 이를 통해 개발뿐만 아니라 삶 전반에도 긍정적인 변화를 줄 수 있다고 생각한다. 그리고 언젠가는 많은 사람들에게 좋은 영향을 주는 글을 써보고 싶다. 2. 개발관련 글쓰기를 2주안에 최소 1번 작성한다. 솔직히 말하면, 개발과 관련된 글을 쓰는 것이 어렵게 느껴진다. ‘혹시라도 내가 쓴 글에 잘못된 내용이 있으면 어떡하지?‘라는 두려움때문에 더욱 …

🌈 1. 읽은 계기 우연히 본 유튜브를 통해 작가님을 알게 되었다. 말씀도 잘하시고 무엇보다 자수성가하여 지금의 자리까지 어떠한 가치관과 행동을 통해 세부적으로 말씀해주시는 부분이 인상깊었었다. 그러다가 우연히 작가님 책을 발견하게 되었고 작가님의 생각을 조금 더 깊게 알고 싶어 책을 구매하게 되었다. 💡 2. 인상깊은 내용 개인적으로 인상깊은 내용들이 많았다. 특히 무의식에 대해 많은 이야기를 해주셨는데, 곰곰히 생각해보면 나도 모르게 한 행동들이 무의식에 내재된 부분이 발현되어 나타난 행동임을 알게 되었다. 1장. 가난했지만 꿈을 잃지 않았던 이유 관념이 바뀌어야 내가 사는 세상이 변하게 된다. 무의식의 의도와 당신의 의도가 일치할 때, 무의식은 공명이 되어 현실에 드러난다. 마음이 나를 통해 세상 이미지로 드러나고 있다. 그게 우리 세상이다. 무의식에 있는 자신의 이미지를 바꿔라.(p.40-41) 가난한 현실 속에 머물러 있다면 그 이유는 하나다. 무의식이 가난으로 채색되었기…

✅ Hooks API 🌈 결론 Hook이 왜 생겨났는지 알고 쓰자 ✍️ 내용 왜 Hooks API가 생겨났나? HOC 컴포넌트 로직을 재 사용하기 위한 React 고급 기술 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴 Render Props React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 기술 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신, React 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용 SFC 정리 Hook 사용 방법 ⭐️ 요약 Hook 생긴 이유와 그 과정을 알 때, 왜 Hook을 사용하는지 알 수 있음 ✅ useEffect() 기명함수와 함께 사용하기 🌈 결론 에러 파악할 때, 기명함수 사용하면 파악하기 쉬움 ✍️ 내용 안전하게 사용하기 에러 파악 cf) console.log, report, monitoring, React Devtools 기명함수로 넘기면 로그에 …

✅ JSX에서의 공백처리 🌈 결론 ✅ 0는 JSX에서 유효한 값 🌈 결론 ✍️ 내용 참과 거짓으로 판단하는 것이 아니라, 렌더링 유무로 판단 JSX에서는 어떤 값은 유효한 값인지, 렌더링 하는 값인지 확인 렌더링을 조건부로 할 때에는 명확하게 조건을 주고 함 ⭐️ 요약 JSX에서 렌더링되는 값과 아닌 값을 구분하지 ✅ List 내부에서 Key 🌈 결론 ✍️ 내용 List 컴포넌트를 만들 때, key props를 넣어야 함. 이 때, key는 고유한 값이여야 함 단, 동적으로 생성되는 즉, 렌더링마다 생성되는 key를 넣으면 안됨 ⭐️ 요약 List 컴포넌트를 작성할 때, 고유한 key를 props로 전달하자. ✅ 안전하게 Raw HTML 다루기 🌈 결론 React 에서 HTML과 악성 스크립트를 심을 수 있는 경우를 아래의 방법으로 대처하자 https://github.com/cure53/DOMPurify HTML Sanitizer API eslint-plugin-risxss ✍️ 내용 안전…

✅ Component란? 🌈 결론 컴포넌트가 무엇인지 정확하게 인지하고 사용해야 함 ✍️ 내용 공식 문서에서 Component 의미 컴포넌트 의미(옛날) 스스로 상태를 관리하는 캡슐화된 컴포넌트 그리고 이를 조합해 복잡한 UI를 만듦 컴포넌트 로직은 템플릿이 아닌 JS로 작성됨 따라서 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과 별개로 상태를 관리 할 수 있음 컴포넌트 의미(New) 기존에는 웹 페이지를 만들 때 웹 개발자가 컨텐츠를 마크업한 다음 JS를 뿌려서 상호작용을 추가 함. 이는 웹에서 상호작용이 중요했던 시절에 효과적이었음 이제는 많은 사이트와 모든 앱에서 상호작용을 기대함 React는 동일한 기술을 사용하면서도 상호작용을 우선시함 React 컴포넌트는 마크업으로 뿌릴 수 있는 JS 함수 임 참고 https://react.dev/learn/thinking-in-react Component란 사전적 의미: 구성하는, 구성하고 있는, 성분의 / 구성 요…

✅ 불필요한 PROPS 복사 및 연산 🌈 결론 ✍️ 내용 로 전달 받은 값을 에서 셋팅하는 것이 아닌, 바로 사용하는 것이 좋음 아래와 같이 로 전달 받은 값을 가지고 무거운 연산을 진행하면, 렌더링할 때마다 해당 컴포넌트가 호출되어서 연산을 지속적으로 하기 때문에 비효율적임 → 그래서 애초에 로 전달하기 전에 이미 무거운 연산을 한 결과 값을 로 전달을 해야 함, 아니면 를 사용 ⭐️ 요약 불필요한 연산을 줄이는 방법 바로 사용하기( 담기 X, 무거운 연산의 로 사용 X) 연산된 값을 로 넘기기 로 연산 최적화하기 ✅ Curly Braces 🌈 결론 중괄호(Curly Braces) 사용법 ✍️ 내용 Curly Brace 사용 O 값이 계산되는 경우(논리적인 숫자, Boolean, 객체, 배열, 함수 표현식) 객체를 넣어야 하는 경우 Curly Brace 사용 X 문자열일 경우 ⭐️ 요약 String일 경우 Curly Brace 사용하지 않기 ✅ Props 축약하기 🌈 결론 ✍️ 내용 S…

회고 1. 업무 회고 PM분들과 업무 우선순위를 정할 때, 정확하게 내가 하는 업무가 회사에 어떤 영향을 주는지 파악하고 업무를 받아서 진행해야 함.(즉, 적극적으로 업무 이해도를 높이는 노력을 해야 함) 회의를 참여하기 앞서 이 회의 참여가 나에게 꼭 필요한지 스스로 질문을 할 필요가 있음. 만약 구두로 혹은 문서로 전달 받을 내용으로 끝날 부분이면 전달 받고 회의를 참여하지 않는게 서로 업무 효율성을 높이는 방향임.(질문을 통해 논의를 해야 할 것이 없다고 생각되면 굳이 들어갈 필요가 없음.) 에서 테스트넷 지원하지 않아 Github Discussions에 올리는 좋은 경험함. 업무를 진행하는데 있어서 감정적인 부분이 올라올 때 이 부분을 밖으로 드러내지 말자. 즉, 감정이 태도가 되지 않도록 스스로 마음을 잘 다스리자. 또한 업무하는 시간이 나의 인생에 어떠한 영향을 주고 있는지 더 나아가 앞으로 어떤 사람이 되고 싶은지를 항상 생각하면서 시간을 보내자.(나의 시간은 정말 …

🌈 1. 읽은 계기 우연히 링크드인에 올라온 피드를 보고 관심이 생겨 책을 주문하게 되었다. 책을 주문하고 나서야 저자분이 ‘미움받을 용기’의 저자라는 사실을 알게 되었다. ‘미움받을 용기’를 과거에 읽었을 때, 많은 위로와 힘이 되었던 기억이 있어 이 책을 읽고 싶은 기대감이 많이 올라갔다. 사실 요즘 일과 인생에 대한 생각을 스스로 하곤 하는데, 쉽게 정리가 되지 않아서 도움을 받고자 책을 구매한 이유가 크다. 💡 2. 인상깊은 내용 책을 읽으면서 형광펜으로 밑줄을 긋고 여러번 곱씹은 문장을 아래와 같이 남겨 본다. p.34 ‘자신이 가치 있다고 느끼기 위해 일한다. 인간은 무엇을 위해 일하는가? 일함으로써 인간은 자신의 능력을 타자를 위해 쓰고 타자에게 공헌한다. 타자에게 공헌하면 공헌감을 느끼고, 그럼으로써 자신이 가치 있다고 느낄 수 있다. 따라서 일한다는 것은 자신을 위한 일이기도 한다.’ p.63 ‘일이란 진심으로 사랑하고 존경하는 사람에게 보여 주고 기쁨을 주기 위해…

회고 1. 업무 회고 질문을 할 때, 스스로 정확하게 무엇을 모르는지 정리를 해보고 혹시나 내가 찾을 수 있는 것들이라면 찾고 질문을 하자.(나의 시간이 중요한 만큼, 팀원분들의 시간도 중요하다.) 업무를 하다가 감정적으로 무언가가 올라올 때, 밖으로 표현하지 말자.(감정이 태도가 되지 않도록 항상 주의하자) 로 파일을 만들어서 특정 컴포넌트를 찾고 싶을 경우 VSCode에서 힘들다. 그렇기 때문에 파일 이름을 보다는 조금 더 명시적인 이름을 사용하는게 좋다. Image 성능 최적화 방법 이미지 사이즈 명시(width, height) next.js 프레임워크 사용시, Image 컴포넌트 사용 범위가 큰 작업을 할 때에는 미리 팀원분과 논의를 해서 PR을 들어가도 될지 확인을 한 뒤에 진행을 해야 함.(빠르게도 중요하지만 정확하게 파악 후 진행하는 것도 중요) 2. 일상 회고 다시 한번 체력관리가 중요함을 느낀다. 참고 Next.js 이미지 최적화 참고 글 1 웹 이미지 최적화 방법…

✅ 상태 소개 일단 상태부터 만들고 보는 초보에서 벗어나기 1. 일단 상태가 무엇일까 점점 어려워지는 상태관리가 문제일까? 상태를 대하는 태도가 문제일까? 상태 종류(언제 만드는지 고민, 왜 만드는지 고민, 왜 필요한지 고민) 컴포넌트 상태 전역 상태 서버 상태 상태 관리 상태 변경 상태 최적화 렌더링 최적화 불변성 상태 관리자 2. 거꾸로 생각하기 우리는 상태관리를 왜 하고 있는 것일까? 상태 관리는 목적인가? 수단인가? 상태 관리를 위해 앱을 개발하는 것일까? 앱을 개발하는데 상태는 왜 관리하는 것일까? 3. 일단 상태가 무엇인가? 상태 = State 사물, 현상이 놓여 있는 모양이나 형편 ex) 무방비 상태, 정신 상태, 건강 상태, 이미 기차가 끊긴 상태 ✅ 올바른 초기값 설정 올바른 초기값 설정은 왜 중요할까? 렌더링 에러 처리 가능 초기값이 없을 경우, 해당 값을 통해서 계산하는 로직에서 에러 발생을 방지 할 수 있음 초기값 초기에 렌더링 되는 값 가장 먼저 렌더링 될 …

회고 1. 업무 회고 코드의 효율성을 높인다는 이야기는 코드 관리 용이, 가독성 증가, 중복코드 제거 등의 장점이 있을 때 코드의 효율성이 좋아졌다고 이야기 할 수 있음 블록체인 사이드에서 특정 NFT를 소각한다는 암묵적인 해쉬 값은 0x로 시작하는 의미없는 값을 셋팅하는 것 Axios onResponse Interceptor: 요청이 성공적으로 완료되었을 때 실행 됨. 즉, 서버가 응답을 성공적으로 반환하고, HTTP 상태 코드가 2xx 범위에 속하는 경우에 호출됨. Axios onResponseError Interceptor: onResponseError interceptor는 요청이 실패했을 때 실행됨. 예를 들어, 서버가 4xx 또는 5xx 범위의 HTTP 상태 코드를 반환한 경우임.특히, 401(Unauthorized) 상태 코드와 같이 인증 관련 문제가 발생했을 때, 사용자를 로그인 페이지로 리디렉션하거나, 토큰을 재발급 받는 등의 처리를 여기서 수행할 수 있음. BE에…

🌈 1. 읽은 계기 먼저 너무나도 유명한 ‘데일 카네기’의 책이라는 것에 끌렸고, 워렌 버핏이 이 책을 통해 많은 배움을 얻었다고 해서 더 끌렸다. 그리고 내가 좋아하는 상상스퀘어에서 출간한 책이여서 더 기대가 되었다. ‘인간 관계’라는 것이 추상적이면서도 많은 명언들을 보면 빠지지 않고 등장하는 단어임에도 살면서 깊게 들여다 보지 않았던 것 같다. 그래서 이번 기회에 ‘인간 관계’에 대한 배경지식을 넓히고 더 나아가 책 내용 중 하나라도 실천해보고 싶어 책을 읽게 되었다. 💡 2. 인상깊은 내용 사실 책을 읽으면서 너무나도 당연한 내용들이 많았다. 하지만 그 내용들을 실제로 실천한 사람들의 사례를 읽을 때마다 가장 쉬운 것이 가장 어렵구나 생각을 많이 하게 되었다. 그 중에서 인상깊은 문장들을 남겨 본다. 남을 비난하지 말자. 남을 비난하기 전에 그들의 입장을 이해하려고 노력하고 들이 왜, 하필 그러한 행동을 취했을까라고 깊이 생각해보자. 상대방의 입장에서 사물을 보자. 세ㅇ의 …

✅ 캐시 기본 동작 캐시가 없을 때 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 함 인터넷 네트워크는 매우 느리고 비싸다. 브라우저 로딩 속도가 느리다. 느린 사용자 경험 캐시 적용 캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다. 비싼 네트워크 사용량을 줄일 수 있다. 브라우저 로딩 속도가 매우 빠르다. 빠른 사용자 경험 캐시 시간 초과 캐시 유효시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신한다. 이때 다시 네트워크 다운로드가 발생한다. ✅ 검증 헤더와 조건부 요청1 캐시 시간 초과 캐시 유효 시간이 초과해서 서버에 다시 요청하면 다음 2가지 상황이 나타난다. 서버에서 기존 데이터를 변경함 서버에서 기존 데이터를 변경하지 않음 캐시 만료 후에도 서버에서 데이터를 변경하지 않음 생각해보면 데이터를 전송하는 대신에 저장해 두었던 캐시를 재 사용 할 수 있다. 단 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인…

✅ HTTP 협상 협상(클라이언트가 선호하는 표현 요청) : 클라이언트가 선호하는 미디어 타입 전달 : 클라이언트가 선호하는 문자 인코딩 : 클라이언트가 선호하는 압축 인코딩 : 클라이언트가 선호하는 자연 언어 —> 협상 헤더는 요청시에만 사용 협상과 우선순위 1 Quality Values(q) 값 사용 0 ~ 1 : 클수록 높은 우선순위 생략 하면 1 Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7 우선 1) ko-KR;q=1(q생략) 우선 2) ko;q=0.9 우선 3) en-US;q=0.8 우선 4) en:q=9.7 협상과 우선순위 2 구체적인 것이 우선 함. Accept: 우선 1) text/plain;format=flowed 우선 2) text/plain 우선 3) 우선 4) 협상과 우선순위 3 구체적인 것을 기준으로 미디어 타입을 맞춤 Accept: , text/html;q=0.7, text/html;level=1, t…

회고 1. 업무 회고 HTTP Status Code: 서버가 요청을 처리할 준비가 되지 않은 것 쿠버네티스에서 Replica를 늘린다는 의미: 동일한 설정을 가진 Pod의 인스턴스를 여러 개 운영하여 애플리케이션의 가용성을 높이고, 부하 분산을 통해 시스템의 안정성을 강화하는 전략 아무리 조급한 상황이라고, 해당 상황을 명확하게 이해하고 처리를 해야 함. PM분들과 일정을 조율할 때, 여전히 개발공수 일정을 명확하게 이야기하는게 너무나 어려운 것 같음. 결국 이 부분은 개발 경험을 통해 극복해야 한다고 생각함. 아주 사소한의 실수로 비즈니스에 많은 영향을 줄 수 있다는 사실을 간접적으로 경험하게 됨. 그래서 항상 업무 및 행동 하기 전 에 ‘기록’하는 습관을 의식적으로 연습하자. 업무를 하는데 있어 감정보다는 상황을 해결하는데 우선을 두고, 그 후에 개인적인 회고나 동료들과 대화를 통해 풀어가는 것이 좋은 것 같다는 생각을 해봄. Cluster 정의 여러 대의 컴퓨터 또는 서버가…

✅ File Input 다루는 법 리액트 앱에서 다루기 어려운 것 중 하나가 바로 form. form 안의 input 값의 상태를 일일히 관리해주어야 하고, 각각 validation까지 해준다면 더욱 복잡해짐 React Hook Form을 통해서 한번에 form 안의 모든 input 값들을 관리할 수 있음. 그러나 file 타입의 input 값을 가져오는 일은 쉽지 않음. | 파일 타입의 인풋은 애플리케이션 계층에서 관리가 되어야 합니다. 파일 선택을 취소할 수도 있고 FileList 객체도 있기 때문입니다. (출처: react-hook-form 공식 문서) 위와 같은 이유로 react-hook-form을 사용한 다른 input들과 같은 방식으로 file input을 작성할 수 없었음 그리고 아래 이유로 value와 onChange 등을 이용하여 file input에 들어온 값을 바로 가져오기도 힘듦 | React에서 은 프로그래밍적으로 값을 설정 할 수 없고 사용자만이 값을 설…

회고 1. 업무 회고 Nullish Coalescing Operator ()와 Logical OR Operator () ?? 연산자는 왼쪽 피연산자가 null 또는 undefined인 경우에만 오른쪽 피연산자를 사용 || 연산자는 왼쪽 피연산자가 false, 0, ”, null, undefined, NaN과 같은 falsy 값일 때 오른쪽 피연산자를 사용 API를 통해서 데이터를 가져올 때, 에 대한 처리를 사용자 관점에서 고려하자. 예를 들어서 20000 값을 주었을 때, 사용자 입장에서는 20초동안 API의 호출에 대한 응답값이 없을 경우 사용자는 데이터가 오지 안왔기 때문에 로딩 애니메이션을 보고 있어야 한다. 단순히 FE에서 API의 성능이 안 좋아, timeout 값을 20000으로 수정해서 처리하는 것은 UX관점에서는 완전한 해결을 한 것이 아니다. 그래서 항상 유저 관점에서 개발을 할 수 있도록 노력하자. PM, PD로 부터 전달받은 유저플로우 혹은 디자인 시안을 보고…

✅ HTTP/1.1 지속 연결(Persistent Connections): 하나의 TCP 연결을 통해 여러 HTTP 요청과 응답을 처리할 수 있습니다. 청크 전송(Chunked Transfer): 데이터를 청크 단위로 전송하여 동적 콘텐츠 전송을 용이하게 합니다. 캐시 제어(Cache Control): 세밀한 캐싱 옵션을 제공하여 웹 성능을 개선합니다. 에러 처리 개선: 다양한 HTTP 상태 코드를 통해 더 명확한 에러 응답을 제공합니다. HTTP/1.1의 지속 연결과 네트워크 효율성 HTTP/1.1에서의 지속 연결 기능은 웹 성능과 효율성을 크게 향상시키는 역할을 합니다. 연결 오버헤드 감소: 각 요청마다 새로운 연결을 수립하는 대신, 하나의 연결을 재사용하여 시간과 자원을 절약합니다. 네트워크 자원의 효율적 사용: 하나의 연결을 통해 여러 요청과 응답을 처리함으로써 네트워크 자원을 효율적으로 활용합니다. TCP 연결의 성능 향상: 지속적인 연결을 통해 TCP 연결이 시간이 지남…

회고 1. 업무 회고 new FileReader를 통해서 업로드한 이미지를 Preview로 사용자에게 보여줄 수 있음. 의사소통을 잘 하기 위해서는 현 상황에 대해 정확하게 이해를 바탕으로 의사소통을 해야 한다. 그래야 다른 팀원분들에게 혼란을 주지 않을 수 있다. 또한 빠르게 일을 마무리할려고 이해가 되지 않는데, 무조건적으로 책임을 짓는 행위도 조심해야 한다. 네트워크 SSH, HTTP, HTTPS 정리 SSH (Secure Shell) 목적: 원격으로 서버나 다른 컴퓨터에 안전하게 접속하고, 명령을 실행하기 위한 프로토콜 특징: 암호화를 사용하여 네트워크 상의 데이터를 보호. 이를 통해 사용자 인증 정보 및 전송되는 데이터가 안전하게 유지됨 사용 예: 서버 관리, 파일 전송, 네트워크 서비스 등에 사용 HTTP (Hypertext Transfer Protocol) 목적: 웹 서버와 클라이언트 간에 문서를 교환하기 위한 프로토콜 특징: 텍스트, 이미지, 비디오 등 다양한 형태의…

✅ Webpack 여러 개의 entry point로 의존성 그래프를 빌드하여, 각 모듈을 하나 이상의 모듈로 합침. JS 이외 파일(CSS, 애셋 파일 등) 처리 시 loader 필요 parcel, rollup보다 code splitting 안전성 높음 webpack-dev-server 지원 (live-reload 지원) 가장 역사가 깊으며, 레퍼런스가 많고 안정적이다 tree-shaking을 ES6 모듈에서만 지원하기 때문에 SideEffects 항목 별도 기재 필요 { sideEffects: false } 를 표시하여 사용하지 않는 export는 제거해도 괜찮음을 webpack에게 알려줌 즉 side effect가 발생해도, 해당 구문을 사용하지 않는다면 제거함 많은 서드파티를 필요로 하는 복잡한 애플리케이션 임 ✅ Parcel zero-configuration 빠른 빌드 속도 parcel의 JS 컴파일러, CSS transformer, sourcemap은 성능을 위해 Rust…

✅ Static Pages vs Dynamic Pages Static Pages Web Server는 파일 경로 이름을 받아 경로와 일치하는 파일 컨텐츠를 반환함. 이때 항상 동일한 페이지를 반환하게 됨. ex) image, html, css, javascript 파일과 같이 컴퓨터에 저장되어 있는 파일들 Dynamic Pages Web Server에 의해서 실행되는 프로그램을 통해서 만들어진 결과물로, 인자의 내용에 맞게 동적인 컨텐츠를 반환함 ✅ Web Server vs WAS 웹 서버는 소프트웨어와 하드웨어로 구분됨 웹 서버는 HTTP 프로토콜을 기반으로 클라이언트(웹 브라우저 또는 웹 크롤러)의 요청을 서비스하는 기능을 담당함. 요청에 따라 아래의 두 가지 기능 중 적절하게 선택하여 수행함 정적인 컨텐츠 제공: WAS를 거치지 않고 바로 자원을 제공함 동적인 컨텐츠 제공을 위한 요청 전달: 클라이언트의 요청(Request)을 WAS에 보내고, WAS가 처리한 결과를 클라이언…

회고 1. 업무 회고 개인적으로 내가 설정한 일정을 지켰을 때, 기분이 매우 좋았다. FE개발자로써, 스스로 이 분야에 대해 호기심을 가지지 않았다는 사실을 알게 되어, 앞으로 근본적인 질문부터 시작을 하면서(ex. ‘왜 React가 Vue보다 많은 사람들이 사용하고 있지?, React, Vue, Anglur의 차이점과 각 프레임워크의 장단점은 무엇이지?’ 등) FE의 분야에 대해 흥미와 호기심을 의식적으로 갖는 연습을 해야 겠다. 위 내용과 마찬가지로 평상시에도 ‘왜?‘라는 질문을 던지면서 대답하는 연습을 해야 겠다.(사실 ‘흥미’가 생기지 않는다고 그냥 넘겼던 것 같은데, 적어도 내가 FE개발을 하면서 돈을 번다라면 알아야 할 것은 정확하게 이해하고 알아야 겠다는 생각을 하게되었다.) 단순히 ‘React가 많이 사용하니깐 이것만 잘해야지’ 라는 생각을 하는 것 자체가 나의 가능성을 막는 생각이다. 내가 일하고 있는 회사가 사용중인 서비스에 대해 관심을 가지면서 어떤 기능때문에 …

✅ webpack dev prod config 분리 development와 production의 빌드 목표는 서로 다름. development에서는 강력한 소스 매핑, localhost 서버에서는 라이브 리로딩이나 HMR(Hot Module Replacement) 기능을 원함. production의 목표는 로드 시간을 줄이기 위해 번들 최소화, 가벼운 소스맵 및 에셋 최적화에 초점을 맞춰야 함. 공식 문서에서는 webpack 설정을 분리하여 작성하는 것을 권장하고 있음 dev와 prod에서 공통으로 사용하는 설정들은 에 작성하고, webpack-merge를 사용하여 common의 설정 내용을 dev와 prod에서 확장하여 사용할 수 있음 ✅ babel/preset-env의 target browserslist 설정 앱을 만들 때 지원할 브라우저를 명시할 수 있음. ES6와 같은 최신 자바스크립트 문법을 사용할 때 browserslist를 명시해 주면, 트랜스파일러나 모듈 번들러가 현…

회고 1. 업무 회고 팀 리더분께서 퇴사하셔서 업무 인수인계를 받았는데, 이 과정에서 인수인계를 해주는 사람도 중요하지만, 인수인계를 받는사람이 먼저 인수인계 받을 내용을 잘 정리해야 인수인계를 제대로 받을 수 있다는 사실을 깨닫게 됨 누군가의 코드 파악이 어려운 만큼 나의 코드도 누군가가 파악하기 어려울 수 있다는 사실을 인지해서 정말 최대한 협업을 위한 코드를 작성할 수 있도록 배려있게 개발을 해야 함 못해도 잘하는 척을 해서 정말 잘할려고 노력하는 모습이 있어야 함 소프트 스킬과 하드 스킬이 다 있는 개발자가 될 수 있도록 노력해야 함 스스로 커리어 난이도를 높일 필요가 없음 즉, 회사생활에서도 이미지 메이킹이 어느정도는 필요함 회사생활을 하면서 자신만의 목표가 존재해야 함 그래야 회사 생활을 잘 할 수 있음 ex) 디자인시스템을 적용해보겠다. 테스트 코드를 유틸 로직뿐만아니라, UI 테스트도 적용해보겠다. 다른 타 부서와 커뮤니케이션 능력을 올려 보겠다. 등 리더의 부재는 …

회고 - 새로움 1. 결혼 올해 가장 의미있는 순간은 바로 결혼이다. 오랜만에 보는 친구, 지인, 가족들을 보면서 한 없이 웃고 벅차고 긴장한 날이였다. 그럼에도 나에게 의미있고 감사한 날이였다. 서로다른 삶을 살다가, 이제 같은 방향을 바라보면서 나아가기로 결심한 만큼 조금 더 넓게 그리고 높게 행동하기로 다짐해본다. 2. 커리어 모던라이언으로 이직을 했다. 블록체인이라는 새로운 도메인과 새로운 동료들을 통해 성장할 수 있는 계기가 되었다. 무엇보다 개발팀으로부터 피와 살이되는 조언 및 피드백 덕분에 성장할 수 밖에 없는 환경을 제공해주셔서 너무나 감사했다. 그리고 처음으로 현대카드와 함께 진행한 다빈치모텔 행사를 통해 대규모 트래픽을 대응하게 된 경험을 하게 되었다. 너무나도 값진 경험이었다. 이 때 처음으로 테스트 코드의 중요성을 다시 한번 느끼게 되었다. 개발을 시작한지도 어느덧 3년이 지난 시점에서 커리어의 방향성에 대해 깊게 생각해보는 시간을 갖고 싶어 졌다. 또한 기본…

Babel이란 babel은 source-to-source compiler로, ES6 버전 이상의 JavaScript 코드를 ES5 코드로 변환하는 구문 변환(syntax transform)을 수행. JavaScript 언어를 컴퓨터 수준의 기계어로 바꾸는 것이 아니라 같은 레벨의 언어를 형태만 변환하는 것이므로 babel을 트랜스파일러(transpiler)라고 부르기도 하지만, 넓은 의미에서 컴파일러(compiler)라고 알려져 있음. babel 덕분에 개발자들은 최신 문법의 JavaScript로 편하게 개발을 할 수 있게 되었음 Babel 트랜스파일링 과정 babel 컴파일 과정 파싱(parsing) 단계: babel이 소스코드를 파싱하여 AST를 생성(이때 생성되는 트리는 JSON 형태와 비슷). AST에서 각각의 노드들은 관계를 형성 변환(transform) 단계: AST를 브라우저가 지원하는 코드로 변환. 이때 개발자가 설정한 plugin과 preset들에 의해서 컴파일됨 …

회고 업무 회고 디자이너 팀원분께서 섬세하다는 칭찬을 들었다. 타인이 나에게 해준 칭찬이 나의 강점이 될 수 있다는 사실을 생각해보았다. API를 호출할 때, Base Url과 Endpoint의 의미를 이해하고 사용하도록 하자. 특정 API의 URL의 변수 네이밍을 잘 짓자. 디자인 시안을 받았을 때, 구현하기 앞서 프론트엔드 개발자로써 더 좋은 UX를 제공하는 라이브러리가 없는지 찾아보고 적용하자. 무조건적으로 디자인 시안을 구현하기 보다는 더 나은 결과물을 만들기 위해 노력하자. 팀내에서 개발실력을 인정받기 위해서는 다양한 능력이 필요한 것 같다. 그 중 무엇보다 스스로 노력하는 태도가 가장 먼저 인 것 같다. 기본기를 정말 중요하게 그리고 집요하게 잘 만들어 놓자. 협업했던 팀원분들과 끝임없이 피드백을 통해 보완점을 채워가자. 이번에 대시보드 함께 개발한 BE 개발자 분에게 피드백을 요청했고 피드백 내용 중에 개발할 때, 조급함 마음이 생기지 않도록 사전에 많은 장치들을 만들…

추상화 기법 도메인에 존재하는 개념들을 구조화하고 단순화하기 위해 다양한 추상화 기법을 사용할 수 있음 주요 추상화 기법의 종류들: 분류와 인스턴스화, 일반화와 특수화, 집합과 분해 객체지향의 가장 큰 장점은 동일한 추상화 기법을 프로그램의 분석, 설계, 구현 단계에 걸쳐 일관성 있게 적용할 수 있다는 점 분류와 인스턴스화 개념과 범주 도로 위를 달리는 작은 승용차와 버스, 트럭들을 가리켜 ‘자동차’라고 하며, 길거리에 자라고 있는 다양한 종류의 가로수들을 일컬어 ‘나무’라고 할 수 있음 개별 자동차와 나무는 완전히 동일하지 않지만 유사한 특성을 바탕으로 각각 ‘자동차’와 ‘나무’로 분류할 수 있음. 이처럼 객체를 분류하고 범주로 묶는 것은 객체들의 특정 집합에 공통의 개념을 적용하는 것을 의미함 자동차: 바퀴를 이용해 사람들을 한 장소에서 다른 장소로 운반하는 운송수단 (이라는 특징) 나무: 푸른 잎과 갈색의 줄기를 가진 다년생 식물 (이라는 특징) 세상에 존재하는 객체에 개념을…

회고 업무 회고 개발을 하면서 타입스크립트의 장점을 느낀 것 중에 하나가, API Request Data와 Response Data Type을 지정해 놓으면 일일히 BE분께서 제공해주신 Swagger를 참고할 필요가 없다는 사실이다. 또한 BE분과 협업하면서 Request와 Response 타입이 다른 부분에 대해 디테일하게 물어보면서 협업할 수 있어 좋았다. 우리가 최종으로 보는 것은 타입이다.(props, return 타입) 시간 압박에 의해 any 타입을 사용하고 싶은 욕구가 많지만, 최대한 차분히 타입 에러를 해결하는 연습이 필요하다. 불필요한 삼항연산자 사용을 줄이자. ex) -> 스프린트 일정을 잡을 때에는 리서치 부분도 고려해서 업무 일정을 작성해야 하고 리팩토링 일정에 대해서는 미리 팀에게 리팩토링해야할 부분에 대해 리스트 업을 한 다음에 다 함께 공유해서 마일스톤에 지장가지 않은 선에서 리팩토링 업무 일정을 잡아야 함. 스프린트 일정은 단순히 개인의 업무를 하는…

들어가기 앞서 유일하게 변하지 않는 것은 모든 것이 변한다는 사실 뿐 여행 중 길을 찾는 방법은 크게 두 가지로 나눌 수 있음 기능적이고 해결책 지향적인 접근법 다른 사람에게 길을 물어봄 올바른 길을 알려줬다면 원하는 곳으로 이동할 수 있겠지만, 이 방법은 일반적이지도, 재사용 가능하지도 않음 또 중요한 랜드마크가 없다면 설명만으로 경로를 찾기 쉽지 않음 구조적이고 문제 지향적인 접근법 지도를 이용 길을 찾는 데 필요한 풍부한 컨텍스트 정보가 함축돼 있으며, 길을 묻는 방법보다 쉽고 간단 주변 지형을 추상적으로 표현하기 때문에 실세계의 환경과 우리의 지식을 밀접하게 연관 지을 수 있게 해줌 지도는 다양한 목적을 위해 재사용될 수 있으며, 범용적. ‘기능’에 대한 요구사항이 계속 변해도 지도에 표시된 ‘구조’는 안정적이기 때문 지도 은유의 핵심은, 기능이 아니라 구조를 기반으로 모델을 구축하는 편이 좀 더 범용적이고 이해하기 쉬우며 변경에 안정적이라는 것. 객체지향 개발 방법은 안정…

들어가기 앞서 7장: 함께 모으기 마틴 파울러는 객체지향 설계 안에 존재하는 3 상호 연관된 관점에 대해 설명하ㅁ 개념 관점(Conceptual Perspective) 설계는 도메인 안에 존재하는 개념과 개념들 사이의 관계를 표현 도메인이란 사용자들이 관심을 가지고 있는 특정 분야나 주제를 말하며 소프트웨어는 도메인에 존재하는 문제를 해결하기 위해 개발됨 명세 관점(Specification Perspective) 도메인이 아닌 실제로 소프트웨어 안에서 살아 숨쉬는 객체들의 책임 즉 객체의 인터페이스를 바라봄 프로그래머는 객체가 협력을 위해 ‘무엇’을 할 수 있는가에 초점을 맞춤 구현 관점(Implementation Perspective) 객체들이 책임을 수행하는 데 필요한 동작하는 코드를 작성하는 것 객체의 책임을 ‘어떻게’ 수행할 것인가에 초점을 맞춤 클래스는 세 가지 관점을 통해 설계와 관련된 다양한 측면을 드러냄 클래스는 세 가지 관점을 모두 수용할 수 있도록 개념, 인터페이…

🌈 1. 읽은 계기 나는 스터디언 구독자이다. 신박사님과 고영성 대표님을 5년 전부터 유튜브를 통해 알게 되어, 관련 영상과 추천해주신 책들을 꾸준히 읽어왔다. 이번에도 추천해주신 책 를 읽으면서 관련 영상을 함께 보았다. 이 책을 구매하기 전, 신박사님이 ‘미쳤다’고 수 천번 말한 모습을 보고 ‘얼마나 미쳤길래 이렇게 강조를 하시는 걸까?‘라는 호기심과 설렘이 생기자 운동하는 도중에 바로 구매했다.(나는 매일 운동하면서 스터디언 영상을 본다.) 솔직히 고백하자면, 나는 책을 1번 이상 잘 읽지 않는다. 그리고 서평도 잘 작성하지 않는다. 하지만 ‘퓨처셀프’는 달랐다. 그리고 무엇보다 신박사님께서 ‘퓨처셀프’는 여러 번 읽고, 특강도 보면서 아웃풋으로 서평과 책에서 제시하는 다양한 실천 방법들을 적극적으로 시도해보라고 말씀해주셨다. 이 책을 한 번 다 읽고 나서, 왜 위와 같은 말씀을 해주셨는지 알게 되었다. 이 책은 정말 한 번 읽는 것으로 끝날 수가 없는 책이었다. 나의 삶에 …

회고 업무 회고 상용 QA를 진행할 때, 사용자 관점에서 디테일하게 임해야 한다. 예를 들어서 특정 페이지에 진입할 때, 1초 이상 걸린다면 이 부분은 UX관점에서 보았을 때, 안 좋은 성능을 내포한 페이지이다. 그렇기 때문에 예민하게 대응을 해야 한다. PM분들과 업무 일정을 조율할 때에는 반드시 그에 맞는 합당한 이유가 있어야 한다. 막연하게 개인적인 이유로 소통을하게 된다면, 일정 조율이 어려울 수 있다. 애초에 일정을 처음 잡을 때, 러프하게 잡고 진행해야 예상치 못한 일로 일정이 타이트해지는 부분을 대비할 수 있다. BE 분들과 협업을 하면서, 특히 API 협업을 진행할 때에는 Request Body 값의 내용과 Path가 RESTful한지 부터 꼼꼼히 점검하면서 협업을 진행해야 한다. 이렇게 하지 않으면, 나중에 스케일업을 할 때, 예상치 못한 부분에서 개발 공수가 들어간다. 항상 미래를 염두하고 개발을 진행해야 한다. 를 통해서 배포를 진행하고 있는 환경에서 반드시 g…

들어가기 앞서 책임과 메시지 존 달리와 밥 라타네는 실험을 통해 ‘책임감 분산’이라는 현상을 발견했음. 사건에 대한 목격자가 많으면 많을수록 개인이 느끼는 책임감은 적어짐. 집단적 위기 상황에서 명확한 책임을 가진 권위자가 없을 때, 대부분의 사람들은 자신에게 명확한 책임이 없는 경우에는 발작 환자를 도와주는 일을 타인의 책임으로 간주해버림. 그에 반해 이를 보고할 책임이 명확하게 주어진 경우에는 신속하게 위기 상황을 해결하려고 노력함 이 이야기에서 훌륭한 객체지향의 세계는 명확하게 정의된 역할과 책임을 지닌 객체들이 상호 협력하는 세계라는 사실을 이끌어낼 수 있음 자율적인 책임 설계의 품질을 좌우하는 책임 객체지향 공동체를 구성하는 기본 단위는 ‘자율적’인 객체 자율적인 객체란 스스로 정한 원칙에 따라 판단하고 스스로의 의지를 기반으로 행동하는 객체, 그 의지와 판단에 따라 각자 맡은 책임을 수행하는 객체를 의미 적절한 책임이 자율적인 객체를 낳고, 자율적인 객체들이 모여 유연하…

글또 9기 시작 저번 글또 8기를 하면서 느낀점은, 너무나도 많은 개발자 분들께서 진심으로 글을 매주 작성하시는 모습을 통해 많은 동기부여와 좋은 컨텐츠를 볼 수 있었고 또한, 수많은 고민들을 통해 나 혼자만 힘들게 아니다라는 사실을 알게 되었고 무엇보다 글을 쓰는 습관을 조금은 드릴 수 있어서 너무나 좋았다. 단 한가지 아쉬운점을 말하라고 한다면, 적극적으로 외부 활동 참여와 다양한 사람들과 커피챗을 해보지 못한 것이였다. 다양한 사람들이 있는 만큼 다양한 경험을 들을 수 있는 기회들이 분명있었는데, 단순히 일 때문에 바쁘다는 핑계로 스스로 합리화를 해버렸던 것 같다. 그래서 이번 기수에는 적극적으로 다양한 직군의 개발자 분들과 커피챗 신청과 외부 행사에 참여해볼 생각이다. 마지막으로 다른 분들이 어떤식으로 글을 전개해 나아가는지 흐름을 파악해서 나의 글쓰기 실력을 한층 더 높일 수 있는 시간을 가지고 싶다. 참고 글또 소개 참고

회고 업무 회고 내가 작성한 코드에 대해서는 누구보다 책임을 지고 이해하며, 설명할 수 있어야 함. 업무를 하면서 어려움에 직면했을 때, 스스로 마인드 컨트롤을 통해 냉정함을 유지 필요. 문제를 해결했으면, 다음부터 이 문제를 겪지 않기 위해서 시스템을 만들던 어떠한 방법을 만들어 놔야, 나중에 가서도 같은 실수를 반복하지 않음 개발 하는 것 보다 중요한 것은, 해당 개발을 왜 하는지 그리고 어떠한 정책을 기반으로 개발을 해야 하는지 그리고 백엔드로 부터 전달 받은 값들은 어떠한 값이며 이 값들을 통해 해당 정책 사항을 어떻게 개발해야할지 스스로 로드맵을 만들고 개발을 진행해야 함 위 내용의 연장선으로 FE에서 로직 개발할 때, BE로 전달 받은 데이터를 정확하게 이해해야 정책 상황에 맞게 BE 데이터를 가지고 정확한 분기문 처리를 할 수 있음. 만약 이해를 잘 하지 못한 채로 분기문을 작성하면, 그 하위에 있는 분기문 혹은 다른 로직들의 Flow가 엉켜 레거시가 될 수 있음 업로…

들어가기 앞서 ‘우리 모두를 합친 것보다 더 현명한 사람은 없다.’ ‘최후통첩 게임’에서 응답자와 제안자는 일반적으로 생각하는 합리적인 결정을 내리지 않았음. 인간이 가지고 있는 본연의 특성이라는 관점에서 인간은 이기적이고 합리적인 존재. 그러나 타인과 관계를 맺는 과정 속에서 인간은 본연의 특성을 배제하고 자신의 이익을 최소화하는 불합리한 선택을 하게 됨 인간이 어떤 본질적인 특성을 지니고 있느냐가 아니라, 어떤 상황에 처해 있느냐가 인간의 행동을 결정함. 즉, 각 개인이 처해 있는 정황 또는 문맥(context)이 인간의 행동 방식을 결정한다는 것 인간의 행동을 결정하는 문맥은 타인과의 협력임. 객체의 세계에서도 협력이라는 문맥이 객체의 행동 방식을 결정함. 중요한 것은 개별 객체가 아니라, 객체들 사이에 이뤄지는 협력임 어떤 협력에 참여하는지가 객체에 필요한 행동을 결정하고, 필요한 행동이 객체의 상태를 결정함 협력 요청하고 응답하며 협력하는 사람들 협력은 한 사람이 다른 사…

회고 업무 회고 PR과 커밋단위를 팀원분들이 읽기 좋게 해야 다른 팀원분들의 리소스를 잘 활용할 수 있다.(PR Description을 자세히 작성하면, 팀원분들이 PR 리뷰하기 좋다.) 함수명과 변수명을 깊게 고민하자. 특히 팀 내에서 통용되어지는 단어라던가 이해를 바탕으로 이름을 짓도록 노력하자. React Query에서 제공해주는 useMutation hook의 return 값인 를 통해, mutation이 성공하든 하지 않던 결과가 전달되기 때문에 onSuccess, onError에 공용으로 사용되어지는 함수 호출이나, 로직을 로 빼서 코드량을 줄일 수 있다. tailwindCSS를 사용할 때, 스타일 클래스 이름을 동적으로 구성하지 말아야 합니다. 그 이유는 tailwindCSS는 빌드 시점 즉, 컴파일링 되는 시점에서 동적으로 할당되는 className을 인식하지 못하고 stylesheet에서 사용하지 않은 CSS라고 인식하고 지워버림 main, staging이든 핫픽스…

타입과 추상화 일단 컴퓨터를 조작하는 것이 추상화를 구축하고, 조작하고, 추론하는 것에 관한 모든 것이라는 것을 깨닫고 나면 (훌륭한) 컴퓨터 프로그램을 작성하기 위한 중요한 전제 조건은 추상화를 정확하게 다루는 능력이라는 것이 명확해짐 초기 지하철 노선도는 실제와 유사한 물리적인 지형 위에 구불구불한 운행 노선과 불규칙적인 역 간의 거리를 사실적으로 묘사하고 있었지만, 이렇게 사실적인 정보는 오히려 지하철을 이용하는 승객들로 하여금 노선도를 이해하기 어렵게 만듦 지하철 노선도 디자인에서 가장 중요한 것은 얼마나 사실적으로 지형을 묘사했느냐가 아니라 역과 역 사이의 연결성을 얼마나 직관적으로 표현했느냐임 추상화를 통한 복잡성 극복 현실은 복잡하며 예측 불가능한 혼돈의 덩어리임. 사람들은 본능적으로 이해하기 쉽고 예측 가능한 수준으로 현실을 분해하고 단순화하는 전략을 따름 헨리 백의 지하철 노선도는 불필요한 지형 정보를 제거함으로써 단순함을 달성한 추상화의 훌륭한 예. 진정한 의미에…

회고 업무 회고 PR(Pull Request)를 작성할 때에는 작은 단위로 즉, 관심사를 잘 분리해서 코드 리뷰를 받을 수 있도록 하자. DB는 UTC 기준의 날짜 이기 때문에, BE와 날짜 관련 협업을 할 때 주의해서 업무를 진행해야 함. 의미 “2023”: 연도 “11”: 월 “08”: 일 “T”: 날짜와 시간을 구분하는 구분자 “15:00:00.000”: 시간 (24시간 형식, 밀리초 단위까지 표시) “Z”: “Zulu time” 또는 “협정 세계시 (Coordinated Universal Time, UTC)” iSO 8601: 날짜와 시간을 표현하는 국제 표준이며, 이는 세계 각국에서 사용되고 있는 날짜와 시간 표기 방식을 통일시키기 위해 만들어짐 Taildwind CSS와 Styled-Component 차이 Taildwind CSS 유틸리티 클래스를 사용하여 스타일을 적용 빌드 시에 클래스를 사전에 생성하고 사용(실제로 브라우저에서는 클래스만 적용) 번들 시에 사용하지 …

이상한 나라의 객체 가림막 막대 실험 사람은 아기 때부터 뚜렷한 경계를 가지고 함께 행동하는 물체를 하나의 개념으로 인지 물체가 여러 부분으로 구성돼 있더라도 함께 움직일 경우 그 물체를 하나의 유기적인 단위로 인식 객체지향과 인지 능력 인간은 본능적으로 세상을 독립적이고 식별 가능한 객체의 집합으로 바라봄 객체지향은 세상을 자율적이고 독립적인 객체들로 분해할 수 있는 인간의 기본적인 인지 능력에 기반을 두고 있음 인간의 인지 능력은 물리적인 한계를 넘어 개념적으로 경계 지을 수 있는 추상적인 사물까지도 객체로 인식할 수 있게 함 객체란 인간이 분명하게 인지하고 구별할 수 있는 물리적인 또는 개념적인 경계를 지닌 어떤 것 객체지향 패러다임은 소프트웨어의 세계 역시 다양한 소프트웨어 객체들이 모여 이뤄져 있다는 믿음에서 출발. 객체지향 패러다임의 목적은 현실 세계를 기반으로 새로운 세계를 창조하는 것 객체, 그리고 이상한 나라 이상한 나라의 앨리스 동화 속 앨리스는 작은 문을 통과하…

협력하는 객체들의 공동체 객체지향의 목표는 실세계를 모방하는 것이 아니라, 새로운 세계를 창조하는 것. 단순히 실세계를 소프트웨어 안으로 옮겨 담는 것이 아니라, 고객과 사용자를 만족시킬 수 있는 신세계를 창조하는 것 협력하는 사람들 커피 공화국의 아침 카페테리어에서 커피를 주문하고 받는 과정에는 손님, 캐시어, 바리스타 사이의 암묵적인 협력 관계가 존재 커피 주문이라는 협력에 참여하는 모든 사람들은 각자 맡은 바 역할과 책임을 다하고 있음 요청과 응답으로 구성된 협력 사람들은 문제 해결에 필요한 지식을 알고 있거나 서비스를 제공해줄 수 있는 사람에게 도움을 요청 요청은 연쇄적으로 발생 요청을 받은 사람은 주어진 책임을 다하면서 필요한 지식이나 서비스를 제공, 즉 요청에 응답 우리는 요청과 응답을 통해 다른 사람과 협력하여 문제를 해결 역할과 책임 역할은 협력 안에서 차지하는 책임이나 임무를 의미 특정한 역할은 특정한 책임을 암시 사람들은 협력을 위해 특정한 역할을 맡고 역할에 적…

회고 1. Blob 객체란 Blob(Binary Large Object)이란 바이너리 형태로 큰 객체를 저장(이미지, 비디오, 사운등 등 멀티미디어 객체들에서 사용) 4GB의 이진 데이터를 저장(DB에 직접 저장하는 것이 아닌, Large Object의 위치 포인터만 저장) 데이터를 간접적으로 접근하기 위한 객체 웹에서 사용되는 데이터 형식으로, 이진 데이터를 나타내며, 텍스트, 이미지, 오디오, 비디오 등 다양한 형식을 지원(파일 업로드, 이미지 프로세싱, 미디어 처리 등에 사용) JS에서 Blob 객체는ㄴ 데이터 덩어리를 참조하는 용도로 사용 메모리상의 데이터(바이트 배열)도 참조할 수 있으며 파일의 데이터도 참조할 수 있음 웹브라우저는 메모리 또는 디스크에 Blob을 저장할 수 있으며, Blob은 비디오 파일과 같이 매우 커서, 메모리에 적재하려면 를 활용하여 작은 조각으로 먼저 분리해야 할 수도 있음 Blob API 는 비동기 방식으로 동작 Blob 객체 생성하는 방법 생…

업무 회고 에 대한 피드백을 들었다. 물론 개발 할 때 당시에는 최선이라고 생각하지만, 그래도 개발 코드를 작성하기 전에는 내가 ‘무엇’을 개발하는지 명확하게 인지하고 더 나아가 팀원분들이 잘 이해할 수 있는 코드를 작성할 수 있도록 노력해야 한다고 다시 한번 깨닫게 되었습니다.(추가로 쏙쏙 들어오는 함수형 코딩 책을 리더분에게 추천받아 구체적으로 현재 작성된 코드가 으로 이루어져있어 나중에 해당 책을 바탕으로 리팩토링하면 좋을 것 같다는 피드백을 주셨습니다. 이 말을 듣고 책을 읽었을 당시에는 액션, 계산, 데이터를 생각하면서 개발을 했는데, 현재 그러지 못해 스스로 반성하게 되었습니다. 추후 책을 다시 읽으면서 다시 블로그에 정리하면서 리팩토링할 예정입니다.) 개인적으로 업무를 할 때, 급한 변경 사항을 받게 되면 마음이 조급해져서 할 수 있는 것들도 하지 못하는 경우가 있었던 것 같습니다. 어떠한 상황에서 차분히 문제를 해결할 수 있는 마음가짐을 가질 수 있도록 평소에 심호흡…

12.1 메서드 올리기 메서드 올리기를 적용하기 가장 쉬운 상황은 메서드들의 본문 코드가 똑같을 때. 그러나 메서드 올리기 리팩터링을 적용하려면 선행 단계를 거쳐야 할 때가 많음 메서드 올리기를 적용하기에 가장 이상하고 복잡한 상황은 해당 메서드의 본문에서 참조하는 필드들이 서브클래스에만 있는 경우. 두 메서드의 전체 흐름은 비슷하지만 세부 내용이 다르다면 템플릿 메서드 만들기를 고려 절차 똑같이 동작하는 메서드인지 면밀히 살핌 메서드 안에서 호출하는 다른 메서드와 참조하는 필드들을 슈퍼클래스에서도 호출하고 참조할 수 있는지 확인 메서드 시그니처가 다르다면 함수 선언 바꾸기로 슈퍼클래스에서 사용하고 싶은 형태로 통일 슈퍼클래스에 새로운 메서드를 생성하고, 대상 메서드의 코드를 복사해넣음 정적 검사를 수행 서브클래스 중 하나의 메서드를 제거 모든 서브클래스의 메서드가 없어질 때까지 다른 서브클래스의 메서드를 하나씩 제거 예시 12.2 필드 올리기 서브클래스의 필드들이 비슷한 방식으로…

11.7 세터 제거하기 세터 메서드가 있다는 것은 필드가 수정될 수 있다는 뜻. 객체 생성 후에는 수정되지 않길 원하는 필드라면 세터를 제공하지 않았을 것 세터 제거하기 리팩터링이 필요한 상황은 주로 두 가지임 첫째, 사람들이 무조건 접근자 메서드를 통해서만 필드를 다루려 할 때 두 번째는 클라이언트에서 생성 스크립트를 사용해 객체를 생성할 때 절차 설정해야 할 값을 생성자에서 받지 않는다면 그 값을 받을 매개변수를 생성자에 추가함. 그런 다음 생성자 안에서 적절한 세터를 호출 생성자 밖에서 세터를 호출하는 곳을 찾아 제거하고, 대신 새로운 생성자를 사용하도록 함 세터 메서드를 인라인. 가능하다면 해당 필드를 불변으로 만듦 예시 11.8 생성자를 팩터리 함수로 바꾸기 생성자에는 이상한 제약이 따라붙기도 함. 자바 생성자는 반드시 생성자를 정의한 클래스의 인스턴스를 반환해야 함. 생성자의 이름도 고정되며, 생성자를 호출하려면 특별한 연산자(new)를 사용해야 함 -> 팩터리 함수에는…

한주 회고 1. 짜릿한 도커 이미지 줄인 경험 결론부터 말하자면 Next에서 제공하는 standalone과 Docker 멀티 스테이지 빌드를 DevOps팀과 함께 협업해서 기존에 약 1GB가 넘는 도커 이미지 파일을 약 60MB 정도까지 줄였다.(약 94% 줄임) Next Stand Alone Next에서 아래와 같이 파일에 코드를 실행하면, 자동으로 Production 배포 환경에 에서 필요한 파일들만 추출해준다. 그러면 이라는 폴더가 생성되고, 이 폴더는 를 설치하지 않고도 자체적으로 배포할 수 있다. 또한 대신 사용할 수 있는 최소한의 코드가 있는 파일도 생성이 된다. 이 때, 파일 안에는 과 폴더를 복사하지 않는다. Dockerfile - Multi-stage build 컨테이너 이미지를 만들면서 빌드 등에는 필요하지만, 최종 컨테이너 이미지에는 필요 없는 환경을 제거할 수 있도록 단계를 나누어 기반 이미지를 만드는 방법이다. 위 경험을 통해 단순히 용량을 줄이는…

11.1 질의 함수와 변경 함수 분리하기 겉보기 부수효과가 있는 함수와 없는 함수는 명확히 구분하는 것이 좋음. 질의 함수(읽기 함수)는 모두 부수효과가 없어야 함. 이를 ‘명령-질의 분리’라고도 함 절차 대상 함수를 복제하고 질의 목적에 충실한 이름을 지음 새 질의 함수에서 부수효과를 모두 제거 정적 검사를 수행 원래 함수(변경 함수)를 호출하는 곳을 모두 찾아냄. 호출하는 곳에서 반환 값을 사용한다면 질의 함수를 호출하도록 바꾸고, 원래 함수를 호출하는 코드를 바로 아래 줄에 새로 추가함.하나 수정할 때마다 테스트 진행 원래 함수에서 질의 관련 코드를 제거함 테스트 예시 11.2 함수 매개변수화하기 두 함수의 로직이 아주 비슷하고 단지 리터럴 값만 다르다면, 그 다른 값만 매개변수로 받아 처리하는 함수 하나로 합쳐서 중복을 없앨 수 있음. 절차 비슷한 함수 중 하나를 선택함 함수 선언 바꾸기로 리터럴들을 매개변수로 추가함 이 함수를 호출하는 곳 모두에 적절한 리터럴 값을 추가함…

10.5 특이 케이스 추가하기 코드베이스에서 특정 값에 대해 똑같이 반응하는 코드가 여러 곳이라면 그 반응들을 한 데로 모으는 게 효율적임 이때 특수한 경우의 공통 동작을 요소 하나에 모아서 사용하는 특이 케이스 패턴을 사용함 절차 리팩터링의 대상이 될 속성을 담은 데이터 구조(혹은 클래스)를 컨테이너라고 함 컨테이너에 특이 케이스인지를 검사하는 속성을 추가하고, 를 반환하게 함 특이 케이스 객체를 만듦. 이 객체는 특이 케이스인지를 검사하는 속성만 포함하며, 이 속성은 를 반환하게 함 클라이언트에서 특이 케이스인지를 검사하는 코드를 함수로 추출함. 모든 클라이언트가 값을 직접 비교하는 대신 방금 추출한 함수를 사용하도록 고침 코드에 새로운 특이 케이스 대상을 추가함. 함수의 반환 값으로 받거나 변환 함수를 적용 특이 케이스를 검사하는 함수 본문을 수정하여 특이 케이스 객체의 속성을 사용 테스트 여러 함수를 클래스로 묶기나 여러 함수를 변환 함수로 묶기를 적용하여 특이 케이스를 처…

한 주 회고 9월달에 업무적으로 그리고 개인적으로 결혼 준비 때문에 주간회고를 작성하지 못했습니다.(물론 핑계입니다.) 그래도 지금 이 시점에서 간략하게 9월에 한 일들에 대해 정리를 해보고자 합니다. 대규모 트래픽 경험 처음으로 대규모 트래픽을 경험했습니다.(대기업들이 겪고 있는 대규모 트래픽보다는 적을 수 있겠지만 개인적으로 대규모 트래픽이라고 생각합니다.) 저희 콘크릿앱을 통해서 현대카드에서 주최하는 다빈치모텔 티켓을 NFT 형태로 사용자에게 너무나 편리하게 제공했습니다. 이 과정에서 저희 팀은 주중, 주말 가릴 것 없이 너무나 열심히 일을 했고 저 또한 티켓을 구매하는 체크아웃 페이지를 개발한 입장에서 책임감과 부담감이 많이 있었습니다. 그래서 사용자가 겪을 수 있는 UX 부분에 대해 PM분들 뿐만아니라 모든 팀원들에게 의견을 구하고 그에 맞는 테스트 코드를 작성해서 최대한 에러를 예방할 수 있도록 했습니다.(너무나 티켓 판매 현장 당일에 감사하게도 티켓 결제 페이지에서는 …

10.1 조건문 분해하기 복잡한 조건부 로직은 프로그램을 복잡하게 만듦 코드를 부위별로 분해한 다음 해체된 코드 덩어리들을 각 덩어리의 의도를 살린 이름의 함수 호출로 바꿔주면 전체적인 의도가 더 확실히 드러남 절차 조건식과 그 조건식에 딸린 조건절 각각을 함수로 추출함 예시 10.2 조건식 통합하기 비교하는 조건은 다르지만 그 결과로 수행하는 동작은 똑같은 코드들이 있다면 조건 검사도 하나로 통합하는 것이 좋음 연산자와 연산자를 사용하면 여러 개의 비교 로직을 하나로 합칠 수 있음 조건부 코드를 통합하는 것이 중요한 이유는 2가지 여러 조각으로 나뉜 조건들을 하나로 통합함으로써 내가 하려는 일이 더 명확해짐 복잡한 조건식을 함수로 추출하면 코드의 의도가 훨씬 분명하게 드러남 절차 해당 조건식들 모두에 부수효과가 없는지 확인함 조건문 두 개를 선택하여 두 조건문의 조건식들을 논리 연산자로 결합함 테스트함 조건이 하나만 남을 때까지 2~3 과정을 반복함 하나로 합쳐진 조건식을 함…

9.1 변수 쪼개기 역할이 둘 이상인 변수가 있다면 쪼개야 함. 역할 하나당 변수 하나임 절차 변수를 선언한 곳과 값을 처음 대입하는 곳에서 변수 이름을 바꿈 가능하면 이때 불변으로 선언함 이 변수에 두 번째로 값을 대입하는 곳 앞까지의 모든 참조(이 변수가 쓰인 곳)를 새로운 변수 이름으로 바꿈 두 번째 대입 시 변수를 원래 이름으로 다시 선언함 테스트함 반복함 매 반복에서 변수를 새로운 이름으로 선언하고 다음번 대입 때까지의 모든 참조를 새 변수명으로 바꿈. 이 과정을 마지막 대입까지 반복함. 예시 9.2 필드 이름 바꾸기 데이터 구조는 프로그램을 이해하는 데 큰 역할을 함 클래스에서 게터와 세터 메서드의 이름은 레코드 구조체의 필드 이름만큼 중요함 절차 레코드의 유효 범위가 제한적이라면 필드에 접근하는 모든 코드를 수정한 후 테스트함. 이후 단계는 필요 없음 레코드가 캡슐화되지 않았다면 우선 레코드를 캡슐화함 캡슐화된 객체 안의 필드명을 변경하고, 그에 맞게 내부 메서드들을…

8.5 인라인 코드를 함수 호출로 바꾸기 함수는 동작의 목적을 말해주기 때문에 코드를 이해하기 쉽게 해주고, 중복을 없애줌 이미 존재하는 함수와 똑같은 일을 하는 인라인 코드를 발견하면 해당 코드를 함수 호출로 대체할 수 있음. 특히 라이브러리가 제공하는 함수로 대체할 수 있다면 훨씬 좋음 절차 인라인 코드를 함수 호출로 대체 테스트 예시 8.6 문장 슬라이드하기 하나의 데이터 구조를 이용하는 문장들은 한데 모여 있어야 좋음 문장 슬라이드하기 리팩터링으로 이런 코드들을 한데 모아둘 수 있음 관련 있는 코드들은 명확히 구분되는 함수로 추출하는 것이 좋음 절차 코드 조각(문장들)을 이동할 목표 위치를 찾음 코드 조각의 원래 위치와 목표 위치 사이의 코드들을 훑어보면서, 조각을 모으고 나면 동작이 달라지는 코드가 있는지 살핌 코드 조각을 원래 위치에서 잘라내어 목표 위치에 붙여 넣음 테스트함 예시 코드 조각을 슬라이드할 때는 1) 무엇을 슬라이드할지와 2) 슬라이드할 수 있는지 여부를 …

8.1 함수 옮기기 모듈성이란 프로그램의 어딘가를 수정하려 할 때 해당 기능과 깊이 관련된 작은 일부만 이해해도 가능하게 해주는 능력 모듈성을 높이려면 서로 연관된 요소들을 함게 묶고, 요소 사이의 연결 관계를 쉽게 찾고 이해할 수 있도록 해야 함 모든 함수는 어떤 컨텍스트 안에 존재하며, 대부분은 특정 모듈에 속함. 캡슐화를 위해 함수를 함수가 참조하는 곳이 많은 모듈로 옮겨주는 것이 좋음 또한 호출자들의 현재 위치나 다음 업데이트 때 바뀌리라 예상되는 위치에 따라서도 함수를 옮겨야 할 수 있음 함수를 옮기기 전, 대상 함수의 현재 컨텍스트와 후보 컨텍스트를 둘러보고 대상 함수를 호출하는 함수, 대상 함수가 호출하는 함수, 대상 함수가 사용하는 데이터를 살펴봐야 함 절차 선택한 함수가 현재 컨텍스트에서 사용 중인 모든 프로그램 요소를 살펴보고 이 요소들 중에도 함께 옮겨야 할 게 있는지 고민 해봄 선택한 함수가 다형 메서드인지 확인 선택한 함수를 타겟 컨텍스트로 복사 후, 타겟 …

7.1 레코드 캡슐화하기 캡슐화 모듈을 분리할 때는 각 모듈이 자신을 제외한 다른 부분에 드러내지 않아야 할 비밀을 잘 숨겨야 함 이때 레코드 캡슐화, 컬렉션 캡슐화, 기본형을 객체로 바꿔 캡슐화하는 방법 등이 많이 쓰임 클래스를 이용하면 내부 정보를 숨길 수 있을 뿐 아니라 위임 숨기기를 통해 클래스 사이의 연결 관계를 숨길 수도 있음 알고리즘을 함수로 추출하여 구현을 캡슐화하는 방법도 있음 레코드 캡슐화 가변 데이터를 저장할 때는 레코드보다 객체를 선호 객체를 사용하면 어떻게 저장했는지를 숨긴 채 각각의 값을 서로 다른 메서드로 제공할 수 있음 레코드 구조는 필드 이름을 노출하는 형태와 필드를 외부로부터 숨겨서 원하는 이름을 쓸 수 있는 형태 두 가지로 구분할 수 있음 후자는 주로 라이브러리에서 해시(hash), 맵(map), 해시맵(hashmap), 딕셔너리(dictionary), 연관 배열(associative array) 등의 이름으로 제공 절차 레코드를 담은 변수를 캡슐…

6.1 함수 추출하기 코드 조각을 찾아 무슨 일을 하는지 파악한 다음, 독립된 함수로 추출하고 목적에 맞는 이름 붙임 코드를 독립된 함수로 묶는 기준은 ‘목적과 구현을 분리’하는 것 코드를 보고 무슨 일을 하는지 파악하는 데 한참이 걸린다면 그 부분을 함수로 추출한 뒤 ‘무슨 일’에 걸맞는 이름을 지음 함수는 짧게 작성(함수가 짧으면 캐싱하기도 쉽기 때문에 컴파일러가 최적화하는 데 유리할 때가 많음) 짧은 함수는 이름 짓기에 특별히 신경 써야 함(별도의 문서 없이 코드 자체만으로 내용을 충분히 설명되게 만들어야 함) 절차 함수를 새로 만들고 목적을 잘 드러내는 이름을 붙임 (’어떻게’가 아닌 ‘무엇을’ 하는지가 드러나야 함) 추출할 코드를 원본 함수에서 복사하여 새 함수에 붙여넣음 추출한 코드 중 원본 함수의 지역 변수를 참조하거나 추출한 함수의 유효범위를 벗어나는 변수는 없는지 검사(있다면 매개변수로 전달함) 변수를 다 처리했다면 컴파일 원본 함수에서 추출한 코드 부분을 새로 만…

한 주 회고 개발자로써 가장 중요한 의 중요성을 잊고, 그 너머의 방법론에 대해서만 집중 했던 것 같다. 예를 들어 디자인 시스템, 다양한 아키텍처 등의 핵심은 문제 해결을 하기 위한 다양한 방법중 하나인데 너무 방법론에 대해서만 집중을 했던 것 같다. 정말 본질적인 력을 키우기위해 기본에 집중하자. 다시 기본으로 돌아가 중심을 잘 잡자. 참고 직장인 개발자의 업무 생산성을 높이는 방법 한 주 회고 참고

4.1 자가 테스트 코드의 가치 리팩터링을 제대로 하기 위해서는 실수를 잡아주는 견고한 테스트가 뒷받침돼야 한다. 모든 테스트를 완전히 자동화하고 그 결과까지 스스로 검사하게 만들자 컴파일할 때마다 테스트도 함께 하면 생산성을 높일 수 있음 자가 테스트 코드 자체뿐 아니라 테스트를 자주 수행하는 습관도 버그를 찾는 강력한 도구가 됨 테스트 스위트는 강력한 버그 검출 도구로, 버그를 찾는 데 걸리는 시간을 대폭 줄여줌 테스트를 작성하기 가장 좋은 시점은 프로그래밍을 시작하기 전 기능을 추가해야 할 때 테스트부터 작성 함 이로부터 켄트 벡의 ‘테스트 주도 개발(TDD)’ 기법이 탄생 TDD에서는 테스트를 작성하고, 이 테스트를 통과하게끔 코드를 작성하고, 결과 코드를 최대한 깔끔하게 리팩터링하는 과정을 짧은 주기로 반복 4.2 테스트할 샘플 코드 비즈니스 로직 코드를 UI와 분리하여 코드를 파악하고 테스트하기 편하게 만들어줄 수 있음 4.3 첫 번째 테스트 테스트를 두 단계로 진행 실…

업무 회고 개발하는 환경이 어떤 환경인지 정확하게 인지하고 개발 및 다른 팀원분들과 협업을 진행 하자 웹 소켓 지속적인 양방향 통신을 제공하여 서버와 클라이언트 간에 데이터를 실시간으로 주고받을 수 있게 해주는 프로토콜( 실시간 채팅, 실시간 업데이트, 협업 도구, 알림기능,실시간 게임) 예시 코드(채팅) 한 주 회고 오랜만에 고향에 내려와 주말을 껴서 3일 정도 쉬었습니다. 그러나 생각보다 회복이 되지 않았습니다. 요즘 특히 고민이 어떻게 하면 잘 쉬고 회복해서 더 좋은 퍼포먼스를 낼 수 있을 지 고민을 많이 합니다. 이러한 고민을 하지 않으면 주체적이지 못한 삶을 살아갈 것 같은 느낌이 많이 들어 조금이라도 삶의 본질에 대해 질문을 던지고 어떻게 하면 더 좋은 삶을 살 수 있고 지금의 커리어를 잘 갈고 닦을 수 있을 지 생각해보는 좋은 동기라고 생각이 됩니다. 그리고 요즘 업무 집중도가 많이 떨어진 것 같은 생각이 듭니다. 특히 문제에 직면했을 때, 근시안적으로 문제를 바라보고…

한 주 회고 이번 주 목요일에 저희 팀에서 너무나도 중요한 프로젝트를 오픈했습니다. 모든 팀원 분들이 밤 낮을 가리지 않고, 최선을 다했습니다. 이 과정 속에서 개인적으로 배운 점들을 정리해보고자 합니다. 먼저 예상치 못한 상황에 직면 했을 때, 마음을 잘 다잡는 것이 너무나도 중요하다는 것을 알게 되었습니다. 프로젝트를 오픈하기 몇 분 전 또는 프로젝트 오픈 후 예상치 못한 상황들 속에서 문제를 가시화 하고 팀원분들과 빠르게 공유 한 뒤에 해결하는 모습이 너무나 중요하다는 것을 알게 되었습니다. 물론 이 과정이 이미 몸이 지친 상태에서 잘 안될 수 있지만, 그래도 하는 것이 프로이지 않을 까 싶었습니다. 사실 위 상황을 대비 하기 위해 평상시에 컨디션 관리와 업무 리소스를 잘 분배해야 한다는 사실도 깨닫게 되었습니다. 또한 업무를 하면서 다양한 상황을 대비해 코드를 유연하게 작성하는 것도 중요 하다는 것도 알 되었습니다. 개인적으로 이번 프로젝트를 통해 대규모 트래픽에 대한 상황…

한 주 회고 한 주를 돌아 보았을 때, 저번 주 회고를 통해 나는 개선된 생각과 행동을 했는지 생각해보았다. 저번 회고를 통해 ‘생각한 대로 사는 삶’에 집중하자고 작성을 했는데, 이번 한 주를 돌아보니 여전히 ‘사는대로 생각하는 삶’을 살고 있는 것 같다. 그래도 매일 명상, 스트레칭, 운동, 자기전 다이어리 작성은 삶을 주체적으로 살기 위한 최소한의 행동을 했다. 주체적으로 살기위한 최소한의 행동들을 조금씩 넓혀 가면서 삶의 주인으로써 ‘생각한 대로 사는 삶’을 실천할 수 있을지 기대를 해본다. 그리고 개인적으로 ‘성장’이라는 단어가 나에게 무슨 의미이며, 성장하기 위해 나는 어떤 노력을 해야 할지 등 머리 속에서 잠자리 마냥 계속 떠오른다. 현재 성장하면 떠오르는 단어가 아래와 같다. 물론 더 경험하면서 성장에 대해 깊게 고민해보고 물어봐야 겠다. 몸과 마음을 다스리는 것 나 자신에 대해 아는 것 누군가에게 도움을 주는 것 조직의 목표를 도달할 수 있도록 도와주는 것 어렵다고…

3.1 기이한 이름 코드는 단순하고 명료하게 작성해야 함 함수, 모듈, 변수, 클래스 등은 그 이름만 보고도 각각의 역할을 알 수 있도록 이름 지어야 함 이름 짓기는 프로그래밍에서 가장 어렵기로 손꼽히는 일 중 하나임 3.2 중복 코드 똑같은 코드 구조가 여러 곳에서 반복된다면 하나로 통합할 수 있음 한 클래스에 딸린 두 메서드가 똑같은 표현식을 사용하는 경우 → 함수 추출하기 코드가 비슷하긴 한데 완전히 똑같지는 않다면 → 문장 슬라이드하기 같은 부모로부터 파생된 서브 클래스들에 코드가 중복되어 있다면 → 메서드 올리기 3.3 긴 함수 짧은 함수들은 간접 호출의 효과를 낼 수 있다. 코드를 이해하고, 공유하고, 선택하기 쉬워진다는 장점이 있음 짧은 함수로 구성된 코드를 이해하기 쉽게 만들기 위해서는 함수 이름을 잘 지어두어야 함 적극적으로 함수를 쪼개고, 함수 이름은 동작 방식이 아닌 ‘의도’가 드러나게 지어야 함 함수 추출하기 임시 변수를 질의 함수로 바꾸기 매개변수 객체 만들…

한 주 회고 문득 생각 노트 요즘들어 시간이 빠르게 흘러간다고 생각을 합니다. 그래서 사는대로 생각을 하면서 사는 느낌을 많이 받습니다. 머리로는 생각하면서 살아야 하는데, 자꾸만 그렇게 살지 못하는 것 같아서 삶에 동기가 많이 떨어지는 느낌을 받습니다. 또한 한 여름이 시작되는 시기여서 한 몫하는 것 같습니다. 하지만 한 번뿐인 저의 삶을 이렇게 나두고 싶지는 않습니다. 어떻게든 생각하는 대로 살기위해 몸 부림을 치고 싶어 스터디언에서 제공하는 66첼린지를 신청해 현재 66일동안 버리고 싶은 습관을 지정해 실천하는 프로젝트에 참여했습니다. 생각하는 대로 즉, 어떤 목표를 설정해 살아가기 앞서 현재 제가 가지고 있는 안 좋은 것들을 먼저 비우고 시작하자는 마음으로 66첼린지를 실천하고 있습니다. 물론 쉽지 않은 것 같습니다. 매일 매일 기록을 통해 66일 동안 버리고 싶은 습관을 실천하지 않았는지 적어보지만, 스스로 이렇게 한다고 해서 내가 나아지고 있는지 확신이 잘 서지는 않습니…

글또 8기 회고 결론 부터 말씀드리면 글또를 시작 이후, 매주 마다 개인적으로 주간회고 글을 작성하는 습관을 갖게 되었습니다. 물론 주간 회고 글내용이 많이 빈약하다고 느끼지만, 글을 작성하면서 느끼는 감정들 그리고 조금이라도 배운 내용을 적는 노력을 하면서 내심 뿌듯함도 느끼는 시간을 의식적으로 갖게 되었습니다. 또한 글또를 시작하면서 다양한 개발자 분들의 좋은 글들을 읽을 수 있었습니다. 수준 높은 퀄리티 글을 통해 저의 식격을 더욱 넓히게 된 시간이 었던 것 같습니다. 개인적으로 많이 아쉬운 것은 오프라인으로 글또에 참여하시는 개발자 분들을 만나서 대화를 하지 못했다는 것 입니다. 다음에 기회가 된다고 꼭 참여해 이런저런 이야기를 해보고 싶습니다. 마지막으로 글을 작성할 때, 조금 더 깊이 생각하고 저를 위한 글이 아닌 타인을 위한 글을 작성하기 위해 노력하고 싶습니다. 개인적으로 배운 내용들을 잘 정리하는 것을 타인에게 도움이 될 정도의 수준으로 글을 잘 작성하고 싶은 욕심…

한 주 회고 Error Boundary & Suspense 이번 스프린트에서는 하나의 컴포넌트 안에 Error Boundary와 Suspense를 감싸는 구조로 만드는 작업을 함께 진행했습니다. 이렇게 하게 되면, 컴포넌트 안에서 API 실패 및 로딩을 컴포넌트 마다 커스텀하게 관리할 수 있는 장점과 이번 스프린트의 요구사항에 적합했기에 적용하게 되었습니다. 이 과정에서 외부 라이브러와 React 18버젼부터 제공하는 기능을 함께 도입해 적용하게 되었습니다. 의 가장 큰 장점은 React에서 Error Boundary를 재사용과 커스텀하게 관리 할 수 있다는 점입니다. fallback 구조가 Suspense와 비슷해서 사용하기 편리 했습니다. 또한 useQuery와 함께 사용할 때 를 통해 API를 재호출 할 때 함께 사용할 수 있어서 너무 좋았습니다. 참고로 useQuery를 작성할 때, 옵션으로 로 지정해야 아래와 같이 사용할 수 있습니다. 즉, 아래와 같이 코드를 작성함으로…

2.1 리팩터링 정의 리팩터링의 사전적 정의 소프트웨어의 겉보기 동작은 그대로 유지한 채, 코드를 이해하고 수정하기 쉽도록 내부 구조를 변경하는 기법 리팩터링 이란 동작을 보존하는 작은 단계들을 거쳐 코드를 수정하고, 이러한 단계들을 순차적으로 연결하여 큰 변화를 만들어내는 일 “재구성” 의 특수한 한 형태 단계를 작게 나눔으로써 구성을 체계화할 수 있고, 디버깅 시간을 단축할 수 있음 사용자 관점에서는 달라지는 점이 없음 리팩터링 과정에서 발견된 버그는 리팩터링 후에도 그대로 남아 있어야 함 성능 최적화와 비슷 코드를 이해하고 수정하기 쉽게 만드는 것 2.2 두 개의 모자 켄트 백은 소프트웨어 개발의 목적을 또는 으로 나누고, 이를 두 개의 모자라고 명명한다. 시에는 기존 코드는 절대 건드리지 않고 새 기능을 추가하기만 한다. 반면 시에는 기능 추가는 절대 하지 말아야 한다. (테스트도 새로 만들지 않는다) 2.3 리팩터링하는 이유 리팩터링하면 소프트웨어 설계가 좋아짐 리…

1.6 계산 단계와 포맷팅 단계 분리하기 앞서 작성한 코드를 두 단계로 나눔 에 필요한 데이터를 처리 앞서 처리한 결과를 텍스트나 HTML로 표현 그 다음 함수를 추출 이때 계산 관련 코드는 전부 함수로 모으고 는 `data 매개변수로 전달된 데이터만 처리하게 만듦 연극 제목도 중간 데이터 구조에서 가져옴 이제 함수와 함수를 로 옮겨줌 안에서 와 를 호출하던 부분을 중간 데이터를 사용하도록 바꿔주고, 같은 방식으로 다른 중첩 함수들도 옮겨주었음 다음으로는 반복문을 파이프라인으로 바꿈 이제 에 필요한 데이터 처리에 해당하는 코드를 모두 별도 함수로 빼냄 마지막으로, 단계별로 분리한 코드를 별도 파일에 저장한 후 HTML 버전을 작성 함 1.7 중간 점검: 두 파일(과 두 단계)로 분리됨 statement.js createStatementData.js 함수를 추출하면서 코드량은 많이 늘었지만, 모듈화를 통해 전체 로직을 구성하는 요소 각각이 더 뚜렷해지고 계산하는 부분과 출력 …

한 주 회고 협업 언제 다른 팀원분들과 협업하는 과정은 힘들면서도 많은 것을 배우는 것 같습니다. 이번 Sprint에서는 BE분들과 API 명세를 논의하는 회의에 참여하게 되었습니다. FE에서는 어떤 값들이 필요한지, 더 나아가 어떤 타입의 값들이 필요한지 명확하고 구체적으로 요구사항을 BE에게 확실하게 전달하는 모습을 보면서 단순히 UI를 그리기위한 API 명세 논의를 넘어 서비스 전반적으로 사용되어야 하는 데이터 값과 타입을 고려하면서 명세 논의하는 부분이 인상 깊었습니다. 그리고 협업은 나 뿐만아니라 상대방의 상황을 고려하고 더 나아가 서비스 전반적인 상황을 생각해야 한다는 것을 이번 시간을 통해 다시 한번 생각해 보게 되었습니다. 리소스는 한정적인 상황에서 최대한 리소스를 효율적으로 사용하기 위해서는 좋은 협업을 통해 서비스 개발을 해야 한다는 것은 당연하면서도 중요하다는 것을 다시 한번 되내어 보았습니다. 마지막으로 협업이라는 것 다른 팀원분들에게 영향을 주기 때문에 항상…

1.2 예시 프로그램 프로그램이 새로운 기능을 추가하기에 편한 구조가 아니라면, 먼저 기능을 추가하기 쉬운 형태로 리팩터링하고 나서 원하는 기능을 추가 함 1.3 리팩터링의 첫 단계 리팩터링할 코드 영역을 꼼꼼하게 검사해줄 테스트 코드 마련하기 리팩터링하기 전에 제대로 된 테스트부터 마련 1.4 statement() 함수 쪼개기 테스트 간단한 수정도 리팩터링 후에는 항상 테스트하는 습관 조금씩 변경하고 매번 테스트하는 것은 리팩터링 절차의 핵심 함수 추출하기 자바스크립트에서는 중첩 함수를 사용하면 바깥 함수의 변수를 새로 추출한 함수에 매개변수로 전달할 필요가 없음. 추출된 함수 코드에서 보다 명확하게 표현할 수 있는 것들을 찾아야 함 (ex. 변수 이름) 추출된 함수의 반환 값은 result 등의 네이밍으로 통일해줄 수 있음 임시 변수 제거 적립 포인트 계산 코드 추출 format 변수 제거 함수 선언 바꾸기(함수의 핵심 기능을 살려주는 네이밍으로 바꿈) volumeCredits…

한 주 회고 새로운 직장에서 한 달이 지났습니다. 그 동안 온보딩과 스프린트 한 사이클을 경험하게 되었습니다. 새로운 사람들과 협업하는 과정 새로운 업무 프로세스 그리고 새로운 도메인 등 낯설지만 그래도 한 걸음씩 나아가고 있다고 생각이 듭니다. 이 과정에서 모르는 것에 대해 친절히 답변해주신 팀원분들에게 감사했습니다. 그리고 스프린트를 하면서 ‘확장성’에 대한 피드백을 많이 받았습니다. 하나를 개발을 하더라도 다른 요구사항에도 잘 대응 할 수 있는 비즈니스 로직을 만드는 것이 중요하다는 이야기를 많이 들었고 이 과정에서 또는 앞으로 개발하면 ‘확장성’과 ‘유연함’에 대한 비즈니스 로직을 개발하는 실력을 키울 수 있다는 확신이 들어 설렜습니다. 물론 이 과정 속에서 많은 고민과 힘듬이 있겠지만, 어쨌든 이 과정을 거치면 반드시 성장한다는 확신은 저에게 큰 동기부여가 되는 것 같습니다. 아직 한 달 밖에 되지 않았지만, 확실히 성장할 수 있다는 동기를 느끼게 해준 팀 속에서 일을 한…

아이템 58: 모던 자바스크립트로 작성하기 타입스크립트의 컴파일러를 자바스크립트의 ‘트랜스파일러’로 사용 타입스크립트는 자바스크립트의 상위집합이므로 타입스크립트를 자바스크립트로 컴파일할 수 있음 ECMAScript 모듈 사용 ES2015에 등장한 import와 export 를 사용하는 모듈이 표준이 되었음 프로토타입 대신 클래스 사용 대신 사용 스코프 문제 피하기 함수 선언문 대신 함수 표현식을 사용하여 호이스팅 문제 피하기 대신 또는 배열 메서드 사용 루프는 코드가 짧고 인덱스 변수를 사용하지 않아 실수를 줄일 수 있음 인덱스 변수가 필요한 경우엔 메서드 사용 권장 함수 표현식보다 화살표 함수 사용 상위 스코프의 this를 유지할 수 있음 코드를 더 직관적이고 간결하게 작성할 수 있음 단축 객체 표현과 구조 분해 할당 사용 변수와 객체 속성의 이름이 같은 경우 객체 속성 중 함수를 축약해서 표현하는 방법 객체 구조 분해 함수 매개변수 기본값 사용 기본값을 기반으로 타입…

아이템 53: TS 기능보다는 ECMAScript 기능을 사용하기 JS에 새로 추가된 기능은 TS의 초기 기능과 호환성 문제를 발생 JS의 신규 기능을 그대로 채택하고 TS 초기 버전과 호환성을 포기 그러나 이미 사용되고 있던 몇 가지 기능(호환성 문제로 지양하는 방식) 있음 열거형(enum) 몇몇 값의 모음을 나타내는 방식 문제점 숫자 열거형에 0, 1, 2 외의 다른 숫자가 할당되면 매우 위험 상수 열거형(const enum)은 런타임에 완전히 제거되어, 문자열 열거형에서 문제를 일으킴 preserveConstEnums 플래그를 설정한 상수 열거형은 런타임 코드에 정보를 유지함 문자열 열거형은 구조적 타이핑이 아닌 명목적 타이핑을 사용함 문자열 열거형의 명목적 타이핑은 JS와 동작이 다르다는 문제가 있음 매개변수 속성 생성자의 매개변수를 사용하여 클래스 초기화 시 TS는 간결한 문법을 제공 문제점 실제로는 코드가 늘어남 매개변수 속성은 런타임에는 실제로 사용되지만, TS에서는 …

업무를 통해 배운점 개발 하기 앞서 스스로 설계를 해보고, 어려운 문제라도 단순하게 생각을 해보자. 스스로 오버 스택이 아닌지 판단 할 줄 알아야 하며, 단순하게 해결할 수 있는 방법이 없는지 고민해 봐야 한다. PR을 할 때(특히 비즈니스적으로 중요한 서비스 개발), 내가 개발한 사항을 다른 팀원분들도 테스트 할 수 있도록 문서에 작성해야 한다. 해피 케이스를 생각하고 개발을 진행한 뒤에, 다양한 케이스를 고려해서 개발을 해야 한다. 이 때 개발하는 과정에서 재사용성을 고려하지 않거나 특정 컴포넌트 안에 비즈니스 로직이 얽혀 있으면 추후에 요구사항에 맞게 개발하기가 쉽지 않다. 데이터의 초깃 값을 로 하는 이유는, 만약에 서버로 부터 요청한 데이터가 이고 초깃 값이 이면 현재 어떤 상황인지 명확하지가 않아, 초깃 값을 로 명시해, 서버로부터 가져온 데이터가 확실하게 어떤 데이터인지 구분할 필요가 있다. 핸들러 함수를 만들더라고 각 요구사항에 대비할 수 있도록 Util 함수를 맵핑…

AMA 자기 평가 조직 리더분께서 팀내 평가제도에 대한 주제로 이야기를 해주셨고 그 중에, 자기 평가에 대한 말씀을 해주셨을 때 개인적으로 인사이트를 얻어 아래와 같이 내용을 정리해보았습니다. 결국 제가 팀에서 필요한 인재가 되기 위해서는 누구도 시키지 않은 일뿐만 아니라, 팀에서 필요한 비즈니스 서비스를 제한된 시간 안에 기능 개발을 함께 일하는 동료들과 잘 협업해서 수행하는 것이 가장 중요하는 것이고 더 나아가 개발 효율을 증진시키기 위해 끊임없이 노력하는 태도와 실제 성과를 만들어 내는 것도 중요하다는 사실을 알게 되었습니다. 업무 회고를 진행할 때에는 ‘사실’기반으로 팀내 어떤 목표(문제)를 해결하고자 어떤 노력을 통해 해결했고 결국 어떠한 성과를 만들어냈는지 작성하면 좋을 것 같은 생각이 들었습니다. 그런데 만약 스프린트 기간내에 특정 문제를 해결하지 못했다면 왜 못했는지 반성을 통해 앞으로 해결하지 못한 부분을 어떻게 해결할 것인지 계획을 수립하는 부분도 필요할 것 같습…

한 주 회고 이번 주에 팀 리분과 온보딩 미팅이 있었습니다. 1시간 동안 다양한 이야기를 나누었습니다. 이야기 속에 제가 인상깊게 느꼈던 내용들 정리해봅니다. 첫번째는 ‘어떠한 상황에서도 해결하고자 하는 마음’이 앞으로 제가 커리어를 쌓아가는데 있어 절대로 잊지 말고 꼭 실천해야 한다는 것을 다시 한번 상기가 되었습니다. 팀 리더분께서 자신의 커리어 중 가장 영향력 있었던 피드백은 상사로 부터 ‘당신은 어떠한 상황에서도 해내는 사람’이라는 이야기가 가장 울림이 있었고 커리어에 많은 영향을 주었다고 했습니다. 그 이야기를 듣고 저 또한 누군가로 부터 그리고 스스로 나도 어떠한 상황에서도 문제를 직면했을 때, 어떠한 방법을 동원해서라도 꼭 해결하는 사람이고 싶어졌습니다. 두번째는 ‘우리는 현재 누구도 시도하고 있지 않는 도전을 하고 있다.‘라고 말씀해주셨습니다. 현재 저희는 WEB 2.0의 유저들이 WEB 3.0에 자연스럽게 활동할 수 있도록 허브의 역할을 하는 서비스를 만들고 있습니…

AMA 경험 AMA는 Ask Me Anything 의미 입니다. 하나의 주제로 한 사람에게 다양한 의견을 교류하는 장을 말합니다. 새로운 팀에서 리더분이 주최하는 시간을 가졌습니다. 이 날 주제는 이였습니다. 사실 서비스 장애 대응에 대해 깊게 생각해 본적은 없었습니다. 다만 개인적으로 장애 대응이 발생했을 때, 기민하게 우선순위를 높여 처리해야 하는 업무라고 생각하고 있었습니다. 이번 시간을 통해 서비스 장애 대응이 단순히 우선순위가 높은 업무가 아니라, 팀에게 있어 너무나 중요한 업무 프로세스 더 나아가 문화라는 사실을 알게 되었습니다. 개인적으로 인사이트한 내용들이 많아 정리를 해보고자 합니다. 서비스 장애 대응이란? 팀이 치열하게 고민해야 하는 주제 개인 및 팀이 성장할 수있는 좋은 재료 서비스 장애가 발생했을 때 서비스 장애 대응 업무중 가장 높은 우선순위 설정 언제나 팀원분들과 소통할 준비가 되어야 하는 상태 서비스 장애 시, 커뮤니케이션 프로세스는 수직적으로 변경 컨트…

들어가기 앞서 재택근무를 하다보면, 개인 컴퓨터에 회사 Github 계정을 함께 사용하는 경우가 발생할 수 있습니다. 이 때, 아무런 개인 컴퓨터에 아무런 설정을 하지 않는다면 회사 Private Repo를 Clone하는 과정에서 문제가 발생할 수 있습니다. 저 또한, 이러한 문제를 해결하기 위해 시간을 많이 사용했습니다. 그래서 이번 글을 통해 저 처럼 고생하시는 분들이 조금이나마 도움을 드리기위해 글을 작성했습니다. 1.SSH 계정 만들기 먼저 최상위 폴더에 있는 ssh 폴더로 이동을 합니다. 그리고 SSH Key를 생성하는 명령어를 실행합니다. 아래는 개인 계정, 회사 계정을 나누어서 SSH를 생성했습니다. 아래 명령어를 실행하면 다양한 질문을 하는데 저는 그냥 Enter를 계속 눌러 진행했습니다. -C는 ssh 키를 식별하는 데 도움을 주는 명령어 입니다. -f는 ssh 키가 저장되는 파일 이름을 나타내는 명령어 입니다. 아래의 명령어를 통해 제대로 SSH가 제대로 생성되었…

아이템 45: devDependencies에 TS와 @types 추가하기 npm의 의존성 구분 dependencies: 현재 프로젝트 실행 시 필수적인 라이브러리 devDependencies: 런타임에는 필요없는 라이브러리 peerDependencies: 런타임에 필요하긴 하지만, 의존성을 직접 관리하지 않는 라이브러리 TS는 개발 도구일 뿐이고 타입 정보는 런타임에 존재하지 않기 때문에, TS와 관련된 라이브러리는 일반적으로 devDependencies에 속함 TS 프로젝트에서 고려해야 할 의존성 TS 시스템 레벨로 설치하기보다는 devDependencies에 넣는 것을 권장 → npm install 시 팀원들 모두 항상 정확한 버전의 TS 설치 가능 대부분의 TS IDE와 빌드 도구는 devDependencies를 통해 설치된 타입스크립트의 버전을 인식할 수 있음 DefinitelyTyped에서 라이브러리에 대한 타입 정보를 얻을 수 있음 @types 라이브러리는 타입 정보만 …

한 주 회고 새로운 장소에서 새로운 시작을 하게 되었습니다. 개인적으로 팀원들 모두 좋은 사람 같았습니다. 또한 자신의 업무에 대해 책임감을 가지고 누구보다 열심히 하는 모습을 보면서 저도 강한 동기를 얻었습니다. 특히 새로운 도메인 분야에서 도전을 하는 만큼, 누군가에게 꼭 도움을 줄 수 있는 사람이 될 수 있도록 다짐을 해봅니다. 그리고 팀 리더 분께서 타운홀에서 좋은 이야기를 해주셨는데 문득’피드백은 비싸다’라는 말이 떠올랐습니다. 저는 성장하기 위해 꼭 필요한 것 중 하나는 ‘피드백’이라고 생각합니다. 이렇게 ‘피드백’을 자유롭게 할 수 있는 조직에 있다는 것만으로도 너무나 감사하며, 자기 객관화 능력을 키워갈 수 있다고 확신했습니다. 왜냐하면 6개월, 1년 동안 자신이 한 업무가 팀 내 그리고 조직에 어떠한 영향을 주었는지 셀프 회고를 해보고, 나와 같이 일한 동료로부터 피드백을 받아 내가 생각한 나의 모습과 타인이 생각한 나의 모습을 비교하면서 나를 온전히 바라볼 수 있…

한 주 회고 저의 새로운 출발을 응원해주기 위해 전 직장 동료들과 함께 점심 식사를 하면서 이런저런 이야기를 하는 시간을 많이 가졌습니다. 대화 속에서 동기부여되는 말들이 많아 오히려 힘도 많이 나고 앞으로 어떤 개발자가 되어야 하는지 더 깊게 생각해보는 시간을 가져 좋았습니다.(팀원들 너무나 감사합니다.) 그리고 사실 이번 주는 설렘과 걱정이 동반되는 시간들이 많았습니다. 그 이유는 새로운 시작에 앞서 스스로 부족하다는 생각을 많이 했기 때문입니다. ‘과연 내가 할 수 있을까?’, ‘내가 잘 할 수 있을까’ 등에 보이지만 실체가 없는 걱정과 불안에 휩싸인채로 하루하루 시간들을 보냈습니다. 그래도 스스로 극복하고자 새로운 시작에 앞서 필요한 것들을 나열해보고 학습을 멈추지 않았습니다. 어차피 행동을 하나 안하나 똑같이 불안하다면 그냥 무엇 하나라도 하는 것이 낫다는 생각이 들어 몸을 움직였습니다.(물론 글로써는 대담하게 행동한 것처럼 보이지만 행동하면서도 많이 불안했습니다.) 하기…

아이템 38: any 타입은 가능한 한 좁은 범위에서만 사용하기 any 작성 방식 any 타입이 processBar 함수의 매개변수에만 사용된 표현식이므로 다른 코드에는 영향을 미치지 않기 때문 TS가 함수의 반환 타입을 추론할 수 있는 경우에도 함수의 반환 타입을 명시하는 것이 좋음 강제로 타입 오류 제거 시 any 대신 @ts-ignore 사용 객체와 관련한 any의 사용법 아이템 39: any를 구체적으로 변형해서 사용하기 일반적인 상황에서는 any보다 더 구체적으로 표현할 수 있는 타입이 존재할 가능성이 높음 함수 매개변수로 객체 사용 시 타입 구체화 함수 타입 구체화 아이템 40: 함수 안으로 타입 단언문 감추기 함수 내부에는 타입 단언 사용하고, 함수 외부로 드러나는 타입은 정의를 정확히 명시하는 것이 좋음 어떤 함수든 캐싱할 수 있는 래퍼 함수 단언문을 추가해서 오류를 제거 객체를 매개변수로 하는 shallowObjectEqual 아이템 41: Any 타입의 변환 예…

배운 내용들 CSS는 쌓임맥락에 따라 가장 아래 있는 Element가 가장 높은 레이어에 존재합니다. 부모 엘리먼트 안에 자식 엘리먼트가 가장 높은 레이어에 존재하기 위해 z-index 값을 가장 높게 하여도 적용되지 않은 경우가 있습니다. 그 경우는 부모 엘리먼트가 CSS 중 가 있으면 가 적용되지 않습니다. (position 속성을 적용해도 마찬가지 입니다.) 한 주 회고 이번주는 전주에 내려가 휴식을 취했습니다. 전주에 살았을 때 당연하게 여겨졌던 생활들이 조금은 낯설게 느껴졌습니다. 하지만 이 낯설음이 오히려 편안함을 주었습니다. 요즘 생각이 많아 불안함과 조급함이 일상생활에서 불쑥불쑥 올라오곤 그랬습니다. 그래서 전주에 내려가 생각을 정리하고 다시 일어설 수 있는 힘을 회복하기 위해 내려갔습니다. 전주에 살고 있는 친구와 함께 사우나에 가서 이런저런 이야기도 하면서 노곤한 몸을 이끌고 제가 좋아하는 콩나물 국밥집에 가서 아침을 먹었을 때 너무나 행복하고 힘이 많이 생겼습니…

새로 알게된 내용 원티드 인턴쉽 2주차 사전과제를 진행하면서 다양한 이슈를 발견하고 팀원들과 함께 해결했습니다. 이 과정에서 배운 내용을 정리했습니다. 1. 검색 창에 한글 입력 후 keyDown 이벤트 진행시, 중복으로 발생하는 이슈 처리 방법 원인 : 한글과 같은 조합 문자는 문자를 변환하는 IME(Input Method Editor) 과정에서 OS와 브라우저 모두 이벤트를 처리하기 때문에 keyDown 이벤트가 중복으로 발생됨 해결 : 글자가 변환 중인지 알려주는 KeyboardEvent의 값을 이용하여 이벤트 핸들러가 한 번만 호출되도록 개선 가능 추가 설명 IME composition IME는 영어가 아닌 언어들을 다양한 브라우저에서 지원하도록 언어를 변환시켜주기 위한 OS 단계의 APP IME 과정에서 keyDown 이벤트가 발생하면, OS와 브라우저에서 해당 이벤트를 모두 처리하기 때문에 이벤트가 중복으로 발생 isComposing 한글과 같이 자음과 모음의 조합으로…

4월을 돌아보며 4월의 마지막 날, 지난 한 달간 많은 회사와 사전과제를 수행하며 새로운 도전을 계속하고 있습니다. 이 과정에서 면접을 통해 자신의 실력을 객관적으로 돌아볼 수 있는 기회를 가졌습니다. 그리고 면접관들에게 제가 가지고 있었던 회사의 호기심을 가지고 질문을 하며 더 많은 정보와 배움을 얻을 수 있었습니다. 또한 원티드 인턴쉽 프로그램을 통해 새로운 사람들을 만나 함께 프로젝트를 수행하며 더 나은 결과물을 만들기 위해 시간을 가졌습니다. 다른 사람들의 의견을 수렴하여 더 좋은 결과물을 만드는 것은 항상 어려운 일이지만, 이 과정에서 반드시 성장할 수 있다는 확신을 가졌습니다. 다양한 사람들의 피드백과 코드를 보며 배울 수 있는 요소들이 많았으며, 몰랐던 개발 환경 셋팅(Craco) 등을 접하면서도 새로운 배움에 즐거움을 느꼈습니다. 개인적으로 지금은 가장 생각이 많고 바쁜 시기이지만, 이런 때일수록 기본을 지키고 몸과 마음을 돌보면서 조금씩 나아가는 노력이 필요하다고…

✍️ 개발자로써 삶 저는 개발자로 일하면서 어떤 방향으로 성장해야 하는지, 어떤 태도로 개발을 진행해야 하는지, 그리고 앞으로 어떻게 노력해야 할지에 대한 고민이 많이 들었는데 이 때, 엘리님의 영상과 이 책을 통해 많은 도움을 받을 수 있었습니다. 엘리님께서는 개발자로 성장하면서 어려움을 겪을 때 이 책을 읽으며 영감을 받았다고 합니다. 또한, 개발자로서 성장하고자 하는 사람이라면 꼭 읽어보라고 추천해주셨기 때문에 저도 이 책을 구입하여 읽게 되었습니다. 책에서는 개발자 시장에서 필요한 역량을 갖추기 위해 노력하는 방법들과, 개발자로서 가져야 하는 태도에 대한 다양한 내용을 다루고 있습니다. 아래는 이 책에서 개인적으로 영감을 받은 문장 중 일부를 적어보았습니다. ✍️ 좋은 문장들 고급 개발자. 저는 개발자는 단순히 경력이 늘어남에 따라 자동으로 실력이 향상되는 직업이 아니라고 생각합니다. 대신, 끊임없이 트렌드에 민감하게 대처하고 지속적인 학습을 통해 더 나은 영향력을 발휘해야 실…

✏️ 아이템 28: 유효한 상태만 표현하는 타입을 지향하기 애플리케이션의 상태 표현하기 모든 상황 고려하기 어떤 값들을 포함하고 어떤 값들을 제외할지 신중하기 생각하기 ✏️ 아이템 29: 사용할 때는 너그럽게, 생성할 때는 엄격하게 TCP 구현체의 견고성 원칙 또는 포스텔의 법칙(함수의 시그니처에도 적용가능) 함수의 매개변수는 타입의 범위가 넓어도 되지만, 결과를 반환할 때는 일반적으로 타입의 범위가 더 구체적이어야 함 예시 👎 Bad Case 👍 Good Case → 매개변수와 반환 타입의 재사용을 위해서 기본 형태(반환 타입)와 느슨한 형태(매개변수 타입)를 지향 ✏️ 아이템 30: 문서에 타입 정보를 쓰지 않기 타입 구문은 TS 타입 체커가 타입 정보를 동기화하도록 강제 함수의 입력과 출력의 타입을 코드로 표현하는 것이 주석보다 더 나음 값을 변경하지 않는다고 설명하는 주석 대신, readonly 사용 변수명에 타입 정보 넣지 않기 (단위가 있는 숫자들은 제외) ✏️ 아이템 31:…

한 주 회고 새로운 도전을 위해 이력서를 정리했습니다. 이 과정에서 제가 지금까지 개발한 경력을 정리하면서, 전주에서 서울로 올라와 프론트엔드 개발자로써 고군분투한 경험을 되돌아보았습니다. 이 과정에서 많은 인연들을 만나고, 완전히 다른 환경에서 하나씩 배우고 성장했다는 사실을 깨달았습니다. 새로운 환경에서 다양한 인연들과 함께 일하고, 외부 스터디를 통해 다른 개발자들과 직접 만나 개발에 대한 이야기를 나누었던 것은 저에게 잊지 못할 시간이었습니다. 그리고 나는 개발 할 때 무엇을 가장 중요시 여기는지, 어떤 개발자가 되고 싶은지 등 본질적인 질문을 다시 한 번 고민해보는 시간을 가졌습니다. 저는 개발 할 때, 문제를 차분히 분석하고 단계별로 해결해 나아가면서 스스로 성장하고 있다는 사실을 크게 중요시 여기고 이렇게 개발한 기능들이 많은 사람들에게 좋은 영향을 줬다는 것을 알았을 때 엄청난 보람을 느꼈습니다. 면접에서는 ‘왜 이러한 선택을 가지고 개발을 했는지’ 등과 같은 ‘왜’…

✏️ 아이템 19: 추론 가능한 타입을 사용해 장황한 코드 방지하기 코드의 모든 변수에 타입을 선언하는 것은 비 생산적 객체는 비구조화 할당문 사용 지향 모든 지역 변수의 타입이 추론되도록 해야 함 타입 구문을 생략하는 경우 함수 내에서 생성된 지역 변수 함수 파라미터에 기본 값이 있는 경우 타입을 명시하면 좋은 경우 객체 리터럴을 정의할 때, 잉여 속성 체크가 동작 함 함수의 반환 타입 함수의 입출력 타입에 대해 더욱 명확하게 알 수 있음 명명된 타입을 사용할 수 있음 cf) eslint 규칙 중 사용 가능 작성된 모든 타입 구문이 정말로 필요한지 확인 ✏️ 아이템 20: 다른 타입에는 다른 변수 사용하기 변수의 값은 바뀔 수 있지만, 그 타입은 바뀌지 않음 타입 확장하기 - 유니온 타입 ✏️ 아이템 21: 타입 넓히기 TS가 작성된 코드를 체크하는 정적 분석 시점에, 변수는 값들의 집합인 타입을 가짐 TS의 지정된 단일 값을 가지고 할당 가능한 값들의 집합을 유추하는 것 넓히기…

✏️ 아이템 13: 타입과 인터페이스의 차이점 알기 인터페이스와 타입 모두 사용 가능한 경우 인덱스 시그니처 함수 타입 제너릭 인터페이스는 다른 타입을 포함할 수 있어 타입을 확장 할 수 있고 타입이 인터페이스를 포함 시킬 경우 인터페이스를 확장 할 수 있음 인터페이스가 타입을 확장하는 경우 타입이 인터페이스를 확장하는 경우 인터페이스와 타입의 차이점 인터페이스는 객체의 구조를 정의하기 위한 것으로 사용 타입은 객체, 변수, 함수 등의 값을 설명하기 위해 사용 유니온 타입은 있지만 유니온 인터페이스는 없음 유니온 타입 확장이 필요한 경우 유니온 타입에 추가 속성을 붙인 타입 만들기(인터페이스로 표현 불가) 튜플과 배열 타입 타입에는 없는 인터페이스의 보강 기능(선언 병합) TS는 여러 버전의 JS 표준 라이브러리에서 타입을 모아 병합 함 타입은 기존 타입에 추가적인 보강이 없는 경우에만 사용해야 함 복잡한 타입이라면 타입 별칭을, 간단한 객체 타입이라면 인터페이스를 사용(협업시 일…

✏️ 아이템 6: 편집기를 사용하여 타입 시스템 탐색하기 TS에서 실행할 수 있는 프로그램 TS 컴파일러(tsc) 단독 실행 가능한 TS 서버(tsserver) TS 서버에서 제공하는 언어 서비스를 사용 권장 많은 편집기에서 TS가 그 타입을 어떻게 판단하는지 확인 가능 편집기 타입 오류를 살펴보는 것도 타입 시스템을 파악하는 데 좋은 방법 라이브러리와 라이브러리의 타입 선언 Go to Definition 옵션으로 에서 타입 정의 확인 가능 ✏️ 아이템 7: 타입이 값들의 집합이라고 생각하기 런타임시 모든 변수는 JS로 정해진 고유한 값 존재 코드가 실행되기 전 TS가 오류를 체크하는 순간에는 타입을 가지고 있으며, 이는 할당 가능한 값들의 집합 집합의 종류 : 아무것도 포함하지 않는 공집합(아무 값도 할당 불가) cf) 는 undefined 반환 리터럴(유닛)타입 : 한 가지 값만 포함하는 타입 유니온 타입 : 두 개 혹은 세 개 값 포함하는 집합들의 합집합 ‘할당 가능’하다는 뜻…

✏️ 아이템 1: 타입스크립트와 자바스크립트의 관계 “타입스크립트는 자바스크립트의 상위집합(superset)이다” 그렇기 때문에 JS 코드는 이미 TS다. 기존 JS 코드를 타입스크립트로 마이그레이션하는데 큰 이점 타입 구문을 사용하는 순간부터 JS는 TS 영역으로 들어가게 됨 타입 시스템에서는 런타임에 오류를 발생시킬 코드를 미리 찾아낸다. 타입을 명시적으로 선언하여 의도를 분명하게 하면 오류를 구체적으로 알 수 있다. ✏ 아이템 2: 타입스크립트 설정 으로 타입스크립트 설정 작성 : 변수들이 미리 정의된 타입을 가져야 하는지 여부를 제어(any 타입을 사용하면 에러 설정) strictNullChecks 과 가 모든 타입에서 허용되는지 설정 ✏ 아이템 3: 코드 생성과 타입은 관계가 없음 TS 컴파일러는 2가지 역할을 수행 최신 TS,JS를 브라우저에서 동작할 수 있도록 구버전 JS로 트랜스파일 함 코드의 타입 오류를 체크 함 타입 오류가 있는 코드도 컴파일 가능 컴파일은 타입 …

한 주 회고 이번 한 주도 개인적으로 새로운 경험들을 했습니다. 먼저 새로운 회사 컬처핏 면접을 보면서 생각을 말로 일목요연하게 표현하는 부족하다는 사실을 알게 되었습니다. 이 부분은 앞으로 살아가면서 반드시 잘 해야 하는 능력이라고 생각하기에(잘 설득하는 능력을 매우 중요한 것 같습니다.) 독서와 글쓰기 그리고 스스로에게 질문하고 답하는 연습을 해서 타인에게 정확하게 저의 의사를 전달 할 수 있도록 노력해야 겠습니다. 정말 프론트엔드 개발자로써 실력있는 개발자가 되기위해 필요한 역량을 꼭 키우겠다는 다짐도 해봅니다. 한 주도 너무 애쓴 나에게 칭찬을 합니다. 밑에는 오로다 데이를 참여해 느낀 점과 강연에서 인상깊었던 말씀들을 정리했습니다. 다이어리 강연(오로다 데이) 저는 PDS(Plan Do See) 다이어리를 사용하고 있습니다. 오늘은 PDS 다이어리를 사용한 사람들이 모여 자신이 다이어리를 사용하면서 변화된 점을 공유하는 강연장에 참석했습니다. 그곳에서는 스터디언 채널의…

한 주 회고 한 달 만에 본가인 전주에 내려가서 휴식을 취했습니다. 오랜만에 자주 갔던 국밥집을 찾아가 보니, 사람들이 왜 이곳을 소울푸드라고 부르는지 이제서야 이해가 가더군요. 매일 먹던 음식을 오랜만에 먹으니, 몸이 살아나고 에너지가 넘쳐나는 기분을 느낄 수 있었습니다. 또한, 친구와 함께 사우나에 가서 이야기도 나누고 몸을 개운하게 씻고 나와서는 기분이 너무 좋았습니다. 이번 경험으로, 매일 당연하게 느껴왔던 것들이 이제는 당연하지 않다는 것과 행복이 멀리 떨어져 있지 않고, 일상 속에 가깝게 있다는 사실을 다시 한번 깨달았습니다. 너무나도 쉽게 일상의 소중함을 잊어버리곤 하지만, 이러한 소중한 순간들이 삶의 큰 힘이 되어주는 것 같습니다. 누구보다도 자신의 삶을 살아가며, 그 속에서 소중한 것들을 찾아내어야 한다는 것도 잘 알고 있습니다. 매일이 단조롭고 지루해보이더라도, 그 안에는 놓치기 쉬운 소중한 순간들을 느낄 수 있도록 노력해야겠습니다. 이번 주도 수고많았습니다. …

한 주 느낀점 혼자서 사이드 프로젝트를 진행하면서, 회사에서 제공하는 디자인 시스템, 패키지, 그리고 모듈들의 가치를 깨달았습니다. 이 과정에서, 회사에서 제공해주는 코드 덕분에 빠른 개발을 할 수 있었다는 것을 깨닫게 되었습니다. 이에 대해 감사한 마음을 팀원들에게 전합니다. 프로젝트를 시작하기 전, ESLint, Husky, tsconfig 설정, 그리고 디자인 시스템 개발 등을 직접 셋팅하고 개발하는 과정에서, 당연하게 여겼던 코드들을 의심하고 이해하는 시간을 가졌습니다. 혼자서 하나씩 이해하면서 고민하는 행위가 중요하다는 것을 깨달았습니다. 앞으로도, 당연하다고 생각하는 코드들에 대해서도 의심하는 습관을 가지도록 노력하겠습니다. 새로 알게된 내용 및 더 고민해야 할 부분 구글 개발자 도구에서 Network 탭에 이미지가 있는 이유는, 브라우저가 API에서 가져온 데이터 중 이미지가 있다면, 이미지를 렌더링 하기 위해 해당 이미지 URL로 요청해서 데이터를 가져오는 것이지 …

외부 라이브러리를 관리 하는 방법 왜 의존성을 줄여야 할까요? 외부 라이브러리를 사용할 때 최대한 의존성을 줄이는 것이 중요합니다. 외부 라이브러리가 업데이트되거나 문제가 생기면, 우리 프로젝트에도 영향을 끼칠 수 있기 때문입니다. 그렇다면 외부 라이브러리와의 의존성을 최소화하는 방법은 무엇일까요? 의존성 줄이는 방법 최근 쏙쏙 들어오는 함수형 코딩책을 가지고하는 함수형 프로그래밍 스터디에 참여해서 많은 것을 배울 수 있었습니다. 그 중에서도 을 이용하여 외부 라이브러리의 의존성을 줄이는 방법을 배웠습니다. 은 우리가 필요한 인터페이스만을 노출시키고, 그 외의 기능들은 Wrapping 함수로 가려놓는 것입니다. 이렇게 하면 외부 라이브러리와의 의존성을 최소화할 수 있어서 유지보수성을 높일 수 있습니다. 추상화 벽 사용시, 장점 추상화 벽을 사용하면 여러 가지 장점이 있습니다. 외부 라이브러리와의 관리 포인트를 줄일 수 있습니다. 외부 라이브러리의 변경사항이 생기면, 해당 추상화 벽…

배운 내용 DTO(계층간의 데이터 교환을 위해 사용하는 객체), Entity(실체), 단일 책임원칙(객체는 단 하나의 책임만 가져야 한다) 웹접근성을 향상시키는 방법 : 적절한 HTML 태그 사용, 이미지에 대체 텍스트 제공(alt 속성), 적절한 색상 대비 사용, 키보드 사용에 대한 고려(탭키), 웹 폰트 사용에 대한 고려, 자막 및 수화 제공 웹에서 GPU를 가속시키는 방법 : video나 canvas 태그를 사용하는 경우, 하드웨어 가속 플러그인을 사용하는 경우, 3d transform 속성이 존재하는 경우, 하드웨어 가속이 된 2D canvas 요소인 경우, backface-visibility attribute가 hidden인 경우, transition, animation 속성이 있는 경우, will-change를 설정한 경우 (opacity, transform, top, left 등..) 가장 흔히 사용되는 방법은 translateZ(0) 옵션을 적용하는 것입니다. 또한 …

✏️ 배운 내용 이번 주는 함께 일 했던 팀원분들에게 궁금한 점을 물어보는 시간을 가지게 되었습니다. 그 중에 아래와 같이 궁금한 질문들을 물어보았습니다. 매력적인 개발자란 어떤 개발자이나요? 저의 장점과 아쉬운점은 무엇이나요?? 매력적인 개발자란 인풋과 아웃풋이 확실한 사람 커뮤니케이션이 좋은 사람 스스로 문제를 찾고 해결하는 사람. 나의 장점 학습 및 업무에 대한 내용을 잘 정리한다. 꾸준히 학습한다. 태도가 좋다.(배울려는 의지가 높다.) 사람을 편안하게 해준다. 그래서 다른 사람들이 다가오는 것에 거리낌이 없다. 나의 아쉬운점 어떻게 하면 업무를 자동화 할 수 있을지, 혹은 효율적으로 할 수 있을 지 고민을 하면 좋을 것 같다. 정리를 잘하는데, 이 부분을 조금 더 확장했으면 좋겠다.(다양한 오프라인 플랫폼 등록) 💡생각 팀원분들의 생각을 들으면서 나를 객관적으로 조금은 더 볼 수 있어서 좋았다. 내가 생각하는 나의 모습이 전부가 아니라는 사실도 알게 되었고, 생각보다 아…

✏️ 배운 내용 를 가지고 사업 계획성 작성하는 기능을 개발하면서 어떻게하면 사용자에게 더욱 더 의미있는 콘텐츠 결과와 사용자에 불필요한 요소 입력하는 Form 줄이는 고민을 많이 했습니다. 또한 chatGPT에서 제공하는 다빈치 모델과 터보 모델의 동일한 인풋에 어떠한 차이가 있는지 실험을 해보았습니다. 특히, 터보 모델에 아래와 같이 인격을 주어주었을 때, 결과 값이 다르다는 사실이 매우 흥미로웠습니다. HTML 속성 중 라는 속성에 대해 알게 되었습니다. 이 속성은 브라우저에서 가져온 스크립트 소스 또는 스타일 시트를 검사해, 무언가 문제가 있다면 로드 되지 않도록 설정하는 속성임을 알게되었습니다. 밑에 처럼 에 fetch해서 가져올 스크립트 해쉬 값을 미리 지정해 놓으면, 브라우저는 실제로 가져온 스크립트의 해쉬 값과 비교해서 동일하면 로드 하는 식으로 진행이 됩니다. 이렇게 해서 데이터의 무결성을 지킬 수 있습니다. 이 과정에서 브라우저는 SHA-384 알고리즘을 통해 데이…

✏️ 배운 내용 이번 주는 Open AI에서 제공하는 API를 통해, 작은 서비스를 기획하고 개발하는 경험을 했습니다. 먼저 처음 접하는 Open AI API를 이해하는 과정과 이해한 개념을 바탕으로 새로운 기능을 개발하는 부분은 역시나 쉽지 않았습니다. 특히 사용자가 돈을 내고 사용해야 하는 서비스를 만든다는 것이 이렇게 쉽지 않음을 깨닫게 되었습니다. 제가 생각한 서비스는 사업 아이템을 입력하면 Open AI에게 미리 입력한 질문에 대해 답변을 해주는 것을 만들었습니다. 이 때, 미리 어떤 질문은 해야 최대한 구체적인 답변을 해주는지 파악하는 것이 관건이었습니다. 더군나, 영어로 질문한 것은 한글로 번역해서 보여주는 과정에서도 번역이 제대로 되지 않을 경우가 있었습니다. 이 때에는 단순히 Open AI를 넘어서 딥러닝을 통해 해결해야 한다는 생각이 들었습니다. 이번주 개발을 하면서 솔직히 많은 어려움이 있었습니다. 낯선 개념을 이해하고 빠른 시간에 개발을 해야 한다는 것이 쉽지 …

이 글은 React 공식 문서 - JavaScript in JSX with Curly Braces 를 번역한 것 입니다. JavaScript in JSX with Curly Braces 마크업을 작성하는 과정에서 약간의 JS 로직을 추가하거나, 동적으로 Props를 참조하고 싶을 때가 있습니다. 이럴 때에는 중괄호를 사용할 수 있습니다. 우리가 배우게 될 내용들 문자열을 전달하는 방법 중괄호를 통해 JSX문법에 JS 변수를 사용하는 방법 중괄호를 통해 JSX문법에서 JS 함수를 실행하는 방법 중괄호를 통해 JS Object를 사용하는 방법 Passing strings with quotes JSX 속성에 string을 전달 할려면, 따옴표나, 쌍따옴표를 사용하면 됩니다. 와 를 동적인 값으로 특정 변수에 넣어서 JSX 속성으로 전달 할 수 있습니다. 여기서 주의 해야 할 부분은 className의 avatar와 변수 이름의 avatar의 차이를 알고 있어야 합니다. 그리고 중괄호…

아래의 아키텍처가 정답이 아니라고 생각합니다. 너그러운 마음과 피드백을 주시면 감사하겠습니다.🙇🏻‍ ✔️ 새로운 아키텍처를 도입해 얻은 장점 코드 응집성을 높여 관리 포인트를 줄였습니다. 코드 유지보수에 더 유연하게 대응할 수 있게 되었습니다. 다른 팀원의 코드를 이해하는 데 필요한 리소스를 줄였습니다. ✏️ 새로운 아키텍처를 도입한 이유 새로운 아키텍처를 도입한 가장 큰 이유는 협업을 통한 개발 환경과 코드 응집성을 개선하고, 이로 인해 관리 포인트를 줄이기 위함입니다. 협업 시, 각자 다른 생각으로 폴더명을 지정해 개발을 진행하게 됩니다.(물론 팀내 폴더 컨벤션이 있을 때에는 다릅니다.) 이로 인해 다른 사람이 개발한 코드뿐만 아니라 해당 폴더명에 코드를 추가한 이유까지 파악해야 하는 상황이 발생합니다. 이는 코드를 이해하고 개발하는 데 많은 리소스를 필요로 하게 만듭니다. 따라서 팀원들과 회의를 통해 이 문제를 해결하고자, 더 나은 코드 아키텍처를 만들기로 결정하였습니다. 이를 위해 …

이 글은 React 공식 문서 - Writing Markup with JSX 를 번역한 것 입니다. Writing Markup with JSX 문법은 JS파일 안에서 JS를 통해 HTML 마크업을 할 수 있도록 하는 문법입니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX문법을 사용하는 것을 선호 합니다. 우리가 배우게 될 내용들 React가 마크업과 랜더링 로직을 혼합한 이유 JSX가 HTML과 다른 점 JSX로 정보를 나타내는 방법 JSX: Putting markup into JavaScript WEB은 HTML, CSS, JS를 기반으로 구축되었습니다. 수년 동안, 웹 개발자들은 개발 할 때 콘텐츠는 HTML에, 디자인은 CSS에 로직은 JS에 각각 별도의 파일에서 관리했습니다. 콘텐츠는 HTML안에 마크업 되고, 웹 페이지 로직은 JS안에 별도로 있었습니다. 그러나 웹이 점점 인터렉티브하게 되어지면서, JS 로직이 콘텐츠를 결정하는 비중이 …

✏️ 배운 내용 아래와 같이 타입을 함께 반환해서 특정 상황에 맞는 로직을 작성 할 수 있음 프로젝트에서 웹팩으로 번들을 할 때, 특정 폴더를 번들시 내부에 선언되지 않은 값을 접근해 번들 실패 에러가 발생 했음 Next.js에서는 이라는 설정을 통해 번들시 폴더 접근 순서를 정해줄 수 있음 순수 UI Component는 외부 Props로 정보를 받아서 언제든지 확장이 가능함 만약에 Link 컴포넌트 or A태그 속성에 넣어야 하는 값을 Props로 전달 받으면 UI Component이지만, 그렇지 않고 Component에 Link or A 태그 내부 값을 작성하면 순수 UI Component가 아님 CSS 속성 중 를 적용하기 위해서는 부모 태그에 가 존재 해야 함 애초에 Default 값이 이기 때문에 언제든지 외부 상황에 따라 영역 넓이가 줄어들 수 있음. 함수를 통해, React 컴포넌트를 조건별로 랜더링하게 된다면, 추상화된 컴포넌트를 사용하면 좋습니다. 아래와 같이 컴…

이 글은 React 공식 문서 - Importing and Exporting Components를 번역한 것 입니다. Importing and Exporting Components 컴포넌트의 가장 큰 장점은 재사용성입니다. 대신 주의 해야할 부분은 하나의 컴포넌트 안에 다양한 컴포넌트가 중첩 될 때, 다른 파일로 분할해서 관리하는 것이 좋습니다. 이렇게 하면, 컴포넌트를 관리하기 편합니다. 우리가 배우게 될 내용들 Root 컴포넌트의 의미 컴포넌트를 import 및 export 하는 방법 default, named import, export 사용 방법 import 하는 방법과 하나의 파일에서 여러개의 컴포넌트를 export하는 방법 컴포넌트를 여러 파일로 분할하는 방법 The root component file 기본적으로 CRA(Create React App)을 실행하면, 에 루트 컴포넌트 파일이 생성됩니다. 그러나 는 루트 컴포넌트가 페이지마다 다를 수 있습니다. Export…

글 작성 회고 오늘은 제가 글또에 제출한 글들에 대한 회고하는 시간을 가져보고자 합니다. 문득 반성(회고)하지 않은 사람은 발전이 없다는 이야기가 생각이 났습니다. 저도 사실 최근에 회고하기보다는 매일 매일 새로운 것을 알아가는 것에 집중했던 것 같습니다. 이번 글을 작성하면서 지금까지 글을 작성하면서 스스로 질문하고 답변하는 시간을 가져보았습니다. 처음 글이 마음에 들었나요?? 글또 스터디를 시작하고 자연스럽게 글 소재에 대해 고민을 하게 되었습니다. 개인적으로 좋은 해외 개발 아티클을 번역하고 싶어 시도했지만, 정말 어려웠습니다. 마음처럼 빠르게 글도 안 써지고 내가 알고 있는 단어의 뜻이 문장에서 어색함이 너무나 많았습니다. 또한 이 글을 읽었을 때 과연 잘 이해가 될까? 라는 의심도 많았습니다. 그래서 솔직히 100% 마음에 들지는 않아, 다음 번역을 할 때는 문장이 적은 것을 선택해야겠습니다. 글을 작성할 때 나의 감정은 어땠나요? 아주 답답했습니다. 위에도 작성했지만, …

✏️ 배운 내용 리팩토링에 대한 개념을 다른 팀원분에게 물어보았고, 내가 놓치고 있던 부분을 밑에 정리 했다. 기능은 변하지 않지만, 코드 구조가 변하는 것(불필요한 코드 제거, 유지 보수성에 용이한 코드) 리팩토링 하기 전에 테스트 코드를 먼저 작성하는 것이 안전(테스트 코드 작성하지 못하는 상황에 자체 QA를 돌리면서 유연하게 리팩토링 하는 것도 방법) 리팩토링을 진행하는 과정에서 코드를 고칠 때마다 더욱 이상해진다고 판단되면, 다른 사람들이 개발한 라이브러리 코드를 보거나, 리팩토링 책, 함수형 프로그래밍 책, OOP 관련 책을 보면 좋음 태그 내용이 서로 관계가 있는 경우 사용 section 태그 안에 article 태그가 여러개 들어 갈 수 있음 태그 내용이 독립적이고 스스로 설 수 있는 내용 article 태그 안에 관련 없는 article 태그가 올 수 없음 SEO 접근 향상에 태그가 영향을 줌 태그 : 의미없는 태그 SEO 측면에서 HTML 속성에 를 적용하는 …

✏️ 배운 내용 외부를 리팩터링 및 테스트 코드 작성을 했습니다. 그리고 작성한 이 코드가 위치한 폴더는 입니다. libs의 역할은 외부 라이브러리를 관리하거나, 사내 프로젝트 사용에 용이하기 위해 랩핑을 통해 인터페이스를 제공하기 위한 장소입니다.(여기서 중요한 점은 libs의 해당 라이브러리를 이해 하지 못한 채, 랩핑을 통해 인터페이스를 제공하게 된다면, 오히려 다른 팀원분들에게 혼란을 줄 수 있어 적절한 회의를 가진 후, 개발해야합니다.) 만약에 사내에 사용하기 위한 라이브러리로 리팩토링 되어진다면 즉, 외부 라이브러리의 의존성이 사라지고 다른 팀원분이 사용하는 순간 폴더로 이동되어 사용되어진다는 사실에 대해 알게 되었습니다. 이 과정에서 많은 사람과 개발을 하기 위해서는 폴더의 이름 및 역할이 분명해야 개발의 혼란을 줄일 수 있음을 알게 되었습니다. 추가로 폴더는 서버의 데이터 스키마와 필드에 의존하는 폴더라는 사실도 알게 되었습니다. Schema.org 규격에 맞게 …

💪 배운 내용 란 엉킨 코드를 푸는 것 엉킨 코드를 푸는 단계 액션 - 계산 - 데이터로 먼저 분리 계산 : 명시적 입,출력 & 계층적 구조, 추상화의 벽 다시 알맞게 조립(파이프라인) 일급함수 이용 반복문 이용(map, filter, reduce 등) 파이프라인 구조 이터레이터 시간 -> 타임라인 ValueCell(책 P.515) & 만들어진 RxJS 데이터의 단방향 변경 전파 반응형 아키텍처(Reactive Architectures) Redux 아키텍처 각 단계 별로 가는 것이 좋다. Data -> 비즈니스로 점프하지 않도록 주의하자 👍🏻 실습 를 구현 에러를 어떻게 핸들링할 것인가를 고민 엣지 케이스를 찾아서 고쳐보기 잘 구현된 라이브러리를 보면서 고민 RxJS를 보면서 어떻게 핸들링 하는지 찾아보기 참고 함수형 프로그래밍 스터디 RxJS Visualizer RxJS 한번 배워보실래요? 엉킨 코드를 푸는 단계 데이터의 단방향 변경 전파 참고

인트로 저희 서비스는 전문투자자와 스타트업 관련 서비스를 제공해주는 플랫폼 입니다. 플랫폼을 이용하기 앞서, 먼저 스타트업 종사자 혹은 전문 투자자를 인증하는 페이지가 존재 합니다. 그 페이지에는 다양한 Form과 Validation이 존재합니다. 이번 스프린트에서 저는 기존에 React로 개발된 페이지를 Next로 마이그레이션 하는 작업을 맡게 되었습니다. 이번 스프린트을 통해 을 알게 되었고, 왜 을 선택해 개발하게 되었는지 정리하고자 이 글을 작성합니다. 또한 이번 스프린트를 통해 스스로 되돌아 보는 시간을 갖기 위해 글을 작성합니다. 요구사항 참고 React Hook Form vs Formik 비교 번역글 인프런 - React Form 컴포넌트 개발기 참고

Facts 컴포넌트 개발을 진행하면서, 타입 설계를 작성하지 않고 개발을 진행해 개발의 방향이 잘 잡히지 않았다. Feelings 타입 설계를 먼저 잡고, 개발을 하는 부분이 많이 익숙하지 않다. 그래서 스스로 답답하다. Findings 팀원분께서 타입 설계와 다른 좋은 피드백을 주셔서, 여기에 정리해 좋은 조언을 체화하고자 한다. 개발을 할 때, 을 시작해야 합니다. 예를 들어 가 어떤 값이 들어올지 모르는 상황에서 타입을 작성하고 있지 않다가 가 갑자기 많아진다면, 기존에 작성한, 가 어떤 타입으로 지정해야 하는지 모르게 됩니다. 또한 개발 하기 앞서 팀에서 얼라인 맞춘 내용 중 타입을 먼저 설계하고 개발을 진행 있는데, 그렇게 개발을 하지 않는 것은 서로의 신뢰를 깨는 행위 입니다. 재사용가능한 컴포넌트를 개발하는 과정에서 혼자서 개발하기 보다는 디자이너와 협의를 통해, 어떤 디자인이 지속적으로 유지되는 건지 또는 어떤 디자인은 변경 가능성이 많은지를 확인하면서 컴포넌트 …

이 글은 React 공식 문서 - Your First Component를 번역한 것 입니다. Your First Component 는 React에서 핵심 개념 중 하나입니다. Component는 UI를 구축하는 기반입니다. 우리가 배우게 될 내용들 Component란? React에서 Component의 역할은? Component를 개발하는 방법은? Components: UI Building Blocks WEB에서 HTML을 사용하면 과 와 같은 태그가 내장된 구조가 있는 문서(Mark up)를 만들 수 있습니다. 이 마크업은 Article , Heading (약칭) 목차 중 목록이 순서대로 정의되었다는 것을 로 나타냅니다. 스타일을 위한 CSS와 상호작용을 위한 JS와 결합된 마크업은 웹에서 볼 수 있는 모든 UI(Sidebar, Avatar, Modal, Dropdown 등)를 제공합니다. React APP을 개발할 때, 재사용 가능한 UI (마크업, CSS, JS가 포함되어 있…

이 글은 Siegfried Grimbeek가 작성한 React Hook Form vs. Formik: A technical and performance comparison 일부를 번역한 글 입니다. 소개 우리는 React로 개발하면서 Form에 대한 많은 어려움을 겪고 있습니다. 예를 들어 Form 안의 정보 조작, 유효성 검사, 상태 관리 등의 어려움을 가지고 개발을 하고 있습니다. 이러한 문제점을 해결해 주기 위해, Formik이 개발되어졌고 더 나아가, Formik의 일부 단점을 해결해주기 위해 React Hook Form이 등장했습니다. React Hook Form과 Formik의 비교 다음은 React Hook Form과 Formik의 다운로드 통계입니다. 아래와 같이 2022년 부터 React Hook Form의 다운로드 수가 Formik을 넘어섰습니다. 단순히 다운로스 수가 많다고 어떤 라이브러리가 더 좋다고 판단 할 수 없습니다. 대신 위에 보이는 라이브러리의 사이…

‍구조화된 데이터란? 웹 페이지에 있는 정보를 구조화하여 검색 엔진이 이를 이해하기 쉽도록 만드는 것을 의미합니다. 예를 들어, 제목, 저자, 출판사, 출판일 등의 정보를 태그로 감싸는 것입니다. 검색 엔진은 이러한 정보를 수집하여(리치 스니펫) 검색 결과를 더욱 정확하게 제공할 수 있습니다. Snippets은 검색어와 관련된 정보를 미리 보여주는 정보 블록으로, 사용자가 검색 결과를 더 빠르게 식별하고 선택할 수 있도록 도와줍니다. 콘텐츠에 구조화된 데이터를 제공할 경우 위와 같이 더 풍부한 검색 결과를 제공할 수 있으며, 이는 검색을 하는 사용자들이 해당 사이트의 유입률을 높여줄 수 있습니다. ‍구조화된 데이터란 어떻게 작성하는가? schema.org 구글, 마이크로소프트, 야후, 어도비 등의 대형 인터넷 기업들이 공동으로 개발한 구조화된 데이터 마크업 언어입니다. 이 언어를 사용하면 웹페이지의 콘텐츠를 구조화된 데이터로 표현할 수 있어 검색 엔진이 이해하기 쉬운 형식으로 정보…

✏️ 배운 내용 이란 글로써 얻어지는 영역이 아니라, 경험의 영역이다라는 CTO님의 의견을 듣고 많은 생각을 하게 되었습니다. 리팩토링 행위 안에는 많은 가치를 가지고 있는 것 같습니다. 효율적인 리소스 관리, 협업을 위한 가독성 있는 코드 생산, 유지 보수를 위한 작업 등 다양한 의미를 내포 하고 있는 것 같습니다. 프론트엔드 팀 리더분으로 부터 저의 강점을 듣고 저를 다시 되돌아 보는 시간을 갖게 되었습니다. https://free-ko.github.io/write-log-230202/ 라이브러리를 회사 요구사항에 맞게 커스터마이징한 컴포넌트를 리팩토링하기 앞서, 테스트 코드를 작성했습니다. 테스트 코드를 작성하면서 느낀 점은 테스트 하기 좋은 코드가 좋은 코드가 아닐까라는 생각을 하게 되었습니다. 왜냐하면 테스트하기 좋다는 의미는 내부 코드의 동작이 단순하고 명확해, 어디서든 사용할 수 있다는 컴포넌트의 개념에 부합하기 때문이라고 생각합니다. 와 에 대한 개념을 알게 되었으며…

팀 리더 리뷰 누군가가 나의 강점을 이야기해줄 때, 나는 사실 속으로 라는 생각을 했다. 최근에 팀 리더 분께서 위와 같이 나의 장점을 이야기해 주셨을 때 기분은 좋았지만, 한편으로 스스로 의심을 했다. 그런데 문득 내가 나의 강점을 모르는 상황에서 남들이 이야기해주는 것이 정말 내가 가지고 있는 강점이 아닐까라는 생각을 하게 되었다. 그래서 일단 받아들이고 다시 한번 나의 강점을 이야기해 주신 문장을 곱씹어 보았다. ‘정리 능력이 탁월하며’ 나는 정리 정돈을 좋아한다. 무언가를 가지런히 놓는 것을 좋아하며, 평소에 집에서나 일을 할 때에 가지런히 무언가를 정리 정돈을 하면서 일을 시작하고 마무리한다. 그리고 컴퓨터에 폴더를 정리하는 것도 좋아한다. 또한 매일매일 하루 템플릿을 만들어 그날 어떤 업무를 했고, 질문을 통해 무엇을 배웠는지 적기도 하고 마지막으로 그날 회고를 작성한다. 곰곰이 생각해 보니 나의 강점으로 만들 수 있다고 생각하고 누구보다 정리 정돈의 능력을 키우고 싶은…

💪 배운 내용 함수형 관점에서 시간(비동기) 바라보기 시간(액션) → 데이터로 생각해보기 → 중간에 분기 역할을 하는 것이 존재 하고 이러한 것을 모나드라고 한다. Promise의 구현된 코드를 파악해보자 함수형 관점에서 callback의 문제점은? 위의 코드는 명시적 출력이 없기 때문에 액션임 로 만들게 되면 명시적 출력을 통해 값을 만들 수 있음 액션(동작)을 값(데이터)로 만들 수 있음 즉, 액션을 계산으로 그리고 계산으로 생각하는 것이 모나드 개념 액션 → 계산 → 액션 → 계산 → 액션 → 데이터와 같은 과정에성 중간에 시간과 같은 액션이 들어올 때 처리 하는 방법 중 하나가 이다.() ⭐️ 실습 구현하기 성공 Case와 실패 Case를 구분 🌈 정리 우리는 액션을 계산으로 분리시키는 작업을 진행 계산을 명시적 입력과 출력으로 바꾸는 리팩토링 과정을 진행 계산들을 모아서 하나의 계산으로 만들고 나중에 인자를 넣는 Pipe 함수를 실습함 제너레이터를 만들어서 순차적인 계산…

✅ 복습 1부 액션, 계산, 데이터로 나누는 것이 중요 함수형 프로그래밍의 기본은 데이터를 변하는 것과 변하지 않는 것을 나뉘어서 구분하는 것 명시적 입력과 출력을 만들자(불변성) Ex) 를 통해서, 카피온라이트를 사용할 수 있다. 계층적 구조 : 계산(스키마, 비즈니스로직, 유틸) 의 개념을 이해하는 것이 중요 의 구조를 아는 것이 중요 2부 함수형 기법 1급 함수 : 함수로 인자를 받고 반환하는 것 계산을 다시 비지니스 로직과 유틸로 구분하는 법을 배우면서 동시에 “함수형 언어가 가지고 있는 1급이라는 개념과 함수형 유틸성” 을 이해하기 위한 “기초”를 배우는 것 Iterator와 Generator는 실무 자바스크립트에서는 잘 쓰이지 않음 와 는 함수형 프로그래밍에서 중요 함수형 프로그래밍은 “유틸리티 함수들의 모음집” 같은 것이 아님 “함수형 프로그래밍이란 단방향 데이터 처리의 파이프라인” 이라는 감각이 이해가 된다면, Array의 map, filter, reduce를…

💻 함수형 프로그래밍 복습 프로그래밍 데이터 = State 데이터 → 데이터 → …(반복) 데이터(State)를 관리하는 것 함수형 프로그래밍 상태의 변화를 바라보는 즉 변화시키는 함수를 분리 상태를 변화시키는 것 = 액션 상태를 변화시키지 않은 것 = 계산(계층을 나눔 - ) 비즈니스, 스키마는 해당 도메인과 연관됨 즉, 좋은 유틸을 많이 만들어서 수정을 최소화 시켜서 개발을 진행해야 합니다. 스키마 : 데이터 구조 ex) 비즈니스 : 요구사항 ex) 가격 15,000원 이하 상품을 찾아주세요. ex) 좋은 유틸 - 등 JS가 함수형프로그래밍을 지원하는 것 중 하나는 (인자로 함수를 넣을 수 있고, 리턴을 함수로 할 수 있는 것) DRY → 함수형프로그래밍에서 반복적인 코드를 어떻게 제거하는지 기법을 알아보자 일급 함수(JS가 지원) 입력값과, 반환값이 모두 들어올 수 있다는 것이 입니다.(즉, 함수도 포함) 불변성(JS는 지원해주지 않음) 결국 문을 쓰지 않고, 계산 함수…

글또 시작 다양한 사람들과 글쓰기 습관을 만드는 과정을 경험할 수 있다는 커뮤니티가 있어 지원하게 되었다. 평소에 글을 쓰지만, 내가 과연 잘 읽히는 글을 쓰고 있는지 또는 다른 사람들은 어떤 생각을 가지고 글을 쓰는지 궁금했다. 더 나아가 개발자라는 직군 속에서 어떤 일을 하며 하루하루 살아가는 지도 궁금했다. 다양한 사람들과 다양한 이야기를 하는게, 기대가 되고 내가 가지고 있는 고민들에 대해 다들 어떻게 이야기 해줄지도 궁금하다. 목표 불필요한 시간을 줄이고, 글쓰는 습관을 가지기 글을 쓰면서 스스로 생각하는 힘을 키우기 내가 누구인지, 내가 무엇을 원하는지를 파악해 나만의 브랜딩 만들기 글또가 끝난 6개월 후에 어떤 모습이길 바라나요? 글쓰는데 어려움이 없었으면 좋겠어요 글을 쓰면서 사고하는 힘이 증가됬으면 좋겠어요 나만의 브랜딩을 만들고 싶어요 그 모습을 달성하기 위해 무엇을 해야 할까요? 일단 글을 쓰는 연습을 해야 할 것 같아요 규칙적으로 시간을 정해서 그 시간에는 무…

⭐️ 복습 액션 사이드 이펙트를 발생시킴 를 변경시키는 것 전역변수라고 라고 할 수 없음. 그래서 상황에 따라 확인해야 함 ex) 객체가 외부 데이터라고 생각할 수 있을까??? 계산(순수함수) 명시적인 입, 출력이 존재 테스트 용이하며, 예측이 가능한 코드 개발 피로를 낮춤 데이터 상수 입력과 출력이 될 수 있는 것 액션으로 확장가능 ✏️ 배운 내용 1.일급 개념 JS에서 가장 중요한 개념 JS는 OOP가 가능하지만, JS는 OOP가 아님 추상화 어디서든 사용활 수 있도록 하는 과정 OOP 역사 이분법적인 철학적 사고 ex) 외국인들은 라는 단어를 그냥 사용하지 않고 chaire에 무언가를 붙여서 사용(a chair, chairs) 즉, 하나의 추상화를 가지고 사용 용도에 따라 무언가를 추가해 사용 다시 말하면, 하나의 추상화 개념에서 (분류) 할 수 있는 개념들이 탄생 JS 정적 vs 동적 JS의 큰 장점 중 하나는 이라는 것 왜 JS는 ??? 먼저 결론부터 말하자면, 페이지/…

Facts ORM에 대한 개념이 궁금해졌다. Feelings 회사 프로젝트 내부에 ORM이 존재했는데, ORM에 대해 자세히 알아보지 않았다. 부끄러웠다. Findings 개념 ORM(Object Relational Model)은 사물을 추상화시켜 이해하려는 OOP적 사고방식과 DataModel을 정형화하여 관리하는 RDB 사이를 연결할 계층의 역할로 제시된 패러다임으로 RDB의 모델을 OOP에 Entity 형태로 투영시키는 방식을 사용한다. 즉, Object와 DB간에 연결 역할을 해주는녀석이 ORM이다. 등장 배경 ORM을 사용하지 않을 경우 개발자가 개발 하기위해 DB에 접근하기 위해서는 SQL Query문을 직접 만들었다. SQL문법을 알고 있어야하기 때문에 쿼리문 작성시간이 오래걸려 개발이 지체되는 문제가 발생했다. 개발 코드와 DB가 서로 종속되는 문제가 생겨나기 시작했다. 이러한 문제점을 해결하기 위해 ORM이 등장하였고 ORM이 등장함으로서 SQL Query 문법에서…

✏️ 배운 내용 먼저 설날 연휴가 있다보니, 업무 보다는 개인 공부를 통해 배운 내용들을 적어본다. Code Spliting SPA 번들 사이즈가 커지면, 로딩 속도나 성능면에서 문제가 생기기 때문에 이것들을 여러개의 번들로 나누거나 동적으로 import 하는 기법 Loadable Components 필요한 모듈만 import해서 성능을 좋게 하는 방법 React.lazy, React.suspense도 존재하지만, SSR까지 커버 가능 Stacking Context 가상의 Z축을 사용한 HTML 요소의 3차원 개념 즉, Z축을 사용할 때, 우선순위를 결정하는 개념 예를 들어 를 비교하기 전에, 비교하는 Element의 부모에 가 있는지 판단해야 하며, 부모의 가 있다면 부모의 와 비교해야 한다. 좋은 함수란 테스트 하기 쉽고, 파악하기 좋은 코드 명시적 인풋과 아웃풋이 있다. react-slick 와 keen-slider 차이 React 기반으로 만든 carousel compon…

👀 내용 함수형 프로그래밍에서 가져갈 수 있는 것 을 제공 → 클린한 코드를 작성할 수 있습니다. 함수형 프로그래밍의 대체제 = OOP → 관련된 데이터를 엮는 것 함수형 프로그래밍에서는 데이터를 재가공해서 보겠다는 의미 액션 → 계산(명시적 입출력) → 액션(외부 상황에 영향을 주는 것) 액션을 최소화 하고, 계산을 많이 만듭니다. 사용자가 할 수 있는 행동 = 요구사항 유사한 계층을 정리 정돈 = PIPE → 이름을 명시 다양한 요구사항에 유연적으로 대응할 수 있는지 확인 결국 사용사의 요구 사항에 맞게 데이터를 계산해서 계산된 데이터를 화면에 업데이트 하는 과정 ✏️ 실습 하나의 프로젝에서 액션 - 계산 - 데이터를 나누는 실습을 진행 계산을 로 나누는 실습을 진행 또한 이러한 계산을 하나의 Hook안에 작성한다고 생각할 수 있음 참고 함수형 프로그래밍 스터디 참고

👋 복습 함수형 사고에서 말하는 의 3가지 영역으로 나눠서 만들어진 함수들간의 계층을 시각화 함 더 나은 구조에 대해서 생각하고, 요구사항의 추가나 변화가 발생했을 때, 꼭 필요한 만큼의 가 발생하는지 혹은 더 복잡한 사항이 발생하는지 팀끼리 실습을 함 🙋‍ FE의 요구 사항이란? 사용자가 특정 을 하면 관련된 를 찾아서, 특정 기존 하고, 그 결과를 다시 화면에 보여주는 큰 틀을 가짐 👀 계층과 흐름에 관한 보충 설명 계층 보단, 을 먼저 생각해보자. 위 요구 사항을 보면, 를 잡고, 함수 전 후 데이터들의 Input & Output을 생각해보자. 은 명시적 입출력이 있는 함수라면, 은 암묵적 입출력이 있는 함수. 이렇게 여러개의 큰 흐름을 그리다 보면, 같은 계층의 함수 그룹을 발견 할 수 있음. 계층에 대한 개념이 확립되고 나면 새로운 요구사항들을 구현할 때, 요구사항에 맞게 계층에 맞는 함수들을 조립하는 형식으로 발전 가능 참고 함수형 프로그래밍 스터디 참고

👋 복습 액션 → 계산 → 데이터 이벤트 핸들러 : 액션 계산을 꺼내기 리턴 값 정하기 리턴 값과 관련된 코드조각 모으기 사용되는 모든 값을 함수인자로 만들기 —> 명시적 출력 + 명시적 입력 외부 세계에 영향을 주거나, 실행할 때마다 달라지는 값이 있다면 제거(Array, Object) 유틸리티, 비즈니스 로직, 스키마, 구분해보기 유틸리티와 비즈니스 로직 차이는?????? 유틸리티 Lodash 유틸리티가 아닌 로직들 = 비즈니스 로직 ✅ 2주차 배운 내용 정리 액션으로 부터 을 빼낼 수 있는지에 대해서 배우고 실습 진행 액션에서 계산을 빼내는 작업은 암묵적 입력과 출력을 -> 명시적 입력과 출력으로 바꾸는 것 암묵적 입력 : 함수인자가 아닌 형태로 사용되는 데이터 및 함수 안에서 선언한 데이터 등을 의미 암묵적 출력 : 함수의 반환값이 아닌 출력 ex) DOM, console.log, 전역변수 수정 등을 의미 암묵적 입력과 출력을 명시적 입력과 출력으로 바꾸는 방법 함수에 반…

✅ 1주차 배운 내용 테스터 입장에서 가 왜 문제인지, 어떻게 하면 이 코드를 더 좋은 코드로 만들 수 있을지 고민하는 시간 갖음. 관점으로 사고하는 방법 함수형 프로그래밍 기술보다는 에 초점을 맞추는 관점 의 데이터를 만드는 사고 방식 계산 입력값과 반환값이 존재 언제나 같은 입력에 대해서는 같은 결과를 반환 테스트 용이하다는 특징을 갖음 액션 호출 시점에 따라서 행동이 달라짐.(시점과 횟수가 중요) 시점과 횟수마다 액션이 달라지기 때문에, 테스트 코드를 짜기 힘듬. 액션 안에서 계산으로 뽑을 있는 코드를 분리하고 액션 -> 계산 -> 계산 -> 계산 -> 액션 -> 데이터 같은 계층 구조를 만들어 내는 것이 함수형 프로그래밍이고 즉, 함수형 사고 우리가 직접 계산을 통해, 데이터를 조작하는지 혹은 간접으로 계산을 통해 데이터를 조작하는지에 따라 관점이 다름. 함수의 목표가 무엇인지, 함수 안에서 어떠한 역할이 필요한지 파악한 뒤에 코드 작성하는 의식적 노력 필요. 참고 함…

개발 기존에 개발한 코드들 중, 중복되어있는 코드를 최대한 외부로 빼어서 한 곳에서 관리할 수 잇도록 리팩토링을 진행하였다. 이 과정에서 어떻게 하면 팀원분들에게 가독성 있는 코드를 만들지, 관리 포인트를 줄일 수 있을지 고민을 하는 좋은 시간을 가졌다. 또한 리팩토링을 하면서 뼈절이 느낀 것이 테스트 코드를 미리 짜지 못한 부분이 후회가 많이 되었다. 개발 당시 구현에 집중하다 보니, 테스트 코드를 나중에 짜야지 라는 안일함이 리팩토링하면서 매번 변경 사항이 있을 때마다, UI를 확인 하는 시간이 너무 스트레스로 다가왔다. 이번 일을 통해서 개발을 하면서 큰 동작들에 대해서는 통합 테스트를 꼭 짜는 시간을 가져야 겠다. 함수형 프로그래밍 스터디를 통해서 자주 사용하고 있었던, 를 직접 구현해보았다. 또한 내가 만든 유틸 함수를 패키지로 배포 후 사용하는 경험을 해서 새로웠다. 건강 자기 전 휴대폰 하는 습관을 버리지 못했다. 눈 피로와 깊은 수면을 하지 못하는 걸 알면서도 잘 …

이 글은 React - Manipulating the DOM with Refs를 번역한 것 입니다. 🌈 Ref를 통해 DOM을 조작하는 방법. React는 자동적으로 우리가 만든 JSX 컴포넌트를 DOM에 업데이트 합니다. 그래서 우리는 DOM을 조작할 일이 흔치 않게 됩니다. 그러나, 우리는 때때로 React가 처리하는 DOM Node Element에 접근할 필요가 있습니다. 예를 들어 Node를 Focus, Scroll하거나 Size와 Position을 측정할 때 접근해야 합니다. 그래서 우리는 이번 시간에 를 통해 어떻게 React에서 관리는 DOM Node를 처리하는지 알아보겠습니다. ✅ 학습 내용 Ref를 통해 특정 Node에 접근하는 방법. React가 관리하는 DOM Node를 접근하기 위해서는 import useRef hook을 합니다. 그런 다음, 아래와 같이 Component 내부에 ref를 선언 합니다. 마지막으로, React가 관리하는 DOM Node에 …

Facts 고향가는 기차를 놓쳤다. Feelings 와야할 지하철이 오지 않아, 많이 당황스러웠다. 그렇다고 짜증이 나거나 화는 나지 않았다. 오히려 후회를 최소화하기 위한 노력을 순간적으로 했다. Findings 먼저 1호선은 앱에 제시하는 시간에 오지 않는 경우가 많다는 사실을 알게 되었다. 명절에는 평소보다 30분 일찍 출발해야 겠다.(정작 평소에는 일찍 출발하면서, 오늘은 딱 맞춰서 출발했다.) 이미 기차를 놓쳤다는 사실을 알면서도, 실날 같은 희망을 붙잡고 싶어서 늦게 도착한 1호선 기차를 타고 용산역에 갖지만, 결국 예매한 기차를 놓쳤다. 여기서 배운점은 이미 벌어진 사건에 대해 미련을 갖지 말고, 앞으로 해야할 행동에 집중해야 후회를 덜 한다는 사실을 알게 되었다. 오히려 후회를 덜 하기 위해, 글로 남겨서 앞으로 이런일을 방지하고자 하는 것이 오히려 후회를 최소화 하는 일이라고 생각되어졌다. 이번 일을 통해 후회하지 않은 삶을 살기위한 좋은 경험을 한 것 같다. P.…

Facts 에 대한 개념을 잘 알지 못했다. Feelings 팀원분들이 개발하신 코드가 왜 좋은지 몰라 부끄러웠다. Findings 최상단 컴포넌트에 Wrapper로 를 사용하게 되면 이미 Provider에서 인스턴스화된 값을 내부 컴포넌트에서 사용하면 된다. 즉, 하나의 인스턴스만 참조하고 역할을 분리했으며, 사용부에서 필요한 요소의 의존성을 주입해서 커스텀화하게 사용할 수 있다. 이러한 개발적인 상식을 알아야 동료들의 코드가 왜 좋고 나쁜지 공감할 수 있고, 피드백을 줄 수 있다는 사실을 알게 되었다. ex) React.Context, QueryClient.Provider 참고

Facts graphQL 작동원리에 대해 제대로 인지 하지 못하고 있었습니다. Feelings 그저 막연하게 팀원분이 공유해주신 부분만 알고 개발을 진행하다보니, 요구사항에 맞게 개발하는데 어려움을 느꼈습니다. Findings 파일은 WebStorm이 제공하는 기능을 설정하기 위해 작성된 파일입니다. 는 WebStorm GraphQL Plugin에서 사용하는 것이며, Query를 작성할 때, 를 통해 쿼리 필드 값 추론을 해줍니다. 참고

Facts 개발 실력이 부족함을 느낀다. 주변 팀원분들에 비해 코드를 이해하는 속도나, 무언가를 해결해서 모든 팀원에게 도움을 주는 것 그리고 맥락을 빠르게 파악하는 것이 부족함을 느낀다. Feelings 자괴감이 든다. 근본적인 질문까지 든다. Findings 일단은 에 집착하지 말자. 차분히 생각을 정리하는 습관을 들자. 생각을 잘 정리해서 코드에 녹일 수 있도록 많은 도전을 하자. 해야 할것이 많다고 생각만 하지말고 당장 내가 무엇이 부족한지, 무엇부터 채워야 할지 행동을 하자 DO TS 설계 및 사용이 익숙하지 않다. 그래서 현재 책을 보고 정리하면서, 실무에 쓰고 있는 것들 파악하고, 적용할려고 노력하고 있다. 코드 퀄리티와 코드를 어떻게 작성애햐 성능상에 좋은지에 대한 관련 지식이 없다. 관련 자료를 찾아보고 적용해보자 ex) 프론트엔드 웹 성능 최적화 가이드 Next.js, React, React-Query, JS, HTML, CSS, WEB에 대한 기본 지식을 탄…

Facts 컴포넌트 사이 간격을 조절하는 과정에서 반응형일 때, 지정한 간격 값이 외부에 의해 변하는 문제에 직면했습니다. Feelings CSS를 중요시 여기지 않고 개발한 자신이 부끄러웠습니다. Findings Flex 박스의 유연한 레이아웃을 가능하게 하는 요소는 와 그 중 는 속성을 부여한 경우 적용되지 않음. 기본 값이 1이기 때문에 자동으로 외부에 의해 아이템이 축소될 수 있음. 축소되는 것을 방지 하기 위해 을 선언 하면 됨 참고

업무 OG에 보여지는 Meta tag 셋팅 작업을 했습니다. CSS관련 QA를 작업하면서, 컴포넌트 안에 을 넣게 되면 컴포넌트들 사이 간격을 조절하는 값이 어디에 있는지 파악하기 쉽지 않았습니다. 그래서 간격을 조절하는 컴포넌트를 사용했습니다. 또한 이 컴포넌트의 장점을 다른 팀원분들에게 공유하는 경험을 했습니다. 건강 매일 헬스장에가서 운동을하지만, 무언가 임계점을 넘지 못하고 의식적으로 하지 않은 것 같습니다. 조금 더 의식적으로 임계점을 넘는 연습을 해야 겠습니다. 휴대폰을 하는 시간을 줄여야 겠습니다. 독서 매일 조금식 개발 & 비 개발 관련 책을 읽지만, 휴대폰 하는 시간을 줄여서 독서하는 시간을 늘려야 겠습니다. 참고 참고

Facts 를 하는 과정 중에 에러가 발생하면 구문 안 로직이 실행되지 않았다. Feelings 일단 당황스러웠다. 하지만 차분히 하나씩 찾아보았고, 팀원분들과 함께 분석하였다. Findings 와 다르게, return 타입이 라는 사실을 알게 되었다. 그래서 대신에, 를 사용해서 에러가 발생했을 때, catch구문에서 원하는 로직을 작성할 수 있었다. 또한 Catch 구문의 로직을 작동시키기 위해 fetcher 함수 내부에서 fetcher가 실패했을 때, 와 는 다르다는 사실을 알게 되었다. 결론만 말하면 일 경우에는 Catch구문에 들어가지 않습니다. return을 붙이면 에러의 값을 해서 값을 return하기 때문에 Catch구문으로 가지 않게 된다. 참고 queryClient.prefetch 내용

Facts 에서 redirect 속성 값 중에 가 어떤 역할을 하는지 궁금했다. Feelings 실제로 프로젝트 내부에서 다양하게 사용되어 지고 있었는데, 정확하게 알지 못해 스프린트 개발진행에 있어 기존 코드 분석에 어려움을 겪었다. Findings Permanent 옵션 값에 따라 를 307이나 308로 내려 줌. HTTP Status Code 307 & 308 307 : 임시 리다이렉트(목적지에 가기 위해 잠시 임시로 들리는 곳을 나타냄) 308 : 영구 리다이렉트(목적지에 가기 위해 잠시 들릴 수 있지만, 무조건 목적지를 향함) 기존 method 요청 유지하고 body 안버림 HTTP Status Code 301 & 302 301 & 302는 redirect 시킬 때 get으로 method를 변경하고 body를 버림(이럴 경우 생각한대로 동작이 안됨) 참고 Next.js의 Redirect 속성 값

Facts 이번 스프린트 개발 속에서 를 사용하고 있지만, 작동원리를 제대로 알지 못해 기획의 추가 요구사항에 제대로 대응하지 못했습니다. Feelings 그래서 스스로 답답함을 느껴 팀원분들이 작성하시는 코드를 보면서 이해할려고 노력했습니다. Findings GraphQL Code Generator 정의 Generation of typed queries, mutations, subscriptions and typed GraphQL resolvers 즉, GraphQL에서 가져온 스키마 중에 우리가 필요한 Query에 맞게 타입을 생성해주는 역할 graphql-codegen 의 config 내부 설정 요소 : 재료(GraphQL로 가져온 타입들) : 레시피(어떤 타입을 추출할지 알려주는 것) : 결과물(필요한 타입들) 참고 GraphQL Code Generator Doc

이 글은 React - Describing the UI를 번역한 것 입니다. 🌈 Describing the UI 리액트는 UI를 랜더링하는 JS 라이브러리 입니다. UI는 , , 같은 작은 단위로 구성되어 있습니다. 리액트에서는 이러한 UI들을 통해 컴포넌트를 만들 수 있고, 이 컴포넌트들을 통해 재사용 혹은 연관성 있는 것들로 또 다른 컴포넌트들을 만들 수 있습니다. 또한 웹 사이트, 앱 그리고 모든 스크린은 컴포넌트로 구성되어 있습니다. 그래서 우리는 이번 챕터에서 컴포넌트를 만들고, 조작해보는 시간을 가져보겠습니다. ✅ 학습 내용 Component React App은 독립적인 UI Component들로 구성되어 있습니다. 하나의 Component는 JS 함수입니다.(마크업이 안에 존재합니다.) 그리고 Component는 작은 버튼일 수도 있고, 전체 페이지일 수도 있습니다. 📕 참고 React - Describing the UI ✅ 학습 내용 Component 📕 참고

업무 스프린트 회고(2022년 10월 - 12월) 첫 스프린트를 통해 회사 서비스 이해도를 높일 수 있었습니다. 팀적으로 개발 얼라인을 맞추는 과정을 경험할 수 있었습니다. 디자이너, 기획자분들과 협업하는 경험 할 수 있었습니다. 새로운 스프린트 참여(2023년 1월 시작) SNS(Kakao, Facebook) 공유 기능 구현 를 사용해서 직관적인 URL Router 로직 개발 GraphQL과 Codegen 사용을 통해 필요한 타입 추출 방법 숙지 피그마와 디자인 시스템 프로세스 파악(피그마에 아이콘이 추가되었을 때, 디자인 시스템에 반영하는 방법) 특정 컴포넌트에 에러가 생겨 에러 페이지로 넘어갈 때, 레이아웃 컴포넌트 내부 에러 상태 값이 리셋되지 않은 문제 발견 및 팀원분들과 해결 props에 key에 useRouter의 를 넘겨줌으로써 url이 변경될 때마다, 내부 상태 값들을 초기화 했습니다. 자기계발 PSD 다이어를 통해 매일 해야 할 일들을 적고, 자기 전에 감사…

Facts 를 사용하면서 왜 사용하는지 의문이 들었습니다. Feelings 막연하게 사용하고 싶지 않았습니다. 왜 사용하는지 궁금했습니다. Findings 가장 큰 이유는 직관적인 인터페이스 입니다. 예를 들어 이동하고자 하는 path을 하드 코딩으로 아래와 같이 표현 할 수도 있지만, constructing을 사용해서 path를 표현 할 수 있다는 사실을 알게 되었습니다. 또한, 공식문서에서도 강력한 형식의 매개 변수화된 라우팅 경로를 구성하기 위한 도구이며, 하드 코딩된 문자열을 경로로 전달하는 것을 방지하는데 도움을 주는 라이브러리라고 소개되어 있습니다. 참고 ts-routes 공식 문서

Facts 개발을 하는 과정에서 와 를 사용하는 데, 상황에 따라 어떤 것을 써야 하는지 의문이 들었음. Feelings 그래서 개발하면서 아무 생각없이 개발하고 있는 내 자신을 보면서, 올 해에는 이렇게 개발하면 안되겠다는 생각을 하게 됨. 즉, 의식적 노력을 동반한 개발을 해야겠다고 생각함. Findings export 한 파일 내에서 여러 변수들을 export하는 것이 가능 import할 때에는 export할때 사용된 변수명을 동일하게 설정해야한다. 다른 이름으로 할때에는 를 사용한다 export default 하는 곳에서 자유자재로 이름을 붙여 줄 수 있기 때문에, 위험 밑에 처럼 거대한 객체를 내보낼 때, 웹팩에서 이 안됨 즉, 웹팩 입장에서는 다 사용하는 줄 알고 다 번들링 진행(메모리 낭비) 도 웹팩의 옵션을 통해, 을 해줄 수 있다. :사용하지는 않지만 번들에 포함되는 코드들 직접적으로 사용하진 않지만, 다른 코드에 영향을 끼칠 수 있다고 판단되면 고 한다. 이…

회고 2022년 서울로 올라와 개발하면서 배우고 느꼈던 것들을 작성해본다. 외부 개발자분들과 스터디 진행. 코딩 컨벤션을 기반으로 개발 진행. Fit이 맞는 개발자 채용 간접 경험. UI와 비즈니스 로직을 분리하면서 개발 진행. 기획자, 디자이너, 프론트 & 백엔드 개발자 분들과 협업. 같이 개발하는 팀원분들을 생각하며 가독성 있는 코드 작성. 자신이 개발한 것에 대해 누구에게나 확실하게 설명할 수 있는 책임감 경험. 6개월 동안 스스로 개발적으로 부족하다는 사실을 알게 될 때마다, 솔직히 많이 힘들었다. 개발을 계속 해도 되는지, 아니면 다른 일을 찾아봐야 하는지 많은 고민이 있었다. 그럴 때마다 팀원분들께서 등 많은 격려와 조언을 아낌없이 주셨다. 또한 개발하면서 많은 배려와 좋은 피드백으로 아낌없이 도움을 주셨다. 사실 전 직장에서는 혼자 개발하는 느낌이 있었는데, 현재 함께 고생하고 개발하는 느낌을 많이 받아 심적으로 위안을 얻어서, 팀원분들에게 좋은 영향을 주고 싶은 생…

업무 회고 3개월이라는 시간이 지났다. 3개월 전과 지금의 나를 비교 했을 때, 과연 얼마나 많은 성장을 했는지 궁금해서 글을 적어본다. 먼저는 서울이라는 타지역에서 다양한 사람들과 함께 일한다는 것 자체만으로도 좋은 경험이라고 생각한다. 왜나하면 동료들이 업무를 대하는 자세와 책임과 그리고 태도 측면에서 많이 배웠다. 특히 자신의 일에 대한 책임감과 성장하고 싶은 열정은 나를 반성하고 돌아보는 시간을 많이 갖게 만들었다. 그리고 3개월 동안 일을 하면서 느꼈던 감정들을 팀원 분들과 대화를 통해 공유하고 해결해 나아가는 시도를 했다. 여기서 가장 놀랐던 부분은 내가 느꼈던 감정 중 대부분 이 대부분이었는데, 다른 팀원분들도 나와 같은 고민과 감정을 느끼고 있었다. 나에게 큰 위로와 도움이 되었다. 마지막으로 주어진 업무에 대한 가치는 어떠한 태도를 가지고 업무에 임하는지에 따라 달라진다는 사실을 몸소 깨달았다. 처음 팀이 배정되고 업무를 받았을 때, 이 업무를 통해 내가 얼마나 …

추석. 추석에 전주에 내려왔다. 비가 많이 내려서 그런지 아니면 가을이여서 하늘이 맑고 높았다. 변함없는 거리 속에서 자연스럽게 추억들이 떠오른다. 과거에 느꼈던 감정들, 생활들, 그리고 사람들을 기억했다. 문득, ‘지금 겪고 있는 것들도 지나고 나면 이렇게 추억으로 다가올텐데 왜 이렇게 불안과 걱정에 휩싸여 아둥바둥 하고 있는지` 라고 생각을 했다. 그냥 주어진 일에 집중하면서 하나씩 하나씩 채워가자고 스스로 다짐을 해본다. 참고 참고

일 속에서 나. 요즘 일하면서 나와 대화를 많이 하게 된다. ‘할 수 있다’, ‘왜 나는 이것밖에 못 하지’, ‘그래도 하나씩 하자’ 등 많은 생각들이 표정과 행동으로 나타난다. 그때마다 남들에게 차분히 생각하면서 처리하는 모습을 보여주고 싶은데, 잘 안된다. 전문가로서 일을 처리해 나아가는 동료들을 볼 때면, 부럽고 그들에게 배울 점이 없는지 생각해보고 기록한다. 단순하게 생각하고, 단순하게 하나씩 처리해가고 싶은 요즘이다. 새로운 일. 어디서 어떻게 시작해야 할지 모를 때, 주변 동료들에게 질문을 한다. 그리고 막상 자리로 돌아와 일을 시작할 때, 또다시 막막하다. 이 막막함을 이겨내기 위한 몸부림치는 한 주였다. 그리고 아마 계속될 것 같다. p.s 팀원분들이 공통으로 사용하는 코드(사용자 분석)를 패키지화하는 작업을 하고 있다. 참고 참고

컨디션 조절. 이번 주는 컨디션 조절을 위해, 취침하기 3시간 전에 음식을 최대한 먹지 않으려고 노력했다. 확실히 몸이 가벼워졌다. 그리고 업무에 대한 압박감을 줄이기 위해, 바로 해결할 수 있는 것들 먼저 처리 하기 위해 리스트업을 작성했다. 무엇보다 스스로에게 개발 실력이 부족하다고 비하하기보다는 지금 당장 해야 할일이 무엇인지에 집중했다. 앞으로도 더욱 컨디션 관리를 위해 먼저 음식 조절과 운동에 더욱 집중하고, 숙면 시간을 최대한 확보해야 겠다. 개발. Zustand 상태관리 라이브러리를 학습하며, 현 프로젝트에 적용하고 있음 TS Study를 통해, TS 학습 및 실무 적용하는 코드를 숙지하고 있음 반성 및 개선. 업무를 할 때, 주변 팀원들에게 정리가 되지 않은 상황에서 질문을 했다. 그러다 보니, 팀원분들께서 질문의 의도를 모르겠다 혹은 제가 이해한 게 맞나요? 라는 말을 자주 들었다. 이 부분은 비효율적인 업무라고 생각한다. 그래서 밑에 작성한 대로 행동해 개선을 …

발표. 팀원들 앞에서 학습한 에 대해 발표를 했다. 준비하면서 많은 부담과 걱정이 앞서 있었지만, 그래도 좋은 경험이었던 것 같다. 발표 후에 내가 학습한 방법들을 돌이켜 보았을 때, 단순히 ‘이건 이렇게 되는구나’에서 끝나는 것이 아니라, ‘이게 이렇게 되면 어떻게 되지?‘라는 생각을 하면서 학습을 진행했다면 조금 더 자신감과 재미가 있었을 것 같았다. 그리고 우리 팀에서 원하는 바가 무엇인지 목표를 계속 상기하지 못 한 채, 개념에 집착한 점이 아쉬웠다. 마지막으로 스스로 시간적 압박감에 눌려 차분히 학습하지 못한 부분에 대해서는 을 명확하게 세우는 연습을 꾸준히 해야겠다. 본질적인 생각. 이번 한 주는 스스로 본질적인 질문을 많이 했다. 라는 질문에 대답하지 못해 괴로웠다. 한동안 컨디션이 많이 안 좋아서 스스로에 대한 질문을 잘하지 못한 것 같아, 자기 전 휴대폰 하지 않기, 자투리 시간에 독서하기, 아침저녁 명상하기, 감사 일기 쓰기 등 컨디션을 회복시키는 습관들을 만…

솔직함. 이번 주도 쉽지 않은 한 주였다. 그래도 한 주를 돌이켜 보았을 때 깨달음이 있어 글로 적고자 한다. 결론부터 말하자면, 는 사실을 알게 되었다. 또한 타인에게 부담와 힘듦을 솔직하게 말하지 못했을 때, 더 자기 비하와 자책을 한다는 것도 알게 되었다. 정말 솔직함은 용기가 필요한 것 같다. 곰곰이 지난 과거를 돌이켜 보면, 어떻게든 나와 주변 사람에게 부족한 부분을 숨기고자 애썼던 것 같다. 지금이라도 이 부분을 인지해, 나뿐만 아니라 주변 사람들에게 부족한 부분에 대해 도움을 요청하고 힘든 점을 솔직하게 말하는 용기가 필요 한 것 같다. 하루하루 조급함에 눈치 보며 살다 보니, 정작 나를 제대로 보지 못했다. 이제라도 솔직하게 나를 돌아보며 당당하게 살아가고 싶다. p.s 이렇게 생각의 틀을 깰 수 있도록 도와준 지금의 팀원분들(NU)에게 진심으로 감사합니다. 배움. 회사에서 카카오 개발자분을 초청(태오님)해, 다양한 이야기를 들을 수 있는 시간을 갖게 되었다. 인상 …

빡독x서울 후기 7.30(토)일에 열리는 을 참여하기 위해 성균관 대학교를 다녀왔다. 문득, 2년 전 1월에 열렸던 신박사님 강연을 듣기 위해 전주에서 서울로 왔던 기억이 떠올랐다. 그 당시 나는 취준생이었고, 정말 앞이 보이지 않았었다. 그러나 지금은 서울에 올라와 좋은 팀원들과 함께 개발자로서 살아가고 있다. 아직도 이 글을 쓰면서 믿기지 않는다. 홀 안에 들어왔을 때 이미 많은 사람이 독서 하고 있었다. 나 또한 빡독때 읽을 ‘하트 오브 비즈니스’를 꺼내 읽기 시작하였다. 솔직히 요즘 독서를 많이 못 했다. 그리고 내가 1시간 반 동안 과연 ‘몰입’하면서 독서를 할 수 있을까? 라는 의문이 들었지만, 막상 독서하니 그런 의문은 쉽게 해결되었다. 무엇보다 함께 독서하는 환경에 있어서 그런지 더욱더 몰입할 수 있었던 것 같다. 빡독후 신박사님의 강연이 시작되었다. 많은 조언과 이야기를 들려주셨다. 그 중에서 기억 남는 것들과 느낀 점을 적어보자면 ‘어떤 목표를 이루기 위해서는 내…

온보딩 회고. 2주 동안 팀원분과 함께 회사 시이트를 구현하는 프로젝트를 진행했다. 새로운 언어, 라이브러리, 프레임워크 등 때문에 많이 힘들었지만, 그중에서 가장 힘든 부분은 하는 것이었다. ‘나는 왜 이렇게 개발 속도가 느린 것일까?, 나는 지금까지 무엇을 개발해왔었나…, 나는 개발로 살아남을 수 있을까? 등’ 많은 자책하는 생각들을 가지면서 프로젝트에 임했다. 그래도 프로젝트에 피해를 주지 않기 위해 열심히 했다고 생각하지만, 돌이켜보면 그냥 막 코딩 한것 같다.(다음 주 화요일 코드 리뷰가 두렵다…) 누군가가 ‘이 코드 왜 이렇게 작성했어요?‘라고 하면 정말 대답을 잘하지 못할 것 같다. 어쩌면 이 부분이 내가 부족한 부분이고 채우게 된다면 반드시 성장하는 것도 아는데 두려움이 먼저 앞선다. 그런데도 개발을 하면서 모르는 부분을 그냥 일단 키워드 중심으로 적어놓았다. (팀 리더분께서 온보딩 프로젝트 하면서 결과에 집중하지 말고 과정에 몰입하는 경험에 초점을 두라고 했으며 그…

온보딩 프로젝트. 현재 1주일 먼저 입사하신 분과 함께 온보딩 프로젝트를 진행하고 있다. 오랜만에 웹 개발을 하니 낯설고 개발 속도가 나지 않아 답답하다. 당연하게 알고 있다고 생각했던 조차도 배울 것이 많음을 알게 되었다. 정말 배움에는 마침표는 없는 것 같다. 그리고 함께 프로젝트 하시는 분이 너무 잘하셔서 배울 점이 많다. 특히 자신이 작성한 코드에 대해서 확실한 근거 있는 모습이 너무나 멋있어 보였다. 사실 나는 그렇게 하지 못하고 있어 부끄러웠다… 또한 어떻게 하면 더 좋은 설계를 통해, 팀원들이 사용할 때 편리한 코드를 제공할지 고민하는 모습이 인상적이였다. (정말 너무나 배울게 많으신 분이다.) 마지막으로 돌아오는 주에는 온보딩 프로젝트를 마무리하고 팀원들 앞에서 발표 해야 하는데, 솔직히 같이 작업하신 분에 비해 많이 부족해서 걱정된다. 코드도 엉망인데… 갈 길이 너무나 멀게 느껴진다. 그래도 조급하게 생각하지 말고 정말 내가 잘하는게 무엇인지 다시 한 번 생각해봐…

성장 할 수 밖에 없는 환경. 벌써 한 주가 지났다. 시간이 어떻게 지나간줄 모르겠다. 타지인 서울에서 혼자 사는 것도, 너무나 좋은 문화를 가진 새로운 직장도 많이 낯설다. 그래도 확실한 것은 여기서는 무조건 성장할 수밖에 없다는 생각이 든다. 또한 성장하지 않으면 정말 안 된다는 절실함도 온 몸으로 느끼고 있다. 감사하게도 이번에 새롭게 일하는 직장에서 어느 정도 해결할 수 있을 것 같다. 물론 나도 많이 노력해야겠지만, 정말 누군가에게 매번 배울 수 있다는 사실이 너무나 좋다. ‘언제든지 물어봐라, 모든 팀원이 적극적으로 알려줄 것이다.‘라는 말이 정말 많이 위로가 많이 되었다. 그리고 일주일 밖에 지나지 않았는데, 팀원들에게 피해주지 않기위해 더 노력해야겠다는 생각도 정말 많이 든다. 컨디션 조절 잘하면서 하나씩 제대로 학습하면서 성장해야겠다. 이번 주도 수고했고, 돌아오는 주도 화이팅이다. 참고 참고

도전 중 새로운 회사 에 근무한 지 3일이 되었다. 결론부터 말하자면 진짜 이 조직 속에서 성장의 기회를 놓치고 싶지 않다. 입사 후, 팀에서 제공한 온보딩을 진행하고 있다. 3일밖에 되지 않았지만, 스스로 얼마나 우물 안 개구리였는지 알게 되었고 실력이 얼마나 부족한지 알게 되었다. 컴포넌트 사고, 모듈화, 프로젝트 폴더 구조, SVG 컴포넌트 사용 등 처음 접하는 개념들도 있었고 개념만 알고 실무에서 잘 적용하지 못한 것들도 많았다. 특히 스스로 쉽다고 생각했던 개발들이 알고 보면 막 코딩을 하고 있었다는 사실이 너무나도 괴로웠다. 그리고 함께 개발하고 있는 입사 동기 팀원분과의 실력 차이를 비교하면서 스스로가 너무나 조급하고 부족하다고 팀원들에게 공유했더니 ‘비교하지 말고 과거의 나와 비교하면서 개발하라고 그리고 언제든지 팀원들에게 궁금한 사항들 물어보라고 누구라도 발 벗고 도와 줄 것이라고’ 말씀해주셨을 때 너무나 큰 위로가 되었다. 과거에는 어떻게든 빠르게 개발을 하는 것…

그냥 기록 다음 주면(7월) 이제 전주가 아닌 서울에서 일상생활을 해야 한다. 사실 많이 어색하고, 불안하고, 설렌다. 집에서 가져가야 할 물건들을 하나씩 정리하는데, 끝이 없다. 그만큼 전주에서 많은 시간을 보냈다는 것을 느꼈다. 앞으로 산 날만큼 전주가 아닌 타지역에서 살아보고 싶다는 막연한 생각이, 이제 현실이 되었다. 아직도 실감이 나지는 않는다. 그래도 이왕 서울 가는 거 누군가에게 도움이 되는 프로가 되고 싶다. 지금보다 힘들고 어려움이 더 많겠지만, 훗날 이 글을 보면서 초심 잃지 않고 이겨냈으면 좋겠다. 참고 참고

눈 수술 최근에 스마일 라섹을 했다. 사실 지금도 눈이 피곤하다. 그래도 한 주 회고를 위해 잠깐 노트북을 켜고 글을 쓴다. 사실 이번 한 주는 눈 수술 때문에 거의 아무것도 하지 못하고 눈만 감고 있었다. 정말 눈만 감고 있으니 너무 삶이 지루하고 답답했다. 그러다 보니 다시 한번 건강에 대해 많은 생각을 하게 되었다. 앞으로는 신체 건강 뿐만아니라, 정신 건강 또한 잘 다스리면서 앞으로 오랫동안 개발을 하고 싶다. 참고 스터디언 : https://www.youtube.com/watch?v=xZYiDJXWGj0 참고

하나씩 집을 구하고 집에 필요한 인테리어 물품을 적다 보니 너무나 많았다. 이렇게 해서는 끝도 없다고 생각해 먼저 ‘집에서 가져갈 것’과 ‘사야 할 것’을 나누었다. 그리고 각 사용 용도에 맞게 분류했다. 이렇게 분류하고 적는 과정에서 막연하게 불안했던 감정들이 조금은 사라졌다는 사실을 알게 되었다. 보이지 않는 불안 속에서 조금이나마 도움을 주는 방법이 ‘명확하게 적는 것’이라는 것도 다시 한번 느끼게 되었다. 앞으로 일하면서 경험했던 문제와 해결 과정을 적으면서 스스로 실력을 객관화해 부족한 부분을 채우도록 해야겠고 또한 미래에 준비해야 할 것들을 적으면서 미래에 대한 불안에 어쩔 줄 모르는 것이 아니라, 마주하여 하나씩 이뤄나가야겠다. 이렇게 글을 쓰면서 반성하는 것이, 집을 구하고 인테리어에 신경을 쓰다 보니 독서와 글쓰기에 집중하지 못한 것 같다. 그리고 헬스도 끝나서 근력 운동을 며칠 동안 하지 못했는데, 지금이라도 다시 시작해야 하겠다. 독립한다는 사실이 나에게 큰 도…

원룸 구하기. 이직을 위해 원룸을 구하고 있다. 그런데 이렇게 어려운 일이라 생각지도 못했다. 솔직히 말하면 지금 다른 것에 집중이 안 된다. 타지역에 있는 나는 집 보러 가는 것도 쉽지 않다는 사실을 알게 되었다. 그래도 언젠가는 익숙해지고 해야 할 일이기에 꾹 참고 정보를 알아보고 있다. 그러다가 문득 집을 처음 구하는 사람들에게 좋은 UX/UI를 제공해주는 서비스가 있으면 참좋겠다는 생각했다. 사실 타지역에 방을 구하는 과정에서 너무나 많은 정보를 알아야 한다는 사실에 버거움을 느꼈다. 그래서 Toss처럼 손쉬운 UI/UX를 제공하는 집을 구하는 서비스가 있으면 좋겠다는 생각을 했다. p.s 사이드 프로젝트로 한 번 도전해 봐야겠다. 참고 참고

결과. 드디어 서울로 이직하게 되었다. 정말 이게 현실인지 아직도 어안이 벙벙하지만, 결국 나는 서울에서 일을 할 수 있게 되었다. 이직을 준비하기 위해 퇴근 이후 또는 주말에 따로 시간을 내어 공부했던 나 자신이 조금은 뿌듯했다. 그때 당시에는 스스로 확신이 없어, 집에 가는 길에 라는 생각을 했다. 그런데도, 부족한 부분을 채우기 위해 끊임없이 공부했다. 그래서 좋은 결과가 있지 않았나 싶다. 독립. 서울에 자취방을 구하고 독립을 준비하는 과정 또한 나에게 새로운 도전으로 다가왔다. 모르는 정보도 너무나 많았고, 이러한 과정을 이미 친구들과 다른 사람들은 겪었다는 생각에 대단하게 느껴졌다. 그래도 하나씩 체크해야 할 것들을 적어 놓고, 하나씩 하나씩 알아가는 과정이 재밌게 다가왔다. 이 과정에서 느낀 거지만, 조급할 때는 차분히 적으면서 일을 진행하면 잘 처리할 수 있다는 자신감이 느껴졌다. 정말 매번 새로운 경험을 하면서 아직도 갈 길이 멀구나라는 생각을 하지만, 그래도 이렇…

도전. 이번 주는 개인적으로 큰 도전을 하고 왔다. 스스로 많이 부족하다고 생각하였지만, 조금씩 자투리 시간에 준비해 결국 도전하여 좋은 결과를 얻게 되었다. 이번에 도전을 통해, 개인적으로 정말 많은 걸 얻은 것 같다. 그중에서 가장 큰 것은 세상은 너무나 크다는 사실을 다시 한번 느꼈다. 구체적으로 이야기 할수는 없지만, 미디어에서 보고 들었던 것들을 내 옆자리 누군가가 당연하게 대화하는 모습들을 보면서 처음에는 라는 생각을 하다가, 라는 생각하였다.(스타트업 관련 대화였다.) 이번 경험을 통해서, 앞으로도 꾸준히 스스로 안주하지 않도록 노력해야겠다. 세상은 넓고 아직 내가 경험해보지 못한 것들이 많다는 걸 다시 한번 상기하는 이번 주였다. 차분히. 사실 도전을 하면서, 내가 과연 가능할까? 라는 의심을 많이 했다. 스스로 부족하다는 생각 때문에 그랬던 것 같다. 하지만 계속 부족하다고 아무것도 안 하면 정말 내가 원하는 변화를 할 수 없다는 생각이 들었다. 그래서 차분히 정…

보람. 최근에 번아웃이와 블로그에 글을 쓰지 않은 동안, 많은 생각을 했다. 등 철학적인 질문을 했던 것 같다. 쉽게 대답하지 못했지만, 그래도 생각해보니 개발을 통해 누군가의 삶에 도움을 주고 싶다는 생각이 들었다. 이런 생각을 했던 이유는 최근에 회사 프로젝트를 통해, 지자체 및 기업 지원금 혜택 검색 서비스를 만들고 있었다. 문득 ‘누군가는 이 서비스를 통해 생각지도 못한 지원금을 받아 생계에 도움이 될 수도 있겠네’라는 생각이 들었기 때문이다. 이 생각 덕분에 개발을 더 잘하고 싶어졌고, 좋은 서비스로 더 많은 사람에게 영향을 주고 싶어졌다. 학습 방법 회고. 위 생각하고 나니, 스스로 개발 실력과 개발 실력을 높이기 위해 학습하는 방법을 돌아보게 되었다. 부끄럽게도 나는 지금까지 개발 실력을 높이기 위해 학습하는 척(?)했던 것 같다. 스스로 질문과 생각을 하지 않고, 그저 받아 적고 정리만 했다. 그리고 이해했다고 착각했던 것 같다. 블로그를 통해서 스스로 이해했는지 …

번아웃 몸이 회복이 되지 않는다. 열심히 하고는 있지만, 힘이 든다. 운동과 산책을 통해 회복하고자 애쓰고 있다. 아무것도 하지 않으면 안되니깐… 참고 참고

✅ Facts(사실, 객관) 강의 영상이 길어 과제를 진행하지 못했다.(금요일에 강의를 다 보았다.) 🙋‍♂️ Feelings(느낌, 주관) 강의를 다 듣고 과제를 진행하는 게 아니라, 강의를 본 내용까지라도 과제를 진행했어야 했는데 그렇게 하지 못해 아쉽다. 😋 Findings(발견, 배운점) 앞으로는 학습을 하면 바로 실행(과제 진행 등)하도록 해야겠다. 👨‍💻 Affirmation(자기 선언) 효율적인 학습방법을 찾아보고 실천해 보자. 시간, 체력관리를 잘 하자. 📕 참고 ✅ Facts(사실, 객관) 🙋‍♂️ Feelings(느낌, 주관) 😋 Findings(발견, 배운점) 👨‍💻 Affirmation(자기 선언) 📕 참고

책을 구매한 이유 개발자로써 블로그에 글을 잘 쓰는 방법을 알고자 이 책을 구매해 읽게 되었다. 하지만 이 책에서는 단순히 블로그에서 글을 잘 쓰는 방법 말고 변수 네이밍, 릴리스 노트, 장애 보고서 등의 다양한 글쓰기 방법을 알려주고 있었다. 그중에서 가 인상깊었다. 네이밍은 모두에게 어렵다. 이 부분을 읽으면서 나뿐만이 아니라, 전 세계 사람들이 이름 짓기가 가장 어렵다는 사실에 조금 위로가 되었다. 좋은 변수 이름의 특징 책에는 좋은 이름이 가지는 5가지 특징에 대해 소개를 했다. 특이 이 내용이 현재 나에게 필요한 내용이라고 생각했고, 당장 체화해야 할 부분이라고 생각했다. 마무리 생각보다 많은 내용이 담긴 책이었다. 그리고 꼭 숙지해야 할 내용들도 많았다. 그래서 한 번 읽는 것으로 끝나는 것이 아니라, 생각나고 필요할 때마다 꺼내서 봐야겠다고 생각했다. 그리고 사내 기술 블로그를 운영하거나 글쓰기에 대해 고민을 하고 있는 개발자분이 있다면 이 책을 추천해 주고 싶다. 그…

✅ Facts(사실, 객관) 라우팅 기능 구현과 더불어 라우팅 관련 테스트 코드를 처음 접하게 되었다. 🙋‍♂️ Feelings(느낌, 주관) 라우팅 관련 에러와 과제를 하면서 발생한 에러를 해결할 때마다 스스로 학습하고 있다는 느낌을 강하게 받고 있다. 😋 Findings(발견, 배운점) 최근에 함수를 통해 React Component 내의 오브젝트의 값들을 랜더링 하는 과정에서 에러를 접했는데, React는 Component를 랜더링할 때, 화면에 표시할 데이터 타입과 실제로 주입하는 데이터 타입이 같아야 한다는 사실을 알게 되었다. React Component 랜더링에 대해 알게된 계기였던 것 같다. ✅ Facts(사실, 객관) 테스트 내부에서 사용하는 함수를 외부로 빼지 않고, 해당 테스트 내부에서 선언하고 사용하면 어디서 사용하는지에 대한 의도를 알 수 있다는 피드백을 받았습니다. 🙋‍♂️ Feelings(느낌, 주관) 코드의 의도를 생각하면서 코딩을 하지 않았다는 사실을 알게 되었…

2022년 1/3이 지나갔다. 시간 참 빠른 것 같다. 4개월 동안 많은 시도를 했다. 그 중 코드숨을 통해 처음 JS 스터디를 참여해 보았고, 또 실제 기술 면접을 보면서 스스로가 얼마나 실력이 부족한지 절실히 알게 되었다. 특히 기술 면접 준비하면서 타인에게 설명할 수 없으면 내 지식이 아니라는 사실을 뼈저리게 느꼈다. 그래서 요즘 학습할 때, 가상에 인물을 두고 설명하는 식으로 개념을 학습하니깐 확실히 자신감도 생기고 더 깊게 학습을 하는 것 같다. 그리고 사실 하나하나 시도하고 도전할 때마다 속으로 ‘몸도 요즘 피곤 한데 할 수 있을까?‘라는 걱정이 많이 있었지만, 지금 생각해 보면 잘한 선택과 시도였던 것 같다. 남은 2022년 많은 시도를 통해, 내 삶을 변화시키고 싶다. 더 기본기를 견고하게 만들어서 실력 있는 개발자가 되고 싶다. 조급함보다는 차분히 하나씩 채워가자. 남은 8개월 화이팅이다.💪 참고 참고

돌아보며 이번 주도 역시나 힘들었다. 업무적으로 퍼포먼스가 나오지 않는다는 말을 팀장님에게 들었다. 스스로 고민해 보았을 때, 최근들어 몸과 정신이 많이 피곤해서 그런 것 같다. 체력관리도 프로로써 가져야 할 하나의 덕목인데, 잘 못하는 것 같다. 최근에 더 성장하기 위해 다양한 워크샵과 스터디를 참여했다. 참여할 때는 많이 배우고 기분도 좋은데, 막상 혼자서 무언가를 하려고 하면 힘이 나지 않는다. 당장 내일부터는 몸과 정신을 회복하면서 해야 할 것들을 하나씩 해야겠다. 정말 가장 중요한 건강을 먼저 생각하면서 임해야겠다. 참고 참고

✅ Facts(사실, 객관) 저번 주와 이번 주 코드숨 과제를 완료하지 못 했다. 🙋‍♂️ Feelings(느낌, 주관) 개인적으로 이번 달에 몸이 많이 피곤한 것 같다. 회복할려고 해도 잘 되지 않는다. 그래서 해야 할 것들에 대해 집중을 잘 하지 못 하는 것 같다. 😋 Findings(발견, 배운점) 이번 달은 먹는 음식, 수면시간, 운동시간 등을 통해 컨디션 조절을 잘 해서 과제를 완료할 수 있도록 노력해야 겠다. 👨‍💻 Affirmation(자기 선언) 몸 관리를 잘하자 시간 관리를 잘하자 📕 참고 ✅ Facts(사실, 객관) 🙋‍♂️ Feelings(느낌, 주관) 😋 Findings(발견, 배운점) 👨‍💻 Affirmation(자기 선언) 📕 참고

Facts 코드숨 과제를 진행하면서 에 가 제대로 할당되지 않는 문제가 발생했다. Fellings 원인은 파악했지만, 1시간 이상 해결하지 못하고 있어 너무나 답답하다. 그리고 일단 이 테스트를 무시하고 과제를 진행해야 해야 할지 고민이 되기도 했다. Findings 이런 경우 어떻게 해야 할지 먼저 트레이너 분에게 물어보고, 더 고민을 할지 아니면, 과제를 진행해야 할지 판단해야겠다. 그리고 구조 분해 할당에 대해 정확한 개념을 집고 사용해야겠다. 막연하게 스스로 알고 있다고 생각했던 부분에서 막혀버리니 더욱 당황하고 마음만 조급해지는 것 같다.

Facts 코드숨 과제를 진행하다가 함수 테스트 코드가 통과되지 않았다. 계속 원인을 찾아보아도 발견을 못해 스스로 초조하고 답답했다. Fellings 잠시 과제를 중단하고, 조금 쉰 다음에 차분히 원인을 하나씩 분석해 보았다. 결국 원인을 발견했다. 의 리턴 값이 빈 배열이다 보니 계속 테스트가 통과되지 않았다. 임시로 의 리턴 값으로 변경하니 테스트 코드가 정상적으로 통과되었다. Findings 앞으로는 어떤 문제에 직면했을 때, 잠시 숨을 고르거나 혹은 잠깐 쉬었다가 다시 문제를 바라보는 것도 좋은 것 같다.

Facts 오늘 회사에서 디자이너 분과 자사 서비스 새로운 디자인에 대해 회의를 진행했다. Fellings 개선해야할 것들에 대해 서로 의견을 내다보니, 신기하게 좋은 아이디어가 나와 뿌듯했다. Findings 평소 앱, 웹 UI/UX에 대해 관심이 있어 관련된 글도 읽고 영상을 보았던 것들이 오늘 많이 도움이 되었던 것 같다. 개발뿐만아니라, 다른 사람들에게 도움을 줄 수 있도록 나의 생각을 적극적으로 공유해야겠다.

Facts 회사에서 하단 모달 필터 기능을 구현했다. 기존 탭에 하단 모달 필터 기능을 구현을 처음 하다 보니, 어떻게 를 공유하고 업데이트하는지 잘 몰라 많이 당황했다. Fellings 그리고 당장 내일 새로운 기능을 배포해야 하니 마음도 조급했다. Findings 팀장님께서 일단, 하나의 탭 안에 를 다루는 로직부터 작성해 보라고 말씀하셔서 구현은 했지만, 무언가 찜찜한 기분이 남아있었다. 문득 밥먹다가 코드숨에서 배운 상태 관리를 통해, 리팩토링할 수 있겠다는 생각이 들었다. 주말에 리팩토링을 해봐야겠다. Facts 코드숨 TIL 쓰는 법 강의를 들었다. Fellings TIL 쓰는 법을 알게 되서 기분이 좋았다. 또한 다른 사람들이 작성한 TIL를 통해, 각자의 시간 속에 느끼는 감정이나 생각들을 들을 수 있어 귀감이 되는 시간이었다. Findings 매일 TIL를 작성하는 것이 좋을 것 같아, 앞으로 TIL를 작성해 공유 해야겠다.

✅ Facts(사실, 객관) 1. Redux Flux Architecture의 개념 Redux 상태관리하는 이유와 장점 Recat 프로젝트에서 Redux 사용 방법 2. 추가 공부 JS 기본기가 많이 부족한 것 같아, 엘리님의 JS 기본 개념 강의를 수강하기 시작했다. 🙋‍♂️ Feelings(느낌, 주관) 이번 주는 개인적으로 몸 컨디션이 좋지 않았다. 또한 업무적으로 새로운 기능 배포 때문에 야근도 많았다. 그럼에도 코드숨 과제를 할려고 노력은 했으나, 조급한 마음때문에 과제의 의도를 잘 파악하지 못하고 답을 내기 급급했다. 또한 TDD에대한 학습 시간이 부족해 다른 수강생들이 작성한 코드를 많이 참고했지만, 과제를 진행하는데 많은 어려움이 있었다. 그래도 매일 퇴근 후, 짬을 내서 과제를 진행했다. 남들보다 많이 부족하지만 이번 과제 풀이 영상을 보면서 조금은 라는 감각이 생긴 것 같아 뿌듯하다. TDD를 하는 과정에서 사고력이 늘어나는 느낌이 든다. 😋 Findings(배운점) …

돌아보며 최근에 몸과 마음 상태가 많이 안 좋았다. 그럼에도 불구하고 아무런 대책 없이 그저 하루하루 살아가고 있었다. 하지만 이렇게 몸과 마음을 내버려 두면 안될 것 같아, 회고를 작성하면서 나의 몸과 마음을 돌아보고자 한다. 제일 먼저 심적으로 많이 조급한 것 같다. 어쩌면 조급함이 모든 것에 원인이지 않을까 생각을 해본다. 왜 나는 조급한 걸까??? 스스로에 대해 많이 부족하다고 생각해서, 왜 많이 부족하다고 생각하는 걸까??? 나도 모르게 남들과 나를 비교하기 때문에… 그래서 나는 가만히 있지를 못 하는 것 같다. 남들과 비교해 나의 부족함을 채우고자, 많은 인터넷 강의와 개발 관련 학습 프로그램을 하고 있다. 물론 배울 때는 새로운 것을 배운다는 사실에 너무 기쁘지만, 허무함을 느낄 때가 있다. (사실 돌이켜 보면 조급함 때문에 강의를 보는 것에 집중했 던 것 같다.) 그리고 출퇴근 시간에 원티드 개발 관련 콘텐츠를 들으면서 내가 모르는 정보를 얻어 뿌듯하지만, 막상 …

그럼에도 불구하고 이번 주는 몸이 너무나 피곤했다. 그럼에도 불구하고 해야 할 일들을 하나씩 해 나아갔다. 스스로 생각했던 것이, 힘들다고 가만히 있으면 나이 지지도, 변하지 못한다. 그러니깐 이때, 조금이라도 해야 한다 그래야 나아질 수 있다. 일을 하면서도 많이 허탈하고 어이없는 일도 많이 있었지만, 더 나아지기 위해 퇴근 이후에도 꾸준히 학습했다. 코드숨을 통해 테스트 코드 학습도 했고, 원티드에서 제공하는 개발자 관련 콘텐츠를 보기 위해 인생 처음으로 구독 결제를 하였다. 출퇴근 길에 들으니 너무나 좋다. 내가 몰랐던 내용을 알아서 너무 좋고 그중에 블랙커피 커뮤니티를 통해 이력서 관련 워크샵도 신청하였다. 또한 학습 방법에서 무엇보다 피드백을 받는 환경이 너무나 중요하다는 사실을 다시 한번 느끼게 되어 코드숨 프로그램을 신청한 부분에 있어서 너무나 잘 했다고 스스로를 칭찬하였다. 그러다가 문득 코드 리뷰를 해주는 사이트나 관련 서비스를 만들면 너무나 좋을 것 같은 아이디어…

✅ Facts(사실, 객관) 1. Jest Jest 개념 및 사용 방법 학습 2. TDD TDD 개념과 TDD를 해야 하는 이유 학습 과제를 통해 React로 TDD 하는 방법 숙지 3. 추가 공부 JS 기본기가 많이 부족한 것 같아, 엘리님의 JS 기본 개념 강의를 수강하기 시작했다. TDD 익숙하지 않아, 엘리님의 React TDD 강의를 수강하기 시작하였다. 🙋‍♂️ Feelings(느낌, 주관) 테스트 코드가 익숙하지 않아, 코드숨 참여하는 사람들의 코드와 리뷰어님이 피드백 주신 내용과 관련 자료들을 찾아보았다. 커밋을 할 때, 의미있는 커밋 내용과 작은 단위의 코드 진행 사항을 작성하지 못 했다. 😋 Findings(배운점) , , 을 통해 테스트 코드의 범주화를 할 수 있다. 을 통해, 테스트 맥락을 구분할 수 있다. 다음 테스트 구문에는 3인칭 복수인 를 붙여야 한다. 컴포넌트 테스트를 명시할 때, 굳이 component를 붙일 필요가 없다. 엘리먼트 랜더링 테스트 구…

태도와 커뮤니케이션의 중요성 이 책을 읽으면서 다른 개발자들은 어떤 사고와 어떤 경험을 가지면서 개발자로써 살아왔는지 알게 된 시간이었다. 특히, 나처럼 주니어 개발자에게 이 책을 통해 앞으로 갖추어야 할 것들이 무엇인지 확실히 알게 되었다. 그리고 한 줄의 코드를 작성하더라도 의 깊게 파고드는 태도는 너무나 중요하다는 사실을 어렴 풋이 알고 있었는데, 왜 중요한지 알게 되었고 어떤 식으로 사고해야 하는지도 밑에 글을 통해 알게 되었다. 개발자 보다 먼저 성숙한 사람이 되자 개발하기 앞서 우리는 모두 사람이다. 그렇기 때문에 사람과 사람의 관계에서 발생하는 문제가 따라온다. 관계에서 발생하는 문제를 해결하는 방법 중 하나가 서로의 상황과 마음을 해주는 것이다. 하지만 만약 이 없는 사람과 함께 일하게 된다면??? 상상만 해도 끔찍하다. 그렇기 때문에 이 책에서는 개발 실력도 중요하지만, 즉 이 잘 되는 사람이 먼저 되자고 강력하게 말하고 있다. 그러면 어떻게 능력을 키울 수 있…

🏃반성 코드숨 과제와 업무를 함께 하니 몸과 마음이 많이 지쳐있다. 그리고 최근에 지원한 회사에 운 좋게 서류가 통과되었지만, 과제 전형에서 탈락하였다. 과제 전형을 하면서 확실하게 내 실력이 너무 부족하다는 사실을 알게 되었다. 특히 CS, JS, React, 알고리즘 등 학습의 깊이가 얕음을 알게 되었다. 이번 달은 정말 개념을 튼튼히 하는 시간을 가져야겠다. 그래야 원하는 목표도 이루고 몸도 정신도 회복될 것 같다. 스스로 조급한 마음을 갖기 보다는, 꾸준히 차분히 쌓아 가자. 참고 참고

✅ Facts(사실, 객관) 1. React React 개념 학습 React DOM 개념 학습 2. Components & Props Components & Props 개념 학습 3. React Hook React Hook 개념 학습 useState 개념 학습 4. 선언형 프로그래밍 선언형 프로그래밍 개념 5. 관심사의 분리 관심사의 분리 개념 학습 🙋‍♂️ Feelings(느낌, 주관) 이번 주는 야근 때문에 몸도 마음도 지쳐있는 상태였다. 그래도 과제를 조금이라도 해서 PR 피드백을 받고자 노력을 했다. 그러나 많이 지쳐있던 탓이었을까, 빨리 과제를 마무리 하고 싶은 마음에 PR 대해 깊게 생각하지 않고, 과제의 정답에 집중을 했다. 다행히 코드 리뷰 해주시는 분께서 정확한 피드백을 해주셔서, 정답이 아닌 에 초점을 둬야 한다는 사실을 깨닫고 차분히 에 깊게 생각하는 시간을 가지게 되었다. 돌이켜보니 사실 일을 할 때에도, 보다는 에 집중을 하며 일하고 있었다. 앞으로 아무리 몸과…

✅ Facts(사실, 객관) 1. 개발 환경 구축 Node.js 개념 학습 및 설치 NPM 개념 학습 및 프로젝트 만들기 Webpack Dev Server 개념학습 및 설치, 실행 방법 학습 ESLint 개념학습 및 설치, 설정 방법 학습 2. 웹 개발 DOM 개념 및 조작 방법 학습 JS 문법 학습(forEach, map, filter, Rest parameters, Spread syntax) 3. JSX Babel 개념 및 설치, 설정 방법 학습 Webpack config 설정 방법 학습 JSX 개념 학습 JS 문법 학습(구조분해 할당, Object관련 함수, 연산자 활용법) 🙋‍♂️ Feelings(느낌, 주관) 개념 학습하면서 당연하게 알고 있던 것이 아님을 알게 되는 시간이었다. 특히 과제를 진행하면서 얼마나 부족한지 강하게 깨닫게 되었다. 사실 코드숨을 신청한 계기도 생각에서 신청을 했는데, 정말 잘 신청한 것 같다.👍 특히,코드리뷰를 받으면서 내가 놓치고 있는 부분을 알게…

💪 자신감 이번 주부터 코드숨 과제 풀이를 진행했다. 그 가운데 지원했던 곳에서 서류 합격아 2곳이나 되어, 코드숨과 과제를 함께 진행하게 되었다. 결론부터 말하자면, 정말 역대급으로 빡쎘다… 사실 이 글을 다 작성하고 지원한 회사의 과제를 마무리 해야 한다…😭 그래도 이번에 회사를 지원하면서, 라는 사실을 명확하게 알게 되었다. 매번 개발 관련 글과 개발자 관련 영상이나 커뮤니티를 보면서 스스로 많이 부족하다고 생각을 했었는데, 일단 행동을 먼저 하고 꾸준히 제대로 학습만 한다면, 정말 가고 싶은 회사의 개발자가 될 수 있다는 자신감을 가지게 되었다. 마지막으로 코드숨 참여하면서 다양한 사람들과 서로 의견도 구하고, 질문하면서 당연하게 생각했던 것들에 대해 조금 더 깊게 생각해보는 시간도 가졌다. 요즘 들어 매일매일 성장하고 변화하고 있음을 살짝 느끼기 시작하였다. 그렇기에 더욱 몸관리, 정신관리를 잘 해야겠다. 이번 한 주도 고생했다!!! 참고 참고

😁 오랜만에 느끼는 즐거움 오늘은 코드숨 OT에 참여하게 되었다. 사실 이때 몸 컨디션이 너무 좋지 않았다. 그래도 다양한 사람들과 만나 새로운 경험을 하고 싶어 몸을 일으켜 컴퓨터 앞에 앉았다. 처음에는 많이 어색하고 낯설었지만, 점점 사람들과 이야기하며 다양한 주제로 각자의 의견을 듣고 말하는 시간을 갖게 되니 컨디션이 좋아졌다. OT 하면서 되게 인상 깊었던 점은, 내가 가지고 있었던 생각을 누군가가 이미 해결하기 위해 일하고 있다는 사실이었다.(홀로 스탠딩) 너무 신기했고 정말 대단한 개발자들이 이렇게나 많구나라고 다시 한번 느끼게 되었다. 마지막으로 OT를 주관해 주신 분께서 말씀해 주셨다. 정말 12주 동안 설레기도 하고 걱정되기도 하지만, 최선을 다해 즐겁게 학습하고 싶다. 😄 참고 참고

✅ 목표 사용자 정의 객체를 이터러블 프로그래밍 하는 것이 무언인지 알아보자! 👋 Map함수를 통해 이터러블 프로그래밍 내장 된 Map 함수 미리 내장된 Map함수를 통해 이터러블 프로그래밍 가능 , 사용 가능 이터러블 프로그래밍 👋 Set함수를 통해 이터러블 프로그래밍 👋 클래스를 통해 이터러블 프로그래밍 Model, Collection 사용 Collection 제너레이터 사용 전 Collection 제너레이터 적용 Class에 이터러블로 순회할 수 있도록 적용함 👋 Product, Products - 메서드를 함수형으로 구현하기 👍 느낀점 사용자 정의로 객체를 만들어서 이터러블 즉, 함수형 프로그래밍을 하는 방법을 학습하게 되었습니다. 이번 기회에 학습한 내용을 업무에 적용해 봐야겠습니다. 참고 👋 Map함수를 통해 이터러블 프로그래밍 내장 된 Map 함수 이터러블 프로그래밍 👋 Set함수를 통해 이터러블 프로그래밍 👋 클래스를 통해 이터러블 프로그래밍 Model, Coll…

✅ 목표 객체를 이터러블 프로그래밍으로 작업한다는 것은 어떤 의미 일까? 👋 L.values() 구현 기존 values() 는 즉시 배열로 만들어 놓고 시작함 L.values() 필요한 만큼만 배열로 만들어서, 추출해 사용(코드 평가를 지연) 즉, 밑에 에서 2개만 꺼내기 때문에 에서 2개만 배열로 만들어서 사용 또한, 객체 값이 많아 지거나, 로직이 복잡할 경우에는 밑에 코드가 위의 코드보다 유리함 👋 L.entries() 구현 지연적인 함수를 구현하게 되면, 어떤 값이 들어오던지 간에 이터러블 프로그래밍 가능 👋 L.keys() 구현 👋 어떠한 값이든 이터러블 프로그래밍으로 다루기 이터러블로 이터러블 프로그래밍 가능 객체를 제너레이터를 이용해, 이터레이터로 만들어서 이터러블 프로그래밍 가능 어떤 제너레이터든 이터레이터로 만들어서 이터러블 프로그래밍 가능 👋 object 함수 만들기 다형성이 넓음 reduce하나로 Object 함수 만들기 참고 을 통해 m을 만든후, 하게되면…

✅ 목표 안전한 코드 합성이란 무엇인지 알아보자! 👋 map으로 안전하게 합성하기 안전하지 않은 합성 함수 정의한 함수를 합성하여 사용할 때, 밑에 코드에서 인자는 무조건 숫자가 들어와야 함 숫자가 아닌 값이 들어오면, 값이 안나옴 즉, 안전하지 않음 안전한 합성 함수 그러나 에 합성한 함수를 넣어주면, 합성 함수 인자에 숫자가 아닌 값이 들어와도 이 나오지 않음 👋 find 대신 L.filter 써보기 find사용 문장식으로 복잡하게 표현 만약에 안에 이 가 없다면 밑에 코드 결과는 를 던지게 됨 L.filter 사용 한 표현식으로 간단하게 표현 가능 안전한 코드 작성 가능 함수 합성 순서 변경 가능 시간 복잡도 더 빠름 👍 느낀점 나도 업무를 하면서 특정 함수를 작성할 때, 하나의 상황만 고려해 함수를 작성하는 경우가 많았다. 이번 학습을 통해, 내가 지금까지 작업한 것들이 얼마나 위험한지 알게 되었으며, 추상화 즉 코드의 안정성에 대해 깊게 생각해 보는 시간이였다. 참고 👋 …

변화 커리어 성장에 갈증이 너무나 심한 한 주였다. 그래서 이력서를 정리해 매일 관심 있었던 회사에 지원을 시작했다. 어차피 더 큰 회사로 가기 위해서는 채용 절차를 준비하고 극복해야 하기 때문에, 미리 면접, 과제 등 다양한 경험을 쌓는 마음으로 회사 지원을 적극적으로 하게 되었다. 사실 어제 야근도 해서 많이 피곤했는데, 감사하게 서류 접수 통과되었다는 소식을 듣자 속으로 ‘나도 이제, 더 큰 세상으로 나아가 성장할 수 있겠다’라는 생각아 들게 되었다. 이번 일로 무언가 삶에 변화를 주기 위해서는 행동이 당연하고 너무나도 중요함을 알게 되었다. 더 일찍 준비하고 행동할 수 있었는데, 막연한 두려움과 행동하지 않아 조금 늦게 행동했던 것 같다. 그래도 지금부터라도 미루지 말고, 바로 행동하는 연습을 해야겠다. 도움 되었던 자료 도움 되었던 자료

반성 처음으로 과제 테스트를 프로그래머스를 통해 진행했다. 결과는 처참했다. 일단 업무에서 React-Native로 작업을 하고 있는데, 필요한 기능을 개발할 때 React-Native에서 제공하는 플러그인을 추가하는 방향으로 개발을 하다 보니, 플러그인 내부 코드를 보지 않고 개발을 진행하고 있었다. 물론, 웹 개발을 일 시작하면서 거의 하지 못해서 많이 낯선 것도 있었지만, 이번 과제를 풀면서 정적인 HTML에 특정 이벤트를 등록하여 기능을 구현하는 부분에서 많은 생각이 들었다. 지금까지 내가 개발한 것은 개발이 아니었구나… 정말 원리도 모르고 동작이 된다고 자뻑(?)에 빠져서 개발을 하고 있었구나…라는 생각을 하면서 되돌아보는 시간을 갖게 되었다. 만약 이렇게 반성하지 않고, 아무 생각 없이 개발을 진행했다면 정말 알맹이가 없는 개발자가 되었을 것이다.(정말 아찔하다) 앞으로 학습을 하면서 동시에 나의 실력을 파악할수 있도록 노력해야겠다. 도움 되었던 자료 도움 되었던 자료

Reduce함수 제대로 사용하기 목표 명령형 코드에서 함수가 만능이라고 생각하고 작성하는 습관을 지우자! Map 함수로 Reduce 제대로 사용하기 명령화 reduce 콜백함수로 들어오는 는 너무 구체적인 값들이 들어옴 그래서 함수명을 짓기도 애매하고, 재사용 되기 어려움 추상화 을 통해 배열로 결과를 만들어서 의 인자에 들어오는 값들의 타입을 동일하게 만듬 즉, 에 복잡한 함수를 쓰는 것보다 을 사용해서 하나의 타입 코드를 사용해서 간결하고 재사용되기 쉬운 코드를 사용하는것이 함수형 프로그래밍에 적합함 또한, 함수 조합성 측면에서도 유리함 Map, Filter 함수로 Reduce 제대로 사용하기 1 Reduce에서 모든 로직 사용 코드가 깔끔해 보이는 거지, 사실 로직 측면에서는 조심스러움 또한, 로직을 추가 할 때, 복잡함 Map, Filter 함수 이용 간결한 함수를 통해 조합해 나아가는 성격 특정 로직이 추가되어도 복잡하지 않음 Map, Filter 함수로 Reduce …

이터러블 프로그래밍 학습 목표 이터러블 프로그래밍 혹은 리스트 프로세싱에 익숙해지자 🧐홀수 N개 꺼내서 더하기 명령형 코드 함수형, 이터러블 프로그래밍(List Processing)으로 코드 변경 를 함수를 통해 변경 값 변화 후, 변수 할당을 함수를 통해 변경 를 함수를 통해 변경 축약 및 합산을 함수를 통해 변경 참고 - while문을 range함수로 변경 🧐 추억의 별 그리기 🧐 추억의 구구단 느낀점 기존에 당연하게 작성하고 있던 명령령 코드를 함수형 코드로 변경하는 학습을 통해, 더욱더 가독성과, 성능 적인 측면에서 좋은 코드를 작성해 보는 학습을 하였습니다. 조금 더 연습을 통해, 실무 또는 프로젝트에서 막연하게 사용했던 명령형 코드를 함수형 코드로 변경하여 유지보수 좋은 코드를 작성하는 연습을 해야 겠습니다. 참고 목표 🧐홀수 N개 꺼내서 더하기 명령형 코드 함수형, 이터러블 프로그래밍(List Processing)으로 코드 변경 참고 - while문을 range함…

도전 TDD 개발 방법이 이미 서울 쪽 지방 괜찮은 회사들은 TDD를 실천하고 있다는 사실과 내가 너무나 좋아하는 이 TDD 온라인 개발 프로그램을 참여했다는 후기를 듣고 바로 해당 온라인 TDD 강의 신청 알람을 했다. 하지만 금액이 부담이 되었지만, 이 금액을 투자해 나의 연봉을 200% 이상 올릴 수 있다는 확신이 들어서 바로 결제를 하게 되었다. 사실 내가 일하면서 이 프로그램을 제대로 완주할 수 있을까라는 의문이 들었지만, 그래도 이러한 노력을 하지 않는다면 영원히 나아가지 못할 것 같았다. 내가 한 선택을 제대로 결실하기 위해, 미리미리 React 학습과 TDD 관련 학습을 해야겠다. 건강 꾸준히 운동을 하고 있는데, 운동을 하다가 갑자기 허리가 아프다. 정말 억울하면서도, 속상하다. 열심히 나아지기 위해 운동을 하는데 허리가 아프다니… 그래도 낙담하지 말고 과 을 분리 한 다음에 차분히 회복하자 도움 되었던 자료 도움 되었던 자료

자가격리 내가 확진이 될 줄은 꿈에 몰랐다. 자가격리를 하면서 몸은 너무 안 좋은데, 무언가 해야 한다는 마음때문에 제대로 쉬지도 못하고 있는 것 같다. 나만 좁은 공간 속에서 멈춰 있는 느낌이다. 그래도 쉬어야 한다. 나를 나무라하지 말고 인생 멀리 보면서 지금은 잠깐 쉬고 다음을 위해 준비해야 한다. 언젠간 이런 시간이 나에게는 큰 도약이 될 것이라는 희망을 가지며 쉴 땐, 제대로 쉬어야 한다. 이게 지금 가장 중요 한 것 같다. 가장 중요한 것 다시 한번 몸과 마음과 지금 관계를 맺고 있는 나의 소중한 사람들이 가장 중요하다는 사실을 잊지 않고, 한 걸음 나아지기 위해 휴식을 취해야 한다. 스스로에게 조급하게 밀어붙이지 말자. 나는 나만의 속도로 멀리 가자 도움 되었던 자료 도움 되었던 자료

집중 이 책을 읽으면서 스스로에게 ‘나는 무언가에 전념 또는 집중하는 삶을 살고 있나?‘라는 질문을 해보게 되었다. 하지만 대답은 쉽게 하지 못했다. 무언가를 열심히 하고는 있지만 돌이켜보면 남아있지 않은 느낌을 받을 때가 많았다. 무엇이 잘 못되었는가 생각하고 이 책을 읽다보니 그 이유를 하나씩 알게 되었다. 나는 하고 있었다. 즉 하나에 집중하지 않고 여러개를 조금씩 많이 하고 있었다. 그리고 이 책에서 말하는 의 의미는 사뭇 일반적으로 달랐다. 하나씩 조급하지 않고 그저 하나씩 임하다보니 전념하는 삶을 살게되었고, 원하는 목표에 다다를 수 있었다는 일화들이 많이 등장했다. 그 중에서 인장 깊은 구절을 소개 한다. 다짐 나 또한 전념해야 할 시기라는 사실을 알고 있다. 그러나 요즘 생각과 마음이 조급해 손에 잘 잡히지 않을 때가 많다. 이번에 이 책을 통해 마음을 다잡고 하나씩 차분히 전념하기를 통해 원하는 목표에 도달하고 싶다.

‘지연적인 함수’를 병렬 적으로 목표 상황에 따라 지연적이지 않을 때를 대비하는 함수 작성 지연된 함수열을 병렬적으로 평가하기 JS가 동작하는 환경인 브라우저, NodeJS에서는 비동기 I/O로 동작함 비동기 I/O는 싱글 스레드로 동작함으로, CPU 점유를 효율적으로 할 수 있음(최신 트렌드) JS가 싱글 스레드로 동작하고 있기 때문에 JS가 병렬적인 일들을 할 일이 없다고 생각하는 경향이 있음 그러나, JS가 로직을 제어 할 때 비동기적으로 싱글 스레드를 제어 할 뿐인지 얼마든지 병렬적인 처리는 필요함 예를 들어 NodeJS에서 데이터를 요청하는 쿼리를 병렬적으로 실행해, 한 번에 결과 값을 얻는 경우도 있고 NoSQL DB를 사용할 때, 여러개 Key를 가지고 많은 결과를 한 번에 처리 하는 경우도 있음 또는 NodeJS에서 이미지 처리를 할 때, 실제로 NodeJS가 직접 처리하는 것이 아닌, 네트워크나 기타 I/O로 작업을 보내…

‘지연적인 함수’에 Proimse 사용할 수 있도록 코드 추가 목표 지연적인 함수에서 상황에도 사용할 수 있도록 코드 수정 상황에 따라 지연적이지 않을 때를 대비하는 함수 작성 L.map, map, take 함수를 Promise에서도 사용하도록 밑에 코드에서는 값을 받게되면 정상적으로 동작하지 않음 L.map 함수에서 Promise 값 사용할 수 있도록 변경 Take 함수에서 Promise 값을 꺼낼 수 있도록 변경 다양한 경우에도 동작 함 L.filter, Take에 Kleisli Composition 적용 Filter함수에서 지연성과 Promise를 함께 지원할려면, Kleisli Composition을 활용해야 함 밑에 코드 처럼 Filter함수에 들어오는 값이 Promise이기 때문에 아직은 동작하지 않음 L.filter 지연성과 Promise를 만족하기 위한 수정 Take 함수에서 Promise를 만족하기 위한 수정 사용 Promise에서 값이 reject을 반환했을 …

의식적 노력 이번 한 주도 해야 할 것들을 하나씩 했지만, 그러나 의식적으로 차분히 임하지 못한 것 같다. 하나를 배우고, 일을 할 때에 스스로에게 내가 정말 이해했는지, 모르는게 무엇인지 스스로 생각하고 임하지 못 한 것 같다. 그저 시간에 쫓겨 라는 사실에 안주 했던 것 같다. 누군가에게 설명하지 못 한 다면 내 것이 아닌데 말이다. 다시 한번, 스스로 다짐하며 이제는 시간을 내 편으로 만드는 노력을 해야 겠다. 가장 중요한 것 건강의 소중함을 다시 한번 느꼈다. 아무리 공부를 하고 운동을 해도, 몸이 아프니 정신도 많이 약해진다는 것을 다시 한번 깨닫게 되었다. 인생에서 우선순위를 확실히 잡아 다시 회복하며 앞으로 나아가야 겠다. 도움 되었던 자료 도움 되었던 자료

🤫 ‘값’으로써 Promise 목표 값으로써 Promise의 의미를 알아보자 함수 합성 관점에서 Promise의 의미를 알아보자 Kleisli Composition 규칙 관점에서의 Promise의 의미를 알아보자 위의 개념을 학습한 뒤에, reduce함수를 리팩토링 해보자 값으로서의 Promise 활용 함수가 제대로 작동될려면, 인자 와 가 동기적으로 값을 확인할 수 있어야 함 즉, 비동기 상황이 일어나지 않는(일급 값이 아닌) 값이 들어와야 함 = 가 아닌 값이 들어와야 함 만약 인자 자리에 시간이 지난 후, 값이 들어오면 어떻게 될까? 정상적인 연산 불가 그러면 어떻게 하면 위의 코드를 정상적으로 동작하게 할 수 있을까? go1함수를 일반 코드 평가와 Promise를 값으로 코드 평가 하는 함수를 동일한 상황에서 사용할 수 있도록 코드 수정 함수 합성 관점에서 Promise Promise는 비동기 상황에서 함수 합성을 안전하게 해주는 도구 비…

몸부림 요즘 들어 스스로 ‘많이 힘들다’라는 생각을 한다. 그러다 보니 자연스럽게 불평불만을 많이 한 이번 주인 것 같다. 원래 이런 사람이 아니었는데 스스로를 돌이켜 보아도 어느새 특정 사람과 상황에 대해 불평불만을 하고 있는 나를 보게 되었다. 특히 이런 이야기를 들어주는 친구들에게 미안했다. 그래도 괜찮다고 언제든지 전화해서 이야기하라는 그 한 마디가 많이 힘이 되었다. 이 힘으로 하루하루 묵묵히 해야 할 일들을 할 수 있었다. 스스로 혼자라고 느낄 때도 있지만, 과거를 돌이켜 보면 나에게는 매번 좋은 사람들이 옆에 많이 있었다. 그리고 그 사람들이 떠나간 이후에, 이제야 그들이 소중한 사람이라는 사실을 알게 되었다. 그러니 지금 내 주변에 있는 사람들에게 감사하며 소중히 여기고 내 삶에 불평불만은 그만해야겠다. 이번 한 주도 많이 애썼고, 고생했고, 감사했다. 노력 최근에 자신이 한 업무를 누군가와 함께 공유하고, 개발해 나아가는 일을 할 때 타인에 대한 가 너무나 중요함을…

🤫 callback과 Promise 목표 방식을 살펴봄 는 어떤점이 다른 것인지 살펴봄 함수형 프로그래밍과 연관되어서, 가 어떤 가치를 가지고 어떻게 다른지, 어떻게 활용해야 하는지 살펴봄 JS에서 비동기 동시정 프로그래밍을 하는 방법 2가지 오랫동안 사용했던 패턴 를 기반으로 한 을 통해 함수를 합성하는 방법과 와 함께 사용하는 방법 CallBack Promise 적용 Promise를 만들어서 return함 한다는 의미가 중요함 CallBack과 Promise의 가독성 차이 함수를 연속적으로 실행시켰을 때 발생 특히, CallBack함수의 깊이가 계속 깊어지기도 하고, 코드 가독성면에서도 떨어짐 비동기를 값으로 만드는 Promise 일반적으로 CallBack함수와 Promise 함수의 차이가 코드 가독성 부분도 있지만, Promise가 CallBack과 다른 점은 일급으로 비동기 상황을 일급 값으로 다룬 다는 점이 가장 중요하게 다름 Promis…

flatten함수 함수 : 1차원 배열로 만들어주는 함수 L.flatten 함수 구현 배열의 깊이와 상관없이 특정 배열 안에 있는 값을 iterator로 리턴하는 함수 yield * 을 통해 L.flatten 함수 구현 은 과 같음 L.flatten 함수 사용 L.flatten을 통해 즉시 코드 평가하는 flatten함수 구현 L.deepFlat 깊은 Iterable을 모두 펼침 flatMap Map과 Flatten함수를 동시에 하는 함수 최신 JS 문법에 추가됨 기본적으로 JS가 지연적으로 동작하지 않기 때문에, 함수가 등장함 기본 JS에서 제공하는 flatMap사용 이 함수도 마찬가지로, 배열을 다 만들어 놓고 그 다음 함수 실행 L.flatMap 함수 구현 즉시평가, flatMap구현 2차원 배열 다루기 이터러블 중심 프로그래밍 실무적인 코드 느낀점 다양 함수형 프로그래밍을 구현해보고, 또 실무적으로 사용하는 연습을 하였습…

queryStr 함수 만들기 객체를 Query String으로 만드는 함수 pipe함수 적용 지연성 함수 적용 보다 이 높은 함수 밑에 함수는 배열이 아닌 곳에서도 사용 가능 지연성 함수 적용 find 함수를 통해 결과를 만들어 내는 함수 특정 조건을 만족하는 값 중 첫 번째 값만 꺼내는 함수 find함수 아쉬운점 filter함수 코드 실행시 users에 있는 값들을 다 순회하게 됨 그래서 를 호출하여, 내부 조건에 만족하는 값을 함수를 통해 추출하도록 변경 L.map을 통해 기존의 map함수 간결하게 만들기 이 때, 함수 사용 pipe함수 적용 L.filter을 통해 기존의 filter함수 간결하게 만들기 이 때, 함수 사용 L.map, L.filter에 For문 적용 느낀점 기존에 사용하던 함수들을 지연적으로 구현하는 학습을 통해, 함수의 확장을 경험하는 시간을 가졌습니다. 또한 원하는 값을 추출하기위해 지연적으로 구현한 함수를 사…

꾸준함 이번 한 주는 설 연휴가 있어서 많이 쉴 수 있을 거라 생각하지만, 나의 착각이었다. 몸은 쉬어야 하는데, 머리는 계속 무언가를 해야만 한다고 이럴 때일수록 무언가를 해야 한다고 나 스스로를 압박을 하였다. 그런데 돌이켜보면 그렇게 무언가를 제대로 하지 못했던 것 같다. 그러면서도 몸은 더 피곤해졌다. 정말 하루하루 제대로 살고 싶은데, 지금까지 해왔던 것(운동, 독서, 개발 공부 등)을 그냥 계속하는 기분이 들었다. 이러한 것이 잘 못된 줄 알았는데, 곰곰이 생각해 보니깐 이렇게 꾸준히 무언가를 계속하는 게 나의 장점이라는 생각이 들었다. 다만 이제는 몸을 생각하면서 막연하게 강의를 많이 들었다면, 이제는 적은 시간이라도 집중해서 배운 것을 남기는 것에 집중해서 강의를 들어야겠다. 마지막으로 오늘 운동을 하다가 문득 울컥했다. ‘이렇게 힘들어도 꾸준히 하는데, 나 스스로에게 보상을 안 주면 너무 힘들 것 같다’라는 생각이 들었다. 그래서 더 이 악물고 2022년에 세운 목…

이터러블 중심 프로그래밍에서의 지연 평가 Lazy Evaluation 코드가 필요하기 전까지 미루었다가, 정말 코드 평가가 필요할 때 실행 제때 계산법 느긋한 계산법 제너레이터/이터레이터 프로토콜을 기반으로 구현 나중에 코드 평가하고 진행 L.map 지연성을 가진 함수 구현 제너레이터/이터레이터 프로토콜기반으로 구현 코드 평가를 미루는 성질을 가지고, 평가를 순서를 조작 가능함 L.filter 지연성을 가진 함수 구현 제너레이터/이터레이터 프로토콜 기반으로 구현 range, map, filter, take, reduce 중첩 사용 이터레이터를 이용해서 코드 평가를 하고 코드를 실행시켜서 훨씬 더 빠른 코드를 만듬 단순히 문을 사용했는데 문의 내부 구조인 를 이용해 코드의 효율을 높일 수 있음 문을 대체하는 코드로 변경함 큰 차이는 아니지만, 조금 더 빠르게 동작함 즉시 코드 평가하는 함수로 문제 해결 range함수를 통해 0,…9 배열을…

책임 새해가 된지 어느덧 한 달이 지났다. 그런데 스스로 나를 되돌아보면 아직도 많이 부족한 것 같다. 그중에 말과 행동에 무게를 많이 두고 싶은데, 잘 그렇지 못하는 것 같다. 어떻게 하면 나의 말과 행동의 무게를 둘 수 있을까? 개인적으로는 인 것 같다. 무언가를 할 때에 을 생각한다면 조금은 말과 행동에 무게를 높일 수 있지 않을까 생각을 해보았다. 나이가 한 살 한 살 먹으면서 자연스럽게 어른이 될 줄 알았는데… 매 순간순간 을 생각하며 노력해야 어른이 되지 않을까 생각해 본다. 소중한 사람들, 그리고 내가 해야 하는 업무에 을 조금 더 지며, 성장하는 한 해가 되었으면 좋겠다. 의식적 노력 최근 프로젝트를 시작하면서 다양한 경험을 하고 있다. 스스로 놀랐던 점이, 단순히 기능 구현을 넘어 Doc에 제공한 대로 API를 사용하지 않았을 때, 발생하지 않은 문제들을 곰곰히 생각해보고, console창에 발생한 경고나 에러를 보면서, 어떻게 하면 성능 좋은 개발을 할 수 있…

Take 특정 범위까지 배열로 리턴하는 함수 take함수 안에서 range, L.range 함수 효율성 마찬가지로 L.range와 range 효율성 차이발생 일반 range함수는 특정 범위까지 배열을 만들고 나서 take 함수 진행 하지만 L.range는 배열을 만들지 않고 take의 첫 번째 인자인 5개의 값만 가진 배열을 만듬 take함수에 curry 적용 느낀점 다시 한번 함수형 프로그래밍에 대한 장점을 알게되었다. 정말 효율성이 너무 좋은 것 같다. 제대로 학습해서 실무에서 무조건 적용해야 겠다. 참고 take함수 안에서 range, L.range 함수 효율성 take함수에 curry 적용 느낀점 참고

Range 함수 Range 함수 실행 후, 모든 값을 더하는 함수 함수로 를 전달하기 전에, 이미 에서 코드가 평가되어 로 리턴됨 사실 가 작동하기 전까지는 로 리턴된 배열은 필요한 상태가 아님 가 순회를 시작하고 하나의 값으로 데이터를 축약 할 때, 그 때 가 필요한 것 느긋한 L.Range 코드 평가시 내부 문은 실행하지 않음 가 실행 했을 때, 문이 실행됨 즉, 밑에 는 배열상태로 있지 않음() 에서 해당 값들이 필요할 때, 문이 작동하면서 하나씩 코드가 평가됨 에서는 Array을 만들지 않고 reduce가 돌면서 하나씩 값을 꺼내는 방식임 ex) 문이 돌면서 으로 값을 꺼냄 Reduce 내부 함수를 통해 Range와 L.Range 비교 위 는 reduce를 실행했을 때, 를 만들고 → 를 만들고 그리고 순회하면서 로 값을 얻어서 축약 함 그런데 같은 경우 reduce를 실행 했을 때, 를 만들고 → iterator가 자기 자신을 리턴하는 Iterable이고 해당하…

지금까지 학습한 함수들 총 수량 구하기 총 금액 구하기 리팩토링 해보기 , 내부에 map 함수 인자에 전달하는 부분을 제외하고는 동일한 코드 현재, 함수 실행 후 실행하는 과정이 특정 도메인(products)에 의존하고 있음 결국 , 은 특정 도메인(products)을 위한 코드 임 추상화 레벨을 높여, 많은 곳에 사용할 수 있도록 리팩토링 진행 커링을 이용해 더 리팩토링 해보기 다른 도메인에서도 사용 함수형 프로그래밍으로 HTML로 출력하기 를 통해서 HTML 랜더링 템플릿 리터럴을 통해서 동적으로 표현 이라는 함수를 통해 다양한 곳에서 사용 가능 를 통해 HTML을 하나의 문자열로 합침 느낀점 이번 학습을 통해 함수형 프로그래밍으로 HTML을 출력하는 내용을 학습하면서 추상화가 높다는 의미가 어떤 것인지 다시 한번 알게 되었다. 결국 코드를 재 사용할 수 있는 범위가 높을 수록 효율적이고 생산적으로 일 할 수 있다는 것도 깨닫게 되었다. 더 제대로 학습해서 실무…

함수형 프로그래밍에서는 코드를 값으로 많이 사용함 어떠한 함수가 코드인 함수를 받아서, 평가하는 시점을 원하는 대로 다룰 수 있기 때문에 코드의 표현력을 높일 수 있음 중첩된 코드를 가독성 높일 수 있음 즉시 함수들과 인자를 전달해서 값을 바로 평가해서 사용 Go 라는 함수를 만들어서 실제로 코드의 표현력과 가독성을 높여보자 라는 함수를 만들어 사용하게 되면 에서 로 코드가 평가됨 즉, 인자를 받아서 하나의 값으로 축약해 나아가는 개념 Go를 사용하여 읽기 좋은 코드로 만들기 기존 코드 함수 사용 위에서 아래로 가독성 있게 코드를 변경할 수 있음 여러번 호출되는 함수를 하나의 함수로 만들어보자(Pipe) 함수를 리턴하는 함수 여러번 호출되는 함수를 하나의 함수로 만듬 밑에 3개의 함수를 축약하는 하나의 함수를 만들어주는 함수가 함수의 역할 Pipe 함수 설계 함수를 리턴하는 함수 내부에서 함수를 사용함 인자를 받아서 함수를 통해 내부 함수를…

Map, filter, Reduce 정리 함수형 프로그래밍 사고 products에서 가격이 20,000만원 미만인 가격을 합치고 싶다고 치면 함수의 첫번 째 인자로 들어오는 라는 함수를 통해, 두 번째 인자에 배열 안의 값들이 합산됨 즉, 밑에 코드를 보면, 두 번째 인자에 20,000원 미만의 값들이 배열로 들어와야 한다고 생각해야 함 filter함수를 통해 20,000원 미만의 상품을 배열로 하는 코드를 작성하면 됨 정리 머리 속으로 미리 어떠한 결과가 올지 생각을 하고, 그 결과 값이 배열이라면 배열을 리턴하는 함수를 적절하게 사용해야 함 밑에서 위로 올라오면서 코드가 동작되기 때문에, 밑에서 위로 코드를 읽어야 함 느낀점 함수형 프로그래밍적인 사고를 조금이나마 알게 되었다. 또한 이렇게 코드를 중첩으로 사용하면서도 가독성 좋게 코드를 짤 수 있음에 놀라웠다. 또한 API를 통해 얻어지는 특정 데이터를 모델링 하기 쉬울거라는 생각도 들었다. 참고 Map, filter, Red…

💪 반성 또 반성 무언가 확실하게 행동하고 싶은데, 잘 못하는 것 같다. 해야 할 일들이 분명히 존재하는데 스스로 그 일들을 미루기도 하고, 친구들과 약속을 잡았는데 그 약속을 번복하기도 하고… 과거의 안 좋은 습관들을 아직도 가지고 있다. 벗어 버리고 싶지만, 무슨 애벌레가 나비 되는 것처럼 사람은 바로 변화할 수 없는 건 알고 있다. 그래서 매 순간순간 의식적으로 내가 하는 말, 행동을 인지하는 게 너무나도 중요함을 다시 한번 되새기게 되었다. 그리고 또 한 번 다짐을 하게 되었다. 2022년에는 해야 할 일들을 미루지 말고 그냥 하자고, 스스로 타협하지 말고 아주 작더라도 행동하자고 어차피 한 번 사는 인생, 누구도 책임져 주지 않고 내가 내 발로 걸어가야 하는 거니깐… 힘들어도 정신만큼은 제대로 차리자 이번 한 주도 고생했다. 😱 예외 처리 이번 한 주는 개인적으로 너무나도 빡센 한 주였다. 그랬던 가장 큰 이유는, 사용자들이 가장 많이 접하는 , 관련된 로직 내부에 에러…

하나의 값으로 누적 하는 예시 기본 Reduce 사용 예시 는 재귀적으로 인자로 들어온 함수를, 계속 실행하면서 하나의 값으로 만들어야 함 Reduce 함수 내부 구조 누적 값을 인자로 받지 않았을 경우 JS에서는 위의 인자중 값이 들어오지 않아도 값이 축적되도록 구현되어 있음 누적하는 값이 함수 인자로 들어오지 않았을 경우 내부에서 를 만들어서 배열의 첫 번째 값을 셋팅 단순히 으로 접근하지 않고, 내부 원리로 초기값을 셋팅 Reduce 사용 예시 느낀점 Reduce함수 내부 구조 코드를 직접 구현하면서 Reduce 함수의 작동원리를 알게 되었음, 또한 Reduce함수를 통해 다양한 값을 추출할 수 있다고 생각함 참고 하나의 값으로 누적 하는 예시 기본 Reduce 사용 예시 Reduce 함수 내부 구조 누적 값을 인자로 받지 않았을 경우 Reduce 사용 예시 느낀점 참고

명령형 코드의 Filter 함수 filter 함수 이터러블을 받아서(순회를 하면서) 특정 함수를 인자로 받아, 함수 조건에 맞는 대상만 filter처리 후 return 진행 filter 함수 사용 내부(밑에 배열)에 있는 다형성은 인자로 들어오는 보조함수로 지원을 받고 외부의 경우 이터러블 프로토콜을 따르는 것으로 다형성을 지원 받을 수 있음 그래서 filter역시도, 많은 다형성을 갖을 수 있음 느낀점 Filter 함수 내부 구조를 알게 되었고 이터러블 프로토콜을 따르는 함수를 순회를 통해, Filter함수 적용해서 다양한 로직을 만들 수 있을 거라는 생각이 들었다. 참고 명령형 코드의 Filter 함수 filter 함수 filter 함수 사용 느낀점 참고

Map함수의 구조 함수형 프로그래밍에서는 와 값으로 소통하는 것을 권장 는 보조 함수를 넣어서 사용 값을 통해 다른 곳에서 사용 이름만 추출 Map 함수 사용X Map함수 사용O 가격만 추출 Map 함수 사용X Map함수 사용O 이터러블 프로토콜을 따른 map의 다형성 1 일반 Map함수는 Array만 순회 가능 은 를 상속받은 객체가 아니기 때문에 map함수를 사용할 수 없음 하지만 밑에서 만든 Map함수는 이터러블도 사용 가능 이 이터러블 프로토콜을 따르기 때문에 밑에 사용 가능 즉, 밑에 작성한 함수는 배열 뿐만아니라 이터러블 프로토콜을 따르는 것들도 순회가 가능함 또한 제너레이터에서도 사용 가능 제너레이터 안에 코드 문장도 사용 가능 중요 웹 API도 ECMAScript의 이터러블 프로토콜을 따르고 있기 때문에, 다양한 조합성을 갖을 수 있음 클래스, 프로토타입의 뿌리로 가진 카테고리 안에 있는 값만 사용할 수 있는 것보다, 위의 방법이…

한 걸음씩 RN(React-Native) 프로젝트를 시작하면서 기존에 작업했던 Ionic 프로젝트와 너무나 달랐다. 특히 CSS를 수정하기 위해 단순히 클래스 이름에 스타일을 주는 것도 필요하지만 RN에서 제공하는 컴포넌트를 이용해 스타일을 적용해야 하며, RN의 규칙에 맞게 컴포넌트를 사용해야지 스타일이 적용된다는 것을 알게 되었다. 그리고 무엇보다 Android에서 스타일을 수정했다고 해도 iOS에서는 스타일이 적용되지 않는 문제가 발생하기도 했다. 이 간격을 줄이기 위한 노력도 많이 했다. 또한 UseEffect, UseState에 대한 개념을 알게 되어서 적용도 해보았다. 특히 UseEffect가 매력적으로 다가왔다. UseState에 세팅한 변수에 (특정 값이 아닌)가 변할 때마다 내부 코드를 실행시켜주는 것이, 앞으로 개발해야 할 기능에 좋은 영향을 줄 것 같다 그리고 기존에 작업했던 프로젝트에서 사용자 정보 세팅에 관한 로직에 버그가 발생하였다. 그래서 다시 관련 로직…

제너레이터 Iterator이자 Iterable을 생성하는 함수 Iterator를 return하는 함수 또한 Well-Formed-Iterator임(Iterator를 리턴하는데 그 것이 자기 자신과 동일) 그래서 순회 가능 순회를 할 때 문장으로 표현 가능 —> 이렇게되면 JS에서 제너레이터 내부 문장을 통해 순회할 수 있도록 만들 수 있음 —> 즉, 다양한 값들을 제너레이터를 통해서 순회할 수 있도록 할 수 있음 주의 사항 제너레이터에 return값을 명시할 수 있지만 순회할 때에는 나오지 않음 제너레이터를 통해 홀수만 순회하는 코드 작성 for…of, 전개 연산자, 구조 분해, 나머지 연산자 Iterable, Iterator 프로토콜을 지키고 있는 것들을 통해 사용자 정의 이터레이터 활용 느낀점 제너레이터를 통해 순회할 수 있도록 코드를 작성할 수 있더나느 사실과 일반적인 순회가 아닌 특정 조건을 부여해 순회가 가능하다는 사실이 재밋게 다가왔…

Iterable 구현, Iterable/Iterator 프로토콜 정의 적용 Well-Formed Iterator 잘 구현된 는 메서드를 실행한 이후에 문을 들어가면 그 이후에 값이 순회되어짐 그러나 위에서 구현한 는 그렇지 못함 Iterator가 자기 자신을 반환하는 메서드를 가지고 있을 때 이라고 할 수 있음 기존에 사용자 정의로 만든 Iterable에 코드 추가 어디에서든 를 만들었을 때 이전까지 진행되었던 자신의 상태에서 메서드를 호출 했을 때 다음 값이 나올 수 있도록 가능함 즉 이것이 다른 곳에서도 Iterator, Iterable 프로토콜을 따르고 있음 전개 연산자 전개 연산자도 Iterable, Iterator 프로토콜을 따르고 있음 느낀점 이터러블이 무엇인지, 이터레이터가 왜 있어야 하는지 그리고 문이 작동되는 원인 등 모르는 것 을 알게 되었다. 처음에는 익숙하지 어렵다고 느껴졌지만 천천히 공부를 하니 조금씩 이해가 가기 시작하였다. JS 함수형 프로그래밍관련 …

1. 평가와 일급 평가 가 계산 되어 을 만드는 것 일급 으로 다룰 수 있다 에 담을 수 있다. 로 사용 될 수 있다. 로 사용 될 수 있다. 2. 일급 함수 를 으로 다룰 수 있다. 조합성과 추상화의 도구 (원하는 시점에 코드를 평가해서 다른 변수에 사용할 수 있음) 3. 고차 함수 으로 다루는 함수를 인자로 받아서 실행하는 함수 함수를 만들어서 리턴하는 함수 를 만들어 리턴하는 함수 4. 느낀점 그냥 코드를 작성하는 행위가 코드 평가라는 사실을 알게되었다. 사실 맨처음에 평가라는 단어에 익숙하지 않았지만 학습하면서 평가라는 단어에 익숙해졌다. 그리고 일급함수의 특징을 고려해 다양한 코드를 작성할 수 있겠다라는 생각이 들었다. 또한 클로저를 하기위해 일급함수를 통해 할 수 있다는 사실을 알게되었다. 아직 많이 생소하지만 그래도 기본을 확실히 다져지는 느낌이다. 참고 1. 평가와 일급 평가 일급 2. 일급 함수 3. 고차 함수 함수를 인자로 받아서 실행하는 함수 함수를 만들어서 …

1. 새로운 프로젝트 시작 React-Native 프로젝트에 투입되어서 코드 분석과 리팩토링을 진행하고 있다. 기존에 팀장님이 작업하신 코드들을 분석하면서 React-Native의 컴포넌트 사용하는 방법 그리고 스타일 수정하는 방법, React-Native 빌드 세팅 그리고 디바이스 런치 하는 환경 설정을 세팅하는 일들을 하였다. React에 대한 실력이 많이 부족해 퇴근 이후에 추가로 온라인 강의를 통해 부족한 부분을 채우고 있다. 개인적으로 이번 프로젝트를 통해 React와 React-Native를 제대로 잡고 싶다. 2. 회복을 위해 요즘 들어 몸이 많이 피곤한 것 같다. 이럴 때일수록 의식적으로 쉬는 연습이 필요하다는 걸 알지만, 마음처럼 잘되지 않는다. 막상 쉬어도 맘 편히 쉬지 못하고 무언가를 하게 된다. 조금은 내려놓는 연습을 해야 할 것 같아, 명상하는 시간을 조금 더 늘려야 할 것 같다. 3. 마음 가짐 새해 시작 1주일이 지났지만, 솔직히 매일매일이 똑같다는 생각…

먼 옛날 사람들 오랜만에 ‘알라딘’ 중고서점을 방문해 책을 둘러보고 있었는데, 고구려 7권 을 보았을 때 반가웠다. 1권부터 6권까지 읽고 잊고 있었는데 이렇게 발견하게 되어서 너무나 기분이 좋았다. 그날 구매해 읽기 시작하였고, 평상시에 문학이 아닌 다른 장르를 읽고 있었는데 문학이 너무나 재밌게 다가왔다. 사실 앞 내용이 잘 기억이 나지 않았지만, 김진명 작가의 담대하고 솔직한 그 문장이 너무 좋았다. 문장을 한 줄 한 줄 읽을 때마다 책 내용을 시간 가는 줄 모르고 읽기 시작하였다. 책에서 고구부(소수림왕)와 고이련(고국양왕)이 등장해 다양한 이야기가 나온다. 나는 이 책을 읽으면서 고이련이 대신들에게 외면당하고 너무나도 큰 업적을 달성한 형(고구부)의 품 안에서 만족하는 것이 아니라, 스스로 무엇가를 해보려고 노력하는 모습이 너무나 인상 깊었다. 현재를 살아가고 있는 나 나는 현재 2022년을 살아가고 있다. 고구려 7권 책을 통해 그 시대에 가지고 있던 정신들을 배우게 되…

에러가 나를 조급하게 한걸까? 개발을 하면서 를 만나면 무언가 마음이 조급해진다. 에러 때문에 업무 진행이 더뎌진다는 느낌을 받아서 그런 것 같다. 그래서 그런 걸까? 요즘 들어 일을 하는데, 이유도 모르게 진이 빠진다는 느낌을 받는다. 오늘 아침에 React-Native 프로젝트 Screen 컴포넌트 확장자를 js에서 jsx로 바꾸니, Metro Bundler에서 에러가 발생했다. 빨간색 배경에 흰색 글자만 봐도 머리가 아프기 시작하였다. 심지어 영어… 마음이 조급해지고, 진이 빠지기 시작하였다… 물론 해결은 했지만… 그리고 나서 운동하다가 문득, ‘에러가 발생하는 것은 당연한거 아닌가? 아직 개발자로써 1년밖에 일 안 했고 더군나 React-Native 프로젝트 투입된 지 얼마 안됬는데’라는 생각이 들었다. 사실 생각해 보면 에러가 발생하면 창에 문제를 해결할 수 있는 단서가 분명히 있는데, 내가 마음이 조급해져 에러 핑계 대고 어린아이처럼 내 마음처럼 안되니깐 짜증만 내고 …

1. 이 책을 읽은 이유💡 요즘 무언가 꾸준히 하는 것 같은데, 공허함을 느낄 때가 많이 있었다. 그러다가 체인지 그라운드 영상을 통해, 현재 나는 없이 행동하고 있다는 사실을 알게 되었다. 이 책은 정확히 내가 원하는 것을 알려 주었다. 비전이 왜 중요한지, 비전을 어떻게 세우는지 방법과 리더가 되기 위해 비전이 꼭 필요하다는 사실 또한 알게 되었다. 책에서도 좋은 리더가 되기 위해, 을 가져야 한다고 써져 있었다. 그래서 더욱 이 책을 통해, 미리 비전을 세우고 좋은 리더가 되고 싶어 이 책을 읽게 되었다. 2. 나의 비전은 무엇일까?🧐 이 책에서 이라는 단어가 많이 나온다. 문득 누군가가 비전은 이라는 말을 들었던 것 같다. 이 책은 한 발 더 나아가, 보이지 않는 것을 보이도록 명확하게 만드는 방법과, 다른 사람들에게 비전을 공유해, 이루는 방법들을 하나씩 알려준다. 그리고 리더가 비전이 없을 경우 어떤 문제에 직면하는지도 이 책에서는 자세히 알려주고 있다. 솔직히 이 문…

이미 JS에서는 변수 선언 시 를 사용하고 있었는데, 왜 굳이 또는 변수를 사용해야 할까? 이를 정확하게 알기 위해, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아 한다. 🧐 변수란? JS에서 는 하나의 값을 저장하기 위해 확보한 또는 하기 위해 붙인 이름을 말한다. JS는 매니지드 언어(Maaged Language)이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고, 참조할 필요가 없기 때문에 변수를 통해 안전하게 값에 접근이 가능하다. 변수명(식별자)인 는 변수 값이 아닌 메모리 주소를 기억하고 있다. 변수명을 사용하면, JS 엔진이 변수명과 Mapping된 메모리 주소를 통해 거기에 저장된 값()를 반환한다. 이처럼 변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라 하며, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다. 그리고 변수명을 JS 엔진에게 알리는 것을…

🧹 정리 기쁜 일, 슬픈 일, 그리고 후회 되는 일도 많았다. 그래서 요즘 몸과 마음이 많이 지쳐있는 것 같다. 그래서 올 해는 주어진 시간 속에서 몸과 마음을 회복하는 시간을 갖아야 겠다. 명상도 좀 하고, 쉴 때에는 걱정과 불안을 내려 놓고 쉬어야 겠다. 🧑‍💻실력 남들보다 늦게 일을 시작한 만큼 오히려 조급하지 말고, 기본에 집중해 흔들리지 않는 개발자가 될 수 있도록 노력해야 겠다. 그러기 위해 일단 공부하는 환경을 만들고 더 나아가 습관을 만들어야 겠다. 🧘‍♂️ 회복 열심히 애쓴 것 같은데, 제대로 휴식을 취하지 못한 것 같다. 어떻게 해야 제대로 쉬는 건지, 지난 1년 동안 많은 고민을 했다. 적어도 잠을 자거나, 명상, 운동을 하면 몸과 마음이 회복되는 느낌을 받았다. 올 해에는 조금 의식적으로 몸과 마음을 회복하는 시간을 갖어야 겠다. 그래야 꾸준히 성장할 수 있으니깐

1. 처음 겪는 사기 난생처음으로 휴대폰를 겪었다. 지인의 지인을 통해 휴대폰 거래를 진행했다. 생각만해도 스스로가 너무 부끄럽다… 이번 사건을 통해 확실히 깨달은 것은 내가 확인하고 확신이 들기 전까지 심지어 확신을 해도 한 번쯤은 의심을 해보고 다시 생각을 해보자 스스로를 너무 쉽게 믿지 말자. 돌이켜보면 빨리 휴대폰을 교체하고 싶은 마음과 단돈 몇십만원 저렴하게 구입하고자 조급하게 행동했다 다시한번 반성하고 다시는 이런일이 일어나지 않도록 스스로 다짐을 하고 이번 일을 교훈삼아 앞으로 더 큰 일들이 있을 때 반면교사 삼자. 2. YES맨이 되지 말자 일을 진행하면서 상사가 나에게 업무 지시와 무언가를 설명할 때 을 해서, 로직을 잘못 개발하였다. 다시 생각해도 너무나 어리석었다. DB에 대한 전반적인 지식도 없는데 지금까지 알고 있다고 생각했다. 그렇다 나는 DB와 스프레드 시트의 차이점을 정확히 몰랐다. 팀장님이 나중에 사용자 정보 중 특정 정보를 외래키로 사용할 수 있으…

1. 바이너리 비트 연산자 개요 왼쪽과 오른쪽에 피 연산자가 있는 2항 연산자 왼쪽과 오른쪽 피연산자 값을 비트로 변환하여 연산함 비트로 연산하므로 처리 속도가 빠름 2. 비트 OR연산자 연산자 기호 : 피연산자 한쪽이라도 1이면 1로 처리 3. 비트 AND 연산자 연산자 기호 : 피연산자 한 쪽이라도 0이면 0이 되고 양쪽이 모두 1이면 1이 됨 4. 비트 XOR 연산자 연산자 기호 : 피연산자 양쪽 값이 같으면 0이 되고 하나만 1이면 1이 됨 1. 바이너리 비트 연산자 2. 비트 OR연산자 3. 비트 AND 연산자 4. 비트 XOR 연산자

✅ HTTP 표현 방법 Content-Type: 표현 데이터의 형식 Content-Encoding: 표현 데이터의 압축 방식 Content-Language: 표현 데이터의 자연 언어 Content-Length: 표현 데이터의 길이 표현 헤더는 전송, 응답 둘다 사용 Content-Type(표현 데이터의 형식 설명) 미디어 타입, 문자 인코딩 ex) text/html; charset=utf-8 ex) application/json ex) image/png Content-Encoding(표현 데이터 인코딩) 표현 데이터를 압축하기 위해 사용 데이터를 전달하는 곳에서 압축 후 인코딩 헤더 추가 데이터를 읽는 쪽에서 인코딩 헤더의 정보로 압축 해제 ex) gzip, deflate, identity(압축안함) Content-Language(표현 데이터의 자연 언어) 표현 데이터의 자연 언어를 표현 ex) ko, en, en-US Content-Length(표현 데이터의 길이) 바이트 단위 …

1. 개요 바이너리(Binary) 데이터 처리를 다룸 4개 섹션 비트 연산자 ArrayBufer TypedArray DataView 2. 비트, 바이트 값 표현의 기본 단위는 바이트(Byte) 1바이트는 8비트(Bit)이며 1비트 값은 0 아니면 1 비트 연산은 연산 속도가 빠름 정수 연산만 가능, 소수 연산 불가 JS의 비트 연산 범위 4바이트, 32비트 -2의 32승 ~ 2의 32승 -1 3. 2진수 연산 아래는 사인 부호가 없는 형태임 비트 값은 비트가 1일 때의 값, 2^n승 누적 값은 9번 미트에서 해당 비트까지 전부 1일 때의 값 4. 사인 비트 양수, 음수 부호를 나타내는 비트임 7번 비트가 0이면 양수이고, 1이면 음수 4바이트는 31번 비트가 사인 비트 MSB: Most Significatn Bit 양수 표현 형태와 값 7번(MSB) 비트가 0이며, 최댓값은 127 5. 음수 표현 MSB인 7번 비트 값이 1임 누적값은 6번 비트의 누적 값 -127에 -1을 더함 …

✅ HTTP 헤더 개요 HTTP 헤더 header-field = field-name ”:” OWS field-value OWS (OWS:띄어쓰기 허용) field-name은 대소문자 구문 없음 HTTP 헤더 용도 HTTP 전송에 필요한 모든 부가정보 ex) 메시지 마디의 내용, 메시지 바다의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보 등 표준 헤더가 너무 많음 필요시 임의의 헤더 추가 기능 ex) helloworld: hihi HTTP 헤더 분류 - 과거(RFC2616) General 헤더: 메시지 전체에 적용되는 정보 ex) Connection: close Request 헤더: 요청 정보 ex) User-Agent: Mozilla/5.0 Response 헤더: 응답 정보 ex) Server: Apache Entity 헤더: 엔티티 바디 정보 ex) Content-Type: text/html, Content-Length: 3423 HTTP Body - 과거…

1. Symbol.asyncIterator 는 에 대응하는 이면 비동기로 반복을 실행 함 은 12개임 와 차이 를 호출하면 인스턴스를 생성하여 반환함 생성한 인스턴스의 를 호출하면 형태로 반환하며 이 값을 의 파라미터 값으로 사용함 로 반복함 와 제너레이터 함수 반복 1. Symbol.asyncIterator

✅ 2XX(Successful) 클라이언트의 요청을 성공적으로 처리 200 OK 201 Created 요청 성공해서 새로운 리소스가 생성됨 Location이 Header에 있을 수 있음 202 Accepted —> 요청이 접수되었으나 처리가 완료되지 않았음 배치 처리 같은 곳에서 사용 ex) 요청 접수 후 1시간 뒤에 배치 프로세스가 요청을 처리함 204 No Content 서버가 요청을 성공적으로 수행했지만, 응답 페이로드 본문에 보낼 데이터가 없음 ex) 웹 문서 편집기에서 버튼 —> 버튼의 결과로 아무 내용이 없어도 된다. —> 버튼을 눌러도 같은 화면을 유지해야 한다. —> 결과 내용이 없어도 204 메시지(2XX)만으로 성공을 인식할 수 있다. ✅ 3XX(리다이렉션) 요청을 완료하기 위해 유저 에이전트의 추가 조치 필요 300 Multiple Choices 301 Moved Permanently 302 Found 303 See Other 304 Not Modifie…

1. await Syntax 표현식 함수 안에 작성함 는 선택임 표현식이 오브젝트 이면 의 파라미터 값을 반환함 표현식이 오브젝트가 아니면 표현식의 평가 결과를 반환함 에서 가 발생했을 때 에러에 대처하는 형태임 를 사용한 형태 를 사용한 형태 가 아닌 값을 반환하는 형태 2. for-await-of Syntax 함수에서 사용할 수 있음 동기 반복에서 사용할 수 있지만 일반적으로 비동기 반복에서 사용 1. await 2. for-await-of

✅ HTTP 상태코드 상태 코드: 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1XX : 요청이 수신되어 처리 중(Informational) —> 2XX : 요청 정상 처리(Successful) 3XX : 요청을 완료하려면 추가 행동이 필요(Redirection) 4XX : 클라이언트 오류, 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 5XX : 서버 오류, 서버가 정상 요청을 처리하지 못함(Server Error) Q) 만약 모르는 상태 코드가 나타나면? 클라이언트가 인식할 수 없는 상태코드를 서버가 반환하면? 클라이언트는 상위 상태코드로 해석해서 처리 미래에서 새로운 상태 코드가 추가되어도 클라리언트를 변경하지 않아도 됨 ex) 299 ??? —> 2XX : ex) 451 ??? —> 4XX : ex) 599 ??? —> 5XX : ✅ HTTP 상태코드 상태 코드: 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 Q) 만약 모르는 상태 …

1. async/await 개요 비동기 환경에서 실행하지만 실행이 끝나야 다음을 실행함 즉, 실행은 비동기이고 실행 순서는 동기 임 키워드가 아니며 이 키워드 개념이며 함수라고 부름 는 키워드(키워드 나름대로 기능을 가지고 있음) 2. async 함수 비동기 함수를 뜻하며 오브젝트를 생성하여 반환함 함수가 호출되며 인스턴스를 반환함 함수의 값을 처리하려면 을 함수 호출에 연결하여 작성 함수에서 가 발생하면 로 처리 됨 1. async/await 개요 2. async 함수

✅ HTTP API 설계 HTTP API - 컬렉션 POST 기반 등록 ex) 회원 관리 API 제공 HTTP API - 스토어 PUT 기반 등록 ex) 정적 컨텐츠 관리, 원격 파일 관리 HTML FORM 사용 웹 페이지 회원 관리 GET, POST만 지원 1. 회원 관리 시스템: API 설계 - POST 기반 등록 회원 목록 —> GET 회원 등록 —> POST 회원 조회 —> GET 회원 수정 —> PATCH, PUT, POST 회원 삭제 —> DELETE 2. 회원 관리 시스템: POST - 신규 자원 등록(실무에서 사용) 클라이언트는 등록될 리소스의 URI를 모른다. 회원 등록 —> POST POST 서버가 새로 등록된 리소스 URI를 생성해준다. HTTP/1.1 201 Create Location: 컬렉션 서버가 관리하는 리소스 디렉토리 서버가 리소스의 URI를 생성하고 관리 여리서 컬렉션은 3. 파일 관리 시스템: API 설계 - PUT 기반 등록 파일 목록…

1. 형태 2.실행자의 파라미터에 함수 이름 작성 3.파라미터 위치로 성공/실패 처리 4.실행자에 , 순서로 작성 5. 의 핸들러 함수에서 사용할 값을 인스턴스에 저장 6. 인스턴스 반환 1. 형태 2.실행자의 파라미터에 함수 이름 작성 3.파라미터 위치로 성공/실패 처리 4.실행자에 , 순서로 작성 5. 의 핸들러 함수에서 사용할 값을 인스턴스에 저장 6. 인스턴스 반환

✅ 클라이언트에서 서버로 데이터 전송 1. 데이터 전달 방식은 크게 2가지 쿼리 파라미터를 통한 데이터 전송 GET ex) 주로 정렬 필터(검색어) 메시지 바디를 통한 데이터 전송 POST, PUT, PATCH ex) 회원가입, 상품주문, 리소스 등록, 리소스 변경 2. 4가지 상황 정적 데이터 조회 이미지, 정적 테스트 문서 쿼리 파라미터 미사용(리소스 경로로 단순하게 조회 가능) 조회는 GET 사용 동적 데이터 조회 주로 검색, 게시판 목록에서 정렬 필터(검색어) 조회는 GET 사용 GET은 쿼리 파라미터 사용해서 데이터를 전달 HTML Form을 통한 데이터 전송 HTML Form Submit시 POST 전송 ex) 회원 가입, 상품 주문, 데이터 변경 사용 form의 내용을 메시지 바디를 통해서 전송(key-value, 쿼리 파라미터 형식) 전송 데이터를 Url encoding 처리 ex) abc김 —> abc%EA%B9%80 HTML Form은 GET 전송도 가능 주의…

1. all() 파라미터의 모든 처리를 완료했을 때 의 핸들러 함수를 실행함 형태로 작성 파라미터를 이터러블로 작성함 작성한 순서로 인스턴스 생성 가 발생한 시점에 을 실행 2. race() 에 관계없이 처음 한 번만 을 실행하고 더 이상 실행하지 않음 1. all() 2. race()

✅ HTTP 메서드의 속성 1.안전 호출해도 리소스를 변경하지 않는다. Q) 그래도 계속 호출해서, 로그 같은게 쌓여서 장애가 발생하면요? —> 안전은 해당 리소스만 고려한다. 그런 부분까지 고려하지 않는다. 2.멱등 한 번 호출하든, 두 번 호출하든 100번 호출하든 결과가 똑같다. 멱등 메서드 GET: 한 번 조회하든, 두 번 조회하든 같은 결과가 조회된다. PUT: 결과를 대체한다. 따라가 같은 요청을 여러번 해도 최종 결과는 같다. DELETE: 결과를 삭제한다. 같은 요청을 여러번 해도 삭제된 결과는 똑같다. POST: 멱등이 아니다!!! 두 번 호출하면 같은 결제가 중복해서 발생할 수 있다. 활용 자동 복구 메커니즘 서버가 TIMEOUT 등으로 정상 응답을 못주었을 때, 클라이언트가 같은 요청을 다시 해도 되는가에 대한 판단 근거가 됨 재 요청 중간에 다른 곳에서 리소스를 변경해버리면? 사용자1: GET —> userName: A, age: 20 사용자2: PUT —> …

1. 새로운 도전💡 2020년 12월 중순 개발자로 취업을 했다. 모든 것이 낯설고, 두렵고, 조급했다. 늦은 나이에 개발자로 커리어를 시작한다는 생각에 사로 잡혀있었다. 다행히 회사에 좋은 사람들을 만나 좋은 경험을 할 수 있었다. 2. 실력을 쌓기 위해👍 그래도 더 성장하고, 나아지고 싶은 생각에 주말에도 회사에 나와 개인 공부를 하였다. 특히 를 취득하기 위해 많이 노력을 하였다. 왠지 이 자격증이 개발자로써 갖추어야 할 기본 소양을 증명하는 것으로 여겨 이것 조차도 못 취득하면 나는 개발자로써 커리어를 쌓을 수 없을 것 같은 압박감이 있었다.(물론 개인적인 생각이다) 감사하게 올 해 4회차 시험에서 턱걸이로 자격증을 취득하게 되었다.(진짜 2022년에 다시 공부할 생각이였는데 너무 감사하게 붙었다.) 그리고 취업 준비를 하면서 공부한 HTML, CSS, JS, React 학습했지만 실무에서 턱없이 능력이 부족하다는 사실을 인지하게 되었다. 그래서 업무에 필요한 능력을 쌓기…

1. 이 책을 읽은 이유💡 우연히 개발관련 유튜브를 보다가 이 책을 소개하는 영상을 보게 되었다. 워낙 유명한 개발자 분이 추천해주신 책이라 안 읽어 볼 수 없었다. 무엇보다도 주니어 개발자에게 추천하는 책이라는 말씀에 더욱 내 마음을 사로잡아 이 책을 구매해 읽기 시작하였다. 2. 경력은 무엇일까?🧐 이 책을 읽기 전까지 가 될 줄 알았다. 그러나 이 책에서는 경력보다는 의 중요성을 강조한 부분이 나에게는 새롭게 다가왔다. 나도 종종 일하면서 느끼는 거지만 확실히 실력이 있는 개발자 분들이 문제에 직면했을 때 빠르게 이해하고 처리하는 것을 본 적이 있었다. 이와 반대로 경력이 많지만 문제를 이해하지 못하고 문제와 상관없는 것들을 물어보는 안타까운 모습들을 보게 되었다.(물론 다시 한번 문제를 제대로 이해 시켜주기 위해 같이 이야기를 했지만, 안타깝게 자신의 주장을 고집하는 모습을 종종 보게되었다.) 3. 그러면 어떻게 실력을 키울 수 있을까?💪 이 책의 저자는 일이 끝나면 라는 …

1. resolve() 성공(fullfilled) 상태의 인스턴스를 생성하여 반환 형태로 작성함 파라미터 값에 따라 생성 방법이 다름 파라미터에 값을 작성하면 파라미터 값으로 인스턴스를 생성하여 반환 파라미터에 인스턴스를 작성하면 파라미터의 인스턴스의 값을 사용하여 인스턴스를 생성하여 반환 2. thenable 파라미터에 을 작성한 형태 3.reject() 실패(reject) 상태의 Promise 인스턴스를 생성하여 반환함 형태로 작성함 파라미터에 사유를 작성함 을 연결한 형태 를 연결한 형태 1. resolve() 2. thenable 3.reject()

✅ PUT 리소스를 대체 리소스가 있으면 대체(기존거 삭제됨) 리소스가 없으면 생성 쉽게 이야기해서 덮어버림 중요! 클라이언트가 리소스를 식별 클라이언트가 리소스 를 알고 URI 지정 POST와 차이점 ✅ PATCH 리소스 부분 변경 클라이언트에서 요청 서버() ✅ DELETE 리소스 제거 ✅ PUT ✅ PATCH ✅ DELETE

1. then() 성공과 실패 핸들러 함수를 작성함 인스턴스를 반환함 파라미터 첫 번째: 성공일 때 실행될 핸들러 함수 두 번째: 실패일 때 실행될 핸들러 함수 실행자의 에 파라미터 값을 다수 작성하더라도 핸들러 함수는 처음 하나만 사용 함 2. then()의 return 에서 인스턴스를 반환함 값을 반환하지 않음 에서 를 하는 것과 같은 개념임 따라서 형태 처럼 을 연속해서 호출 할 수 있음 값을 에 설정하고 값을 다음 의 파라미터 값으로 넘겨 줌 3. catch() 실패(reject)의 핸들러 함수를 작성함 의 두 번째 파라미터를 작성하지 않고 대신에 를 작성함 문의 표현식 평가 결과를 에 설정함 인스턴스를 반환하므로 처럼 이어서 을 호출할 수 있음 값을 의 파라미터 값으로 넘겨줌 4. finally() 성공, 실패에 관계 없이 파라미터의 핸들러 함수가 실행됨 핸들러 함수에 파라미터가 없음 ES2018부터 지원함 활용 측면이지만 의 같은 코드를 에 …

✅ HTTP 메서드 종류: 주요 메서드 : 리소스 조회 : 요청 데이터 처리, 주로 등록에 사용 : 리소스를 대체, 해당 리소스가 없으면 생성 : 리소스 부분 변경 : 리소스 삭제 ✅ HTTP 메서드 종류: 기타 메서드 : GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환 : 대상 리소스에 대한 통신 가능 옵션(메서드)를 설명(주로 에서 사용) : 대상 자원으로 식별되는 서버에 대한 터널을 설정 —> 거의 사용 X : 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행 —> 거의 사용 X ✅ GET 리소스 조회 서버에 전달하고 싶은 데이터는 Query(쿼리 파라미터, 쿼리 스트링)를 통해서 전달 메시지 바디를 사용해서 데이터를 전달할 수 있지만, 지원하지 않는 곳이 많아서 권장하지 않음 ✅ POST 요청 데이터 처리 메시지 바디를 통해 서버로 요청 데이터 전달 서버는 요청 데이터를 처리 메시지 바디를 통해 들어온 데이터를 처리하는 모든 기능을 수행한다.…

1. new Promise() 인스턴스를 생성하여 반환함 파라미터 실행자 함수를 작성함 성공, 실패 처리 함수 이름 실행자 코드 스펙 : MDN: Promise chain Promise 오브젝트 형태 1. new Promise()

✅ HTTP API를 만들어보자 HTTP API를 만들어보자 HTTP 메서드 - GET, POST HTTP 메서드 - PUT, PATCH, DELETE HTTP 메서드의 속성 요구사항 ex) 회원 정보 관리 API를 만들어라 회원 목록 조회 회원 조회 회원 등록 회원 수정 회원 삭제 API URL 설정: 초보 개발자 회원 목록 조회 : 회원 조회 : 회원 등록 : 회원 수정 : 회원 삭제 : —> 이것은 좋은 URI 설계일까? —> 가장 중요한 것은 리소스 식별 API URI 고민 리소스의 의미는 뭘까? 회원을 등록하고 수정하고 조회하는게 리소스가 아니다! ex) 미네랄을 캐라 —> 미네랄이 리소스 회원이라는 개념 자체가 바로 리소스이다. 리소스를 어떻게 식별하는게 좋을까? 회원을 등록하고 수정하고 조회하는 것을 모두 배제 회원이라는 리소스만 식별하면 된다. —> 회원 리소스를 URI에 매핑 API URL 설정: 위 상황 고려 목록 조회 : 조회 —> 어떻게 구분하…

1. Promise 개요 JS는 기본적으로 로실행 실행이 끝나야 다음 코드를 실행함 는 비동기로 처리(실행)함 코드를 연속으로 처리(실행)하지 않고, 중간에 흐름이 끊어졌다가 연결된 코드를 처리 할 수 있는 환경이 되었을 때 실행함 이를 위한 메커니즘을 갖고 있음 스펙에서 스펙으로 전환 2. Promise 처리 흐름 처리(실행) 흐름 개요 를 실행함 파라미터의 함수를 실행함 를 호출 하지 않음 를 실행 변수에 인스턴스 할당 을 실행하지 않음 마지막 줄의 실행함 실행 의 첫 번째 파라미터 함수 실행 실행 3. Promise 상태 상태는 3가지이며, 하나만 발생함 상태 로 인스턴스 생성 상태 이 종료된 상태를 나타내며 와 상태로 구분 바인딩한 핸들러 함수가 호출됨 : 의 첫 번째 함수 호출 : 의 두 번째 함수 호출 1. Promise 개요 2. Promise 처리 흐름 3. Promise 상태

✅ HTTP 메세지 시작 라인: 요청 메시지 start-line = request-line / status-line request-line = method SP(공백) request-target SP HTTP-version CRLF(엔터) HTTP 메서드 (GET: 조회) 종류 : GET, POST, PUT, DELETE 서버가 수행해야 할 동작 지정 : GET(리소스 조회), POST(요청 내역 처리) 요청 대상() HTTP Version 시작 라인: 요청 메시지(요청대상) 절대경로 = 로 시작하는 경로 시작 라인: 응답 메시지 start-line = request-line / status-line status-line = HTTP-version SP status-code SP reason-phrase CRLF HTTP 상태 코드 : 요청 성공, 실패를 나타냄 200 : 성공 400 : 클라리언트 요청 오류 500 : 서버 내부 오류 이유 문구 : 사람이 이해할 수 있는 짧은…

1. export, import 형태 대상에 키워드 작성 중괄호 에 이름 작성 한 번에 선언 이름 변경 default 전체 2. 변수, 함수, Class 변수, 함수 리스트 형태로 작성 3. as, * 로 이름 변경 로 전체를 4. default 모듈에 가 하나만 있는 것을 명시적으로 나타낼 때 사용 를 리스트 형태로 작성 함수 이름을 작성하지 않은 형태 로 를 1. export, import 형태 2. 변수, 함수, Class 3. as, * 4. default

✅ 클라이언트 서버 구조 Request - Response 구조 클라이언트는 서버에 요청을 보내고, 응답을 대기 서버가 요청에 대한 결과를 만들어서 응답 각각 역할을 나뉘었다는 것이 포인트 클라이언트는 UI/UX에 집중하고, 서버는 비즈니스 로직이나, 데이터만 관리 이렇게 독립적으로 분리하면 각각 고도화 진행 가능 또한 문제가 발생하면 각각 독립적으로 처리만 하면 됨 ✅ 무상태 프로토콜 = Stateless 서버가 클라이언트의 상태를 보존 X 상태 유지(stateful) ex) 중간에 다른 점원이 바뀌면 안됨(만약에 바뀌면 상태 정보를 다른 점원에게 미리 알려줘야 함) 상태 유지 X(무상태) ex) 점원이 바뀌어도 정확하게 결과를 얻을 수 있음, 갑자기 클라이언트 요청이 증가해도 서버를 대거 투입 가능, 응답 서버를 쉽게 바뀔 수 있음(무한 서버 증설 가능) 갑자기 클라이언트 요청이 증가해도 서버를 대거 투입할 수 있음 응답 서버를 쉽게 바뀔 수 있음(무한한 서버 증설 가능) 장점…

1. module 스코프 코드는 에서 실행됨 다른 파일에서 모듈의 변수/함수 사용 불가 별도의 스코프를 갖기 때문 에 을 작성하면 별도의 스코프를 갖음 를 사용하여 공유할 수 있지만, 이름이 같으면 대체될 수 있음 상황에 따라 어쩔 수 없이 사용할 때는 이름이 중복되지 않도록 해야 함 2. export 값 유지 한 을 다시 하더라도 값이 대체되지 않고 이전에 한 값이 유지 됨 브라우저에서 실행되는 형태 3. this 참조 글로벌 오브젝트에서 는 오브젝트를 참조 함 로 작성된 파일에서 값은 임 과 에서 1. module 스코프 2. export 값 유지 3. this 참조

✅ HTTP 1. HTTP 메시지에 모든 것을 전송 HTML, TEXT Image, 음성, 영상, 파일 JSON, XML(API) 거의 모든 형태의 데이터 전송 가능 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 2. HTTP 역사 HTTp/0.9 1991년 : GET 메서드만 지원, HTTP 헤더 X HTTP/1.0 1995년 : 메서드, 헤더 추가 HTTP/1.1 1997년 : 가장 많이 사용, 우리에게 가장 중요한 버전 HTTP/2 2015년 : 성능 개선 HTTP/3 진행중 : TCP 대신 UDP 사용, 성능 개선 3. 기반 프로토콜 TCP: HTTP/1.1, HTTP UDP: HTTP/3 점점 HTTP/2, HTTP/3도 점점 증가 4. HTTP 특징 클라이언트 서버 구조 무상태 프로토콜, 비연결성 HTTP 메시지 단순함, 확장 가능 ✅ HTTP 1. HTTP 메시지에 모든 것을 전송 2. HTTP 역사 3. 기반 프로토콜 4. HTTP 특징

1. 접근 및 바탕 일반 적으로 하나의 파일에 다수의 함수, 오브젝트를 작성함 한편, 하나의 파일에 작성하면 사용하지 않는 것도 해야 하며 메모리를 차지하므로 비효율적 ex) 회원 가입(클릭 할 때만 필요한 것) 은 파일을 분리하여 필요한 시점에 필요한 것을 가볍게 사용하려는 목적으로 사용 을 파일이라고 할 수는 없지만 구조 측면에서보면 하나의 파일이 임 파일 확장자로 도 있음 ex) JavaScript modules 파일 기본 함수, 오브젝트를 분리하는 것이 바탕이므로 파일은 되도록 함 2. Module 코드 형태 코드 형태 키워드 외부로 보내 줄 함수, 오브젝트를 선언함 에 파일을 작성하여 랜더링 하지 않음 키워드 로 선언된 파일을 가져와서 오브젝트, 함수를 사용 함 3. html 파일 작성법 파일에 파일을 작성하는 방법 상대 경로, 절대 경로로 작성함 상대 경로는 로 시작해야 함 처럼 경로 없이 작성 불가, 추후 가능할 것으로 생각함 가 디…

✅ URI 의미 (리소스 식별하는 통일된 방식) (자원, URI로 식별할 수 있는 모든 것, 제한 없음) (다른 항목과 구분하는데 필요요한 정보 ✅ URL, URN 의미 URL(Uniform Resource Locator): 리소스의 위치. URN(Uniform Resource Name): 리소스의 이름. ex) urn:isbn:8969777331(어떤 책의 isbn URN) 참고 위치(Locator)는 변할 수 있지만, 이름(Name)은 변하지 않음. ✅ URL 문법 ex) https://www.google.com:443/search?q=hello&hI=ko 프로토콜 : https 호스트명 : www.google.com 포트 번호 : 443 패스 : /search 쿼리 파라미터 : q=hello&hi=ko Scheme 주로 프로토콜 사용 프로토콜 : 어떤 방식으로 자원에 접근할 것인가 하는 약속 규칙 ex) http, https, ftp 등 http는 80포트, https는 4…

1. constructo() 인스턴스를 생성하여 반환함 형태 세 번째 파라미터는 선택임 생성자 함수를 작성함 작성한 함수로 인스턴스를 생성함 트랩 호출 2. apply() 에 작성한 함수를 호출함 형태 통합 핸들러의 트랩 호출 1. constructo() 2. apply()

✅ 1. 인터넷 통신 클라이언트에서 특정 요청을 하면 서버에서 요청을 확인하고 다시 클라이언트에서 보내주는 방식. 클라이언트와 서버를 연결해주는 무수한 연결망을 인터넷이라고 함. ✅ 2. IP(Internet Protocol) IP 역할 클라이언트 IP와 서버 IP를 명시해서 정확한 위치에 원하는 요청을 함 지정한 IP(IP Address)에 데이터 전달 패킷(Packet)이라는 통신 단위로 데이터 전달 —> 패킷은 약간 편지 같은거? 보내는사람, 받는 사람 적어서 보내는 것처럼 데이터를 전달 할 때 이 존재 서버 패킷 전달 인터넷을 통해 서버(주소)에게 데이터를 전달하는데, 다시 서버에서 클라이언트에게 전달 될 때에는 같은 경로로 오지 않을 수 있음. IP 프로토콜의 한계 —> TCP, UDP로 해결 가능 : 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷 전송 : 중간에 패킷이 사라지면? 패킷이 순서대로 안오면? : 같은 IP를 사용하는 서버에서 통신하는 App이 둘 2상…

1. getPrototypeOf() 를 반환 함 이 확장 불가라도 반환함 형태로 작성 의 를 반환 2. setPrototypeof() 에 에 연결된 메소드를 설정함 형태로 작성 3. ownKeys() 의 모든 프로퍼티 키를 배열로 반환함 이거나 오브젝트가 확장 불가라도 반환함 상속 받은 프로퍼티는 제외 함 형태로 작성 4. getOwnPropertyDescriptor() 에서 프로퍼티 디스크립터를 반환함 상속 받은 프로퍼티는 제외 함 형태로 작성 1. getPrototypeOf() 2. setPrototypeof() 3. ownKeys() 4. getOwnPropertyDescriptor()

1. defineProperty() 에 프로퍼티를 추가, 변경함 형태 와 차이 를 반환 2.preventExtensions() 에 프로퍼티 추가 금지를 설정함 형태 3. isExtensible() 에 프로퍼티 추가 가능 여부를 반환함 형태 아래 함수를 실행한 상태이면 false를 반환함 1. defineProperty() 2.preventExtensions() 3. isExtensible()

1. has() 에 이 존재 여부를 반환함 형태로 작성 상속받은 도 검색 핸들러의 트랩 호출 2. deleteProperty() 에서 를 삭제 함 형태 반환 인덱스로 배열 엘리먼트 삭제 1. has() 2. deleteProperty()

1.set() 에 프로퍼티 키와 값을 설정함 를 반환함 로 참조할 오브젝트 작성 핸들러의 트랩 호출 트랩에서 참조 변경 1.set()

1. get() 의 프로퍼티 값을 반환함 의 와 차이 임 에 로 참조할 오브젝트 작성 핸들러의 트랩에서 로 값을 구하는 형태 트랩에서 을 사용한 형태 1. get()

1. Reflect 빌트인 오브젝트 가 없으므로 인스턴스를 생성 할 수 없음 형태로 호출 에러 대응 형태 로 에러 대응 , 를 반환 2. Proy 사용 오브젝트의 함수는 트랩에 1:1로 대응하며 트랩 이름과 함수 이름이 같음 트랩 파라미터와 함수의 파라미터가 같음 오브젝트 형태 1. Reflect 2. Proy 사용

1. construct() 연산자의 트랩임 인스턴스를 생성하여 반환함 트랩이 호출되는 형태 를 실행할 때 호출 2. apply() 함수 호출 트랩임 인스턴스 호출로 트랩이 실행된 형태 임 3. apply() 트랩 호출 트랩이 호출되는 형태 인스턴스 4. ownKeys() 의 트랩임 의 모든 를 배열로 반환함 이거나 오브젝트가 확장 불가라도 반환함 트랩이 호출되는 형태 5. getOwnPropertyDescriptor() 트랩임 프로퍼티 디스크립터를 반환함 트랩이 호출되는 형태 1. construct() 2. apply() 3. apply() 트랩 호출 4. ownKeys() 5. getOwnPropertyDescriptor()

1. getPrototypeof() 의 트랩임 의 을 반환 이 확장 불가라도 을 반환 함 , 처럼 값을 반환하면 트랩 준수 사항 이 확장 불가일 때 와 같은 값을 반환해야 함 2. getPrototypeOf() 트랩 호출 트랩이 호출되는 형태 3. setPrototypeOf() 특징 의 에 두 번째 파라미터를 설정함 의 트랩임 트랩 준수 사항 이 확장 불가 일 때 두 번째 파라미터의 과 로 구한 것과 같아야 함 4. setPrototypeOf() 트랩 호출 트랩이 호출되는 형태 1. getPrototypeof() 2. getPrototypeOf() 트랩 호출 3. setPrototypeOf() 4. setPrototypeOf() 트랩 호출

1. defineProperty() 의 트랩임 에 프로퍼티를 추가하거나 속성값을 변경함 2. defineProperty() 트랩 호출 트랩이 호출되는 형태 3. defineProperty() 트랩 준수사항 일 때 트랩에서 를 반환하여 오브젝트가 확장 불가이면 프로퍼티를 추가 할 수 없음 오브젝트의 프로퍼티가 또는 이면 프로퍼티 값을 변경할 수 없음 4. preventExtensions() 트랩임 오브젝트에 오브젝트의 확장 금지를 설정함 5. preventExtensions() 트랩 호출 트랩이 호출되는 형태 6. preventExtensions() 트랩 준수 사항 오브젝트가 확장 불가 일 때 즉, 결과가 일 때 를 반환하면 , 만 반환할 수 있음 7. isExtensible() 트랩임 의 확장 가능 여부를 반환 함 를 반환하는 오브젝트 상태 8. isExtensible() 트랩 호출 트랩이 호출되는 형태 9.isExtensib…

1. has() 연산자의 트랩임 에 의 존재 여부를 반환함 프로퍼티 값을 로 변환하여 반환함 두 번째 파라미터에 작성 가능 2. has() 트랩 호출 트랩이 호출되는 형태 3. has() 트랩 준수사항 오브젝트에 프로퍼티가 있으면서 오브젝트가 프로퍼티 추가 금지이거나 이면 를 지정하여 반환할 수 없지만 는 지정하여 반환 할 수 있음 강제로 를 반환하지 않고 트랩에서 구한 값을 로 변환하여 반환 함 4. deleteProperty() 연산자의 트랩임 오브젝트의 프로퍼티를 삭제함 연산자는 프로퍼티가 없어도 를 반환하므로 코드처럼 조건을 체크하여 를 반환하면 완전하게 처리할 수 있음 4. deleteProperty() 트랩 호출 트랩이 호출되는 형태 5. deleteProperty() 트랩 준수사항 오브젝트의 프로퍼티가 이면 프로퍼티를 삭제할 수 없으며 에러가 발생함 1. has() 2. has() 트랩 호출 3. has() 트랩 준수사항 4. de…

1. get() 값을 구하는 트랩 : 에서 값을 구함 트랩이 호출되면 엔진이 실행 환경을 분석하여 파라미터 값을 설정 트랩 활용 형태 : 조건 체크 트랩 활용 형태 : 데이터 변경 2. get() 트랩 호출 트랩이 호출되는 형태 3. get() 트랩 준수사항 의 프로퍼티가 디스크립터일 때 또는 이면 반환 값을 변경하여 불가 의 프로퍼티가 악세서 디스크립터일 때 이면 반환 값을 변경하여 불가 1. get() 2. get() 트랩 호출 3. get() 트랩 준수사항

1. set()의 4번째 파라미터 트랩의 4번째 파라미터에 인스턴스가 설정됨 4번째 파라미터에 로 생성한 인스턴스가 설정됨 와 인스턴스 구조 2. set()과 this 트랩에서 는 오브젝트를 참조 함 1. set()의 4번째 파라미터 2. set()과 this

1. set() 프로퍼티를 설정하는 트랩으로 또는 에 프로퍼티(key, value)를 설정 함 트랩을 작성하지 않은 형태 트랩이 호출되면 엔진이 실행 환경을 분석하여 파라밑터 값을 설정 함 2. set() 트랩 호출 아래처럼 값을 할당하면 트랩이 호출 됨 프로퍼티에 값을 할당할 때 인스턴스에 없는 프로퍼티를 설정할 때 인스턴스에 있는 프로퍼티를 설정 할 때 트랩에서 값을 설정해야 함 3. set() 트랩 준수사항 트랩 준수 사항(invariant) 트랩에서 준수 사항을 지키지 않으면 에러가 발생하거나 처리되지 않음 모든 트랩에 준수 사항이 있음 의 프로퍼티가 디스크립터 일 때 또는 이면 프로퍼티 값을 설정할 수 없음 의 프로퍼티가 악세서 디스크립터 일 때 이면 프로퍼티 값을 설정 할 수 없음 1. set() 2. set() 트랩 호출 3. set() 트랩 준수사항

1. new Proxy() 인스턴스를 생성하여 반환 함 첫 번째 파라미터 대상 오브젝트를 작성 Object, Array, Function 등 두 번째 파라미터 핸들러를 작성함 Proxy 형태 Proxy 인스턴스 형태 2. Proxy.revocable() 를 사용할 수 없는 상태로 바꿀 수 있는 오브젝트를 생성, 반환 생성한 오브젝트 구조 1. new Proxy() 2. Proxy.revocable()

1. target 대상 오브젝트 임 등을 사용할 수 있음 형태에서 첫 번째 파라미터에 을 작성함 이렇게 인스턴스를 생성하므로 인스턴스와 이 연결됨 2. trap, handler : 에서 사용하는 용어로 실행 중인 프로그램에 이상이 발생했을 때 실행을 중단하고 사전에 정의된 제어로 전환 가운데 사람이 밥을 받아 자신 앞에 있는 수저를 같이 건네 준다면 에 수저를 건네주는 코드가 필요함 이것이 를 사용하는 목적임 오브젝트에 이 있음 를 핸들러 오브젝트라고 하며 약칭으로 핸들러라고 부름 3. Proxy Trap ES6에는 있었느나 ES7에서 1. target 2. trap, handler 3. Proxy Trap

Proxy 논리 식당에서 3명이 식사 하고 있는 모습에서 왼쪽 사람이 오른쪽 사람 앞의 밥을 가져오려 함 왼쪽 사람이 가운데 사람에게 밥을 달라고 말하고 가운데 사람이 오른쪽 사람에게 말하면 오른쪽 → 가운데 → 왼쪽 순서로 밥을 받을 수 있음 이 모습에서 가운데 사람이 왼쪽 사람의 말을 받아 오른쪽 사람에게 말하고 오른쪽 사람에게 밥을 받아 왼쪽 사람에게 전달 함 이와 같이 는 중간에서 대리 역할을 함 왼쪽 사람이 오른쪽 사람에게 직접 말하고 밥을 받으면 가 필요하지 않음 가운데 사람을 거쳐서 받는 모습을 JS로 표현하면 가 실행되면 의 가 호출되며 에서 의 를 호출하면서 를 파라미터로 넘겨 줌 파라미터에 을 작성하므로 에서 을 알 수 있음 의 이 값을 구해 로 반환하고 로 반환된 값을 에 할당 함 이렇게 가 가운데에서 대리 역할을 함 Proxy 논리

1.Proxy 의 사전적 의미 : 대리, 대신 : 기본 오퍼레이션을 중간에 가로채어 오퍼레이션을 대리, 대신하여 실행함 가로 채어 실행하더라도 전체 괘도를 벗어날 수 없으므로 오퍼레이션을 완전하게 바꿀 수는 없음 그럼 무엇을 대리하고 대신 할까? 2. 기본 오퍼레이션 커피를 주문하는 기본 오퍼레이션은 주문을 받는 카운터로 가서 커피를 주문함, 카운터가 커피를 내려 줌 이 모습을 코드로 표현하면 여기서 중요한 것은 가 가 되는 논리 임 를 호출하면 가 반환되는 근거는 무엇이냐는 것임 3. 기본 오퍼레이션 논리 를 실행하면 “커피”를 구하는 행위를 해야 함 즉, 값을 구하는 메소드가 필요함 이때, 엔진은 기능을 가진 내부 메소드 을 호출함 ES6에 처럼 기본 오퍼레이션을 제공하는 13개의 내부 메소드가 있음 스펙의 기본 오퍼레이션 1.Proxy 2. 기본 오퍼레이션 3. 기본 오퍼레이션 논리

1. this 참조 형태로 호출하면 메소드에서 가 인스턴스를 참조 함 메소드에서 는 메소드가 속한 클래스를 참조함 에서 는 생성하는 인스턴스가 아니라 클래스 오브젝트를 참조 함 2. Generator 클래스의 제너레이터 함수는 에 연결됨, 인스턴스로 호출해야 함 1. this 참조 2. Generator

1. Built-in 오브젝트 상속 빌트인 오브젝트를 상속받을 수 있음 인스턴스가 빌트인 오브젝트의 특징을 갖게 되며 로 빌트인 오브젝트에 접근할 수 있음 키워드로 구현함 코드 프로세스 2. Object 상속 는 클래스가 아니므로 다른 를 상속 받을 수 없지만 상속 받으면 구조가 되는 것을 활용하여 상속을 구현 할 수 있음 상속 로 구조를 만듬 3. Image 오브젝트 상속 오브젝트 상속 코드 오브젝트의 를 호출 , , 오브젝트를 로 참조 속성에 값을 할당 함 4. Audio 오브젝트 상속 오브젝트 상속 오브젝트의 를 호출 , 오브젝트를 로 참조 속성에 값을 할당함 파라미터 값을 받아 속성값을 설정하면 범용 클래스로 사용할 수 있음 1. Built-in 오브젝트 상속 2. Object 상속 3. Image 오브젝트 상속 4. Audio 오브젝트 상속

1. super 키워드 슈퍼 클래스와 서브 클래스에 같은 이름의 메소드가 있으면 서브 클래스의 메소드가 호출 됨 키워드를 사용하여 슈퍼 클래스의 메소드를 호출 할 수 있음 의 형태 2. constructor 호출 서브와 슈퍼에 를 모두 작성하지 않으면 디폴트 가 호출 됨 서브에 작성하지 않고 에만 작성하면 파라미터 값을 로 넘겨 줌 서브에는 작성하고 에 작성하지 않으면 에러가 발생함 서브와 슈퍼에 를 모두 작성하면 서브에서 로 호출해야 함 1. super 키워드 2. constructor 호출

1. 상속 상속은 OOP 기능 중 하나 임 클래스에 다른 클래스를 포함시키는 형태 따라서 포함시킨 클래스의 메소드와 프로퍼티를 내 것처럼 사용 할 수 있음 상속해주는 클래스, 상속 받을 클래스를 부모 클래스, 슈퍼 클래스라고 부름 키워드로 슈퍼 클래스를 참조 상속 받는 클래스를 자식 클래스, 서브() 클래스라고 부름 2. extends 키워드 Syntax : 키워드로 상속을 구현 함 상속 구조 메소드 오버라이딩(Overriding) 1. 상속 2. extends 키워드

1. getter 는 메소드를 호출하여 값을 구함 메소드를 호출 할 때는 처럼 소괄호 를 작성하지만 는 소괄호 를 작성하지 않고 만 작성함 파라미터를 사용 할 수 없음 클래스에 작성하는 방법 2. setter 는 메소드를 호출하여 값을 설정 함 도 처럼 소괄호 를 작성하지 않고 이름만 작성함 클래스에 작성 방법 3. static 메소드 Syntax : 메소드 작성 방법 메소드의 구조적 특징 이 아닌 클래스에 연결되며 생성한 인스턴스에 할당되지 않음 4. 호이스팅 클래스는 호이스팅 되지 않음 , 변수처럼 키워드가 작성된 위치에서 클래스 이름 선언과 오브젝트 생성을 동시에 하기 때문 코드 아래에 클래스가 있지만 를 참조하지 못하므로 에러 발생 코드 앞에서 클래스를 오브젝트로 생성하므로 를 호출할 수 있음 5. new.target 프로퍼티는 함수 또는 생성자가 연산자로 호출된 여부를 반환함 연산자로 를 호출하면 은 를 참조 함수로 호출하면 반환…

1. constructor 는 생성자로 인스턴스를 생성하고 초기화 함 ES5까지는 를 작성할 수 없었으나 ES6부터는 작성 할 수 있음 2. constructor 미작성 를 작성하지 않은 상태에서 연산자로 인스턴스를 생성하면 에 연결된 가 호출 됨 3. constructor 반환 에 을 작성하지 않으면 생성한 인스턴스를 반환 함 에서 , 을 반환 하면 이를 무시하고 인스턴스를 반환 함 에서 를 반환 하면 인스턴스를 반환하지 않고 반환 1. constructor 2. constructor 미작성 3. constructor 반환

1. Class 작성 기준 클래스는 모드에서 실해오디므로 이에 맞추어 코드를 작성해야 함 클래스에 메소드 작성 방법 키워드를 작성하지 않음 메소드와 메소드 사이에 콤마를 작성하지 않음 단 세미콜론 은 작성은 선택임 클래스의 는 임 타입은 별로도 있지 않음 2. Computed Name 메소드 이름을 조합하여 사용 대괄호 안에 조합할 이름을 작성 조합한 결과가 메소드 이름이 됨 3. Class 작성 기준 메소드를 에 연결하여 작성하지 않음 클래스 밖에서 메소드를 에 연결할 수 있음 클래스는 열거할 수 없음 에 메소드 추가 1. Class 작성 기준 2. Computed Name 3. Class 작성 기준

1. Class 선언 Syntax : 대문자 Class는 개념적인 클래스를 뜻하고 소문자 class는 키워드 임 클래스 작성 방법 키워드에 이어 클래스 이름 작성함 이름의 첫 문자는 대문자를 사용 함(개발자들 사이의 관례) 블록 을 작성하고 블록 안에 메소드를 작성함 2. Class 표현식 Syntax : 클래스 작성 방법 변수 이름 이 클래스 이름이 됨 변수에 오브젝트를 할당하는 형태 임 다른 것은 클래스 선언문과 같음 Class 형태 ✅ const, let 사용 기준 사용 : 값이 대체되지 않을 경우(오브젝트의 변경되더라도 오브젝트 대체되지 않는 것도 포함) ex) , , 사용 : 값이 대체되는 경우 ✅ 함수, 메소드 기준 함수 인스턴스를 생성하지 않고 직접 호출 메소드 인스턴스를 사용하여 호출하는 함수로 에 연결되어 있음 클래스에 작성한 함수 에 연결된 빌트인 오브젝트의 에 연결된 함수 1. Class 선언 2. Class 표현식 ✅ const, let 사…

1. JS 객체 지향 프로그래밍 언어 : Object Oriented Programming ECMASciprt 스펙에 OOP라고 작성되어 있음 ECMAScripte is an object-oriented programming language 2. 객체 구성 요소 에서 Object(객체)는 JS Object가 아님 개념적, 사상적 접근 형체, 실체가 없음 행위와 속성으로 객체의 특성을 표현 함 행위 : 먹다, 마시다와 같은 동적인 모습 속성 : 밥을 먹다, 물을 마시다와 같은 행위의 대상이 속성 3. 객체의 구체화 객체를 코드로 구체화하면 객체는 가 됨 행위는 가 됨 속성은 가 됨 클래스에서 메소드와 프로퍼티를 작성함 클래스 자체로는 사용할 수 없으며 인스턴스로 생성해야 사용 할 수 있음 키워드로 클래스를 선언 함, 이 시점에서 를 사용할 수 없음 가 호출되며 파라미터 값을 넘겨 줌 인스턴스를 생성하여 반환하며 에 할당함 이제 인스턴스로 클래스를 사용할 수 있음 인스턴스…

1. WeakSet 오브젝트 오브젝트와 차이 오브젝트만 값으로 사용할 수 있음 등의 프리미티브 타입 사용 불가 개념은 과 같음 만 작성하는 것이 다름 의 참조가 바뀌면 대상 지원 메소드 , , 2. new WeakSet() 인스턴스 생성, 반환 파라미터 대괄호 안에 오브젝트 작성 3. has() 인스턴스에서 의 존재 여부 반환 존재하면 , 아니면 반환 4. add() 인스턴스에 설정 파라미터에 로 설정될 오브젝트 작성 5. delete() 인스턴스에서 와 일치하는 엘리먼트 삭제 삭제 성공이면 반환 삭제를 실패하면 반환 1. WeakSet 오브젝트 2. new WeakSet() 3. has() 4. add() 5. delete()

1. forEach() 인스턴스를 반복하면서 함수 호출 , 등의 함수가 동반되는 메소드 사용 불가 함수에 넘겨주는 파라미터 , , 인스턴스 콜백 함수에서 사용 2. delete() 인스턴스에서 파라미터 갑솨 같은 엘리먼트 삭제 같은 가 있어 삭제에 성공하면 반환 삭제에 실패하면 반환 3. clear() 인스턴스의 모든 엘리먼트를 지움 인스턴스를 삭제하는 것은 아님, 따라서 를 추가할 수 있음 1. forEach() 2. delete() 3. clear()

1. entries() 인스턴스로 이터레이터 오브젝트 생성, 반환 인스턴스에 설정된 순서로 반환 로 반환 2. keys() 가 가 되므로 는 의미가 없음 오브젝트와 맞추기 위한 것 인스턴스의 를 key로 사용하여 이터레이터 오브젝트 생성, 반환 인스턴스에 설정된 순서로 반환 로 반환 3.values() 인스턴스의 로 이터레이터 오브젝트 생성, 반환 인스턴스에 설정된 순서로 반환 로 반환 4. Symbol.iterator() 인스턴스로 이터레이터 오브제트 생성, 반환 와 같음 로 반환 1. entries() 2. keys() 3.values() 4. Symbol.iterator()

1. add() 인스턴스 끝에 추가 사용 형태 함수를 생성하여 로 사용 에 생성한 함수 이름 작성 를 로 사용 2. has() 인스턴스에서 값의 존재 여부를 반환 존재하면 , 아니면 반환 메소드가 없으므로 로 값의 존재 여부를 체크 한 후 존재하면 체크한 값을 값으로 사용 1. add() 2. has()

1.Set 오브젝트 Set 오브젝트는 (값)의 컬렉션 형태로 작성 Set은 대괄호 가 하나 작성한 순서로 전개됨 2. new Set() Set 인스턴스 생성, 반환 파라미터에 값을 작성 프리미티브, 오브젝트 타입 사용 가능 프로퍼티 Set 인스턴스의 엘리먼트 수를 반환 Set 오브젝트 구조 3. Set과 Map 비교 저장 형태 : key와 value 작성, Key를 key로 사용하여 로 저장 : 만 작성, 를 key로 사용하여 로 저장 값을 구하는 형태 : 형태로 를 구할 수 있음 : 메소드가 없음 값 하나를 구할 수 없음, 반복으로 값을 구하거나 이터레이터 사용 1.Set 오브젝트 2. new Set() 3. Set과 Map 비교

Map과 WeakMap 차이 참조하는 를 삭제하면 은 그대로 갖고 있지만 은 처리로 삭제됨 Map과 WeakMap 차이

가비지 컬렉션 참조하는 object가 바뀌면 참조했던 오브젝트가 가비지 컬렉션 처리 됨 가비지 컬렉션 처리 WeakMap 인스턴스의 GC상태 가비지 컬렉션

1. get() 인스턴스에서 key 값이 같은 value 반환 존재하지 않으면 반환 2. set() 인스턴스에 key, value 설정 첫 번째 파라미터에 key로 사용할 오브젝트 작성 string과 같은 프리미티브 값 사용 불가 두 번째 파라미터는 값 첫 번째 파라미터의 오브젝트에 대한 값? 오브젝트 구분 등의 용도, 오브젝트에 따라 연동하는 함수 등록 3. has() 인스턴스에서 key의 존재 여부 반환 존재하면 , 아니면 반환 4. delete() 인스턴스에서 key와 일치하는 삭제 삭제를 성공하면 반환 삭제를 실패하면 반환 1. get() 2. set() 3. has() 4. delete()

1. WeakMap 오브젝트 WeakMap: 약한 Map? WeakMap은 Object만 로 사용 가능 number 등의 프리미티브 타입 사용 불가 value는 제한 없음 Map에서 key로 참조한 Object를 삭제하면 object를 사용할 수 없게 되지만 Map에 object가 남음 메모리 릭 발생 WeakMap의 object를 GC가 지움 GC: Garbage Collection 그래서(약한, 부서지기 쉬운) WeakMap? WeakMap 오브젝트 메소드 , , , CRUD와 관련된 메소드만 있음 WeakMap entry의 열거 불가 이터레이션 불가 2. new WeakMap() WeakMap 인스턴스 생성, 반환 파라미터 작성 대괄호 안에 이터러블 오브젝트 작성 WeakMap 오브젝트 구조 1. WeakMap 오브젝트 2. new WeakMap()

1. forEach() Map 인스턴스를 반복하면서 함수 호출 , 등의 함수가 동반되는 메소드 사용 불가 callback 함수에서 넘겨주는 파라미터 value, key, Map 인스턴스 key, value 순서가 아님 콜백 함수에서 사용 2. delete() Map 인스턴스에 파라미터 값과 같은 entry 삭제 같은 key가 있으면 반환 없으면 반환 3. clear() Map 인스턴스의 모든 entry를 지움 Map 인스턴스를 삭제하는 것은 아님 따라서 를 추가할 수 있음 Size 프로퍼티 Map 인스턴스의 entry 수를 반환 개발자 코드로 수정 할 수 없음 1. forEach() 2. delete() 3. clear()

1. entries() Map 인스턴스로 이터레이터 오브젝트 생성, 반환 Map 인스턴스에 설정된 순서로 반환 로 반환 2. keys() Map 인스턴스의 key로 이터레이터 오브젝트 생성, 반환 value는 포함하지 않음 Map 인스턴스에 설정된 순서로 반환 로 key 반환 3. values() Map 인스턴스의 value로 이터레이터 오브젝트 생성, 반환 key는 포함하지 않음 Map 인스턴스에 설정된 순서로 반환 로 value 반환 4. Symbol.iterator() Map 인스턴스로 이터레이터 오브젝트 생성, 반환 와 같음 로 반환 1. entries() 2. keys() 3. values() 4. Symbol.iterator()

1. set() Map 인스턴스에 key, value 설정 key, value 순서로 파라미터 작성 key, value를 설정한 인스턴스 반환 key 값이 같으면 value가 바뀜 2. get() Map에서 Key값이 같은 반환 key 값이 같지 않거나 타입이 다른 반환 오브젝트 설정과 추출 3. has() Map 인스턴스에서 key의 존재 여부를 반환 key가 있으면 , 아니면 1. set() 2. get() 3. has()

Map과 Object 비교 Map 오브젝트 구조 key Map: 타입 제약 없음 Object: , 수 Map: 프로퍼티로 구함 Object: 전체를 읽어 구해야 함 처리 시간 : MDN 빈번하게 key, value를 추가/삭제 할 때는 Map이 Object보다 좋은 경우가 있다고 함 Map과 Object 비교

1. Map 오브젝트 Map 오브젝트 와 의 컬렉션 Map 오브젝트 형태 형태처럼 대괄호 안에 와 를 작성 다양한 타입을 로 사용할 수 있음 Map의 key 처리 문에서 작성한 순서대로 읽혀짐 2. new Map() Map 인스턴스를 생성하여 반환 파라미터에 이터러블 오브젝트 작성 Same-Value-Zero 비교 알고리즘 key 값을 비교 key 값이 같으면 Value가 대체됨 잘못 작성한 형태 1. Map 오브젝트 2. new Map()

1. toString() 을 생성했던 형태를 문자열로 변환하여 반환 값은 반환되지 않음 로 문자열을 연결하면 으로 변환하면 연결은 되지만 값은 연결되지 않음 2. description Syntax, ES2019 오브젝트의 주석, 설명을 반환 함수의 파라미터를 반환 과 차이 3. valueOf() 가 프리미티브 값을 반환하지만 은 값을 반환하지 않고 을 생성한 형태를 반환 는 를 제외하고 반환 4. getWonPropertySymbols() 의 함수이지만 이 대상이므로 여기서 다룸 파라미터의 에서 만 배열로 반환, 다른 프로퍼티는 반환하지 않음 1. toString() 3. valueOf() 4. getWonPropertySymbols()

1. for() 글로벌 레지스트리에 형태로 을 저장 의 문자열이 가 되고 로 생성한 값이 가 됨 : 등록, 기록 글로벌 레지스트리는 공유 영역 다른 오브젝트에서도 사용 가능 같은 가 존재하면 등록된 값을 사용 2. keyFor() 글로벌 레지스트리에서 의 값을 구함 파라미터에 로 등록한 작성 값이 존재하면 값을 반환하고 존재하지 않으면 반환 1. for() 2. keyFor()

1. Well-Known Symbol Well-Known Symbol을 지원하는 String 메소드 문자열에 패턴을 매치하고 매치된 결과를 배열로 반환 2. Symbol.match() 개발자 코드를 함수 블록에 작성 대신에 대신에 가 실행됨 를 패턴으로 인식하지 않고 문자열로 인식 메소드를 오버라이드 하는 것이므로 메소드의 시맨틱은 유지해야 함 1. Well-Known Symbol 2. Symbol.match()

generator 함수 연결 에 를 작성하고 함수를 연결하면 반복 할 때마다 를 수행 연결 구조 의 에 제너레이터 오브젝트가 있는 구조 제너레이터 오브젝트에 이터레이터 오브젝트를 연결하여 값을 형태 제너레이터 오브젝트에 이터레이터 오브젝트가 포함된 구조 generator 함수 연결

1. iterator 가 있는 빌트인 오브젝트 String, Array, Map, Set, TypedArray 빌트인 Object에는 가 없지만 개발자 코드로 작성할 수 있음 2. Array.prototype@@iterator 오브젝트의 를 호출하면 이터레이터 오브젝트 반환 로 배열 엘리먼트 값을 하나씩 구할 수 있음 3. String.prototype@@iterator 오브젝트의 를 호출하면 이터레이터 오브젝트 반환 로 문자열에서 문자를 하나씩 구할 수 있음 4. Object 이터레이션 빌트인 에는 가 없음 가 반복을 처리하므로 를 작성하면 반복할 수 있음 엔진이 문을 시작하면 먼저 에서 검색, 이를 위해 obj에 작성 를 처음 실행할 때 의 가 호출되면 문을 수행 로 반복 횟수 정의 1. iterator 2. Array.prototype@@iterator 3. String.prototype@@iterator 4. Object 이터레이션

toPrimitive 오브젝트를 대응하는 값으로 변환 대응, 기대하는 타입 number, string, default ToPrimitive 스펙 오브젝트를 문자열에 대응 오브젝트를 숫자에 대응 사용 toPrimitive

Species 오버라이드 는 약세서 프로퍼티 이며 만 있고 는 없음 를 사용할 수 있는 빌트인 오브젝트 Array, Map, Set, RegExp Promise, ArrayBuffer, TypedArray 빌트인 오브젝트를 상속받은 에 를 작성하면 빌트인 오브젝트의 가 오라이드 됨 인스턴스 바꾸기 빌트인 오브젝트를 상속 받음 빌트인 오브젝트의 를 오버라이드 함 인스턴스를 생성함 파라미터 값이 인스턴스에 설정 됨 로 을 만들었으므로 출력 오브젝트를 상속 받았으므로 인스턴스로 를 호출 할 수 있음 대상은 인스턴스에 설정된 10, 20, 30 인스턴스를 반환하며 반환되는 인스턴스에 결과를 설정함 로 오버라이드 했으므로 가 호출 됨 호출에 사용한 인스턴스 형태를 반환하지 않고 인스턴스를 반환함 이처럼 로 반환할 인스턴스를 변경할 수 있음 인스턴스에는 인스턴스가 할당되어 있으며 오브젝트로 만들었으므로 출력 가 아니라 오브젝트로 인스턴…

Symbol.species species의 사전적 의미 : (공통 특성을 지닌) 종류, 인류, 종 는 를 반환 를 실행하면 인스턴스를 생성하여 반환하므로 결국, 인스턴스를 반환하게 됨 를 오버라이드 하면 다른 인스턴스를 반환할 수 있다는 의미 메소드를 실행한 후의 결과 형태 기능 빌트인 Array 오브젝트를 상속(확장, 연결) 받음 인스턴스를 생성함 인스턴스의 를 호출하면 처리 결과를 인스턴스에 설정하여 인스턴스를 반환함 이렇게 인스턴스의 메소드를 호출 했을 때 인스턴스를 반환하도록 하는 것이 기능임 Symbol.species

isConcatSpreadable 은 배열의 엘리먼트를 전개하여 반환 one 배열 끝에 two 배열의 엘리먼트를 하나씩 연결 전개하지 않고 two 배열 자체를 연결 전개 isConcatSpreadable

toStringTag 의 확장 으로 인스턴스 타입을 구하면 형태로 반환 인스턴스 타입을 명확하게 구할 수 없음 로 구분 가능 에서 두 번째에 표시될 문자열을 작성 예: “ABC”지정, object “ABC”로 반환 에 연결하여 작성 toStringTag

1. Well-Known Symbols 스펙에서 형태를 볼 수 있음 ES2019 스펙 : 을 나타내는 기호 와 가 같음 스펙에서는 형태를 사용하고 개발자는 형태를 사용 ES2019 기준 : 12개 이란 스펙에서 알고리즘에 이름을 부여하고 이름으로 참조하기 위한 빌트인 값 개발자 코드 우선 실행 를 실행하면 디폴트로 를 실행 소스 코드에 를 작성하면 가 실행 되지 않고 가 실행됨 개발자 코드로 디폴트 기능을 오버라이딩 할 수 있음 2. Well-Known Symbols 종류 1. Well-Known Symbols 2. Well-Known Symbols 종류

Symbol 사용 형태 프로퍼티 키로 사용 값이 유일하므로 중복되지 않음 라고 부름 프로퍼티 값 추출 방법 에서 함수 이름으로 사용 문에서 사용 이 열거되지 않음 이기 때문 로 열거 가능 문에서 사용 배열 안에 작성 에서 사용 값이 문자열로 변환되지 않음 Symbol 사용 형태

1. Symbol() 외부로 노출되는 것 허용 하지 않음 함수는 값을 생성하여 반환 반환된 값을 볼 수 없음 연산자를 사용할 수 없음 프로그램 전체를 통해 유일한 값 제공 값으로 연산 불가 타입 변경 불가 파라미터에 주석, 설명을 작성 값을 문자열로 바꿔서 연결 에 사용 1. Symbol()

1. Primitive 값 JS에서 값은 오브젝트가 아니라 값이며 함수를 갖고 있지 않음 을 할당하면 변수에 100만 할당되며 아무것도 첨부되지 않음 100이 값 ES5의 값 타입 , , , , ES6에서 타입추가 2. Wrapper 오브젝트 오브젝트는? 프리미티브 값이 포함된 오브젝트 오브젝트에는 메소드가 있음 오브젝트가 있는 프리미티브 값 타입 stiring : String, number : Number 오브젝트 boolean : Boolean, symbol : Symbol 오브젝트 obj 인스턴스의 에 100이 설정됨 형태 , 은 오브젝트 없음 1. Primitive 값 2. Wrapper 오브젝트

표현식 의 표현식에 따라 처리하는 방법이 다름 의 표현식이 배열 로 호출할 때마다 배열의 엘리먼트를 하나씩 처리 의 표현식이 제너레이터 함수 함수의 를 먼저 처리 표현식에서 자신 호출 재귀 호출

1. return() 이터레이터를 종료 시킴 파라미터 값을 프로퍼티 값으로 설정 2. throw() 를 의도적으로 발생 시킴 제너레이터 함수의 문에서 에러를 받음 제너레이터 함수에 문을 작성 1. return() 2. throw()

1. yield 분할 할당 대괄호 안에 다수의 작성 , 호출 를 연속해서 작성한 것과 같음 를 2개 모두 수행했으므로 더 이상 처리할 가 없음 세 번째 호출 파라미터 값 : 20 에서 형태로 반환 처럼 안에 파라미터 값 20을 넣어서 반환 에 형태로 표시되지만 가독성을 위해 편집 함 2. for-of 문으로 반복 문으로 제너레이터를 반복 호출 처음 문을 시작하면 으로 제너레이터 오브젝트를 생성함 제너레이터 오브젝트에 10이 설정됨 생성한 제너레이터 오브젝트를 저장할 변수가 없으며 엔진 내부에 저장함 과 같으며 이 엔진 내부의 이름으로 가정함 다시 를 호출 함 와 같지만 반환 값이 다름 를 실행 함 를 반환하지 않고 만 변수에 설정함 로 종료 처리를 할 수 없으므로 를 사용하여 종료시켜야 함 블록을 실행함 11을 출력 함 값이 11이므로 다시 문을 수행 를 수행 이렇게 를 만날 때 까지 반복하여 를 실행 함 1. yield 분할 할당…

1. yield 반복 를 반복하는 형태 임 문을 제어하기 위한 상태 값 첫 번 째 호출 을 실행하여 변수에 0을 설정 함 누적 값을 구하기 위한 것 가 이므로 를 수행 함 반환 두 번째 를 호출 함 가 이므로 를 수행 함 세 번째 를 호출 함 가 이므로 를 수행하지 않음 반환 이므로 이터레이터를 더 이상 사용 할 수 없음 2. 다수의 yield 처리 한 줄에 다수의 와 작성 첫 번째 호출 첫 번째 를 소행 함 에 반환 값이 없으므로 반환 두 번째 호출 파라미터 값 : 10 두 번째 를 수행 함 함수에 파라미터 값을 받을 변수가 없으면 파라미터 넘겨준 값을 반환 세 번째 호출 파라미터 값 : 20 세 번째 를 수행 함 함수에 파라미터 값을 받을 변수가 없으므로 파라미터로 넘겨 준 값을 반환 반환 네 번째 호출 파라미터 값: 30 처리할 가 없으므로 반환 문을 작성했으므로 파라미터로 넘겨 준 값을 반환 반환 문을 작성하지 않으면 …

next() 는 단위로 실행 수 만큼 를 작성해야 전체를 실행 를 호출하면 이전 의 다음부터 까지 실행 를 작성하지 않았을 때 제너레이터 함수에 문을 작성했을 때 함수는 호출 할 때마다 변수에 초깃값을 설정 제너레이터 함수는 제너레이터 오브젝트를 생성할 때 초깃값을 설정 로 실행할 때 마다 초깃값을 설정하지 않음 변숫값을 그래도 유지 next()

1. Yield 키워드 사용 형태 로 호출할 때 마다 하나씩 실행 키워드는 제너레이터 함수 실행을 멈추거나 다시 실행할 때 사용 오른쪽의 표현식을 평가하고 결과를 반환 표현식을 작성하지 않으면 반환 오른쪽의 평가 결과가 설정되지 않고 다음 에서 파라미터로 넘겨준 값이 설정됨 표현식을 평가하면 호출한 곳으로 반환 값 표현식의 평가 결과 설정 를 실행하지 못하면 값 를 실행하면 를 실행하지 못하면 2. Yield 정리 제너레이터 함수를 선언 3개의 를 작성함 제너레이터 오브젝트를 생성함 파라미터 값, 10이 에 설정됨 첫 번째의 를 호출 함 이 실행됨 의 값인 10을 반환함 변수에 10을 할당하지 않음 두 번째의 를 호출 함 에 파라미터 값을 작성하지 않았으므로 변수에 가 설정됨 를 실행 변수 값이 이므로 를 반환 세 번째의 를 호출 함 파라미터 값 20이 바로 앞의 변수에 설정됨 을 실행함 20 + 10을 반환 함 네 번째의 를 호출…

GenratorFunction 를 사용하여 제너레이터 함수를 생성 파라미터를 문자열로 작성 마지막 파라미터가 함수 코드가 되고 앞은 파라미터 이름이 됨 예시 GenratorFunction

1. Generator function : 키워드를 사용한 함수 제너레이터 함수 형태 : , , 작성 방법 : 다음에 소괄호() 작성이어서 작성해도 되고 하나 이상 띄워도 됨 2. 선언문 다음에 함수 이름 작성 제너레이터 함수를 호출하면 함수 블록을 실행하지 않고 오브젝트를 생성하여 반환 오브젝트는 오브젝트 함수 코드 실행 오브젝트의 메소드를 호출 할 때 3. 표현식 다음에 함수 이름 작성은 선택 일반적으로 함수 이름을 작성하지 않음 왼쪽에 변수를 선언하며 변수 이름이 함수 이름이 됨 함수를 선언하는 형태만 다를 뿐 다른 것은 선언문과 같음 1. 2. 선언문 3. 표현식

1. u 플래그 정규 표현식의 패턴을 유니코드의 코드 포인트로 변환하여 매치 u 플래그를 사용하지 않으면 코드 포인트를 문자로 매치 2. s 플래그 정규 표현식에서 dot(점.)은 모든 문자를 매치하지만 줄바꿈 문자는 매치 하지 않음 S 플래그를 사용하면(ES2018) 줄 바꿈 문자를 매치 dotAll 플래그에 true 설정 줄 바꿈 문자 U+000A Line Feed(LF)(“\n”) U+000D Carriage Return(CR)(“\r”) U+2028 Line Separator U+2029 Paragraph Separator 1. u 플래그 2. s 플래그

1. 이 책을 읽은 이유💡 단순하다 신박사님과 신사임당 님이 썼기 때문에 이 책이 나오자마자 구매를 했다. 특히 신박사님을 강연회에 가서 직접 뵈고 말씀을 듣고 신박사님과 고 작가님의 책들과 소개해준 책들을 읽으면서 스스로도 많이 성장함을 느꼈기에 특히, 이 책은 너무나 기대가 컸다. 역시나 읽으면서 아주 중요하지만 놓치면서 살고 있다는 것들을 많이 깨닫게 되었다. 요즘 특히 책을 읽으면서 시야가 넓어짐을 느낀다. 그래도 아직 부족하다. 책에 나온 내용들을 체화해서 더 나은 나를 만들고 싶다. 2. 더 나은 인생을 만들기 위해👋 책에서는 다양한 내용을 소개해준다. 정말 인생 실전에 필요한 무의식에 박혀야 할 내용들 말이다. 그 중에서 새롭게 다가왔던 챕터는 ‘젊어서 고생은 절대 하지 말아라’ 부분이다. 우리는 흔히 어른들로부터 ‘젋어서 고생은 사서 한다’는 이야기를 자주 듣곤 한다. 나도 물론 그렇다고 생각해 20대에 돈을 안 받고 하는 일들(서포터스, 자원봉사 등)을 많이 했다.…

y 플래그 위치에 매치 부터가 아니라 위치에 매치 매치되면 값이 1증가 , 값을 지정할 수 있음 프로퍼티에 설정 y 플래그

lastIndex 정규 표현식 사용 형태 매치 시작 위치를 lastIndex 프로퍼티에 설정 디폴트 값 : 0 g 플래그를 사용하면 프로퍼티 위치부터 매치 g 플래그를 사용하지 않으면 프로퍼티 값이 바뀌지 않음 lastIndex 값을 지정해도 적용되지 않고 0 번 인덱스부터 배치 lastIndex

1. Math 오브젝트 ES5까지는 수학 계산 처리에 부족했으나 ES6에서 수학 계산용 함수가 많이 추가됨 특히, 머신러닝/딥러닝에 대응 할 수 있게 됨 일반적으로 수학 계산을 사용하지 않으므로 개요 중심으로 다룸 2. 정수, 제곱근, 사인 소수를 제외한 정수 반환 값의 보후에 해당하는 값 : 제곱근 각 파라미터 값을 제곱하여 합산하고 합한 값의 제곱근을 반환 : 세제곱근 3. Hyperbolic(쌍곡) : 쌍곡 사인 : 쌍곡 아크사인 : 쌍곡 코사인 : 쌍곡 아크코사인 : 쌍곡 탄젠트 : 쌍곡 아크탄젠트 4. 로그 : 2를 밑으로 한 로그 값 : 10를 밑으로 한 로그 값 : 자연 로그 상수(e)의 x승 -1 x는 파라미터 값, 과 같음 5. 32비트 계산 Emscripten에 대처하기 위한 것 C, C++를 JS로 컴파일 하기 위한 방법 곱한 값을 32비트로 반환 32비트 값에서 비트 값이 0인 수 32 비트 유동 소수 값으로 변환, 반올림 1.…

1. keys() 오브젝트를 이터레이터 오브젝트로 생성, 반환 와 같으며 형태에서 는 반환하지 않고 만 반환 배열 인덱스가 가 됨 2. values() 오브젝트를 이터레이터 오브젝트로 생성, 반환 형태에서 는 반환하고 반환하지 않음 배열의 엘리먼트 값이 가 됨 사용 값이 연동 됨 1. keys() 2. values()

1. flat() 배열 차원을 변환하고 새로운 배열로 설정하여 반환 파라미터의 대상 깊이에 따라 변환이 다름 파라미터에 을 작성한 경우 파라미터에 을 작성 빈 엘리먼트를 삭제 2. flatMap() 와 기본 기능은 같음 배열을 반복하면서 콜백 함수 호출 파라미터 : 엘리먼트, 인덱스, 배열 전체 콜백 함수에서 반환한 값을 배열로 반환 과 차이 1. flat() 2. flatMap()

1. fill() 범위 값을 지정한 값으로 설정, 반환 설정 방법 시작 인덱스부터 끝 인덱스 직전까지 첫 번째 파라미터 값으로 설정(대체) Generic 함수 2. includes() 대상 배열에 첫 번째 파라미터 값이 있으면 , 없으면 를 반환 두 번째 파라미터는 선택이며 비교 시작 인덱스 작성 제네릭 함수 1. fill() 2. includes()

1. find() 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수 호출 파라미터 : 엘리먼트, 인덱스, 배열 전체 콜백 함수에서 를 반환하면 를 종료하면서 현재 처리중인 엘리먼트 값을 반환 2. findIndex() 배열의 엘리먼트를 하나씩 읽어가면서 콜백 함수 호출 파라미터 : 엘리먼트, 인덱스, 배열 전체 콜백 함수에서 반환하면 종료하면서 현재 처리 중인 엘리먼트의 인덱스를 반환 1. find() 2. findIndex()

Generic 스펙에서 아래 문장을 볼 수 있음 ES7 스펙, 22.1.3.3 사용 형태 의 뜻하는 것은? 이 메소드이므로 오브젝트가 처리 대상이지만 은 오브젝트가 아닌 , 를 처리할 수 있다는 것을 뜻함 Generic

1. 이 책을 읽은 이유💡 욕심이 생겼다. 개발자로서 끝까지 가보고 싶은 마음이 생겼다. 그러나 ‘어떻게’, ‘무엇을’ 해야 할지 막막했다. 마치 바다 한가운데 혼자 있는 듯한 느낌이 많이 받았다. 구글링을 통해 어떻게 하면 개발자로서 성장할 수 있는지 많은 방법이 있었지만 그중에 ‘독서’는 모두가 추천하는 좋은 방법이었다. 그중에서 필독서로 ‘소프트웨어 장인’이라는 책이 눈에 띄어 주문해 읽기 시작하였다. 저자 또한 초보 개발자때 겪었던 실수와 그 실수를 헤쳐나가며 지금의 개발자가 되기까지의 경험들을 감사하게도 이 책에 써주셨다. 물론 저자와 다른 문화와 지역에서 개발자로서 일을 하고 있지만, 그래도 일맥상통하는 부분은 어디에서나 존재하기 때문에 본질을 보려고 많이 노력했다. 이 글을 쓰고 있는 시점에 나는 많이 지쳐있다. 그래도 글을 쓰다 보니 다시 동기부여도 된다. 다시 한번 개발자로서 잘하고 싶지만 ‘어떻게’, ‘무엇을’해야 할지 모르는 사람들에게 강력히 추천한다. 2. 구…

1. copyWithin() 범위 값을 복사하여 같은 오브젝트에 설정 두 번째 파라미터의 인덱스부터 복사하여 첫 번째 파라미터 인덱스 부터 순서대로 설정(대체) 세 번째 파라미터의 인덱스 직전까지 복사 복사 시작 인덱스와 끝 인덱스를 작성하지 않으면 배열 전체 복사 2. copyWithin() 함수의 특징 같은 배열 안에서 이동하는 개념 배열의 엘리먼트 수가 변동되지 않음 배열 안에서 엘리먼트를 이동은 엘리먼트를 왼쪽, 오른쪽으로 이동하는 것(처리 속도가 빠름) 1. copyWithin() 2. copyWithin()

1. from() 첫 번째 파라미터의 오브젝트를 오브젝트로 변환 두 번째 파라미터에 함수 작성 이터러블 오브젝트를 전개할 때마다 호출 세 번째 파라미터에 오브젝트 작성 호출된 함수에서 로 참조 2. of() 함수 파라미터 값을 로 변환, 반환 파라미터에 변환 대상 값을 작성 콤마로 구분하여 다수 작성 가능 1. from() 2. of() 함수

1. String.raw 오브젝트에 속하지만 을 사용하므로 여기서 다룸 에 이어서 작성 줄 바꿈을 문자로 처리 유니코드의 코드 포인트 처리 2. String.raw() 의 문자열을 문자 하나씩 전개 하면서 두 번째 파라미터 부터 조합하고 연결 문자열 배열 첫 번째 파라미터는 형태 두 번째 파라미터 부터 조합할 값 작성 1. String.raw 2. String.raw()

tagged Template 템플릿에 함수 이름을 작성한 형태 호출되는 함수를 라고 부름 함수를 호출하면서 문자열을 배열로 파라미터로 넘기고 표현식 결과를 하나씩 파라미터로 넘김 호출하는 곳에서 표현식을 평가한 값을 다수 넘겨 줄 때 태그 함수에 대응하는 파라미터 이름을 작성한 형태 문자열을 분리하면 3개의 배열 엘리먼트가 됨 표현식을 분리하면 와 show 태그 함수를 호출 태그 함수에 Rest 파라미터 작성 문자열을 분리하면 3개의 배열 엘리먼트가 됨 표현식을 분리하면 와 show 태그 함수를 호출 tagged Template

Template Literal Syntax tag Template Literal 문자열 처리를 위한 리터럴 표현식을 포함할 수 있음 강좌에서는 템플릿으로 표기 안에 표현식 작성 표현식을 형태로 작성 줄 바꿈 작성 차이 Template Literal

setPorotytpeOf() 첫 번째 파라미터에 을 작성 첫 번째 파라미터의 에 두 번째 파라미터의 에 연결된 프로퍼티를 설정 연결 후의 인스턴스 구조 상속을 위한 목적이라면 등의 상속 처리 키워드를 제공하는 를 사용하는 것이 좋음 setPorotytpeOf()

setPorotytpeOf() 첫 번째 파라미터의으로 두 번째 파라미터를 설정 첫 번째 파라미터에 인스턴스 작성 실행 후 인스턴스 구조 ES5에 가 있음 setPorotytpeOf()

메소드 추가 에 을 추가하면 에 설정되며 메소드로 추가하는 것과 같음 에 추가한 후의 모습 추가한 메소드를 인스턴스에 공유 메소드 추가

함수로 추가 연산자로 인스턴스를 생성하고 인스턴스의 프로퍼티로 함수를 추가 다른 인스턴스와 공유하지 않음 인스턴스에 추가한 후의 인스턴스 구조 함수로 추가

메소드 호출 방법 과 에 연결된 메소드를 호출하는 방법이 다름 에 연결된 메소드 호출 처럼 을 작성하여 호출 에 연결된 메소드 호출 인스턴스를 생성하여 호출 연산자로 생성한 인스턴스 구조 메소드 호출 방법

1. entries() 열거 가능한 오브젝트의 를 형태로 변환 작성한 순서가 바뀌는 경우 문자열은 문자 하나씩 분리 2. values() 열거 가능한 오브젝트의 를 형태로 변환 작성한 순서가 바뀌는 경우 문자열은 문자 하나씩 분리 3. fromEntires() 형태를 형태로 변환 프로퍼티 키 값이 같으면 값 대체 4. getOwnPropertyDescriptors() 의 프로퍼티 디스크립터를 반환 데이터 디스크립터 액세스 디스크립터 상속받은 오브젝트는 반환하지 않음 1. entries() 2. values() 3. fromEntires() 4. getOwnPropertyDescriptors()

Deep Copyt Object를 할당하면 프로퍼티 값이 연동됨 한 쪽 오브젝트의 프로퍼티 값을 바꾸면, 다른 오브젝트의 프로퍼티 값도 바뀜 함수로 복사 그래도 연동되는 형태 연동되지 않게 하려면 프로퍼티 단위로 복사 JSON 함수 활용 Deep Copyt

1. assgin() 두 번째 파라미터의 오브젝트 프로터피를 첫 번째 파라미터의 오브젝트에 복사하고 첫 번째를 반환 만 복사 2. 첫 번째 파라미터 작성 첫 번째 파라미터를 작성하지 않거나 , 를 작성하면 , , , 값 작성 첫 번째 파라미터에 를 작성하고 두 번째 파라미터를 작성하지 않음 인스턴스를 생성하여 파라미터 값 100을 에 설정 함 생성한 인스턴스를 반환함 , , 도 같은 방법으로 처리 3. 두 번째 파라미터 작성 열러 가능 오브젝트 작성 오브젝트 다수 작성 값을 작성 값과 오브젝트를 작성 값이 설정된 인스턴스 형태 1. assgin() 2. 첫 번째 파라미터 작성 3. 두 번째 파라미터 작성

is() 두 개의 파라미터 값과 값 타입을 비교 같으면 , 아니면 오브젝트 비교 목적이 아님 와 비교, 와 비교는 JS 값 비교 방법 값과 타입까지 모두 비교: 타입은 비교하지 않고 값만 비교: 와 비교 차이 NaN 비교 +0과 -0 비교 활용한 형태 is()

1. padStart() 첫 번째 파라미터 값 만큼 길이를 늘리고 늘어난 끝에 대상 문자열을 설정한 후 앞의 남은 공간에 두 번째 파라미터를 채움 두 번째 파라미터에 채울 문자열 작성 10자리로 늘리고 8/9/10 번째에 “ABC”를 설정, 남은 7자리에 “123”을 왼쪽부터 반복하여 채움 6자리 끝에 ABC를 설정하면 3자리가 남음, 123456을 왼쪽부터 채우고 123이 채워짐 전체 길이가 대상 문자열보다 작으면 길이를 줄이지 않고 대상 문자열을 반환 두 번째 파라미터를 작성하지 않으면 남은 앞에 빈문자열을 채움 2. padEnd() 첫 번째 파라미터 값 만큼 길이를 늘리고 늘어난 끝에 대상 문자열을 설정한 후 뒤의 남은 공간에 두 번째 파라미터를 채움 두 번째 파라미터에 채울 문자열 작성 10자리로 늘리고 1/2/3 번째에 “ABC”를 설정, 남은 7자리에 “123”을 왼쪽부터 반복하여 채움 6자리 앞자리에 ABC를 설정하면 3자리가 남음, 123456을 왼쪽부터 …

1. startsWith() 대상 문자열이 첫 번째 파라미터의 문자열로 시작하면 , 아니면 반환 정규 표현식 사용 불가 두 번째 파라미터 선택이며, 비교 시작 인덱스 작성 2. endsWith() 대상 문자열이 첫 번째 파라미터의 문자열로 끝면 , 아니면 반환 두 번째 파라미터 선택이며, 사용할 문자열 길이 지정 3.repeat() 대상 문자열을 파라미터에 작성한 수 만큼 복제, 연결하여 반환 4. includes() 대상 문자열에 첫 번째 파라미터의 문자열이 있으면 없으면 반환 두 번째 파라미터(선택) 비교 시작 인덱스 작성 1. startsWith() 2. endsWith() 3.repeat() 4. includes()

1. fromCodePoint() 유니코드의 코드 포인트에 해당하는 문자 반환 파라미터에 다수의 코드 포인트 작성 가능 문자를 연결하여 반환 ES5의 사용 로 작성 2. codePointAt() 대상 문자열에서 파라미터에 작성한 인덱스 번째 문자를 유니코드 코드 포인트로 변환하여 반환 코드 포인트는 UTF-16으로 인코딩된 값 3. normalize() 대상 문자열을 파라미터에 지정한 유니코드 정규화 형식으로 반환하여 반환 1. fromCodePoint() 2. codePointAt()

1. Unicode 유니코드는 U+0031 형태 코드 포인트 이 코드 포인트 문자 코드라고도 부름 코드 포인트로 등을 표현 4자리 이상의 UTF-16진수 형태 110만개 정도 표현 U+0000 ~ U+10FFFF Plane(평면) 코드 포인트 전체를 17개 plane으로 나눔 하나의 plane은 65535(U+FFFF)개 첫 번째 Plane BMP(Basic Multillingual Plane) 라고 부름 일반적인 문자(연문자, 숫자)가 여기에 속함 한글의 코드 포인트도 여기에 속함 첫 번째 Plane을 제외한 Plane Supplementary Plane, Astral Plane이라고 부름 5자리 이상의 코드 포인트를 표현할 수 있음 ES6+에서 지원 이스케이프 시퀀스(Escape Sequence) 역슬래시와 16진수로 값을 작성 이를 16진수 이스케이프 시퀀스라고 부름 유니코드 이스케이프 시퀀스 Unficode Escape Sequence 이스케이프 시퀀스를 유니코드로 작성한…

1. isNaN() 값의 여부를 체크 값이면 , 아니면 반환 글로벌 오브젝트의 값 타입이 가 아닌 것을 체크 함, 가 타입이므로 반환 와 은 값이 이므로 가 됨 값이 가 아니므로 가 됨 글로벌 오브젝트의 값을 숫자로 변환하고 그 결과로 비교 함, 변환한 값 이 이므로 반환 NaN 체크 방법 결과가 이므로 사용 불가 , 글로벌 오브젝트 : 2. isInteger() 파라미터 값이 이면 , 아니면 반환 정수로 인식 정수가 아닌 것으로 인식 값을 로 변환하여 체크하지 않음 r로 변환하면, 와 가 이므로 정수로 인식됨 3. isSafeInteger() 파라미터 값이 이면 아니면 반환 ~ : 아니면 4. isFinite() 파라미터 값이 유한 값이면 아니면 글로벌 오브젝트의 와 체크 결과가 다름 함수는 오브젝트에 속해야 하므로 와 관련된 것은 오브젝트의 함수 사용, 글로벌 오브젝트의 함수는 글로벌 사용이 목적 1. isNaN() 2. isInte…

1. Number.EPSLON 아주 작은 값 2.220446049250313080847263361816E-16 또는 2^-52 사용 사례 미세한 값 차이 형태 JS가 부동소수점 처리를 하기 때문(IEEE 74) 이처럼 미세한 값 차이로 일치하지 않을 때 을 사용 미세한 값 차이를 같은 값으로 간주 값 차이가 보다 작으면 를 반환` 으로 가 되는 것을 방지 처럼 작은 값을 더해 나누면 이 됨 2. 진수 Binary(2진수) , 형태로 작성 숫자 다음에 작성하고 이어서 또는 로 값을 작성 Octal(8진수) 형태로 작성 숫자 다음에 영문 작성하고 이어서 로 값을 작성 ES3는 첫 자리에 영문 작성 1. Number.EPSLON 2. 진수

1. IEEE 754 IEEE (Institute of Electrical and Electronics Engineers) JS는 IEEE 754에 정의된 64비트 부동 소수점으로 수를 처리 double-precision floating-point format numbers 64비트로 최솟값과 최댓값을 처리 정수와 실수를 구분하지 않음 1을 1.0으로 처리 1과 1.2를 더할 수 있음 2. 64비트 구성 사인 비트 63: 1비트 값이 0이면 양수, 1이면 음수 지수 52 ~ 62 : 11비트 가수 0 ~51 : 52비트 + 1(사인 비트): 53비트 3. 값을 구하는 방법 비트 값은 아니면 2^x승 값을 더해 값을 구함 0비트 부터 1, 1, 1이면 1(2^0) + 2(2^1) + 4 = 7 4. Number 상수 란 지수(e)를 사용하지 않고 나타낼 수 있는 값 2의 64승이 아닌 2의 53승 : safe integer 최댓값 : safe integer 최솟값 1. IEE…

1. Getter 로 선언된 함수를 자동으로 호출 값을 반환하는 시맨틱을 갖고 있으므로 함수에서 값을 반환해야 함 ES5 형태 을 실행하면 프로퍼티에서 속성의 존재를 체크 함 있으면, 함수를 호출하며 이 반환되어 출력 됨 처럼 함수로 호출하면 에러가 발생함 ES5의 를 참조하세요 ES6 형태 처럼 앞에 을 작성하면 로 선언됨 함수가 자동으로 호출 됨 ES6 장점 ES5처럼 프로퍼티의 속성 구조가 아님 작성 편리 다수의 사용 가능 2. Setter 프로퍼티에 값을 할당하면 로 선언된 함수 자동 호출 값을 설정하는 시맨틱을 갖고 있으므로 함수에서 값을 설정해야 함 ES5 형태 를 실행하면 프로퍼티에 속성의 존재 여부를 체크 있으면, 함수를 호출 를 파라미터 값으로 넘겨 줌 ES6 형태 ) 앞에 을 작성하면 로 선언됨 에 값을 할당하면 가 자동으로 호출 됨 파라미터 값으로 을 넘겨줌 변숫값을 함수 이름으로 사용 변숫값인 “setPoint”가 함수 이름으로 사용…

1. Trailing Commas 배열 끝에 콤바 사용 가능 앞에 콤마 사용 가능 끝에 콤바 사용 앞에 콤마 사용 가능 2. 거듭 제곱 좌결 합성 왼쪽에서 오른쪽으로 계산 은 으로 계산 우결 합성(거듭제곱 계산 할 때만) 오른쪽에서 왼쪽으로 계산 에서 로 계산 은 2의 3승의 2승이 아니라 먼저 3의 2승을 구하며(9) 2의 9승으로 512가 됨 2. Try-Catch 의 에서 처럼 (error)를 생략 가능 ES2019 에서 메시지를 받아 사용하지 않을 때 편리 함 타이핑 실수를 방지 할 수 있음 3. 함수 작성 형태 에 함수를 작성할 때 키워드를 작성하지 않아도됨 참고 : 에 함수를 작성하는 이유 함수에서 로 전체 참조 연산자로 인스턴스를 생성하지 않음, 메소드가 아닌 함수로 접근 전체가 하나의 묶음 접근성, 가독성이 좋음 에 시맨틱을 부여할 수 있으며 다른 오브젝트와 이름과 프로퍼티 이름이 충돌되지 않음 처럼 키워드를 사용하지 않음 1. Trailing Comm…

1. For-Of 이터러블 오브젝트를 반복 Iterable 이터러블 오브젝트를 작성 표현식을 작성하면 평가 결과를 사용 Variable 변수 이름 작성 이터러블 오브젝트를 반복할 때마다 Variable에 값이 할당됨 배열 배열을 반복하면서 엘리먼트를 하나씩 전개 String 문자열을 반복하면서 문자를 하나씩 전개 NodeList NodeList를 반복하면서 엘리먼트를 하나씩 전개 2. For-in, For-of의 차이 for-in 열거 가능한 프로퍼티가 대상 형태는 디폴트가 는 디폴트가 for-of 이터러블 오브젝트가 대상 Object는 전개되지 않음 Property의 프로퍼티도 전개되지 않음 3. for-of, Object Object는 이터러블 오브젝트가 아니므로 for-of 사용 불가 Object를 로 전개할 수 있는 방법 로 프로퍼티 이름을 배열로 만들고 만든 배열을 로 전개 1. For-Of 2. For-in, For-of의 차이 3. for-of, Object

Default Value 값을 할당하지 않으면 사전에 정의된 값을 할당 default value : 사전에 정의된 값 할당할 값이 없으면 디폴트 값을 할당 에 10을, 에 20을 분할 할당 함 에 할당할 값이 없으며, 이 때 에서 을 에 할당함 이것을 라고 함 의 왼쪽에 이름을 작성하고 오른쪽에 값을 작성 할당할 값이 있으면 디폴트 값을 무시 왼쪽과 오른쪽 모두 값이 3개 임 값(70)이 있으므로 에 을 할당함 에서 을 할당하지 않음 Object는 프로퍼티 이름으로 체크 오른쪽에 의 값인 을 왼쪽의 프로퍼티 값으로 분할 할당함 에 할당할 값이 없으며 에서 을 에 할당 함 디폴트 값 적용 순서 왼쪽에서 오른쪽으로 적용 오른쪽 one의 값인 10을 왼쪽의 one 프로퍼티 값으로 분할 할당함 오른쪽에 값이 없으므로 디폴트 값을 할당, 왼쪽에서 오른쪽으로 할당 , one의 값이 10이므로 30이 two에 설정됨 , two의 값이 30이므로 80이 five에 설정됨 함수의 파라미터에 디폴…

1. Object 오퍼레이션 같은 프로퍼티 이름 사용 에서 프로퍼티 이름인 이 같음 모드에서 프로퍼티 이름이 같으면 에러 뜸 에서는 모드에 관계없이 에러가 발생하지 않음, 뒤에 작성한 프로퍼티 값으로 대체됨 Shorhand property names 과 변수에 값을 작성하였으며 형태로 에 할당함 이 프로퍼티 이름이 되고 이 프로퍼티 값으로 할당됨 은 MDN에 작성된 것으로 스펙에 정의된 것은 아님 2. 프로퍼티 이름 조합 문자열을 프로퍼티 이름으로 사용 과 를 연결하여 를 프로퍼티 이름으로 사용 함 변숫값을 프로퍼티 이름으로 사용 변숫값을 프로퍼티 이름으로 사용 함 변숫값과 문자열을 연결할 수 있음 프로퍼티 이름에 공백이 있는 것이 어색하지만 공백을 넣을 수 있음 함수로 호출 할 수 있음, 변숫값에 따라 함수 이름을 정의 할 수 있음 분할 할당을 조합한 형태 변숫값을 프로퍼티 이름으로 사용하고 분할 할당한 형태 이 형태가 됨 이 에 “책”이 할당됨 1. Object 오퍼레…

1. Object 분할 할당 의 프로퍼티를 분할하여 할당 프로퍼티 이름이 같은 프로퍼티에 값을 할당 왼쪽의 가 형태가 아니라 프로퍼티 이름만 작성함 프로퍼티 이름이 같은 오른쪽 프로퍼티 값을 왼쪽의 프로퍼티 값으로 할당 에 , 에 을 할당, 형태가 됨 프로퍼티 이름을 별도로 작성 프로퍼티 이름을 앞에 별도로 작성함 전체를 소괄호() 안에 작성해야 함 프로퍼티 값 위치에 변수 이름 작성 이름을 별도로 선언하였으므로 소괄호() 안에 작성했음 오른쪽 프로퍼티 값 5를 five에 할당 오른쪽 프로퍼티 값 6을 six에 할당 을 실행하면 프로퍼티 이름으로 값을 구할 수 없음 와 변숫값을 구하는 것이 목적 Object 구조에 맞추어 값 할당 plus는 구조(경로)를 만들기 위한 것 왼쪽에 가 있고 가 있으면 프로퍼티 값에 을 할당함 구조가 같지 않으면 실행할 때 에러 발생 는 구조(경로)를 만들기 위한 것으로 실제로 존재하지 않음 가 없으므로 발생 할당한 후, 이름으로…

1. Destructuring Destructuring Assignment 사전적 의미 ~구조를 파괴하다. 파괴, 해체는 있는 것이 없어지는 뉘앙스 원 데이터는 변경되지 않음 이 관점에서 보면 분할/분리가 더 까움 2. Array 분할 할당 배열의 엘리먼트를 분할하여 할당(인덱스에 해당하는 변수에 할당) 할당 받을 변수 수가 적은 경우 왼쪽에 할당 받을 변수가 2개이고, 오른쪽에 분할 할당할 값이 3개 임 왼쪽의 변수 인덱스에 맞추어 값을 할당하므로 3은 할당되지 않음 할당 받을 변수 수가 많을 경우 왼쪽의 할당 받을 변수가 4개이고 오른쪽에 분할 할당할 값이 3개 임 왼쪽에 값을 할당할 수 없는 변수에 가 설정됨 배열 차원에 맞추어 분할 할당 매치되는 인덱스에 변수가 없으면 값을 할당하지 않음 Spread와 같이 사용 나머지를 전부 할당 에 1을 할당하고 나머지 2, 3, 4를 에 할당 함, 처럼 배열로 할당함 파라미터를 호출 받는 함수의 파라미터에 작성하지만, 나머지라는 시맨…

1. Function Spread 호출하는 함수의 파라미터에 대상 작성 처리 순서 및 방법 함수가 호출되면 우선, 파라미터의 배열을 엘리먼트 단위로 전개 전개한 순서대로 파라미터 값으로 넘겨 줌 호출 받는 함수의 파라미터에 순서대로 매핑됨 , , 이 매핑 됨 2. Rest 파라미터 Syntax: 분리하여 받은 파라미터를 배열로 결합 : 분리, : 결합 작성 방법 호출받은 함수의 파라미터에 에 이어서 파라미터 이름 작성 호출한 함수에서 보낸 순서로 매핑 , , 이 매핑 됨 파라미터와 파라미터 혼합 사용 에 10이 설정되고 설정되지 않은 나머지 값 전체가 파라미터 에 설정됨 그래서 파라미터 임 나머지라는 시맨틱을 나타내기 위해 파라미터 이름을 로 사용하기도 함 3. Array-like 타입이지만 배열처럼 이터러블 가능한 오브젝트 문으로 전개할 수 있음 작성 방법 프로퍼티 값을 0부터 1씩 증가하면서 프로퍼티 값을 작성 에 전체 프로퍼티 수 작성 이렇게 작성하지 않으면 그냥…

1. let, const 사용 기준 : 변경 할 수 있음 : 변경 할 수 없음 , 변수의 시맨틱을 우선하여 사용 값이 변경되면 초깃값이 변경되지 않으면 2. Spread Syntax: 처럼 안에 점 3개를 작성하고 이어서 이터러블 오브젝트 작성 이터러블 오브젝트를 하나씩 전개 의 가 이터러블 오브젝트는 아니지만 전개 가능 3. Array Speard 대상 배열을 작성한 위치에 엘리머트 단위로 분리(전개) 작성 형태 : 배열의 를 엘리먼트 단위로 분리(전개) 함 : 위치에 배열의 를 엘리먼트 단위로 분리(전개) 함 값이 대체되지 않고 전개 앞에 과 가 있지만 값을 대체하지 않고 을 작성한 위치에 전개 함 4. String Spread 대상 문자열을 작성한 위치에 문자 단위로 전개 작성 형태 의 를 문자 단위로 분리하여 위치에 설정 5. Object Spread 대상 를 작성한 위치에 프로퍼티 단위로 전개 작성 형태 : 오브젝트의 프로퍼티를 …

1. 이터레이터 프로토콜 이터레이터(iterator) 프로토콜 값을 순서대로 생성하는 방법(규약) 이터레이터 오브젝트 를 호출하면 이터레이터 오브젝트를 생성하여 반환 이터레이터 오브젝트에 가 있음 생성한 오브젝트를 이터레이터라고 부름 이터레이터 오브젝트의 를 호출하면 이터레이터를 호출한다고도 함 를 반환함, 에서 첫 번째 값이고 는 이터레이터 상태 임 두 번째 호출 를 반환함, 에서 두 번째 값이고 는 이터레이터 상태 임 세 번째 호출 반환, 는 처리할 값이 없다는 것을 뜻하며 는 이터레이터의 종료를 뜻함 이터레이터 오브젝트 구조 1. 이터레이터 프로토콜

1. 이터러블 오브젝트 1). 이러터블 오브젝트 개념 이터러블 프로토콜을 갖고 있는 오브젝트 스펙에서는 로 표기 반복 구조, 리터럴로 생성한 에 가 있으므로 는 이터러블 오브젝트 임 리터럴로 생성한 에 가 없으므로 는 이터러블 오브젝트가 아님 문의 반복과 이터레이션이 차이가 있듯이, 의 열거와 이터레이션은 차이가 있음 2). 이터러블 오브젝트 구조 3). 자체 오브젝트에는 없지만 이터러블 오브젝트를 상속받아도 됨 즉, 에 있으면 됨 예를 들어, 오브젝트를 상속 받으면 이터러블 오브젝트가 됨 2. 이터러블 프로토콜 1). 이터러블 프로토콜 개념 오브젝트가 반복할 수 있는 구조이어야 함 를 갖고 있어야 함 2). 아래 빌트인 오브젝트는 디폴트로 이터러블 프로토콜을 갖고 있음 즉 를 갖고 있음 -, , , , , , 1. 이터러블 오브젝트 1). 이러터블 오브젝트 개념 2). 이터러블 오브젝트 구조 3). 자체 오브젝트에는 없지만 2. 이터러블 프로토콜 1). 이터러블 프로토…

1. 이터레이션 이터레이션(Iteration)의 사전적 의미 : 반복 문의 반복 개념과 차이 있음 이터레이션을 위한 프로토콜(Protocol) 필요 예: 통신 프로토콜(규약) 데이터 송수신 프로토콜 정의 어떻게 반복을 할 것인가에 대한 규약이 필요 즉, 이터레이션은 프로토콜을 갖고 있으며 프로토콜에 따라 이터레이션 수행 프로토콜이 구문과 빌트인이 아니므로 프로토콜에 맞으면 이터레이션 가능 2. 이터레이션 프로토콜 이터레이션 프로토콜(규약)은 오브젝트가 이터레이션 할 수 있는 구조이어야 하며 10, 20은 가능, 100은 불가능 이터레이션 프로토콜 구분 이터러블(iterable) 프로토콜 : 반복가능 한 것 이터레이터(iterator) 프로토콜 : 처럼 반복문을 실행시키는 것 —> 이렇게 이터러블, 이터레이터를 규약하는 이유는? 때문에 개발자 코드로 프로토콜을 맞추면 이터레이션 할 수 없는 오브젝트를 이터레이션 할 수 있도록 만들 수 있음 1. 이터레이션 2. 이터레이션 프로토콜

1. 화살표 함수와 인스턴스 인스턴스에서 화살표 함수의 에 따라 가 참조하는 오브젝트가 다름 1). 에 메소드로 작성 에 화살표 함수를 연결하면 함수 안에서 가 글로벌 오브젝트를 참조 함 에서 글로벌 오브젝트의 값이 200을 출력 2). 의 메소드 안에 작성 에 일반 함수를 연결하고, 함수 안에 화살표 함수를 작성한 형태 임. 가 일반 함수 이므로 가 생성한 인스턴스 참조 또한, 화살표 함수에서도 가 생성한 인스턴스를 참조 함 화살표 함수의 스코프인 의 를 사용하기 때문 2. 화살표 함수 특징 대신 를 사용, 함수 표현식 형태 이 없으므로 함수가 가벼움 가 없으므로 연산자로 인스턴스를 생성할 수 없음 화살표 함수에 가 없음 화살표 함수로 오브젝트를 생성할 때 정적으로 화살표 함수가 속한 스코프의 를 화살표 함수에 바인딩 함 바인딩 된 참조가 바뀌지 않으며 화살표 함수에서 로 사용 함 일반 함수는 등으로 바꿀 수 있음 메소드보다 함수로 사용하는 것이 효율 성이 높음 1…

1. 화살표 함수와 this 1). 모드에서 함수를 호출할 때 함수 앞에 오브젝트 작성은 필수 모드에서는 처럼 호출하는 함수 앞에 오브젝트를 작성해야 함, 이렇게 하지 않으면 함수 안에서 값이 또한, 처럼 를 앞에 작성하지 않으면 안에서 값이 임 이를 피하기 위해 로 호출하면 오브젝트에 가 없으므로 에러가 남(현재 함수 블록 안에 가 있음) 모드의 함수에서 를 참조하기 위해서는 를 별도로 저장한 후 사용해야 하는 번거로움이 있음 —> 화살표 함수로 해결 가능 2). 화살표 함수에서 가 글로벌 오브젝트 참조 화살표 함수로 작성하면 로 호출할 수 있음 또한, 화살표 함수 안에서 가 가 아니라 글로벌() 오브젝트를 참조 함 을 작성했으므로 100이 출력됨 3). 값이 2. 가 정적 스코프 참조 화살표 함수에서 정적 스코프의 를 사용 정적(Lexical)스코프란 엔진이 해석할 때, 화살표 함수를 만나면 를 생성하고 화살표 함수가 속한 스코프를 생성한 함수 오브젝…

1) 화살표 함수 구조 을 로 표기하는 것이 전부가 아님 화살표 함수는 일반 함수와 구조가 다름 화살표 함수 나름의 특징이 있음 2) Arguments 사용 불가 (파라미터가 유동적일 때 사용하는 것) 사용 할 수 없음 대신에 파라미터 사용 1) 화살표 함수 구조 2) Arguments 사용 불가

1) Arrow Function 의 사전적 의미 : 화살, 화살표 코드 형태 키워드 대신에 화살표 사용 표 양쪽에 공백 작성 가능 의 축약 형태이지만, 고려할 사항도 있음( 참조가 다름) 2) 함수 블록 사용 함수 블록과 작성생략 함수 블록과 을 생략한 형태로 와 같음 앞에서 줄을 분리하면 뒤에서는 개행 가능 함수 블록 만 작성한 형태 함수 블록만 작성하면 반환 함수 블록에 을 작성하지 않은 것과 같음 을 작성하지 않으면 로 를 반환 함 화살표가 함수이기 때문이 아니라 문법임 를 반환하는 형태 를 소괄호()로 감싸면 를 반환함 소괄호()을 작성하지 않으면 를 반환함 3) 파라미터 사용 파라미터가 하나 일 때 파라미터가 하나이면 에서 소괄호를 생략할 수 있음 에서 이 에 설정됨 파라미터가 없으면 소괄호만 작성 파라미터가 없으면 소괄호만 작성할 수 있음 1) Arrow Function 2) 함수 블록 사용 3) 파라미터 사용

💡 요약 문에서 반복 할 때마다 변수는 스코프를 갖지 않음 변수는 스코프를 가짐 1) var 변수와 스코프 어떤 것을 클릭하더라도 항상 문이 끝났을 때의 값인 을 출력함 전체의 스코프에서 하나의 값으로 할당되기 때문 for문의 마지막 값인 이 선언된 즉 글로벌 변수에 할당 됨. 에서 k 변수의 스코프는 함수 임 2) let 변수와 스코프 이벤트를 설정할 때의 값을 출력 합니다. 💡 요약 1) var 변수와 스코프 2) let 변수와 스코프

1) 글로벌 오브젝트에서 let변수를 this로 참조 불가 현재 위치는 글로벌 오브젝트 오브젝트에 설정됨 오브젝트에 설정되지 않음 에서 가 오브젝트를 참조 하며 이 오브젝트에 설정되어 있으므로 “음악”이 출력됨 에서 sports가 에 설정되지 않으므로 가 출력됨 2) 엔진 관점에서 let 변수 처리 변수를 블록 안에 작성해야 하지만, 블록이 없으므로 엔진이 블록을 만들고 이를 스코프로 사용하여 설정함 위에 언급한 것 같이 현재 에 변수에 할당한 값이 존재 이것은 를 하나의 블록 개념으로 에 작성한 모든 파일에서 공유 가능 1) 글로벌 오브젝트에서 let변수를 this로 참조 불가 2) 엔진 관점에서 let 변수 처리

1) let 변수 개요 블록 스코프를 가진 변수 변수가 선언된 블록이 스코프 스코프 적용 기준 블록, 문, 표현시 블록 안과 밖이 스코프가 다름 변수 이름이 같아도 값이 대체되지 않음 2) let 변수 선언 Syntax , 에 변수 이름 작성 식별자로 사용 는 생략 가능을 나타냄 값을 할당하지 않아도 됨 값을 할당하지 않고 변수만 선언할 수 있음, 초깃값 가 할당됨 콤마로 구분하여 다수를 선언할 수 있음 , 에 초깃값 작성 표현식 작성 가능, 평가 결과 사용 변수를 선언하고 초깃값을 할당했습니다. 콤마로 구분하여 다수의 변수를 선언하고 값을 할당한 형태임 발생, 을 처음에 한 번만 작성함 콤마로 구분하여 let과 var을 같이 사용할 수 없음 3) 블록 스코프 블록 기준 중괄호 블록 안과 밖이 스코프가 다름 변수 이름이 같아도 값이 대체되지 않음 블록 안과 밖에 를 작성했으며 스코프가 다르므로 같은 이름을 사용할 수 있음 변숫값이 대체되지 않고 유지 됨 블…

1) ES5의 실행 콘텍스트 처리 순서 함수 선언문 설정(함수부터 찾음) 변수 이름을 바인딩, 변숫 값은 (변수 이름 찾고 값은 라고 넣음) 소스 코드 실행 2) var 변수 호이스팅 코드 아래 이 존재 변수가 아래에 있지만 식별자 해결을 할 수 있음 단, 이 위에서 값은 이것을 이라고 함 식별자 해결을 하지 못하면 에러가 발생 3) let 변수 호이스팅 사용 불가 변수는 호이스팅되지 않음, 즉 변수 앞에서 변수 사용 불가 변수를 인식하는 시점 안에 변수 작성 1) ES5의 실행 콘텍스트 처리 순서 2) var 변수 호이스팅 3) let 변수 호이스팅 사용 불가

💡 요약 모든 파일에서 글로벌 오브젝트에 작성한 변수와 변수를 공유 안에 작성하면 공유하지 않음 변수를 어디에 선언하냐에 따라 저장 위치가 다름 1) 글로벌 오브젝트에 작성 : , , , 에 변수가 저장됨 : 에 설정됨, 공유가능 : 에 설정됨, 공유가능 처럼 의도적으로 작성하지 않아도 됨 : 에 설정됨, 공유 불가능 글로벌 오브젝트에서만 사용하는 로컬 변수로 사용 2) 함수에 작성 : 에 설정됨 : 에 설정됨 💡 요약 1) 글로벌 오브젝트에 작성 2) 함수에 작성

1) const 문법 구문: 값을 바꿀 수 없는 변수 선언(예외로 배열이나, 객체면 값을 바꿀 수 있음) 에 변수 이름 작성, 식별자로 사용 sports를 로 선언하고 값 할당 try 블록도 별도의 스코프이지만 const, let을 작성하지 않았으므로 sports 변수에 값을 할당하게 됨 이때 가 변수 이므로 에러 발생 2) JS에서 상수는 대문자 사용이 관례 가 이지만 값 형태에 따라 바꿀 수 있음 대문자 사용이 코딩 관례이므로 괜찮음 우선 이 아닌 사용 가능을 검토(우선순위 > > ) 3) const 변수 사용 변수 전체를 바꿀 수 없지만, 의 프로퍼티 값을 바꿀수 있음 book에 값을 할당하면 에러 발생, 전체를 바꿀 수 없음 프로퍼티 값은 변경할 수 있음 변수의 변경 불가는 에 값을 할당하는 것을 뜻 함 의 엘리먼트 값도 바꿀 수 있음 book에 값을 할당하면 에러 발생 엘리먼트 값은 변경할 수 있음 1) const 문법 2) JS에서 상수는 대문…

1) function 블록 도 블록 스코프 안과 밖에 같은 이름의 변수 선언 가능 스코프가 다르기 때문 그래서 밖의 와 안의 는 다르게 저장되어 있음 밖의 변수를 안에서 사용 가능() 2) try-catch 문도 블록 스코프 블록 기준으로 안과 밖에 같은 이름의 변수 선언 가능 블록의 안과 밖에 를 선언했으며 안과 밖이 스코프가 다르므로 변숫값이 각각 설정됨 에서 밖의 변수 사용 블록에서 값을 할당 변수가 없으므로 에러가 발생 블록 안에서 선언한 값을 출력하지 않고 밖의 값을 출력 함 3) switch-case 문도 블록 스코프 블록 기준으로 같은 이름의 변수 작성 불가 , 는 블록 스코프가 아님 블록 안에서 을 사용하여 선언한 변수가 있는데 다시 을 사용하여 변수를 선언하므로 에러가 발생 그래서 주석으로 처리 에러는 실행할 때 생기지 않고 컴파일 할 때 에러가 발생함 1) function 블록 2) try-catch 3) switch-c…

1) 일을 대하는 마음 책을 접하기 이전에 나는 약간의 매너리즘에 빠져있었다. 무언가 열심히 사는 것 같은데 스스로에 대한 확신이 없는채, 제자리 걸음을 하고 있다는 느낌이 강하게 들었었다. 그 때 이 책을 접하게 되었다. 단순히 직장이 돈을 버는 곳이 아닌 나를 시켜주는 좋은 장소라는 사실과 을 기를 수 있도록 해주며 내가 일하는 을 파악할 수 있는 곳. 저자의 말을 통해, 현재 다니고 있는 직장에 대한 불평 불만 보다는 앞으로 성장할 나의 모습에 있어서 좋은 밑거름이 될 수 있다는 확신이 들었다. 이외에도 책에서는 회사를 통해 성장 할 수 있는 다양한 방법을 소개 하고 있다. 그 중 마음에 와 닿았던 부분을 소개 한다. 이처럼 나에게 주어진 하루 중 대부분을 일에 사용하는데, 이 시간을 통해 책에서 알려준 방법을 가지고 하나씩 실천하여 더 나은 미래를 만들고 싶다. 2) 경제적인 사고를 갖춘다는 것 일을 넘어 삶을 살아가는데 필요한 경제적인 사고에 대해서도 이 책은 많은 내용을…