본문 바로가기

Front-End

(14)

[MOV 프로젝트] 4월 29일 react-hook-form의 setValue 및 Next.js에서 shaderMaterial 적용하기 showrooms page react-hook-form의 setValue contact page에서 type이 file인 input의 value가 FileList인 것을 S3 버켓의 등록된 주소로 변경하기 위해 react-hook-form useForm hook의 setValue 함수를 사용함으로 변경된 것을 콘솔에서는 확인완료하였으나 submit 이후 api에서 req와 database에서는 확인이 불가한 상황, 디버깅 필요 해결방안 const onValid = async (validForm) => { await setValue('url', imageUrl) // 이 함수가 실행된 이후 console.log(watch())의 결과는 의도한 바대로 보여짐 console.log(validForm) // 하지만 여기서는 원래 그대로의..

[번역] Why Not To Modify React State Directly 왜 state를 직접 수정하지 않는 이유 모든 사람들이 `state`를 절대로 직접 바꾸지 말고 언제나 `setState`를 호출하라고 합니다. 하지만 왜 그렇게 말하는 것일까요? 벌써 시도해보셨다면 아마 아무런 나쁜일이 생기지 않는다는 것을 눈치채셨을겁니다. 만약 `state`를 직접 수정하고 `this.setState({})` 혹은 `this.forceUpdate()`를 호출한다면 모든것이 괜찮아 보일겁니다. this.state.cart.push(item.id); this.setState({ cart: this.state.cart }); // renders like normal! maybe? 두가지 이유에 있어서 이것은 나쁜 생각입니다. (이것이 실제로 해당 예시에서 그리고 다른 상황에서 작동이 하더라도 말입니다.) (`this.state...

[JavaScript] Legacy octal literals are not allowed in strict mode Error 시도했던 것들 서버에서 contribution status code(사용자가 기고한 글의 상태를 나타내는 code)를 받아 이에 알맞은 메세지를 render하기 위하여 아래와 같은 함수를 작성하였으나, export function statuscodeconvert(code) { console.log(typeof code); const status = { 00: '게시 승인 대기', 01: '수정 승인 대기', 02: '삭제 승인 대기', 10: '게시 승인 완료', 11: '수정 승인 완료', 12: '삭제 승인 완료', 20: '게시 승인 거부', 21: '수정 승인 거부', 22: '삭제 승인 거부', 30: '기타', }; return status\[code\]; } 터미널에서 이러한 오류를 만나게 ..

2021년 7월 30일 FIRST PROJECT 후기(Gallery:port) Intro 내가 속한 200ok팀은 기존 코드 중심의 프로젝트 열람 시스템(github)에 대한 불편함을 호소하며 (물론 개발자가 되고자 한다면 코드를 잘 해석해야하지만) 시각적으로 프로젝트 열람 및 소개가 가능한 공간을 만들어보고자 Gallery:port라는 프로젝트를 기획했다. Gallery라고 이름을 붙인데에는 이미지를 중심으로 업로드 된 여러 프로젝트가 모여 있어서이다. Landing Page Gallery라는 이름이 붙었기에 천천히 작품이 흘러가는 모양을 구상했고 해당 작품을 클릭하면 사용자가 재미를 느낄 수 있도록 사진이 확대되면서 펄럭이는 요소를 추가하였다. 일반적인 웹과는 구별되는 강렬한 첫 인상을 원했기에 위 animation을 landing page의 화면 가득 배치하였다. 이를 구현하..

2021년 7월 21일 FIRST PROJECT DAY3(project upload page 이미지, desc formData 전달 형태 구성 및 modal로 project 미리보기 기능 구현 착수) DEV LOG 오늘의 스케쥴 KPT reflection sharing project upload page 이미지, desc formData 전달 형태 구성(solo) API docs 개선/보완(with BE) modal로 project 미리보기 page 구현 착수 오늘은 어떻게 프로젝트에 기여했나요? 파일 upload page 이미지 upload관련 기능 완료 이미지, 이미지 각각의 desc formdata 전달 형태 구성 및 사용자가 입력한 desc 정보 가져오기 //기존 계획 api문서 작성 시 // project_content: // [ {text: ~~~~ , image: buffer }, {text: ~~~~ , image: buffer }, {text: ~~~~ , image: buffer }..

2021년 5월 30일 #4 weather app + todo app에 animation 적용하기(미완) 2021년 5월 26일 #3 weather app + todo app 만들기 with React (미완) 지난 5월 23일부터 react를 연습하기 위해 초보자들이라면 반드시 만들어야하는 weather app을 만들기 시작했다. 어렵기만하던 react가 재밌게 느껴졌다. (역시 이론만 배우면 재미가 없다. 자발적 의 bedeveloper.tistory.com 기존 만들었던 앱에다가 애니메이션과 react-router-dom을 통한 화면전환을 구현해 보았다. 화면전환 효과가 더욱 두드러지게 하기 위해 header를 만들었다. 상상했던 모습을 대부분 구현할 수 있었으나 몇가지 문제점이 있었으니.... 문제점을 적기 전에 우선 결과물부터 보자. *일단 입력했었던 결과가 유지가 되지 않는다. 이 부분은 Loca..

Vanilla Javascript Effect 무작정 따라하기 #4.5 canvas에서 무작위 입자 생성 및 변화를 주는 원리 파악 Vanilla Javascript Effect 무작정 따라하기 #4 canvas에서 text 쪼개기 이 글을 쓰며 매주 하기로 했던 나의 야심찬 vanilla javascript effect 무작정 따라하기가 단 3개에서 멈추어있었음을 반성한다. 오늘 HA가 끝나고 힘이 빠져서 자고 싶었지만, 매일 공부를 하다보니 안 bedeveloper.tistory.com 어제는 코드를 보고 스스로 이해하려고 노력하였으나 도저히 불가능했었다. 그래서 설명히 조금 더 친절한 초심자를 위한 동영상을 보고 공부를 시작하기로 했다. 동영상 속 언어가 영어라서 설명을 알아듣는데 한참이 걸렸지만 안들리면 들릴때까지 무한 반복을 돌려서 코드의 주석으로 옮겨 보았다. // 첫번째 파트 //1. 무작위로 입자를 생성 //2. 그리고..

2021년 5월 5일 코드스테이츠 DAY-31 첫 HA (HA대비 코플릿 복습 및 React capture time에 봤던 과제 미리 구현하기) 5월 6일 목요일 내일 첫 HA를 치르게 된다. 알고리즘을 만들어내는 능력이 많이 부족하다고 생각되는 가운데 시험을 치게되어 다소 걱정이 되고(그래서 코플릿 중 어려웠던 부분을 한번 다시 살펴 볼 예정이다.) 게다가 이번 HA에는 sprint를 따라가긴 했지만 아직은 낯선 REACT의 과제형 문항이 있다고 하니 긴장은 덤이다. 하지만 코드스테이츠 나름의 배려인지 REACT과제에서 만들어야하는 것의 작동 GIF를 아주 잠시 보여줬기에 힌트를 얻었고 이를 미리 오늘 아무것도 없는 무의 상태에서부터 구현해 볼 생각이다. 코드스테이츠에서 항상 만들었던 것에 더하여 완성을 했어서 막막함이 있지만 일단 당장 내일 시험이니 당장에 뛰어들어 보자!

이전 1 2 다음

티스토리툴바