y.developer

2023.11.14 화 camelCase PascalCase kebab-case snake_case 프로그래밍 개발을 할 때 변수명이나 클래스명을 선언할 때 일종의 규칙이 존재한다. 규칙을 Code Convention 이라고 말하며, 이름을 정의할 때의 규칙은 Naming Rules 이라고 한다. 뭐... 꼭 이렇게 안 하면 안 돼!! 는 아니지만, 원활한 협업을 위해서 기능에 최적화되도록 개발자들끼리 정한 규칙이다. 두 단어 이상으로 변수명을 명명할 때 공백(" ")은 사용할 수 없고, 변수명의 가독성을 좋게 하기 위해서 해당 규칙이 생겼다. camelCase (카멜식) 낙타 모양에서 따온 방법이다. 첫 단어는 소문자로 시작하고, 두 번째 단어는 대문자로 작성한다. 원문 : korean short ha..

2023.11.14 화 기존에는 CSS 만을 통해서 스타일을 정했다. 하지만 React에서는 작성한 코드에 색을 입혀주는 방법이 더 다양하다. 그중에서도 컴포넌트에 스타일을 적용하는 방법에 대해서 알아보자. Styled Components Css-in-JS : JS로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 props를 통해서 조건부 스타일링 가능 지역 스타일링 : 단, 해당 컴포넌트 내에서만 사용 가능 CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 사입하는 스타일 기법이다. 기존에는 웹사이트를 개발할 때 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 관행으로 여겨졌었다. 하지만 React나 Vue, Angular와 같은 모..

2023.11.13 월 JSON 파일을 다루면서 로직 순서에 대한 오류가 발생했다. JavaScript에서 JSON 파일을 로드하는 방법과 함께 오류를 해결할 수 있는 방법을 알아보자. JSON require fetch optional chaining JSON JavaScript Object Notion 서버와 클라이언트 간에 데이터를 공유할 수 있다. 클라이언트가 사용하는 언어에 관계없이 통일된 데이터를 주고받을 수 있도록 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장 및 표시할 수 있다. JSON require JavaScript에서 require() 메서드를 사용하여 로컬 JSON 파일을 구문분석할 수 있다. 로컬 JSON 파일이 있다면..

2023.11.10 금 ver 4 지난 시간에 이어서 마무리를 해보자. Working 구역과 Done 구역에 카드를 만들어보자. Todolist.jsx 작성하기 App.jsx import './App.css'; import React, { useState } from 'react'; import Input from './Components/Input'; import Todolist from './Components/Todolist'; function App() { const [todos, setTodos] = useState([]); return ( ); } export default App; footer 부분에 Todolist 컴포넌트를 작성해 준다. 내려야 할 props를 설정한다. Todolist...

Algorithm 짝수의 합 문제 정수 n이 주어질 때, n 이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해 주세요. 예시 n = 10, result = 30 / n = 4, result = 6 // 내가 적은 풀이 const solution = (n) => { let number = 0 for(let i=0; i

2023.11.09 목 ver 4 TodoList 만들기 1편에 이어서 나머지 코드들도 작성을 해보자. 2편에서는 header 부분의 Input 을 다룰 것이다. 많은 리팩토링을 하면서 ver4까지 만들게 되었다. 코드들이 깔끔하게 정리가 되었고, 컴포넌트도 적절하게 분리된 모습이다. Input.jsx 작성하기 App.jsx import './App.css'; import React, { useState } from 'react'; import Input from './Components/Input'; function App() { const [todos, setTodos] = useState([]); return ( . . . 새롭게 만든 Input 컴포넌트를 불러온다. 그리고 header 안쪽에 컴포..

2023.11.08 수 리액트 컴포넌트를 작성하기 위해서 JSX 스니펫을 쓰다가 궁금해졌다. 자동으로 생성되는 코드는 어떤 것인지, 어떤 부분을 변경해 볼 수 있고 잘 작동하는지 알아보자. 스니펫 rafc, rafce 함수 표현식, 함수 선언식 export, export default props 받는 방법 최고의 조합 snippets (스니펫) '코드 조각'이라고 부르는데, 도구라기 보단 에디터마다 내장되어 있는 기능이다. 용도는 자주 사용되는 코드에 대해서 단축어를 만들어서 코드를 빠르게 생성해 낼 수 있게 도와준다. 기본적으로 JSX파일을 만들고 들어가면 빈화면이다. HTML은 ! 입력 후 Tab를 누르면 기본적인 양식이 제공된다. 이와 마찬가지로 JSX 파일에서도 대표적으로 rafc 또는 rafce..

2023.11.07 화 리빌딩한 파일을 토대로 추가 작성 필요 ver1 ~ ver4 타임어택과 리팩터링을 진행하면서 수많은 오류들을 만났다. 이를 기록하고 어느 부분에서 모르는지 체크해볼 수 있었다. TodoList를 리빌링 해보면서 온갖 오류들을 다 만났다. 처음에 작성했을 때와는 또 다른 부분에서 막혔던 것도 있고, 동일한 부분에서 또 막힌 부분도 있었다. 다음에 같은 오류를 만났을 때 대처하기 위해서 정리해보려고 한다. 컴포넌트 jsx 파일 이름 변경시 오류 newTodo [] import react-uuid / uuid 차이 ▶컴포넌트 앞에 대문자 안붙여서 변경시 오류 자주 발생하는 상황 : 컴포넌트 jsx파일을 생성할 때 파일이름의 첫글자를 소문자에서 대문자로 바꿔야하는 경우. 즉, 파일 이름을..