목록개발공부/TIL (67)
개발자 도전기
오늘은 인증과 권한 자격을 추가하여 멤버와 게시물 CRUD를 수정하였습니다. UPDATE가 신경쓸 부분이 많았는데 , 회원 정보를 수정하면 NAVBAR에 있는 회원 정보가 업데이트 되도록 service에서 회원 정보 수정 후 수정된 정보를 입력하여 토큰을 재발급하고, 리액트에서 Context로 주입하는 부분이 특히 어려웠습니다 public Map modify(Member member, Authentication authentication) { //업데이트 코드 mapper.update(member); String token = ""; // Authentication에서 Principal 가져오고 Jwt로 변환 Jwt jwt = (Jwt) authentic..
오늘은 회원 C,R,D 기능을 추가했습니다.회원 가입 화면에서 이메일과 닉네임 중복, 비밀번호가 동일한지, 필요한 입력값들이 모두 입력되었는지 등등을 확인하고 조건이 만족되지 않으면 가입 버튼이 비활성화 되도록 했습니다. 또, 회원 등록이나 삭제 버튼과 상호작용 후 결과를 토스트로 알려주고 삭제시에는 모달을 띄워 비밀번호 재확인 등의 기능도 추가해보았습니다! 2024.05.22 - [개발공부/React] - [React] useParams과 useSearchParams, 동적 경로 [React] useParams과 useSearchParams, 동적 경로useParams과 useSearchParams은 React Router와 함께 사용합니다. useParams()/user/:id 와 같은 다이나믹 UR..
오늘부터 프로젝트 실습을 시작했습니다~ 오늘은 리액트를 사용해 게시판 CRUD 기능을 구현했습니다확실히 JSP를 사용하는 것보다 편하다고 느껴지네요👍
오늘은 Chakra ui 사용법, 이벤트 버블링을 막는 방법과 preventDefault(), axios.postForm()을 사용해 파일을 전송하는 법을 배웠습니다. 이렇게 리액트를 마무리하고 내일부터는 프로젝트 시범에 들어가게 됩니다-!
오늘은 JWT 토큰과 React Router에 대해 배웠습니다! 2024.05.17 - [분류 전체보기] - [React] JWT 토큰 발급하기 [React] JWT 토큰 발급하기JWT 토큰이란?JWT(Json Web Token) 토큰이란 암호화된 Json 토큰으로 사용자의 인증 또는 인가 정보를 서버와 클라이언트 간에 주고받기 위해 사용됩니다 쿠키와 비슷하게 사용자가 로그인을 하면 서abc-datatype.tistory.com
오늘은 Axios를 사용해서 AJAX 방식으로 Get, Post 요청을 하는 법과 JSON 형식으로 데이터 전달하기, 상태코드에 따른 다양한 예제에 대해 배웠습니다 젠지가 이겨서 기분이 좋네요 2024.05.16 - [개발공부/React] - [React] AXIOS를 사용해서 Get, Post 요청(feat. JSON) [React] AXIOS를 사용해서 Get, Post 요청(feat. JSON)Axios는 백엔드와 프론트엔드의 통신을 쉽게 하기 위한 라이브러리로, 프레임워크에서 ajax를 구현하기 위해 사용합니다. AXIOS를 사용하면AJAX 방식으로 응답, 요청할 수 있습니다자바, 자바스크립abc-datatype.tistory.com
오늘은 initial render와 re-render, useEffect 사용하는 방법, 그리고 axios로 get 요청하는 방법을 배웠습니다여태 자바를 공부하다가 리액트로 자바스크립트를 사용하니 뭔가 낯설게 느껴지네요😂
javascript의 구조 분해 할당과 props를 사용해서 데이터를 전달하고 응용하는 법을 배웠습니다 2024.05.10 - [개발공부/React] - [React] Javascript 구조 분해 할당 [React] Javascript 구조 분해 할당구조 분해 할당구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식입니다 const a = { name: "son", age: 33, }; const aName = a.name; const aAge = a.abc-datatype.tistory.com
오늘은 리액트를 설치하고 리액트의 기본 문법과 자바스크립트의 기본 문법, 데이터 타입, jsx에서 자바스크립트를 사용하는 방법 등에 대해 배웠습니다 리액트는 어렵다고 들었는데 프로젝트 전 마지막 과정인만큼 집중해서 들어봐야겠습니다!! 2024.05.09 - [개발공부/SQL] - [SQL] 동적 SQL(Dynamic SQL) [SQL] 동적 SQL(Dynamic SQL)Dynamic SQL사용할 SQL문이 Runtime시에 결정되어 SQL 쿼리를 동적으로 수행할 수 있게 해줍니다SQL문 내부에서 사용합니다 https://mybatis.org/mybatis-3/dynamic-sql.html mybatis – MyBatis 3 | Dynamic SQLDynamic SQL One ofabc-datatype..