본문 바로가기

전체 글

(64)
TIL no.33 - Styled Components : React SASS 가 익숙해질 때 쯤 새로운 기술을 배워줘야 배움이 가중되는 법이죠. 처음 배울 때는 왜 이걸 배워야 하나 그냥 하던 거 하고 싶다는 생각이 더 들었는데 쓰다보니까 역시 처음은 뭐든지 어렵고 최근 기술은 편리합니다. Styled Components를 사용해야 하는 이유 🌟클래스 명을 겹치지 않게 하기 위해서 🌟 funtional Component 와 함께 사용하며 동적인 변화를 표현할 수 있기 때문에 🌟 npm 다운로드 수 기준으로 현재 가장 인기 있는 css-in-js 로 사용자가 많기 때문 npm install --save styled-components import styled from 'styled-components' function HelloWorld() { render( Hello W..
TIL no.32 array.some(), array.every() : javascript method 아는 만큼 해결할 수 있는 능력이 커진다고 프로젝트를 진행하면서도 더 많은 메소드를 접하고 공부하는 것이 중요할 것 같습니다. array.some() const getSuperCoolTeam = ['프론트하늘', '프론트민승', '프론트보현', '프론트양효', '백소정', '백재용']; const backEnd = (person) => !person.indexOf('백'); getSuperCoolTeam.some(backEnd) // 결과값은 true 입니다. '백'이라는 인덱스를 포함한 person이 두명이나 있기 때문에 결과는 true입니다. array.some은 하나라도 true 라면 true 를 반환하는 메소드입니다. array.every() const numbers = (num) => num <..
TIL no.31 array.filter() 기능 : 쇼핑몰 카테고리 필터 기능 : 리액트 인스타그램을 클론하는 위스타그램 프로젝트를 진행하면서 아이디를 검색하는 필터 기능을 적용해보지 않아서 이번 프로젝트에서 필터 기능이 있는 페이지를 선택하게 되었습니다. 필터 기능은 array 배열에서 조건에 맞는 값들로만 새로운 배열을 만들어주는 메소드입니다. const numbers = [1, 6, 7, 56, 43, 23, 14, 36, 21, 29]; const result = numbers.filter(num => num.length < 30); console.log(result); result = [1, 6, 7, 23, 14, 21, 29] //결과값 위와 같이 원하는 조건을 필터로 걸러주고 result 라는 새로운 배열에 담아 줍니다. 항상 기본 개념은 들으면 이해가 되지만 활용이 참 어려운..
[wecode 후기] 1차 프로젝트를 마치며 프로젝트 데모영상 구현한 부분 - ProductList 페이지에서 이중 카테고리 필터 기능을 filter 메소드를 사용하여 구현했습니다. 첫번째 카테고리에서 선택된 메뉴와 두번째 카테고리에서 선택된 메뉴를 각각의 배열로 관리하여 그 배열안에 있는 메뉴들로 필러링하였습니다. 현재 함수형 컴포넌트와 react hook 을 사용해 리팩토링한 코드입니다. - 이 외에 다양한 애니메이션을 디테일을 살려 구현하기 위해 css로 직접 구현했습니다. 비교적 많은 애니메이션이 있던 사이트로 이 프로젝트를 하면서 html, css 의 실력을 탄탄하게 만들 수 있었던 것 같습니다. 회고록 1차 프로젝트를 하면서 초반에 순조로운 시간들도 있었지만 마지막에 저에게 어려움이 되는 순간들이 있었습니다. 그 시간들이 떠오르면서 후회..
TIL no.29 - HTTP  공부 많이 안하신 분들도 HTTP는 어디선가 많이 본 듯한 익숙한 느낌이 드실 겁니다 인터넷 주소를 칠 때마다 매번 마주하기 때문일까요? HTTP = Hypertext Transfer Protocol html 문서와 같은 리소스들을 가져올 수 있게 해주는 프로토콜 입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 정의: mozila - 프로토콜은 컴퓨터 내부에서 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙체계를 말합니다. 따라서, HTTP는 html 문서와 같은 리소스들을 통신하는데 지켜야 할 규약을 말합니다. HTTP의 특징으로는 Request / Response (요청 / 응답) HTTP 통신의 핵심은 요청과 응답입니다. Sta..
TIL no.28 - 부모-자식 간 Lifecycle & 조건부 렌더링 : React 처음 React를 배울 때 Lifecycle 에 대해서 배웠었는데 그 때는 그다지 중요하지 않다고 생각했는데 Lifecycle 로 인한 에러를 자주 만나게 되었습니다 ㅠㅠ 그래서 지금 Lifecycle에 대해 정리해두려고 합니다 ! Lifecycle 순서 1. constructor 2. render 3. componentDidMount 4. (fetch 완료) 5. render 6. (setState)
TIL no.27 - return 의 사용 : JavaScript 모든 함수는 반환(return)을 합니다. return 함수 함수는 항상 데이터를 반환하기 때문에 그 결과를 변수에 저장할 수도 있고, 다른 로직에 다시 사용할 수도 있습니다. 덧붙이자면, 모든 함수가 return을 포함해야 하는 건 아닙니다. 함수 내부에 return 키워드를 생략할 수도 있습니다. 하지만 이 경우에도 함수는 무언가를 반환하고 있습니다. 함수가 반환을 생략하면 undefined라는 값을 반환합니다. 그리고 함수에서 return 문이 실행되면 반복문의 break 문과 비슷하게 코드가 강제로 종료됩니다. 한마디로 return 문은 데이터 결과값을 반환합니다. function getName(name) { return name + '님'; } 코드 블럭 12번째 줄, getName() 함수를 ..
TIL no.26 - [React 2탄] Component & JSX 리액트의 가장 큰 장점에 대해서 이야기하자면 규모가 커지고 다양한 UI를 구현하게 되면서 유지보수하기 힘들어진 코드를 관리하기 편하게 만들어졌습니다 ! 이 가장 큰 장점은 바로 Component라는 재활용 가능한 UI 구성 단위 때문입니다. 바로바로 Component가 React에서 얼마나 중요한 요소인 지를 알려주는 대목입니다. 그럼 한번 정리해보도록 하겠습니다 ! - Component 종류 Class Component : stateful 함수라고 불리며 Component 내부에 state를 가지며 라이프사이클이 있는 컴포넌트입니다. 최근에 functuinal Component가 등장했으며 Class Component로만 Component를 만들면 성능이 악화될 수도 있습니다. import React ..