프론트엔드 개발 찔찔이

들어가며이전에 다크모드 기능을 추가하여 만들었던 noteapp은 axios를 이용해서 REST API를 호출했다.데이터 서버는 json-server를 glitch를 통해 배포했고, axios에 사용한 URL도 glitch 사이트에서 배포한 URL을 넣었다.나중에 이 프로젝트를 누군가에게 배포할 때, 보안상 데이터 서버의 url을 그대로 컴포넌트에 넣어두기엔 불안했다.그래서 .env를 사용하여 나만의 암호키를 만들기로 했다. .env 사용법먼저 컴포넌트의 root 경로에 .env 파일을 생성한다.# /.envREACT_APP_API_URL = https://서버경로# /src/App.jsconst data = useFetch(`${process.env.REACT_APP_API_URL}/notes/`); n..

들어가며이전에 styled-components를 이용하여 다크모드를 적용할 수 있는 노트앱을 만들었다.지인에게 피드백을 부탁했는데 제목이 길어지면 말줄임 처리되고 툴팁으로 볼 수 있도록 해보라는 추천을 받았다.툴팁을 이용해 꾸미는것은 처음이라 적용해보며 배워보도록 하겠다. css를 이용한 말줄임 처리 아직 제목의 input이나 css에 아무 조치를 하지 않아서 무한하게 제목을 쓸 수 있다.input에서 maxLength를 이용하면 글자수 제한을 둘 수 있지만 반응형으로 진행하다보면 결국 두 줄, 세 줄로 늘어나게 될 것이다. css에서는 box 속성을 이용하여 말줄임 처리를 할 수 있다.display:-webkit-box; //box로 지정-webkit-line-clamp : 1 //1줄까지 보이게하기-..

들어가며현재 리액트로 만든 노트 앱에 styled-components 라이브러리를 활용하여 다크모드를 추가하고 있다.theme.js를 만들어 컬러칩을 설정했고, 라이트모드, 다크모드마다 색을 다르게 적용했다.이 중 input 태그(검색어 입력란)에 placeholder의 색을 바꾸려고 한다.    styled-components으로 input::placeholder 색상 바꾸기 보통 css에서 placeholder의 색상을 수정할 때는 after, before와 같은 방법으로 가상 선택자를 지정할 수 있다. css에서는 콜론이 두개(::placehoder) 쓰이고, styled-components도 동일하게 사용한다.//cssinput::placeholder { color:#333}//style-comp..

들어가며토이프로젝트로 필기노트 앱을 만들다가 여러 레퍼런스를 찾았다.그 중 다크모드를 구현한 토이프로젝트를 봤는데 styled components 라이브러리를 이용한 구현이 흥미로웠다.평소였으면 useState로 클래스 명을 바꾸면서 css로만 구현했을텐데 styled-components에 대한 장점이 많다고 하여 한번 구현해보고자 한다.  useState/css/삼항연산자를 이용한 다크모드먼저 평소에 사용하던 css를 이용하여 배경을 바꿔봤다. 아래에 다크모드 토글버튼을 만들었다.그리고 useState를 이용해서 ture면 다크모드, false면 라이트모드로 설정했다.//App.js(...)const [darkMode, setDarkMode] = useState(false); (...)function ..

지난 포스팅에서는 댓글 리스트를 불러와봤다.그리고 댓글 작성 시 나의 정보를 댓글 데이터에 추가하기 위해 암호화한 로컬스토리지를 저장하는 작업을 했다. 해당 작업으로 새로고침해도 로그인을 유지할 수 있도록 true 값을 저장하는 작업도 할 수 있었다.//Header.js 로그아웃 버튼에 추가 secureLocalStorage.setItem("AutoLogIn", false); //LogIn.js 로그인 성공 조건문에 추가 secureLocalStorage.setItem("AutoLogIn", true); //App.js 에 추가 useEffect(()=>{ const AutoLogIn = secureLocalStorage.getItem("AutoLogIn"); setLogInCheck(..

지난 포스팅에서 로그인, 로그아웃까지 만들었다. 이번엔 로그인한 상태에서 댓글을 달면 좌측에 리스트에 추가 시켜볼 것이다. 댓글 리스트 불러오기  먼저 data.json 파일에 리뷰 리스트에 해당되는 데이터 배열을 추가한다. "review": [ { "memName": "김철수", "memId": "kim1234", "day": "2024-05-32", "content": "잘 보고 갑니다.", "id": "6082" }, { "memName": "홍길동", "memId": "hong1234", "day": "2024-05-32", "content": "항상 행복하세요.", "id": "5004" ..

리액트로 팀 프로젝트를 시작하기 전에 초기 설정이나 규칙같은 것들을 정리하고자 글을 썼다.리액트를 독학하고 홈페이지에 어떻게 써야할까라는 의문이 항상 들었는데회사에서 마음이 맞는 퍼블리셔들끼리 팀 프로젝트를 할 수 있게 되어 이렇게 시작하게 되었다. 일단 내가 github에서 organizations를 만들어 팀원들을 초대했다.무료버전이다 보니까 Rulesets를 설정할 수 없어서 README 파일에 규칙을 기재해야할 것 같다.규칙은 계속해서 추가할 예정이다. 1. 깃 협업 배포 순서1. fetch 및 pull : 코드 수정 전 최신 코드를 로컬로 받기2. commit : 작업 완료 후 코드를 수정하고 commit 3. fetch 및 pull : 다시 원격 저장소에서 최신 변경 사항을 가져온다.4. 충돌..

지난시간에 구현했던 LogIn.js 컴포넌트에서 로그인이 되면 setLogIn(true)가 되도록 하였는데,결국 true 값을 home, header 등으로 보내야하기 때문에 App.js를 기준으로 props를 전달하기로 했다.  function App() { return ( } /> } /> } /> );}기존에 구현했던 코드에서 LogIn 컴포넌트에서 데이터를 받아야하고, Home, Header에 데이터를 보내야 한다.  이럴때 가장 쓰기 좋은 방법은 App.js에서 useState를 만들어 데이터를 보내고 받는 방법이다. const [LogInCheck, setLogInC..

현재 나는 리액트를 독학으로 공부중이다.지금은 리액트로 서버 데이터를 주고받는 연습중인데,이전에는 fetch 메서드로 REST API를 호출했다면 그보다 더 쉽다는 axios를 이용하여 REST API를 호출할 예정이다. 현재 회사의 퍼블리셔들끼리 스터디를 진행하여 프로젝트를 만들 예정이고 거기서 나는 로그인을 구현하기로 했다. 일단 우리는 백엔드 개발자가 아예 없는 관계로 프론트 상에서만 구현을 해야한다.   내 유일한 코드 리뷰어 챗 GPT는 대충 "가능은 하지만 학습용으로만 사용하고 실제로는 반드시 백엔드와 연동해라"라고 한다.  일단 머리로는 아이디 비밀번호를 치면 데이터를 얻어와서(GET) 비교한 후에맞는게 있으면 로그인, 없으면 back하면 되는거 아닌가? 했는데.. GET: 주로 데이터를 조..