민희의 코딩일지

1- useContext란? React 에서 데이터의 흐름은 위 → 아래 (부모 → 자식)로 Props 를 통해 전달한다. Props 를 사용하여 데이터를 전달할 때는 부모 컴포넌트가 자식 컴포넌트 태그에 일일이 Props 를 넣어 단계별로 전달해줘야 한다. (Prop Drilling: 가장 아랫단에 있는 컴포넌트만 데이터가 필요해도 전달하는 과정에서 데이터는 중간 컴포넌트를 거쳐야 한다. Main 컴포넌트는 데이터가 필요없는데도 Profile 컴포넌트에 데이터를 전달하기 위해서 데이터를 Props 로 받은 뒤 다시 Props 로 넘겨주어야 한다.) 부모 컴포넌트 (App) 자식 컴포넌트 (Header) 앱 내부에서 수많은 컴포넌트들이 공통적으로 필요한 전역적인 데이터가 있을 때 Props 를 이용해서 ..

1- Ajax란? Asynchronous JavaScript And XML: 자바스크립트를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술이다. 서버와 비동기적으로 통신함으로 인해 전체 웹페이지를 다시 불러오는 동기 방식과는 다르게 해당 부분의 사용자 인터페이스만을 갱신할 수 있다. (ex. 페이스북에서 좋아요 버튼이 눌릴때마다 페이지가 리렌더링되는 것을 방지) Ajax 사용법 JQuery 설치하여 $.ajax() 사용 axios 설치하여 axios.get() 사용 npm install add axios --save 순수 자바스크립트 문법 fetch() 사용 2- Fetch 란? fetch("", { method: "POST", headers: { "Content-Type": "appl..

이 빈 화면에서 아래와 같은 loop가 출력될 수 있도록 하는 것이 섹션 5의 퀴즈이다. 학생 정보는 data.js 에 담겨져있다. const students = [ { name: "김세준", korean: 88, math: 94, english: 78, science: 79, }, { name: "최다슬", korean: 88, math: 92, english: 54, science: 65, }, ... ]; export default students; stage1.js에서는 korean, math, english, science의 점수를 평균내 새로운 속성 score로 넣어주는 것이다. export const calculateAverage = function (students) { const scor..

https://www.acmicpc.net/problem/4446 4446번: ROT13 간달프는 여러 종족의 언어를 꽤 오랜 시간 동안 공부했다. 최근에 간달프는 해커들이 사용하는 언어인 ROT13을 공부했다. 이 언어는 영어와 문법이 같지만, 알파벳의 순서를 어떤 규칙을 이용해 www.acmicpc.net 이 문제 완전 어이없다. 함정이 숨어있다. 풀이 모음과 자음 목록을 list로 만들어준다. charisLower: 현재 알파벳이 소문자이면 True 대문자라면 소문자로 바꿔주고 알파벳을 ROT13에 맞게 바꿔준 후 다시 대문자로 바꿔준다. 처음 시도를 했는데 틀렸습니다가 떴다. 틀린 코드는 다음과 같다. # 백준 4446번 ROT13 string = input() vowels = ["a", "i",..

https://www.acmicpc.net/problem/15721 15721번: 번데기 예를 들어 7명이 있고, 16번째 등장하는 “뻔”을 부른 사람의 번호를 알고 싶다면 입력은 7 16 0이다. 4명이 있고 6번째 등장하는 “데기”를 부른 사람의 번호를 알고 싶다면 입력은 4 6 1이며, 이 www.acmicpc.net 이 문제는 브루트포스 알고리즘을 이용하여 풀었다. 풀이 A: 게임을 진행하는 총 인원 T: 구하고자 하는 번째 (T 번째로 뻔 / 데기 를 부른 사람) N: 입력 값이 0인 경우 '뻔', 1인 경우 '데기' * 뻔과 데기가 불리는 수는 동일하므로 뻔과 데기의 횟수를 뻔의 횟수로 작성하였다. 뻔 데기 게임 1회차 뻔 - 데기 - 뻔 - 데기 - 뻔 - 뻔 - 데기 - 데기 (총 8번, ..

1- TailWindCSS란? HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임 워크이다. CSS 프레임 워크란? 레이아웃 및 여러 컴포넌트 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음이다. CSS 프레임워크 for React JS Tailwind CSS Material UI React Bootstrap Semantic UI Ant Design Materialize Tailwind CSS의 장점 https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. Documentatio..

구조 분해 할당이란? (ES6) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식이다. Clean Code를 위해서 사용한다. 1- 객체 구조 분해 할당 function buildAnimal(animalData) { let accessory = animalData.accessory, animal = animalData.animal, color = animalData.color, hairType = animalData.hairType; } let obj = { accessory: 'horn', animal: 'horse', color: 'pupple', hairType: 'curly' } function buildAnimal(animalData){ let ..

1- Component ‘props’라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. Class Component React.Component 클래스를 상속 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JS를 반환하기 위해 render() 함수를 사용한다. Function Component props로 받을 객체 인자를 정의하고, JSX를 반환하는 것을 기본 형태로 갖춘다. return 문에서 JSX를 반환할 수 있다. Props, State는 데이터를 다룰 때 사용한다. 2- Props (properties) 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이다. 부모 컴포넌트로부터 받는 데이터이기 때문에 자식 컴포넌트에서느 변경할..