min

오늘은 2시에 김태선 튜터님 께서 연봉 1억 받는 개발자 되는 방법이라는 제목의 강의 들었다. 이 강의에서 가장 중요한 키워드는 메타인지였다. 나는 이 말을 듣고 내 학창 시절이 생각 났다. 잠깐 나의 대한 TMI를 말하자면 나는 중학교까지 정말 노는 사람이었다. 왜 그랬는지 생각해보면 그때 나는 목표가 없었고 그로 인해서 내가 삶을 이어나가는 원동력이 없었던 거 같다. 그러다가 고등학생이 되기 전에 컴퓨터와 접점이 생겼고 그로 인해서 나에게는 컴퓨터와 관련된 직종으로 가야 겠다는 목표가 생겼다. 하지만 목표를 늦게 얻은 나는 앞으로 공부 방향은 어떻게 잡고 공부 방법을 어떻게 잡아야 하는지에 대해서 정말 막막했다. 그러면서 어떻게 공부를 하면 잘할 수 있는지 정말 많은 연구를 했었던 거 같고 그러면서 ..

1. XSS XSS는 (Cross-Site-Scripting)이라는 글자의 약자로 클라이언트 사이드 공격이다. 이때 이말을 듣고 클라이언트 사이드 공격이 무엇인지 궁금해하시는 분들이 있을 것이다. 클라이언트 사이드 공격은 웹 페이지에 이용자를 대상으로 공격하는 기법을 의미한다. 즉 XSS는 사용자 정보(쿠키, 세션, 토큰), 클라이언트 입장에서의 의도치 않은 공격 등이 있다. 그렇다면 실제 예시로는 어떤 것이 있을까? 1-1) stored / persistent 이름을 보면 정말 복잡해 보이지만 사실은 엄청 간단하다. 예를 들어 input 창이 있다고 가정하자! 이때 input창에서 데이터를 입력하면 입력한 데이터가 폼을 통해서 서버로 이동할 것이고 리소스에 저장될 것이다. 근데 여기서 만약 input ..

오늘은 유저테스트로 받은 요구 사항들에 대해서 고치는 시간이었다. 나는 기술적인 컨펌을 담당했으며 해경님같은 경우는 디자인적인 컨펌을 담당했다. 그래서 오늘은 내가 받은 컨펌들과 이를 어떻게 해결했는지에 대해서 쓸려고 한다.(전부 다쓰면 양이 많아지니 조금만.... ㅎㅎ) 1) 글자수 제한 예시(800 / 1000) 이를 구현할 때는 생각보다 어렵지 않았는데 그 이유는 저 800에 들어가는 value가 useState이기에 value가 변할 때마다 리 렌더링이 일어날 것이고 이로 인해서 글자수의 경우에는 계속 업데이트가 된다. 따라서 저 경우에서는 따로 어려운 작업을 해주지 않았다. 2) title 빈칸 alert() 창 띄우기 title이 빈칸으로 만들어진 문자열에 경우에는 validation이 통과하..

오늘은 만든 TodoList의 최적화 작업과 디자인 수정을 진행했다. 나는 최적화 작업을 진행했고 혜경님은 디자인 수정을 맡았다. 그래서 나는 오늘 TodoList의 어떤 부분들을 최적화 작업을 했는지를 설명하려고 한다. 1. Todo Insert Component 위 사진을 보면 working!!! 이라는 Drop Down 박스가 보일 것이다. 그리고 이 박스를 클릭하면 끝난 과제들의 리스트가 보이게 된다. 여기서 문제점은 클릭했을 때 TodoList, TodoToggleContainer는 리렌더링이 되어야 하는 것은 부정할 수 없는 사실이다. 하지만 여기서 TodoToggleContainer에 자식 컴포넌트인 StyledDropDown 컴포넌트는 리렌더링 되어서는 안된다. 이를 말로 설명하는 것 보다..

