본문 바로가기

728x90

도전을 밥🍙 먹듯이 하는 개발자

(84)

리액트를 다루는 기술 - 컴포넌트 스타일링(CSS, Sass, Css Module, styled-components) 컴포넌트를 스타일링 방식 1. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 2. Sass(Syntactically Awesome Style Sheets) (.scss, .sass) : CSS 전처리기 - 복잡한 작업을 쉽게 할 수 있도록 해주고 - 스타일 코드의 재활용성을 높여줌 - 코드의 가독성을 높여줌. -> 유지보수를 더욱 쉽게 해줌 // 변수 사용하기 $red : #fa5252; $orange : #fd7e14; // 믹스인(재사용되는 스타일 블록을 함수처럼 사용) @mixin square($size){ $calcualated : 32px * $size; width: $calcualated; height: $calcualated; } .SassComponent{ .box{ // .S..

객체(Object) 객체 생성 방식 1 ) 객체 리터럴, 2)생성자 함수, 3) Object.create() 객체 리터럴 객체 생성시, 컨텐츠를 그대로 대입 연속된 구조체, 연관된 데이터를 일정한 방법으로 변환하고자 할때 많이씀 ex) 서버에게 주소를 DB에 넣어달라고 요청할때, 하나의 객체로 전송한다. (각 아이템들을 하나하나 개별 전송하지 않음) 클래스 new 연산자로 객체 인스턴스 생성 extends 키워드로 상속 특정 구조의 객체를 여러곳에서 사용해야 하는 경우 클래스로 필요할 때마다 인스턴스를 생성하면 재사용성, 유지보수 편리함 등 장점이 있습니다. 1) 객체 리터럴 const person = { name: "길동", age:21, printName(){ console.log(`${this.name}`) } } 1..

[우테코 5기 프리코스] 4주차 회고 - 성장한 나를 만나다! 첫주차 회고를 쓰고 2,3주차는 바빠서...못쓰다가 마지막 주차 회고를 작성한다... 아쉬움이 많이 남는다. 생각치도 못한 예외사항을 발견해서, 좀 더 꼼꼼히 요구 사항을 들여다 볼 껄 후회가 된다. 하루 회고를 한꺼번에 작성하려고 하지 않고, 매일 2회로 나눠서 작성하려고 했지만, 무언갈 기록하는 건 어렵다... 가볍게라도 작성해보도록 노력하자! 코치님의 조언덕분에 더욱 성장할 수 있는 방법을 찾을 수 있어서 감사드린다. 1일차 - 저녁 오늘 미션을 받고 다리 만드는 것을 이해하는데 조금 시간이 걸렸다. 처음에 2차원 배열안에 0,1 값을 집어 넣는 줄 알았는데, 그렇다면 위, 아래 모두 0, 0 일땐 어떡하지? 하지 고민도 했다. 하지만 1차원 배열로 0,1을 집어넣고 그 값에 따라 U,D을 나누는 ..

[우테코 5기 프리코스] 1주차 회고 - 송이송이 애송이 이번 주 내내 프리코스 미션만 풀었다고 해도 과언이 아닙니다. 가장 시간이 많이 소요된 문제는 구구단 문제였는데, 제가 너무 어렵게 접근해서 지구의 핵까지 만날 정도로 삽질을 했다는 점...⛏ 구구단 문제를 한 두 번 푸는 게 아닌데, 매번 대충 이해하고 넘어갔더니, 역시 프리코스에서 호되게 이해했네요.ㅎㅎ 뿌듯하게 제출하고 나서, 다른 지원자분들의 코드를 봤는데... 저는 송이송이 애송이더라고요🍄 다른 지원자분들의 지식을 열심히 흡수하려고 노력 중입니다.😮😐😮😐😋 다양한 접근법과 깔끔한 클린코드를 보니, 제 코드는 마치 횡설수설 투 머치 토커 같아요. 인간적인 면모와 따뜻함을 지닌 제 코드... 수요 없는 공급이겠죠...🤣 그래서 다른 분들의 코드리뷰와 의견을 보면서, 이번 2주차 프리코스 미션에서는 ..

