전체글 목록 103

(항해81일차) 220525 리액트 실전프로젝트 34일차

소셜로그인 구현 과정 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 프로젝트에서..

(항해79일차) 220523 리액트 실전프로젝트 32일차

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 속성값 생략은 어떤 경우에 가능할까요? 논리형 속성이라 불리는 속성명과 속성값이 일치하고 경우의 수가 하나 밖에 ..

(항해74일차) 220518 리액트 실전프로젝트 27일차

마이페이지에서 사용할 모달을 만들고 있다. 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

(항해73일차) 220517 리액트 실전프로젝트 26일차

뷰 작업과 기능구현 중 생각하지 못했던 부분을 추가하고 있다. 서비스 개시가 다가올수록 마음은 조급해지는데, 이상하게 해야 할 일은 점점 늘어나는 기분이다. 오늘만 하더라도 오전에 마이페이지 뷰 작업을 마치고 오후에 마이페이지 관련 모달창을 만들 계획이었지만, 오전에는 회의로 시간을 보내고 오후에는 추가정보를 받는 페이지에서 이런저런 수정작업을 거치다 보니 생각보다 작업 더디다. 결국 오늘은 마이페이지 뷰 작업까지만 마칠 수 있었다. 이번주에 서비스를 개시해 유저 피드백을 받아보려면 늦어도 금요일에는 작업이 완료되어야 할 것 같아서 걱정이 된다. 디자인이 늦어져 기능을 구현하고 뷰작업을 진행하다 보니, 같은 일을 여러 번 하게 되는 것 같다. 이번 프로젝트를 진행하면서 왜 기획이 중요한지, 기획자와 디자..

(항해72일차) 220516 리액트 실전프로젝트 25일차

프로필 사진으로 쓰일 파일을 받기 위해 서버에 보내는 데이터의 형태를 폼데이터객체로 변경했다. 기존에는 제이슨 구조로 데이터를 보냈으나, 몇 가지 이유가 있어 폼데이터객체를 사용하게 되었다. 1. 폼데이터는 폼 안의 모든 데이터를 스트링으로 변환할 필요 없이 인코드할 수 있다. 2. 서버에서 별도의 과정없이 데이터를 받을 수 있다. 3. 폼데이터를 사용하지 않고 이미지파일을 dataURL로 변형해서 보낼 수 있지만, 훨씬 길어지고 오류가 발생할 수 있다. 다만 폼데이터객체로 서버와 통신할 때는 get, post 로만 요청할 수 있다는 단점이 존재했다. 이후 프로필을 수정하기 위해서는 삭제요청 후 다시 다른 파일을 업로드하는 방식으로 구현해야 할 듯 하다. 폼데이터에 전송할 데이터를 추가할 때는 .appe..

(항해99)의 10주차 (220509-220515) WIL

개인적인 사정으로 3일동안 프로젝트에 참여하지 못하면서 일정이 매우 빠듯해졌다. 자리를 비운 사이에 중간발표가 있어 걱정했는데 다행히 다른 팀원들이 고생해 준 덕분에 잘 진행될 수 있었다. 이번 주에 뷰 작업을 많이 진행해야 했지만 중간에 크게 공백이 생겨 작업 진행에 차질이 생겼다. 우선 급한대로 로그인 페이지부터 뷰작업을 진행하고 있다. 우리 팀은 피그마를 활용해 디자이너님과 기획회의를 함께 진행했는데, 실제로 구현해보니 많이 크다는 생각이 든다. 그래서 왜 그럴까 관련 내용을 찾아보니 다른 웹사이트에 비해 컨텐츠의 width를 많이 크게 잡은게 원인이었다. 반응형 웹을 만들기에는 시간이 부족하고, 또 화상채팅이 핵심기능인 만큼 반응형이 크게 필요치 않다고 생각해서 컨텐츠 크기를 고정하는 적응형으로 ..

(항해65일차) 220509 리액트 실전프로젝트 18일차

TIL을 쓰는 주기가 점점 늘어지고 있다. 매일매일 써야겠다는 처음의 마음가짐은 실전프로젝트를 진행하면서 점점 흐려지고 있다. 그동안 미뤄졌던 뷰작업을 이제는 시작해야 하지만, 계속 수정사항이 생기면서 미뤄지고 있다. 메인페이지의 리스트에서 튜터를 선택할 경우 detail페이지에서 보여주고 다시 수정할 수 있도록 만드는 작업을 진행했다. 여기에서 튜터정보를 리덕스의 어떤 모듈에서 서버로부터 받아올지 고민을 했다. 두가지 선택이 있었는데 첫번째로는 튜터 모듈에서 받아오는 방법이다. 일반적으로 여기에서 받는 것이 자연스럽다고 생각했지만, 나중에 마이페이지에서도 똑같은 데이터를 받아오는데 따로 api를 만드는 것이 불필요하다는 생각을 했다. 그래서 생각한 두번째 방법은 유저안에 detail이라는 상태를 만들어..

(항해99)의 9주차 (220502-220508) WIL

본격적인 기능구현이 시작된 한 주였다. 디자이너가 두 명 모두 나갔지만 다행히 새로운 두 명이 합류했다. 디자인이 상당히 늦게 나올 것 같아 우선 기능 중심으로 개발을 진행하고 있다. 내가 담당하는 부분은 유저정보로 로그인과 회원가입, 추가정보 등의 데이터와 관련된 기능을 작업했다. 공교롭게도 팀프로젝트가 시작된 후로 로그인, 회원가입 부분을 처음 담당했는데 고려해야 할 부분이 생각보다 많았고, 찾아보면 넣을 만한 디테일한 요소도 많이 있었다. 시간이 많다면 더 보강하고 싶은 것들을 적어 놓았다. 6주차 미니프로젝트 때에도 들었던 CICD와 관련된 부분을 이번 멘토링 때 다시 한 번 듣게 됐다. CICD는 새롭게 추가한 기능이나 수정한 내용을 실시간으로 배포하고 유저 환경에서 바로 확인할 수 있는 장점이..