지코딩

어떤 요소에 이벤트가 발생하면, 그 이벤트의 흐름을 세 단계로 나눌 수 있다. 1. 캡처링: 이벤트가 하위 요소로 전파되는 단계 2. 타겟요소: 이벤트가 실제 발생하는 가장 하위요소 (자주 사용하는 e.target) 3. 버블링: 이벤트가 상위 요소로 전파되는 단계 해당 이벤트에 대한 이벤트핸들러를 특정요소에 할당하면 버블링에 의해 타겟요소 뿐 아니라 최상위 조상요소까지 순차적으로 할당된 이벤트핸들러가 동작한다. 그래서 e.target은 이벤트가 발생된 최하위요소 / e.currentTarget은 이벤트핸들러가 할당된 요소라는 차이가 있다. 버블링을 차단하기 위해서는 event.stopPropagation()이라는 메서드를 사용할 수 있지만, 꼭 필요한 경우가 아니라면 버블링을 막는 것은 권장되지 않는다..

항해99의 마지막 일정이 끝났다. 이번주는 대부분의 시간을 이력서 작성과 면접 준비로 보냈다. 99일 동안의 일을 다 기억하지 못할 만큼 짧은 시간안에 많은 내용들을 배웠다. 그 내용들을 어떤 식으로 정리해 취업준비에 활용할지 감이 잘 안 잡히기도 하고 프로젝트든 강의든 어떤 커리큘럼에 따라 움직이다가 갑자기 혼자 무엇인가 준비해야 하니 어떤 것 부터 해야할지 막막하기도 하다. 항해99에서의 시간은 14주라고 느껴지지 않을 만큼 빠르게 지나갔다. 처음 개발에 관해서는 아무것도 모르던 내가 이제 개발자가 되겠다고 이력서를 적고 있다. 여전히 리액트가 뭔지 잘 모르고, 볼 때 마다 새로운 자바스크립트 문법이 발목을 잡는다. 그럼에도 항해99에서 그렇게 강조했던 스스로 찾아보는 공부가 이제는 조금 익숙해진걸 ..

실전프로젝트가 끝나고 이제 이력서를 작성하며 그동안 작업했던 내용을 정리하고 있다. 간단하면서도 명료하게, 구체적으로 작성해야 한다는 말이 나를 압박하긴 하지만 이력서를 준비하면서 배웠던 부분을 한 번 씩 훑어볼 수 있는건 도움이 많이 된다. 사실 요 며칠 동안은 결과물에 대한 아쉬움과 미래에 대한 불안함으로 일이 손에 잡히지 않았다. 이력서를 작성하며 그 동안 내가 그래도 아무것도 하지 않은 건 아니었다는 생각이 들었을 때 마음이 조금 편안해졌다. 오늘 TIL의 주제는 이번 프로젝트의 개인적인 회고이다. 먼저 프로젝트를 진행하면서 꽤 많이 들었던 생각은 기획의 중요성이다. 어떻게 페이지를 구성하고 어떤 기능이 필요한지, 어떤 방식으로 사용자에게 기능을 보여줄지에 관한 부분이 기획단계에서 구체적으로 나오..

배포 후 진행 상황: 1. 피드백 반영 - 유저언어선택 관련 - 피드백 아이콘 - 사이트 언어설정 - 마이페이지: 좋아요 버튼 및 강사정보 - 회원가입 시 직관성 개선: 유효성 검사 완료 시 글씨 색 변경 - 인풋 창 글자 수 개선(한/영) - 이즈튜터 안내메세지 호버 2. 코드 리팩토링 - 폴더구조 개선 - 엘리먼츠 컴포넌트

길었던 프로젝트가 끝났다. 오늘은 실전프로젝트의 마지막날, 발표일이다. 밤을 새워가며 만들고 다듬었지만 사실 아쉬운 부분이 많이 남아 있다. 프로젝트가 완성 될 수록 나는 개발을 점점 모르게 되는 기분이다. 결과물이 어떻게 나왔든 6주가 지나고 나면 홀가분할 줄 알았는데, 전혀 그렇지 않아 놀랍다. 첫 프로젝트라 그런 것 일까? 마음이 무겁다. 그럼에도 배운 부분들이 많이 있었다. 프로젝트에 참여하는 자세나 협업과 같은 측면에서도 많이 느꼈지만 가장 중요한건 결국 내가 어떤 기능에 어떻게 기여할 수 있을지에 관한 문제인 것 같다. 사실 이번 프로젝트에서 내가 핵심 기능을 구현하는데 크게 역할을 하지 못해 더 아쉬움이 남았다. 어떤 기능에 집중할지 어떤 기능은 빠르게 구현할 수 있는 방법을 찾을지도 많이 ..

1. editUser기능 구현 2. 소셜로그인 구현 3. 프로필 이미지 삭제 기능 4. 다국어처리 관련 수정 5. 알럿창 sweet alert 사용 전체적인 뷰 수정 작업 및 소셜로그인, 작은 오류들 수정 배포 완료, 피드백 받는 중 배포할 때 까지 어떤 식으로 작업했는지?

소셜로그인 구현 과정 1. 기존 방식: 프론트에서 인가코드 받은 후 서버로 전달해 토큰 받기 2. 서버측에서 인증완료 후 토큰 받은 후 새로 토큰 생성해 넘기기 3. 이유는? 웹디자인, 해상도, 반응형 참고 https://hello-woody.tistory.com/8 웹 디자인 해상도, 적응형과 반응형 차이 처음 UI 디자인을 시작하였을 때 어려웠던 부분은 해상도였습니다. PC웹 혹은 앱, 모바일 앱을 디자인 들어갈 때마다 어떤 해상도를 기준으로 디자인 해야 할지, 반응형은 어떻게 대응해야 하는 hello-woody.tistory.com https://www.samsungsds.com/kr/insights/enterprise_ux_resolution.html [Enterprise UX] SI 프로젝트에서..

1. editUser 기능 구현: 기존에 있던 데이터 불러온 후 수정 사항 반영, input요소 radio의 checked (disabled와 readonly 차이, false일 때 오류가 발생하는 이유는?) http://www.tcpschool.com/html-tag-attrs/input-checked 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com https://dasima.xyz/html-attribute-omit/ HTML 속성값 생략 checked 및 disabled 예제 - dasima HTML 속성값 생략은 어떤 경우에 가능할까요? 논리형 속성이라 불리는 속성명과 속성값이 일치하고 경우의 수가 하나 밖에 ..

1. 전체 뷰작업 (로그인, 회원가입, 추가정보, 마이페이지 뷰 관련 작업) 2. 모달 창 만들기(프로필 수정) 및 연결 3. signupDB 연결방식 변경(폼데이터 적용) 뷰 완성+ 앞으로 해야 할 작업:

마이페이지에서 사용할 모달을 만들고 있다. 1. 모달 구현 시 포탈 사용하는 이유? 2. 모달에서 모달로 어떻게 연결했는지? 3. 기타 모달 관련 css 부분(뒷 배경 스크롤 막기, 스크롤바 생성, 배경 클릭 시 모달창 닫기 등) 배경 클릭 시 모달 닫기 https://velog.io/@altmshfkgudtjr/Redux%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-Modal-%EA%B5%AC%ED%98%84 예제 https://codesandbox.io/s/global-modal-with-react-rep1f?from-embed=&file=/src/App.tsx 예제설명 https://mygumi.tistory.com/406