오늘은 혜경님과 함께 항해 99 2주차 숙제 리덕스를 활용한 Todo List 만들기를 진행했다. 오늘은 시행착오가 크게 2가지 정도가 있었다. 1. 리덕스의 불변성 관리 2. flex 이슈 그래서 오늘은 이 2가지에 대해서 어떤 시행 착오 였고 어떻게 이를 해결했는지에 대해서 써볼려고 한다. 1. redux 정말 못살아.... redux의 불변성은 강의에서도 언급한 정말 중요한 개념이었다. 하지만 나는 이 개념을 듣고 나서 이게 어떤 면에서 중요한지 왜 중요하지에 대해서는 잘 몰랐다. 그리고 이번 숙제를 하면서 왜 중요한지에 대해서 알게 되었다. 1-1) 문제 Todolist에서 완료, 삭제 버튼을 클릭했을 때 완료, 삭제가 적용되지 않는 문제가 발생했다. 자세히 말하자면 완료, 삭제 버튼을 눌렀을 때..

오늘은 항해 99에서 WIL로 state에 대해서 조사하라는 숙제가 있었다. 그래서 오늘은 내가 공부하면서 정리한 state라는 개념에 대해 설명하고자 한다. 1. state 도대체 뭐야? state를 한국말로 하면 "상태"를 의미한다. 이때 "상태"는 react에서는 간단하게 데이터라고 보면 된다. 즉 "state를 관리한다.", "state를 변경한다"라는 말은 "데이터를 관리한다", "데이터를 변경시킨다"라는 말로 재해석 할 수 있다. 그럼 state의 정의에 대해서도 살펴보았으니 state의 종류에 대해서 살펴보자 state는 크게 2가지 종류가 있다. 첫번째는 지역상태로 한 컴포넌트내에서의 데이터를 의미한다. 두번째는 전역 상태로 여러 컴포넌트에서 참조할 수 있는 데이터를 의미한다. 2. sta..

이번 일주일 동안은 정말 많은 것을 배웠다. 특히 저번주의 미션인 팀원들과 소통을 하기 위해서 알고리즘 주차와 이번 주특기 주차에는 여러가지 방안으로 노력해봤다. 간단하게 어떤 노력을 했는지 살펴보자. 1. 내가 먼저 팀원들에게 내가 만든 결과물을 보여주고 그것에 대하여 먼저 피드백을 받았다. 2. 만약에 모르는 개념이 나왔고 그것에 대해 고민해보면서 내가 옛날에 해당 문제와 관련해서 블로그에 적은게 있으면 그것에 대해서 설명하면서 최대한 모르는 개념이 없도록 하였다. 하지만 반대로 내가 아직 미흡한 부분들도 있었다. 1. 처음 팀원들을 만났을 때 거리낌 없이 인사하면서 친해지지 못한 것. 2. 팀원들과 모르는 개념에 대해서 고민하는 시간이 별로 없었던 것. 3. 내가 모르는 부분이 있을 때 자신해서 물..

나는 오늘 강의에서 브라우저의 렌더링 과정에 대한 워딩이 있어서 이것에 대하여 조사를 해볼까 한다. 1. CSR CSR은 Client Side Rendering의 줄임말이다. 말그대로 클라이언트 측에서의 렌더링을 의미한다. CSR의 동작 원리는 다음과 같다. 먼저 server 측에서 html,css,js등의 리소스를 주게 된다. 이를 받은 client 즉 browser는 DOM을 만들게 되고 이 만들어진 DOM을 가지고 렌더링 즉 페인팅을 하게 된다. 위에 설명한 과정을 들으면 알 수 있듯이 초기에 browser가 받는 데이터의 양이 굉장히 많다는 것을 알 수 있다. 하지만 다른 페이지를 이동할때는 가지고 있는 리소스를 가지고 DOM을 다시 그리면 되기 때문에 페이지 전환이 부드럽다는 장점이 있다. 2...