일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- SasS
- 깃
- CSS
- 사용하는 이유
- 코딩기초
- 프론트엔드 개발
- 프론트엔드
- 타입스크립트
- git
- 코딩독학
- html기초
- async
- react-router
- 코딩공부
- TypeScript
- JavaScript
- 코린이
- React Native
- http
- Vue3
- 자바스크립트
- 리액트
- scss
- 리덕스
- 코딩초보
- 비동기
- react
- 리액트 네이티브
- 참조자료형
- redux
- Today
- Total
목록코딩 공부 일지 (95)
맨 땅에 프론트엔드 개발자 되기
Developer Roadmaps Community driven roadmaps, articles, guides, quizzes, tips and resources for developers to learn from, identify their career paths, know what they don't know, find out the knowledge gaps, learn and improve. roadmap.sh 프론트엔드 개발자 공부 로드맵
오늘 만난 에러는 폼 양식 수정 페이지를 만들면서 마주했다. 폼 양식이 있고, 비동기 API로 기존 정보를 불러와 input 텍스트 타입 안에 defaultValue를 설정하는 것이었다. 당연히 수정이 가능해야 하므로 value로 설정하지 않고, defaultValue로 설정했다. 플로우는 이러하다. useParams로 수정할 아이템의 id 값을 읽어들인다. redux-saga를 이용해 비동기 API에 id 값을 넘겨 기존 정보를 요청한다. redux의 상태 값에 받은 정보를 업데이트 하면 상태가 업데이트 되므로 리렌더링이 일어나 defaultValue 값에 설정해 둔 상태가 리렌더링 되어 기존 정보를 input 값에 보여준다. 이것이 나의 시나리오였다. 그러나 웬걸 defaultValue가 불러와지지 ..
form 태그로 감싸진 양식 안에 button 태그가 있을 경우, 버튼을 클릭하면 자동으로 폼 양식의 submit 이벤트가 발동된다. 이걸 preventDefault 로 막았었는데, 아예 그 버튼이 submit 버튼이 아니라면, 더 깔끔하게 submit 을 방지할 수 있다. 이 버튼은 제출 버튼이 아닙니다. 바로 type 속성에 button 이라고 명시해주면 끝!! 이후 onclick 이벤트를 걸더라도 submit 되지 않고 지정해준 이벤트가 발동된다. 끝!!
최근에 프로젝트를 하면서 웹에서 이미지 파일을 업로드하고 다운로드 할 수 있는 기능들을 만들다보니 Base64와 MIME Type에 대해 많이 접하게 되었다. 한 번 제대로 정리해두면 좋을 것 같아 정리해보려고 한다. Base64 란? - 인코딩 Base64에 대해 알기 전에 먼저 인코딩에 대해 알 필요가 있다. 동영상 인코딩 등 흔하게 접하는 용어지만, 정확히 인코딩이 무엇을 뜻하는 말인지 몰랐다. 컴퓨터가 0과 1의 이진법으로 구성되었다는 것은 컴퓨터 전공자가 아니더라도 한 번 씩은 들어봤던 것 같다. 우리가 컴퓨터 혹은 전자기기로 접하는 모든 이미지, 동영상, 사운드 파일은 0과 1로 이루어진 데이터인데, 모두 컴퓨터가 이해하는 방식으로 인코딩된 것이다. 인코딩 = 컴퓨터가 이해하는 방식으로 바꾸기..
나는 어떤 일을 할 때, 그 일을 왜 하는지가 이해가 되어야 한다. Redux-Saga를 처음 배울 때 비동기를 처리하기 위해 왜 Redux-Saga를 사용할까 이해가 되지 않았다. 컴포넌트 내부에서 비동기 로직을 실행하고 난 뒤에 디스패치를 하면 되는 거 아닌가? 라고 생각했었다. 왜 Redux-Saga를 사용하는가? 디자인 패턴이라고 들어보았는가? 진짜 잘하는 개발자는 소프트웨어 설계부터 비즈니스 로직이 안정적으로 구현되고 가독성 좋은 코드를 짜기 위해 고민한다고 한다. Redux-Saga는 갑자기 어디서 뿅하고 튀어나온 게 아니라 이 디자인 패턴을 고민하다가 나온 결과물이라고 할 수 있다. - Saga 패턴 Saga 패턴에 대한 설명을 찾아보면, "saga 패턴은 분산 애플리케이션의 일관성을 유지하..
HTTP 프로토콜 HTTP(Hypertext Transfer Protocol)는 인터넷을 이용해서 데이터를 주고받는 통신 규약이다. 데이터를 주고받기 때문에 request-response Protocol 이기도 하다. HTTP는 모든 웹 개발자라면 당연히 알고 있어야할 필수 상식이지만, 많은 프론트엔드 개발자들이 놓치기 쉬운 부분이기도 하다. 클라이언트는 URL을 통해 서버에 데이터 요청을 하고 서버는 그 응답으로 데이터를 클라이언트에게 보내준다. 그 데이터를 받아 예쁘게 보여주는 역할을 하는 것이 바로 웹 브라우저다. HTTP는 1989년부터 개발이 시작되었고, 1994년에 HTTPS라는 보안이 더해진 버전이 출시가 되었다. 그리고 정식버전으로 출시가 된 것은 1997년이다. 따지고 보면 인터넷 통신의..