프론트 엔드 공부 블로그

노마드 코더로 React에서 쓰이는 문법 후다닥 배워서 React로 선배 졸작에 쓰일 웹 페이지 만들어보려고 한다!! 한달 동안 열심히 해봐야겠다... 만드는 데 거의 2주 반 정도 걸린 것 같다. (조금 농땡이 피운 걸 후회...) 기능, 디자인, 컴포넌트 구성, 코드 해석, 배운 점 등등을 해당 포스트에 정리할 예정이다. 1. 기능 1.) 기본 페이지 - 주식 입력창 - 사용자가 입력한 값과 비슷한 주식 띄우기 - 주식 추가 확인, 삭제, 전송 2.) 이메일 페이지 - 이메일 양식 확인 - 이메일 전송 3.) 마지막 페이지 - 이메일 전송 완료 페이지 2. 디자인 html이랑 css로 후다닥 만들었다 포인트 컬러는 빨강! 반응형도 해보고 싶긴 한데... 기능 공부하고 구현하는 것만으로도 시간이 빠듯할..

노마드코더에서 useState 예제로 단위 변환을 할 수 있는 웹 사이트를 만들었다. 이번에도 완전히 따라하기 보다는 어떻게 하는지를 대충 훑어보고 직접 처음부터 다시 만드는 식으로 복습했다. 1. useState(data, setData) react의 useState는 데이터의 상태를 관리하는 함수다. 첫번째 매개변수인 data에는 데이터의 초기값을 넣어줄 수 있다. 두번째 매개변수인 setData는 첫번째 데이터를 변경할 때 사용하는 함수다. 데이터의 상태가 setData함수를 통해 변경되면 자동으로 재렌더링을 시켜주기 때문에 유용하다! 관습! 두번 째 매개변수는 set' data이름 ' 으로 지어준다. 2. 전체 코드 App() 표시되는 화면 변환할 단위를 선택하는 창을 띄운다. function A..

꺄 드디어 React 공부한다! 역시 시작은 노마드 코더 리액트 클론 코딩으로 한다! 노마드코더 React 초급 강의에선 이전에 유튜버 코딩애플님께서 React 설치하는 법과는 다른 방법으로 React를 설치하길래 따라해본다. 1. react, react-dom import 2. JSX import 이 세 개의 스크립트를 import 했는데도 JSX 문법이 먹히지 않아서 왜 그런가 했는데... 작성한 문법을 감싼 script 태그에 type =" text/babel "을 추가해 줘야 한다고 한다. 3. script 속성 type ="text.babel" 추가 출력 확인! html 요소도 onClick 이벤트 출력도 모두 잘된다~ 4. 컴포넌트 형식 const root = document.getElemen..

이론 위주로 배울 땐 무슨 소린지 하나도 몰랐는데 이렇게 직접 다루다보니 이론의 뜻을 하나씩 알게 돼서 좋다. 1. 동기와 비동기 동기 : Synchronous - 순차적으로 task를 수행 비동기 : Asynchronous - 병렬적으로 task를 수행 -> 연산이 끝날 때까지 기다리지 않고 다음 연산을 진행할 수도 있다는 의미! 동기와 비동기라는 단어만 봤을 때 바로 이해하지 못해서... 사전을 찾아보고 나서야 이해할 수 있었다. 데이터를 받아오고 처리해야 하는데 이 과정을 순차적으로 실행하는 동기적인 방법으론 실행시간이 오래걸릴 것이다. 그래서 JS에서는 비동기적으로 데이터를 받아와 처리한다. 그런데 이곳저곳 찾아보다 보니 JS는 싱글스레드이면서 비동기적으로 동작을 한다고 한다. 싱글스레드? 비동기..

git init 완료~ git config --global로 이름이랑 이메일이랑 비밀번호 설정도 완료~ 막히는 것 없이 이제 remote만 해주면 됐는데... ... 분명 링크가 올바른데도 불구하고 브랜치를 추가하려고 하면 repository not found가 떴다. 그래서 계속 원인과 해결방법을 찾았는데도 내 상황과는 다른 repository not found가 많이 보였다. 그러다가 아무래도 애인의 맥북으로 내 깃허브를 가져오려고 해서 발생한 오류같아서... > 깃계정 여러개

학교 선배가 데이터를 받아오는 프로젝트를 참고하라고 하시면서 직접 작성한 블로그 링크를 보내주셔서 너무너무 감사했는데... 코드를 해석하거나 내가 코드를 짜기엔 너무 지식이 없어서(ㅋㅋㅋ ㅠㅠ) 선배에게 무척 죄송하지만 제대로 JS를 공부하는 게 먼저였다. 다행히 JS를 하다보니까 재미있고... 실용적인 메소드들을 많이 접해서 여기까지 올 수 있었던 것 같다. 아무튼! Json도 긁어왔겠다 fetch도 사용해봤겠다...! 이제 선배가 알려주신 블로그를 조금 이해할 수 있게 돼서 따라해보고자 한다! 아직 React를 제대로 배우지 않았으니 최대한 바닐라 자바스크립트로 작성할 것이당 참고한 API 호출 프로젝트는 >> 여기!