분류 전체보기78

• 

  [Figma] 테이블 만들기, 요소 감싸기 실습 테이블 만들기 실습 테이블 만들기1. 텍스트 작성(제목칸)2. 오토 레이아웃 적용(Shift+A)3. 컬러 조정(배경색, 글씨색, 테두리색)4. 제목칸 복제해서 날짜칸 생성5. 제목칸과 날짜칸을 함께 선택해서 오토레이아웃6. 테이블 사이 간격을 -1로 하면 테두리 선이 1개로 겹쳐짐7. 한 줄의 오토레이아웃을 Row 라는 이름으로 수정8. Row를 3개 복제9. 각각 내용 채우기(내용칸, description, 주석칸)10. 주석칸의 description 칸은 필요없으니 삭제11. 세 줄을 모두 선택해서 오토 레이아웃 적용=> 테이블 생성!  테이블 조정하기1. 주석 row을 Fill로 바꿔서 한 줄에 가득 차게 하기2. 주석칸을 눌러 안에 있는 오브젝트들이 왼쪽 상단에 있도록 하기3. 딥셀렉트(Ctrl.. 개발새발개발/Figma 2025. 2. 8.

• 

  [Figma] 아이콘 만들기와 Auto Layout(오토 레이아웃) 아이콘아이콘 만들기원하는 모양을 만든다세부조절모드로 들어가 밴딩을 줄 수 있다밴딩은 쉬프트를 누르고 만지면 직각방향으로 밴딩이 가능하다알트를 누르면 한 점만 밴딩이 가능하다선 아이콘 만들기Ctrl+X 버튼을 눌러 선과 면을 swap한다원하는 두께에 맞게 stroke 을 조절한다알람 버튼처럼 종안쪽 선을 지워야한다면종 머리부분 복사 -> Ctrl+X로 다시 면 채우기방울이 위로가게 둔 상태에서 면 종머리와 함께 subtrack다시 Ctrl+X설정의 톱니바퀴처럼 세부 설정이 필요하다면요소를 더블클릭해서 요소에 사선이 그어진 상태에서 원하는 부분에 점 찍고 조정아이콘 마무리유니온 해주기선은 블랙으로 해주기나중에 svg모드로 내보낼 때, 다른 색상으로 할 경우 색 덮어쓰기 할 때 색이 섞여 원하는 컬러가 안나올.. 개발새발개발/Figma 2025. 2. 7.

• 

  [React] state, 이벤트핸들러 통합하기 공통되는 state를 하나로 합치기 1. useState를 input 값의 항목을 담은 객체로 수정2. 이벤트 핸들러를 setInput으로 수정  - 스프레드 연산자 활용하여 수정하려는 값 외의 나머지 값은 그대로 유지하도록 하기3. return 값의 value 값을 input.name / input.country 등으로 수정  import { useState } from "react"const Register = () => { const [input,setInput] = useState({ name : "", birth: "", country : "", bio : "", }) console.log(input) const onChangeName = (e) => { set.. 개발새발개발/React 2025. 2. 6.

• 

  백준 1991 트리순회 실버1 문제 설명이진 트리를 입력받아 전위 순회(preorder traversal), 중위 순회(inorder traversal), 후위 순회(postorder traversal)한 결과를 출력하는 프로그램을 작성전위 순회한 결과 : ABDCEFG // (루트) (왼쪽 자식) (오른쪽 자식)중위 순회한 결과 : DBAECFG // (왼쪽 자식) (루트) (오른쪽 자식)후위 순회한 결과 : DBEGFCA // (왼쪽 자식) (오른쪽 자식) (루트)  입력값노드의 개수 N노드 왼쪽자식노드 오른쪽자식노드노드가 없는 경우 '.'루트노드는 항상 A  출력값전위 순회중위 순회후위 순회  풀이 1# 108384KB, 88ms(PyPy3)N = int(input())# 자식 노드 저장l = [0] * (N+1) #.. 개발새발문제 2025. 2. 5.

• 

  [React] State와 props, 회원가입 정보 받기(input) State와 Props  - 부모로부터 받는 props 값이 바뀌면 리렌더링이 발생함    - + 버튼을 눌렀는데 OFF 가 함께 출력됨 - 부모 컴포넌트가 리렌더링됐기 때문에 자식도 함께 리렌더링이 발생함  리렌더링이 되는 순간1. 자신이 관리하는 state의 값이  변동2. props 의 값이 변경3. 부모 컴포넌트가 리렌더링    이런 불필요한 리렌더링은 성능을 악화시킴-> 관련 없는 컴포넌트를 한번에 몰아두지 않고 분리함   전체 코드 한번 보기...  Bulb.jsxCounter.jsx 로 파일 나누기 파일 위에 useStateexport default App.jsx 에서는 import   State로 사용자 입력 관리하기회원가입 만들기 input 값에 접근하기1. input값 만들기2. use.. 개발새발개발/React 2025. 2. 5.

• 

  [React] State, setState State - 현재 가지고 있는 형태나 모양을 정의- 컴포넌트의 상태를 의미- 변화할 수 있는 동적인 값- 상태변화를 감지해 자동으로 리렌더링을 함- 하나의 컴포넌트에 여러개의 state를 생성할 수 있음   - 두 가지 요소가 전달되는 것을 확인할 수 있음   - 첫번째 요소 : 새롭게 생성된 state의 값(초기값). 인수로 전달받음- 두번째 요소 : 상태 변화 함수(state를 변경시키는 함수)    - 그렇기 때문에 대부분의 경우 구조분해할당으로 받음   state 변경   - setState를 활용함   Count로 수 늘려보기 - +버튼을 클릭할 때마다 변경 사항을 감지해 리렌더링해줌   전구 키고 끄기  - 삼항 연산자를 사용하여 보기 좋게 만들 수 있음  import './App.css'i.. 개발새발개발/React 2025. 2. 4.

• 

  [React] 이벤트 핸들링, 합성 이벤트 객체 이벤트 핸들링 - 이벤트가 발생했을 때 그것을 처리하는 것ex) 버튼 클릭 시 경고창 노출 등  버튼 클릭 이벤트 만들기 방법 1const Button = ({text,color,children}) => { return ( { console.log(text) }} style={{color :color}}>{text} )}Button.defaultProps = { color : "blue"}export default Button  방법2const Button = ({text,color,children}) => { const onClickButton = () => { console.log(text) } return ( {.. 개발새발개발/React 2025. 2. 3.

• 

  [React] Props Props  - 자식 컴포넌트에게 props를 전달해주면 객체로 묶여서 자식 컴포넌트에 매개변수로 전달됨     - 프롭스로 color 값을 넘겨서 스타일 설정도 가능함- 하지만 모든 코드에 color가 들어가지 않을 수 있으므로 코드 개선이 필요함   const Button = (props) => { return ( {props.text} )}Button.defaultProps = { color : "blue"}export default Button - 그럴 땐 위와 같이 default 값을 넘겨주면 됨   - 객체로 전달받기 때문에 점 표기법으로 값을 꺼내오는데 이게 불편하면 매개변수를 아예 나눠서 받는 방법도 있음   - 여러개를 props 해야 할 때에는  스프레드 연산자를 .. 개발새발개발/React 2025. 2. 2.

• 

  [React] JSX 문법 주의사항, 조건문, 스타일 입히기 JSX  - 원래는 return 값에 HTML 들어가면 문법적 오류임    - 하지만 JSX 문법은 적법하다고 해줌!    - JS와 HTML 을 함께 사용하게 해주는 것 뿐만 아니라 동적 렌더링도 가능하게 해줌  실제 코드   - 중괄호 내부에 JS 값을 활용할 수 있음- 숫자, 문자열 모두 사용 가능하고 연산과 삼항 연산자도 사용 가능함   JSX 문법 주의사항 1.  중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다     - 자바스크립트 표현식 : 한 줄의 코드가 특정한 값으로 평가될 수 있는 식    - 중괄호 안에 if문/for문같은 조건문/ 반복문은 에러가 발생함    2. 숫자, 문자열, 배열 값만 렌더링 된다     - 불리언, undefined, null 은 에러가 발생하진 않지만 렌.. 개발새발개발/React 2025. 2. 1.

• 

  [React] React의 특징 React의 특징 1. 컴포넌트를 기반으로 UI를 표현한다2. 화면 업데이트 구현이 쉽다3. 화면 업데이트가 빠르게 처리된다     1. 컴포넌트를 기반으로 UI를 표현한다   - 여러페이지에 중복 코드를 작성할 필요가 없어 편리하다   2. 화면 업데이트 구현이 쉽다   ↔ 명령형 프로그래밍 : 목적을 이루기 위한 모든 일련의 과정을 설명하는 방식    - state 변수의 값을 수정하는 것 만으로도 렌더링 결과를 간편히 조절할 수 있음   3. 화면 업데이트가 빠르게 처리된다     - Layout : 요소의 배치를 잡는 작업- Painting : 실제로 요소를 화면에 그려내는 과정  업데이트 과정  - DOM 이 수정되면 업데이트가 일어나는데, 매우 느림!    - 이 두 과정이 오래걸림(성능 악화.. 개발새발개발/React 2025. 1. 31.

• 

  [React] React 시작하기 React 시작하기- vite 활용   1. npm create vite@latest   2. npm i - package.json 에 있는 값들을 설치- 설치하면 node_modules에 설치됨    폴더 살펴보기 public- 이미지, 폰트 등을 저장하는 공간 src- 실제 소스코드를 저장하는 공간- jsx : react 가 작성되는 파일 확장자- assets : public과 같이 이미지, 폰트 등을 저장하는 공간- eslintrc.cjs : 개발자들의 코드 스타일 통일에 도움되는 도구    3. npm run dev    React App의 구동 원리    - localhost : 자기 자신의 컴퓨터 주소 (다른 컴퓨터에서는 접속 불가)- 포트번호 : 하나의 컴퓨터 내에서 여러개의 서버를 동작시키.. 개발새발개발/React 2025. 1. 31.

• 

  [JavaScript] 비동기 작업 promise - promise 객체는 비동기 작업 실행, 상태 관리 및 결과 저장 등 다양한 역할을 해줌   Promise의 3가지 상태  - 대기 : 아직 작업이 완료되지 않은 상태- 성공 : 비동기 작업이 성공적으로 마무리 된 상태- 실패 : 비동기 작업이 실패한 상태(네트워크에러, 코드에러 등)  - 해결(resolve) : 대기 -> 성공- 거부(reject) : 대기 -> 실패   유튜브 예시 - 대기 : 영상 로딩- 해결 : 영상 로딩 완료 - 성공 : 영상 시청이 가능한 상태 - 거부 : 영상 로딩 실패- 실패 : 시청 불가능한 상태     promise 객체 생성하기   - 생성자의 인수로 비동기작업을 실제로 진행할 콜백함수를 넣어줌- 생성과 동시에 자동으로 콜백함수를 호출해 안에 있는 비동기 작업을 .. 개발새발개발/JavaScript 2025. 1. 30.