프론트엔드 지망생

- 프론트엔드 공부 32일차 -React의 핵심 Component란?UI 또는 기능을 부품화해서 재사용 가능하게 하는  것 함수형 컴포넌트가 클래스형 컴포넌트보다 훨씬 간단하다하지만, 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없다.그래서 React에서 `함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용 가능하도록 도구를 만들어 주었는데, 이 도구를 Hooks(훅) 이라고 부른다. Hooks란?use로 시작하것들 useState?State를 만들어준다 state?컴포넌트에서 사용하는 변수 1. 변수 만드는 방법 비교let count = 0const count = 0 const[ count, setCount ] = useState(0)const[ 변수명, 변수바꾸..

- 프론트엔드 공부 31일차 -   참고사항export const ContentText = styled.textarea`  width: 996px;  height: 480px;  font-size: 16px;  border: 1px solid #bdbdbd;  padding: 16px;`; textarea 태그란? input 태그보다 더 많은 내용의 텍스트를 불러올때 사용하는 태그이다. 입력되는 글자가 많을 경우 자동 줄바꿈의 효과가 있다.   SettingRadio type="radio" id="youtube" name="radio-button" />RadioText htmlFor="youtube">유튜브RadioText>SettingRadio type="radio" id="image" name="ra..

- 프론트엔드 공부 30일차 -프로그램 설치1. VSCODE 설치2. Node.js 설치3. Yarn 설치 폴더에 기능 설치하기1. 바탕화면에 폴더 만들기2. 폴더에 "class" 라는 이름의 Next.js 프로젝트 설치하기3. class 폴더에 Emotion(CSS 쉽게 만들어주는 기능) 설치4. class 폴더에 Apollo-Client, Graphql(백엔드 통신 쉽게 해주는 기능) 설치5. class 폴더에 Ant-Design(누가 만든 버튼과 인풋창 등) 설치6. class 폴더에 Axios(백엔드 통신 쉽게 해주는 기능2) 설치VSCODE 추가 익스텐션vscode-styled-components 설 프로그램 설치1. 인터넷을 통해 VSCODE 설치2. 인터넷에 Node.js 검색 후 설치3. ..

- 프론트엔드 공부 29일차 -구조분해할당구조화 되어 있는 배열, 객체와 같은 데이터를 destructuring(분해) 시켜, 각각의 변수에 담는 것 let arr = [1, 2]let [one, two] = arrconsole.log(one, two) // 1 2 let obj = { name: "otter", gender: "male" } let { name, gender } = objconsole.log(name, gender) // otter male let { name: newName, gender: newGender } = objconsole.log(newName) // otter spread 연산자하나로 뭉쳐있는 값들의 집합을 전개해주는 연산자… const arr = [ 1, 2, 3, 4,..

- 프론트엔드 공부 28일차 -API어떠한 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만들어 둔 인터페이스 ex) 우리가 사이트라는 음식점에 갔다. 이후 음식점에서가 API 명세서라는 메뉴판을 받았다. 우리는 API명세서를 참고하여 주문을 하였는데 이 과정을 요청(request)라고 한다. 점원이 주방에 가서 요청받은 주문을 전달하는 것을 API라고 한다. 전달받은 것을 주는 과정을 응답(response)라고 한다. HTTP (Hypertext Transfer Protocol)서버와 클라이언트가 통신하기 위해 정의된 규약 GET : 서버와 데이터를 조회하는 MethodPOST : 서버와 데이터를 등록하는 MethodPUT : 서버 내 데이터를 수정하는 MethodPATCH : 데이터를 일부 ..

- 프론트엔드 공부 27일차 -HTML ToDo 전체 삭제 JS  const todoInput = document.querySelector("#todoInput");const todoList = document.querySelector("#todoList");const savedTodoList = JSON.parse(localStorage.getItem("save-Items"));const createTodo = function (storageData) { let todoContents = todoInput.value; if (storageData) { todoContents = storageData.contents; ..

- 프론트엔드 공부 26일차 -DOM ( Document Object Model)브라우저가 HTML 문서를 파싱(해석)하는 과정에서 생겨나는 객체 DOM 트리 Document- 문서(document) 노드, DOM에 진입할 수 있는 진입점 역할을 해준다. HTML- Document를 제외하고 최상위에 위치, 이러한 노드를 루트(root) 노드라고 한다. 루트 노드는 항상 하나만 존재합니다. head, body, title, div- 요소(element) 노드라 부른다. 속성 노드를 가질 수 있는 유일한 node입니다. src=…, id=”…”- 속성(attribute) 노드라 부른다. 이들은 요소 노드에 관한 별도의 정보를 담고 있지만, 해당 요소 노드의 child node에는 속하지 않는다. A1 … ..

- 프론트엔드 공부 25일차 -전달인자, 매개변수함수의 외부에서 데이터를 전달 받아 내부에서 활용하기 위한 수단 매개변수함수를 선언할 때, 소괄호 안에 선언되는 변수 ex)const sum = function(a, b) { console.log(a) console.log(b)}                    전달인자함수를 호출할 때, 함수 내부로 전달되는 데이터 ex)sum(10, 15) Web Storage브라우저 내에 존재하는 데이터 저장소  Session Storagekey-value 형태 저장로컬 환경에 데이터 저장세션 단위로 구분되며 활용(세션: 사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터, 해당 웹 페이지 접속을 종료하는 시점까지를 의미하는 단위 / 사용자의 웹 페이지 접속 상태에..

- 프론트엔드 공부 24일차 - 반복문반복적인 코드의 양을 획기적으로 압축ex)for(최초식; 조건식; 증감문){ // 반복을 수행할 코드} while문ex)최초식while( 조건식 ){ // 반복을 수행할 코드 증감식} - 최초식 : let i = 0- 조건식 : i - 증감식 : i = i + 1 while문 주의사항종료 조건을 제대로 설정하지 않으면 무한 반복이 일어남. html의 head에서 script를 이용해 JS를 사용할 때 주의사항기본적으로 html은 body 태그를 생성하기 전 head 태그의 코드부터 해석한다.그렇기에 홈페이지가 열리면  html의 코드가 수정되게 하기위해 JS를 할 수 있는데 이 경우 html 태그를 생성하기 전에 JS를 실행하기에 수정할 태그가 존재하지 않아 오류가 ..

- 프론트엔드 공부 23일차 -조건문 비교 연산자두개의 데이터를 서로 비교하는 방법 조건문 코드의 실행 분기점 비교 연산자 엄격한 비교 연산자=== 느슨한 비교 연산자== 느슨한 비교 연산자보다 엄격한 비교 연산자를 이용하는 것이 좋다 ex)1 === “1”false 1 == “1”true 0 == “0” true 0 == []true “0” == []false 배열과 객체의 비교 원시 타입 (Primitive type) 참조 타입 (Reference type) 원시 타입String, Number, Boolean, Bigint, undefined, Symbol, Null 참조 타입원시 타입 이외의 모든 것 원시 타입 특징불변성 (데이터가 변하지 않는 속성) 참조 타입의 특징가변성 ex) 값의 복사let ..