[아티클 프로젝트] Index

---

2021.11.14

아티클 프로젝트는 100개도 못채우고 60개의 아티클을 보고 요약하느 것으로 끝났네요.

아티클뿐 아니라 서적도 읽고 다양한것을 읽는 것을 목적으로.. 의지를 다시 다지며..

카테고리 명을 읽고 요약으로 바꿨습니다..

아자아자화이팅..

---

 

 

카카오프로젝트100이라고 하루에 하나씩 무슨 미션을 가지고 100일간 진행하는 프로젝트가 있습니다.

저는 알게된지 얼마되지 않았지만 이번년도 8월에 시즌3가 시작되는가보군요.ㅎㅎ..

https://project100.kakao.com/project/2166/introduce

카카오프로젝트100

 

velog에서 어떤 분이 기술 아티클을 읽고 간단하게 기록하는 프로젝트를 진행한 것을 보고,

매일은 못할 것 같아 100일이 아닌 100개의 아티클로 프로젝트를 진행해보려고 글을 씁니다.

+++++ 2020.08.28

그냥 아티클 읽기로 변경합니다.

카카오100 프로젝트를 따라하기전에 저는 기술블로그를 가끔 봤었습니다.

예를 들어 이주나 한달이라는 기간을 두고 한번 몰아본다던가.

이러다보면 놓치는 글들도 굉장히 많고 뒤에 작성되어있는 좋은 글들을 거의 안봅니다.

또한 최신글들은 최신이 아니게 되는 경우도 생깁니다. 

(예를 들면 크로미움 블로그 같은 경우? 업데이트에 대한 내용을 놓치고 뒤에 알게되는 경우라던가..)

 

근데 이 프로젝트를 한달 진행해보니 평소에 기술블로그를 기웃거리는 행동이 굉장히 좋고....

하나의 일상 루틴이 되어야하는구나 생각했습니다. 따라서 이 프로젝트 진행은 의미가 없을 것 같아서 아티클 읽기로 변경하기로 결심했습니다.ㅎ 

+++++

 

당장 어떤 아티클을 봐야할 지 막막했기에...

이 프로젝트를 접하게해주신 rkdrhksdn님의 리스트에서 몇가지를 정해서 읽고 따로 찾아보는 글들을 읽을 예정입니다.

무조건 순서대로 보기에는 관심있는 분야가 다를 수도 있기 때문에 전체적으로 따라가지는 않을 것입니다.

제가 잘 해내길 바라며 아자아자! 화이팅~^^

 

rkdrhksdn님 블로그 바로가기

2020년 상반기. 양질의 기술 아티클 모음

 

 

	아티클 링크	요약
1	UI를 개선할 수 있는 9가지 방법	completed
2	성착취 방지 기법 소개	completed
3	개발자도 알면 좋은 UI 디자인	completed
4	let, const와 블록 레벨 스코프	completed
5	하루에 1000번 배포하는 조직되기	completed
	휴가