리액트를 다루는 기술 - Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 (사용자 로그인 정보, 애플리케이션 환경 설정 테마 등) 있을때 유용한 기능 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되었습니다. Context API를 사용한 전역 상태 관리 흐름 이해하기 리액트 애플리케이션은 컴포넌트 간 데이터를 props로 전달하기 때문에, 전역적으로 사용할 데이터는 최상위 컴포넌트인 App의 state에 넣어서 관리합니다. → 유지 보수성이 낮아질 가능성이 있다. (이유 : 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달하기 때문) ★해결 : 리덕스 같은 상태 관리 라이브러리를 사용해 전역 상태 관리 작업을 더..

[구글링] 리액트를 다루는 기술 - 외부 API를 연동하여 뉴스 뷰어 만들기 카테고리별로 최신 뉴스 목록을 보여 주는 뉴스 뷰어 프로젝트 비동기 작업 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예) 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때 Ajax 기법을 사용해 서버의 API를 호출함으로써 데이터를 수신합니다. 이렇게 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간 소요, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리합니다. ▶ 이 과정에서 해당 작업을 비동기적으로 처리하게 됩니다.(동시에 여러 요청을 처리, 기다리는 과정에서 다른 함수도 호출) 그것이 바로 Ajax 기법(Asynchronous JavaScript and XML) axios : 자바스크립트 HTTP 클라이언트 웹 통신 기능을 제공하는 라이브러리 htt..

리액트를 다루는 기술 - 리액트 라우터로 SPA 개발하기 웹 애플리케이션에서 라우팅이란? 라우팅 : 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 여러 페이지로 구성된 웹 애플리케이션을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트 라우터, Next.js 리엑트에서 라우팅 시스템을 구축할 수 있습니다. - 리액트 라우터 : 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다. - Next.js : 리액트 프로젝트의 프레임워크, 이 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동 라우팅 관련 기능은 리액트 라이브러리에서 공식적으로 지원하는 것이 아닌 서드 파티로 제공됩니다. * 서드 파티란? 편하고 효율적인 개발을 위해, 플러그인이나 라이브러리 또는 프레임워크로, 제작사..

리액트를 다루는 기술 - 컴포넌트 성능 최적화 React DevTools를 활용해 성능을 모니터링 할 수 있습니다. 컴포넌트 리렌더링이 발생하는 상황 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링할 때 4. forceUpdate 함수가 실행될 때 -> 리렌더링이 불필요할 때는 리렌더링을 방지해주어야합니다. 1. React.memo : 이전과 같은 props가 들어올때, 렌더링 과정을 스킵, 가장 최근에 렌더링된 결과를 재사용하여 리렌더링 성능을 최적화 (== React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지 할 수 있다.) 라이프사이클 중 'shouldComponentUpdate'는 리렌더링을 방지합니다. 하지만 ↗이는 함수 컴포넌트에서 사용할 수 없습니다. 그 대신 Reac..

10/11일 오늘 구글링 한 내용 (Prettier Option, CSS) Prettier : 코드 스타일 자동 정리 도구 자동 정렬, 자동 세미콜론 추가, 큰따옴표로 통일 등등 이러한 스타일을 쉽게 커스터마이징 할 수 있다. - "trailingComma" : 항목의 나열에서 마지막 항목에도 콤마를 붙이는 코딩방식 - "printWidth" : 줄 바꿈 할 폭 길이 참고 - https://velog.io/@kyusung/eslint-prettier-config em, rem은 무엇인가? em단위는 상대 길이 단위로 요소의 글꼴 크기와 관련되어있다. 지정된 요소의 font-size의 배수 rem단위는 root em이라는 말 그대로 최상위 요소의 font-size에 대한 em단위 이다. 참고 - https://velog.io/@ursr0706/em%EB%8B%A8%EC%9C%84..

리액트를 다루는 기술 - Hooks 1. useState 2. useEffect 3. useReducer 4. useMemo 5. useCallBack 6. useRef 7. 커스텀 Hooks useEffect VS useCallBack VS useMemo useEffect useCallBack useMemo 특정값(배열 안 값)이 업데이트 될때, 특정 작업을 수행하도록 설정 새로운 함수 인스턴스를 생성하는 것이 아니라, 실행되는지 여부와 관련 특정값이 업데이트 될 때, 함수를 새로 생성, 함수 memoization하여, 같은 함수 인스턴스 재사용 ※ 빈 배열, 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용 특정값이 업데이트 될 때, 연산을 실행(o) 새로 생성(x) 값을 memoization하여, 계산 결과나 객체를 재사용 원하..

