오늘의 Todo ⭐️ 필수 브로셔 준비 기술적 의사결정 [ ] Redux toolkit (현빈) [ ] Intersection Observer (수빈) [ ] react-cookie (수빈) [ ] axios(instance) (수빈) [ ] styled-components (수빈) 주요 기술 (공통) [x] 무한스크롤 [x] 소셜 로그인 Feature [ ] 닉네임 변경 중복확인 로직 변경 (수빈) [ ] url env 처리 후 테스트 (수빈) [x] cookie 모듈 닉네임 만료시간 수정 (수빈) UI (수빈) 크로스 브라우징 [ ] 웹폰트 적용 문제 커뮤니티 페이지 [ ] 게시글 제목 내용 댓글 글자 수 제한 [ ] 게시글 검색 시 결과 없을 때 보여줄 문구 전체 UI 수정 [ ] 랜딩 페이지, 게..
favicon 적용 1280 X 720 UI 작업 폭풍 커밋... https://www.howdy-mj.me/css/styled-components-with-global-style Styled Components를 Global에서 사용하기(w/반응형) _해당 글은 React를 기준으로 작성되었습니다._ ## Styled Components란? Styled Components는 CSS-in-JS의 하나로, CSS를 하나의 컴포넌트로 만들어 주는 것이다. **Styled Components 설치** ```she... www.howdy-mj.me
중간발표는 끝났고 내일부터는 추가 scope 커뮤니티 기능 구현과 자잘한 오류들 해결, UI 수정 등을 진행할 예정이다. 저번주에 MVP 가 생각보다 빨리 끝나서 생각보다는 여유가 있었지만 중간에 몸이 안 좋아서 신경 쓰지 못했던 부분들이 있었고 그 때문에 제대로 피드백을 받지 못한 게 아닐까 아쉬웠다. 잠을 좀 더 줄이고 몇 시간만 더 했더라면 괜찮았을 텐데 후회가 되면서도 그 당시에는 최선이었지 않을까 복잡한 기분이 들었었다. 초심을 많이 잃어버린 것 같다. 꺾이지 않는 마음이 중요하다고 하는데 이미 몇 번 꺾였고 부서진 마음을 테이프로 붙여서 모양만 유지해 놓은 것 같다. 당연히 프로젝트 끝까지 매일 최선을 다 하겠지만 열심히 하는 것과 별개로 무언가 사라진 것 같다. 최고의 팀원들을 만나서 귀엽고..
사진 미리보기 삭제 구현 const [imageSrc, setImageSrc] = useState(''); ... // preview 삭제 { setImageSrc(null); }; ... https://taehoblog.netlify.app/react/previewimg/ [React] Preview Image - 이미지 미리보기 오늘은 컴퓨터에 있는 이미지를 업로드 하고 싶을 때, 미리보기를 구현해 보려고 한다. 준비하기 파일업로드를 위해서는 form태그의 를 이용해야한다. multipart/form-data에 대해서는 찾아보길 바란 taehoblog.netlify.app 사진 미리보기 삭제 - 삭제 버튼 기본 상태값 false 안 보임 -> 이미지 업로드 버튼 누르면 삭제 버튼이 보이고 -> pre..
WIL KEYWORD - Axios axios instance, axios intercepter, fetch vs axios import axios from 'axios' // axios 인스턴스를 생성합니다. const instance = axios.create({ baseURL: 'https://api.hnpwa.com', timeout: 1000 }); /* 1. 요청 인터셉터 2개의 콜백 함수를 받습니다. */ instance.interceptors.request.use( function (config) { // 요청 성공 직전 호출됩니다. // axios 설정값을 넣습니다. (사용자 정의 설정도 추가 가능) return config; }, function (error) { // 요청 에러 직전 ..
LifeCycle 리액트의 컴포넌트는 모두 라이프 사이클(Life cycle, 혹은 생명주기)을 가집니다. 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 리액트 훅이 나오기 전에는 이러한 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다. 라이프사이클은 크게 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount) 세 단계이다. Mount : 처음 컴포넌트를 불러와서 생성하는 단계 Update : 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때) 강제로 업데이트 했을 때 (forceU..
React... 폴더를 만들고 ref 코드를 뜯어보며 이해하려 노력 중...😂 ✔️ 비구조화 할당 Destructuring Assignment 배열의 비구조화할당 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 자바스크립트 표현식 - 배열 선언 및 호출 문법 const [변수명1, 변수명2, 변수명3] = [값1, 값2, 값3]; Spread Operator var 새로운객체명 = {...기존객체명}; var 새로운배열명 = [...기존배열명]; // obj 객체를 newObj 객체에 복제 var obj = { a: 10, b: 20 }; var newObj = {...obj}; console.log(newObj); // {a: 10, b: 20} // arr 배열을 newA..
ㅇ 오늘 한 일 자바스크립트 공부 알고리즘 6부터 12번까지 풀기 WIL 쓰기 ㅇ 오늘 느낀 점 알고리즘 문제 풀기...어렵다! reduce(), map(), => 등 여러 함수들을 많이 알수록 빠르고 쉽게 풀 수 있다는 걸 느꼈다. 어떻게 찾아가며 풀고는 있지만 너무 재미가 없다... *첫 항해를 시작하고 이번 주에 배운 점 : 정말 똑똑하신 분들이 많다는 걸 알게 되었다. 항해 시작 전후로 시간의 밀도가 다른 것 같다. 나도 미리 공부를 했어야 하나 후회가 됐다. 프로젝트에서 JWT가 어떤 것인지 원리는 배웠지만, 직접 해보지 않아서 나중에 혼자서라도 해봐야겠다. 그래도 API와 프론트와 서버가 어떻게 데이터를 주고받는지는 알게되었다. ㅇ 오늘의 칭찬 오전에 운동했음. 알고리즘 문제 최소 목표 넘겨서..
👊🏻 오늘 한 일 운동, 방 청소, 집안일 등 [혼자 공부하는 자바스크립트] Ch5 함수 5-1, 5-2 일부 😲 오늘 느낀 점 하루 이틀 공부할 거 아니고 앞으로 2월까지 쭉 달려야 하는데 이번 주 초반에 너무 무리했다. 새벽 늦게 공부하니 아무리 잠을 참아도 다음 날에 지장이 가고 결국 몰아서 자버렸었다. 일찍 자고 일찍 일어나는 습관을 가질 수 있게 계속 노력해야겠다. 6시 30분에 일어나서 운동을 하고 8시쯤 씻고 8시 30분에 아침을 먹고 9시부터 공부, 새벽 1시 ~ 1시 30분 사이에 잘 수 있게 생활 패턴을 바꾸자! 내가 제일 부족한데 팀장을 맡아 당황스러웠지만 더 노력하라는 뜻이라고 생각했다. 팀장이면서 팀원분들께 뭐를 가르쳐 드리지도 못하고 도움을 드리지 못한 것 같아 미안했다. 그런데..