6	JSON.stringify() 5가지 숨겨진 기능	completed
7	은닉을 향한 자바스크립트의 여정	completed
8	클린봇 2.0: 문맥을 이해하는 악성 댓글(단문) 탐지 AI	completed
9	ShadowDOM	completed
10	프론트에서 안전하게 로그인 처리하기	completed
11	10 Things Front-End Developers Should Learn in 2020	2020년 반이 지난 지금에서야 읽게되서 내가 얼마나 트렌드를 잘 아는지 반성하게되는 글이었다.  요약하기에는 너무 방대한 포스팅이 될 것 같은 주제들이기때문에 요약보다는 감상평만 작성해야겠다. 부끄럽지만 몰랐던 키워드들도 있기에 공부 좀 해야겠다.
12	우린 Git-flow를 사용하고 있어요	completed
13	clean-code-javascript	completed
14	나는 프론트엔드를 안다고 말할 수 있을까?	쉬어가는 글 이 글을 그냥 지나치지 못한건, 첫번째로는 참여하고 싶었던 멘토링 프로젝트에 멘토로 있는 분이 작성자였다. 두번째로는 내가 항상 어려워했던 '프론트엔드'라는 직업에 대한 글쓴이의 생각이 담긴 글이었기 때문이었다. 퍼블리셔에서 프론트엔드로 이직하는 사람들도 많고, 업무적으로 경계가 참 모호한 경우를 많이봤다. 큰 회사가 아닌경우 프론트엔드가 혹은 퍼블리셔가 클라이언트 업무를 다하는 경우가 많다. 그렇기 때문에 내가 질문에 대한 해답을 찾지 못하고 있는 것 같다. "'프론트엔드'는 이런일을 하는 사람이라면, '퍼블리셔'는 이런일을 하는 사람이지!" 기준에 대한 결론을 스스로 내리고도 생각이 바뀌는 순간이 반복해서 생겼다. 또 많은 커뮤니티에서 이 문제로 논쟁이 일어나는 것도 많이 봤다. 다들 자기들의 기준이 존재했고 그 기준이 서로 다르기 때문에 발생한 일이었다. 하지만 난 몇년이 지난 지금도 잘 모르겠다. 글을 읽는 동안 나와 같은 고민을 하는 사람이 있다는 동질감과 함께 글쓴이가 글을 참 재밌게 잘쓴다고 생각했다. 스토리텔링을 잘했다.읽는 동안 지루하지 않았다. 물론 글에서 해당 문제에 대한 답변을 제시하지는 않는다. 글쓴이 스스로가 그렇게 작성한 포스팅이 아니라고 말하고 있다. 스스로 깨닫아야하는 문제이기 때문일까.. 언젠간 나도 이 모호한 경계에 기준을 세울 수 있는 날이 오길 바란다.
15	자바스크립트 테스팅의 기초	completed
16	TDD의 소개	completed
17	리액트 테스트의 소개 Enzyme를 사용하여 리액트 컴포넌트 테스트	completed
18	react-testing-library 를 사용한 리액트 컴포넌트 테스트	completed
19	react-testing-library 를 사용하여 TDD 개발 흐름으로 투두리스트 만들기 비동기적으로 바뀌는 컴포넌트 UI 테스트	completed
20	Javascript Clean code resuorces	completed
21	github flow	간단하게 흐름을 볼 수 있다. 너무 기초적인 내용이고 브랜치 관련 내용이 없는 페이지기는 한데 ui/ux 표가 너무 귀엽다. 내 프로젝트에 접목해보고 싶다.
22	처음 발표를 준비하는 개발자들이 알아두면 좋을 것들	주말에는 코드를 본다고 블로그를 잘 안하는데, (변명) 그럴때마다 간단한 글들만 보게되는 것 같다. 정리하기 애매한 글이어서 들어가서 간단히 머리식힐겸 보는게 좋을 것 같다. slides.com을 사용하는 동료들을 많이 봤는데, 여기서도 추천하고 있다. 구글독스를 주로 쓰는데 나중에 발표할 기회가 생긴다면 slides를 사용해보도록 해야지.
23	2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)	completed
24	카카오 개발자가 카카오스럽게 일하는 방법 – 애자일코치파트	몇일 전 업무에서 겪은 주도성과 관련이 있다면 있고 없다면 없는 사건이 있었는데, (자세하게 적을 순 없지만) 크리티컬할 수 있는 이슈 임에도 협업 팀으로 부터 좋지않은 피드백을 받았습니다. 해당 글을 읽고나니 역시 좋은 회사는 좋은 문화가 있고 좋은 문화를 만들어가는 사람들이 있다는 것을 새삼 더 느끼게 된 글입니다. 이호정님이 작성하신 글에서 과거 행적부터보면 본받을만한 것이 많은 것 같습니다. 많은 도전이라고 할까. 누군가를 가르친다는건, (설득하고 이해시킨다는건) 대단하거든요.  신기한건 애자일코치?라는 말을 처음 들어봤습니다. 뭐 원체 아는게 많지 않은터라 해당 키워드로 검색해보았는데요. 생각보다 많은 글들이 있고 과거부터 있더라구요. 애자일 개발론으로 개발하는 기업 내에서 여러 역할(컨설턴트, 리더 등)을 맡아하시는 분들을 뜻한다고 합니다. 제가 재직 중인 회사에서도 애자일 방법론으로 개발하는데, 성공적인 애자일이라고 할 수는 없는것 같습니다. 애자일이란 짧은 주기의 개발 단위를 반복해서 하나의 큰 프로젝트를 완성하는 개발 방법론인데, 이것을 잘못 이해(?) 악용(?) 하는 경우에 해당하는 느낌을 받을때가 많아요. 저만 그렇게 느끼는것도아니고, ㅎ 보통 애자일 개발방법론을 잘못이해하고 '짧은' 개발기간만을 내세우는 경우가 종종 생기는 것 같거든요. 여튼 비오는 날 가볍게, 빠르게 읽기 좋은 글이었습니다.
25	React밖에 모르는 당신에게. GatsbyJS한 잔, '채용~'	completed
26	[CSS 방법론] BEM 방식	completed
27	ES6부터 ES2020까지 01. ES6 간단하게 알고가기 (원본 글 링크들은 해당 글에 있음)	completed
28	ES6부터 ES2020까지 02. ES7, ES8 간단하게 알고가기 (원본 글 링크들은 해당 글에 있음)	completed
29	ES6부터 ES2020까지 03. ES9 간단하게 알고가기 (원본 글 링크들은 해당 글에 있음)	completed
30	ES6부터 ES2020까지 04. ES10, ES2020 간단하게 알고가기 (원본 글 링크들은 해당 글에 있음)	completed
31	취업 준비, 6주간의 회고록	개발자를 목표로하고 공부를 시작, 유학을 갔다온 글쓴이. 생각이 많아지는 글이었고 정리도 잘해주셔서 읽을때 편안한 기분이 들었다. 정말 생각이 많아진다고 밖에 할 수 없는 글 같다.
32	포스트모템: 스타트업 기술 블로그 모음 기술블로그 모음	(+ 실시간으로 갱신되는게 아니라 1주 단위?로 갱신하는 듯 하다. 최신글들을 확인하려했는데 6일이전 글들이 최신이네....) 와 이건ㅋㅋㅋㅋ 기술블로그 글들을 찾아 읽고있는데, 내가 아는 곳 외에도 어디 좋은 블로그 없나하고 서치하다가 알게된 글이다. 글쓴이 너무 대단한데..? 기술블로그 모음페이지를 만들게된 동기와 후기에 관한 글이다. 날짜별로 글 목록이 정렬되서 덕분에 쉽게 기술블로그들에 접근 할 수 있을 것 같다. 짝짝짝
33	SEO 그것을 알려드림	completed
34	[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (1탄)	completed
35	Chrome 86: Improved Focus Highlighting	completed
36	[SOCAR FRAME 만들기 #3] 컴포넌트, 제대로 만들어 쉽게 쓰자! (2탄)	1탄 이후로 2탄을 보았다. 매주 회의. 개발할 시간이 부족하여 작은 단위(쉬운 단계) 의 컴포넌트 우선순위 개발 타 회사 컴포넌트 개발기는 어떤식으로 진행되는지 궁금했었는데, 재밌다.
37	웹팩 핸드북	간단히 빠르게 배울 수 있는 핸드북이라 15분정도 훅 읽었다. 모르는 정보를 몇가지 얻어간다. 이유를 잘 모르고 썼던게 있었는데 스스로 부끄럽기도했다. 핸드북을 보고 개발용, 배포용 설정을 분리해서 머지시켜 사용해야하는 부분에 대해 키워드를 얻었다. 캡틴판교님 강의 인프런에서 본 적 있는데 ㅎㅎ 멋진분이다.
38	포커, 어디까지 쳐봤니 – 서비스 개발에 플래닝 포커 도입 사례 (feat. 원격근무)	아티클을 읽고 플래닝 포커에 대해 알아봤다. --> completed
39	JS스럽게 좋은 코드 쓰기 꿀팁	1. 비구조화 할당 2. 템플릿 문자열 `(backtick) 사용 3. spread operator const obj = { ...obj1, ...obj2, num : 300 }; const arr = [ ...obj1, num : 300, ...obj2 ]; 4. loop  reduce, map, filter.. 5. async/await 당장 리팩터링할때 쓸수있는 간단한 것들!
40	취준생이 반드시 알아야 할 프론트엔드 지식들 (프론트엔드 전반)	completed
41	DOM, BOM이란	completed
42	[아티클 프로젝트 042] NAVER FE devtalk: 디자인 시스템에 대한 소개와 효율성 개선 및 구축 경험공유 - 플랫폼 디자이너 없이 디자인 시스템을 구축하는 프로덕트 디자이너의 우당탕탕 고통 연대기	completed
43	FE플랫폼팀이 궁금하세요? – 함께 성장해가는 개발팀 이야기	많은사람이 가고 싶어하는 카카오의 FE팀 스토리를 볼 수 있는 글이다. 대단하기도하고 부럽기도하고 간접경험으로 공부의 의지가 뿜뿜해지는 글이다.
44	웹 프론트 속도 개선을 위한 필수도구 소개	프론트 분석 툴에 대한 소개 글. 보통 나는 구글 개발자도구를 통해 확인했었다. 한계가 있는 것을 알고있지만 단순한 속도계산이라면 충분했다고 생각했는데, 제니퍼 프론트르 보면 에러에 대해 로그가 자동 수집되는 기능은 정말 유용한 것 같다. 내부에서 가끔 특정 PC에서 에러가 나는 경우가 있는데, 이때 에러가 나면 추측하거나 해당 PC에서 현상이 재현될때까지 기다리고는 했다.  무료라서 사용해볼까하고 들어갔는데, 구글 애널리틱스처럼 추적 스크립트를 심어야했다.(당연하긴하지만) 당장 운영에 투입되기는 힘들것 같고 개인적인 프로젝트에 넣 어보면 좋겠다는 생각을 했다. 좋은 정보 획득! 제니퍼 사이트 jennifersoft.com/ko/partner/list/ 제니퍼 프론트 사이트 front.jennifersoft.com/about/ko/
45	TypeScript를 활용한 서비스개발	Typescript 활용 관련 글을 읽다가 ORM에 대해 궁금해져서 찾아봤고 ORM에 대해 요약한 포스팅이 나왔다. completed
46	[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선	completed
47	취준생이 반드시 알아야 할 프론트엔드 지식들	completed
48	2020년과 이후 JavaScript의 동향 - WebAssembly	1편에 이어서 2편을 봤는데, wsam이 2019년 말에 웹 4번째 공식언어로 권고되었다는 내용이다. wasm이 추가되어서 고급언어와 저급언어 모두를 웹에서 사용할 수 있게 되었다는데, 어떠한 변화가 생길지는 나로서는 잘 모르겠다. (어렵기때문) 관련 설명과 소개가 자세히 되어있어서 읽어보기에 좋은글이지만.. 스크롤이 내려갈수록 내가 모르는게 많이 나와서 검색을 하면서 읽게된 글이다.
49	Chrome is deploying HTTP/3 and IETF QUIC	completed
50	취준생이 반드시 알아야 할 프론트엔드 지식들 - Javascript (AJAX/ 이벤트 버블링, 캡쳐링)	completed 너무 졸린 월요일 간단히 훅훅읽기
51	User-Agent Client Hints의 도입, UA 프리징을 대비하라	completed
52	취준생이 반드시 알아야 할 프론트엔드 지식들 - 실행 컨텍스트 스택 (Execution Context Stack)	completed
53	취준생이 반드시 알아야 할 프론트엔드 지식들 - 스코프, 호이스팅, 클로져	예전에 포스팅했었는데, 짧고 굵은 글들이다. 다시보니 새로 알게된 내용이 있었다. (기억저편으로 넘어간 것일수도...) "프로그래머가 코드를 짤 때, 변수 및 함수/블록 스코프를 어디에 작성하였는가에 따라 정해지는 스코프 를 렉시컬 스코프라고 한다. "렉시컬(Lexical)" 이라는 명칭이 붙은 이유는 자바스크립트 컴파일러가 소스코드를 토큰(Token)으로 쪼개서 의미를 부여하는 렉싱(Lexing) 단계에 해당 스코프가 확정되기 때문이다"
54	취준생이 반드시 알아야 할 프론트엔드 지식들 - 네이티브 객체와 호스트 객체 (그외 completed 출처란 참고)	completed
55	this의 바인딩	completed
56	[도전과 괴로움] 승무원에서 개발자로	이번년도는 너무 힘들었다. 힐링도 좀 하고 싶고, 몸도 튼튼, 마음도 튼튼하게 그리고 가장 중요한 프론트엔드 공부를 좀 더 재 정비하고 싶다. 이직을 해야겠다고 차차 생각한지 시간이 많이 지나고서야 근래 퇴사하겠다는 의사를 전달했다. 쉬는동안 무엇을해야할 지 아직 확정하지않았지만 후회없는 시간이길... 바라고있다. 기술적인 아티클을 읽는것도 좋지만 삶의 권태기에서 타인의 도전을 보며 다시 마음잡기엔 좋은 글이었다.
57	취준생이 반드시 알아야 할 프론트엔드 지식들 (var va let va const)	completed
58	IIFE (Immediately-Invoked Function Expression)자바스크립트의 IIFE	completed
59	모듈 시스템: CommonJS, AMD, UMD, ES6	completed
60	콜 스택(Call stack)과 힙(Heap)	completed

 

 

 

---

 

읽기

Typescript 핸디북

joshua1988.github.io/ts/

무료로 서비스를 모니터링하는 3가지 방법

blog.dochis.net/2020/09/06/Ways-to-Monitor-Service-for-Free.html?utm_source=velog&utm_medium=post&utm_campaign=399f85b4-8680-40c9-8c38-becfe3794eb2

타입스크립트 

https://meetup.toast.com/posts/247

2. 단항비트

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

https://poiemaweb.com/js-data-type-variable#24-%EB%B3%80%EC%88%98-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85variable-hoisting