1. 처음 config 파일을 만들어, 키를 저장하였다. 그리고 key를 사용하는 곳에, config import를 하여 config 파일을 가져왔다. 그리고 gitignore파일에 config파일을 추가하여, 깃허브에 올라가지 않도록 했다.근데 여기서 문제가 발생했다. 바로 이 config 파일 자체를 읽지 못하여, 키를 못가져오는 상황이 되버렸다defined 에러를 보이며 키를 못받아와 소셜로그인을 하지 못했다. 그래서 여러가지를 찾아보다 .env파일을 추가해 여기에 키를 추가시켜 보안처리를 하고, process.env를 하여 키를 가져오는 방법을 했지만, 이 방법은 node에서 사용하는 방법으로, 자바스크립트에서 사용하려면 다른 방법을 해야햇다. 바로 import.meta.env.VITE.식별자 를..

하루하루에 많은 코드들이 수정이 되고, 구현이 되어간다.3일차 혹은 4일차이다. 이제 CSS가 대략적으로 완성이 되어가서 대략적인 CSS를 보여주겠다.원래 hover를 했을 때, 저렇게 생각이 변하지 않았는데, 공홈을 들어가보니 색상이 변하는 거였다. 그래서 코드퍼펙션을 위해 저렇게 스타일을 주었고, tabindex를 주어 웹접근성을 향상시켜주었다. tabindex란 tabindex 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다.tabindex를 넣게되면 Tab키를 이용하여 움직일 수 있다. 근데 이것말고도 방향키로도 움직일 수 있는 것이 있다고 하는데, 그것은 다음에 기능 구현이 다 끝나면 그때 ..

1일차에 이어 하자면, 페이지를 구현하다 저 눈 표시가 고생을 많이 한 것 같았다. 저  버튼을 누르면 비밀번호가 보이고, 그리고 다시 눈 표시를 누르면 비밀번호가 보이지 않는다. 처음 인풋안에 아이콘을 넣는 것 또한 고민이 많이 되었다. 일단 처음에 어떻게 넣어야 하지, 그리고 어떻게 구현을 해야할까 구글링을 해보았다. 구글링을 보니 토글 형식으로, 누르면 작용을 하게 해놨다.일단 CSS 경우는 DIv로 저 input과 icon을 감싸고 감싸는 div를 relative로 만든 후, 아이콘을 absolute로 만든 후.close,.open { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: point..

1. 마크업 완성 시키기현재 내가 맡은 부분은 로그인 및 회원 가입이다.나이키 공식 홈페이지를 보면, 여기는 로그인과 회원가입이 따로 구분을 하지 않았다. 이메일을 입력하면 만약에 없다는 가정하에 아래와 같이 약관동의 페이자가 나온다.그 뒤에이렇게 입력 폼이 나오면 회원가입이 끝난다. 오랜만에 이러한 프로젝트를 진행하는데, 처음 프로젝트 세팅부터가 오래 걸린 것 같았다. 패키지 설치 및 노션 정리, 컨벤션 회의 등등....프로젝트 하기 전에는 많은 준비가 필요했다. 근데 당연한 것 같다. 하루 이틀 프로젝트도 아니고 3주짜리에, 이는 파이널을 위한 연습이기에 더욱 확실한 준비가 필요했다. 그래서 우리조의 경우는 빠르게 노션, 패키지를 정리한 후 각자 맡을 기능들을 빠르게 정했다. 나는 예전에 로그인 회원..

1. 에러 처리의 필요성우리는 코드를 작성할 때 에러를 발생하지 않는 코드를 작성한다? 이것은 있을수가 없다.그래서 우리가 에러가 났을 때, 대처할 수 있는 방법이 몇가지 있다. 그 중에 소개해 줄 것은 try..catch..finally 문이다. 1-1. try .. catch .. finallytry catch 문을 사용하여 발생한 에러에 적절하게 대응하면, 프로그램이 강제 종료되지 않고 계속해서 코드를 실행할 수 있다.console.log('[Start]');try { foo();} catch(error) { console.error('[에러 발생]', error); // 에러 발생}// 발생한 에러에 적절한 대응을 하면 프로그램이 강제 종료되지 않는다.console.log('[End'); c..

REST REpresentational State Transfer는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개되었다. 발표 당시의 웹이 HTTP를 제대로 사용하지 못하고 있는 상황을 보고 HTTP의 장점을 최대한 활용할 수 있는 아키텍쳐로서 REST를 소개했고 이는 HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다. REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful" 이라고 표현한다. 즉, REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐고, REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 1. REST API의 구..