현재 실습은 Counter 라고, +를 누르면 +1가 되고, -를 -1이 되며 0을 누르면 0으로 초기화 되는 간단한 실습이다.1. HTML + JS이는 HTML 과 JS를 통해 구현한 방법이다. 아마 내가 자바스크립트를 어떤 것을 만든다면 이렇게 구성을 했을 것이다. Counter - HTML + JS 파일 경로: - 0 + 0  이렇게 body 부분은 이러한 형식으로 구현을 했을 것이다. 각 버튼에 이벤트를 걸고, 그것에 맞춰서 함수를 만들어 구현 했다.아래는 자바스크립트 부분이다. 중간에 filepath의 경우는 파일 경로를 동적으로 출력해주는 것이다. 이제 화면 갱신하는 부븐에서는 id가 counter인 요소..

이번 리액트 수업하기 전, 간단하게 자바스크립트로 Todo List를 실습해보는 것이다.나는 사실 자바스크립트로는 로그인, 회원가입을 제외한 기능을 구현해본 적이 없다. 즉 게시물이라던지 화면에서 삭제하고, 그런걸 제대로 해본 적이 없다. 그래서 이번 실습을 할 때, 코드는 이해가 되었으나 뭔가 바로 구현을 하기에는 좀 어려움이 있었다. 일단 순서대로 진행을 해보겠다. 아래 기본적인 화면이다. 할일을 적는 input과, 추가 버튼, 그리고 리스트와 삭제 버튼이 있다. 차근차근 진행해보겠다.일단 html 코드이다. Todo List - 목록 조회 :) 파일 경로: 쇼핑 목록 ..

1. 프로젝트 소개나이키 공식 홈페이지의 클론 코딩 2. 프로젝트 설명프로젝트 기간2024년 10월 14일 ~ 2024년 11월 1일 사용 기술Programming LanguageJavaScriptStylingCSSFormattingESLint, PrettierVersion ControlGit, GithubDesignFigmaCommunicationNotion, Discord3. 프로젝트에서 맡은 역할3-1. 로그인나이키는 로그인 시 위와 같이 이메일 입력이 나오는데, 이메일이 기존에 존재하다면 바로 패스워드 입력 페이지로그게 아니라면 체크 약관 페이지로 넘어간다. 3-1-1. 이메일이 존재하지 않을 때  이렇게 이메일이 존재하지 않는다면 약관 페이지로 가는데, 위와 같이 체크에 대한 유효성도 추가해놨다..

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..