리액트를 다루는 기술 - 컴포넌트의 라이프사이클 메서드 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드입니다. 이 메서드들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용합니다. 추가로 컴포넌트 업데이트 성능을 개선할때는 shouldComponentUpdate가 중요하게 사용됩니다. 라이프사이클 메서드는 9종류 Will 접두사는 어떤 작업을 작동하기 전에 실행되는 메서드 / Did 접두사는 어떤 작업을 작동한 후 실행되는 메서드 이 메서드들은 우리가 컴포넌트 클래스에서 덮어 써 선언함으로써 사용할 수 있습니다. Mount : Dom이 생성되고 웹 브라우저상에 나타나는 것 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 ↓ getDerivedStateFromProps : ..

리액트를 다루는 기술 - 이벤트 핸들링, ref:DOM에 이름달기, 컴포넌트 반복 이벤트 핸들링 함수형 컴포넌트에서 이벤트 핸들링 - const 키워드 + 함수형태로 선언해야한다. - 요소 적용을 위한 this가 필요없다. 클래스형 컴포넌트에서 이벤트 핸들링 - 함수 선언시 에로우 화살로 바로 선언 가능 - 요소 적용을 위한 this 필요 import { useState } from "react"; const EventPractice_func = () => { const [form, setForm] = useState({ user_name: "", user_age: "", }); const { user_name, user_age } = form; const onChangeForm = (e) => { const nextForm = { ...form, // 기존의 form 내용을 이자리에..

React에서 자주 쓰이는 javascript 문법 1. Object shorthand assignment let name="noona" let age=172 let person={ name:name, age:age } // => 키와 키값에 들어가는 변수의 이름이 동일하다면, 아래 코드로 수정할 수 있다. let person1={ name, age } 2. Destructuring let person={ name:"noona", age:20 } //let name2=person2.name //let age2=person['age'] // 위의 코드와 동일한 역할을 한다. let { name, age } = person // let{ name } = person 도 가능. console.log(name,age) // nonna, 20 // 배열에서도 사용..

[JS] 클린코드 - 경계 다루기 (min~max, first~last, prefix-suffix) 경계를 다룰 때 유의해야 할 점! 1. 최소값과 최대값의 포함 여부를 결정해야 한다 (미만 - 이하 / 초과 - 이상) 2. 변수 네이밍에 최소값, 최대값 포함 여부를 표현한다. ( MIN_NUMBER_LIMIT - 미만 , MIN_IN_NUMBER - 이하) 3. 함수의 인자값에서 이를 잘 나타낼 수 있도록 해야 한다. (호출하는 함수의 네이밍과 인자의 순서의 연관성을 고려) - 1. 매개변수가 2개가 넘지 않도록 - 2. arguments, rest parameter를 고려하기 3. 매개변수를 객체에 담아서 넘긴다. 4. 이미 만든 함수를 랩핑하는 함수를 만든다. min - max : 연속성, 규칙성이 있다. ex ) min=1, max=5 -> [1 , 2 , 3 , 4 , 5 ] function ..

[JS] 클린코드 - eqeq 줄이기, 형변환 주의하기, isNaN eqeq란? JS에서의 동등 연산자! '==' 그렇담 eqeqeq는 ? '===' //동등 연산자를 사용하면 암묵적인 형변환(type casting)이 일어남 '1' == 1 // true 1 == true // true '1' === 1 // false 1 === true // false // 암묵적인 형변환 예시 11 + '문자' // '11문자' !!'문자열' // true !!'' // false //명시적 변환 - 안전하게 형변환을 할 수 있다. String(11 + '문자') // '11문자' Boolean(!!'문자열') // true Boolean(!!'') // false parseInt('9.999',10) // 9 // parseInt의 경우, 두번째 꼭 인자값을 넣어줘야한다. 기본값..

[JS] 클린코드 (undefined, null) 개념, 차이점 undefined , null => 값이 없거나 정의되지 않은것(없다는 것을 명시적으로 표현한 것) undefined -> NaN null -> 0 type undefined type Object !null // true !undefined // true !!null //false null === false // false !null === true // true undefined == null // true undefined === null // false !undefined === !null // true //undefined : 선언했지만 값은 정의되지 않고 할당되지않음. let a; let b=null; typeof a // undefined typeof b // object //null은 숫자적..

이전 1 2 3 4 5 6 다음

728x90

티스토리툴바