본문 바로가기

전체 글

 (64)
React Native 첫걸음 기록 위코드에서 html, css, JavaScript를 배우며 프론트엔드 개발 공부의 발을 내딛고 React를 새로 배우며 새로운 언어를 배우는 거에 대해 거부감을 없애게 되었고 이제는 어느덧 기업협업에 나와 React Native 를 사용하는 저를 마주하게 되었습니다. 처음에 제가 딱 기본적으로 들어봤던 html, css, JavaScript를 배울 때는 이것들을 다 완벽히 이해해야지 다른 언어를 배울 준비가 되었다고 생각했었습니다. 하지만 억지로 떠먹여진 것들이 결국 소화되는 과정들을 겪으며 새로운 언어를 마주했을 때 내가 해낼 수 있을 것이라는 자신감도 생기게 되었습니다. '아직 JavaScript 도 잘 알지 못하는데 내가 React를 해낼 수 있을까' 생각하던 제가 지금은 주저없이 구글링을 하고 공..
TIL no.40 - * generator 이해하기 : redux-saga를 위한 * generator 는 ES6에서 등장한 개념으로 함수의 실행을 중간에 멈추고 재개할 수 있게 하는 기능입니다. 실행을 멈출 때 값을 전달할 수 있기 때문에 반복문에서 제너레이터가 전달하는 값을 하나씩 꺼내서 사용할 수 있습니다. generator 생성 - 제너레이터는 * 와 함께 정의된 함수가 반환하는 객체입니다. - yield 와의 사용을 주로 볼 수 있는데 yield를 사용하면 함수의 실행을 break와 같은 기능으로 멈출 수 있습니다. yield의 사용으로 return을 여러 번 할 수 있습니다. function* GeneratorFunction() { yield 1; yield 2; yield 3; } const Generator = GeneratorFunctuin(); console.log(..
TIL no.39 - axios 를 이용한 서버 통신 방법 ! axios 는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다. *HTTP axios 의 특징 - Promise(ES6) API를 사용 - 요청과 응답 데이터의 변형 - HTTP 요청 취소 (요청 중단 가능) - HTTP 요청과 응답을 JSON 형태로 자동 변경 - async/await 문법을 사용하여 쉽게 XHR 요청 가능 - Node.js 에서의 사용 *XHR axios 에서 사용하는 HTTP 메소드 GET : 입력한 url 에서의 데이터를 받아오기를 요청합니다. axios.get(url,[,config]) GET 메소드는 데이터의 값이나 상태를 변경할 수 없습니다. 데이터를 받아와 읽고 보여주는 역할만 합니다. axiosa는 Promise 를 사..
TIL no.38 - Promise 란 무엇인가 ? 개념 정리와 이해 Promise 는 자바스크립트 비동기 처리에 사용되는 객체입니다. *비동기 처리란 특정 코드의 실행이 완료 된 후에 다음 코드를 실행하는 것이 아니라 특정 코드의 실행이 되는 동안에 다음 코드를 수행하는 자바스크립트의 특성을 말합니다. 콜백을 쓰지 않고 비동기 코드를 깔끔하게 구현하기 위해서 Promise를 사용합니다. 에러를 콜백함수로 길게 처리하지 않고 promise안에 있는 resolve, reject를 통해 깔끔하게 에러 처리할 수 있습니다. Primise 는 서버에서 받아온 데이터 API를 연결할 때 쉽게 볼 수 있는데요. 만약에 Get method를 이용해 API를 받아오고 받아온 API key를 이용해서 함수가 작동된다고 생각해봅시다. 자바스크립트의 비동기 처리에 따르면 API 데이터를 가져..
[wecode 후기] 2차 프로젝트를 마치며 프로젝트 데모영상 구현한 부분 - Product Details 페이지를 구현했습니다. 대부분의 데이터를 프론트에서 처리하기보다 UX를 생각해 데이터로 기록해두어야 하는 부분이 많았습니다. 그렇기 때문에 간단히 state로 관리하는 부분보다는 대부분 백엔드와 연결해야 하는 부분을 구현했습니다. - 클래스형 컴포넌트로 진행했던 저번 프로젝트와는 달리 함수형 컴포넌트로 진행하면서 react hook을 익히고 styled components 의 사용을 익히며 진행한 프로젝트였기 때문에 구현한 부분의 양보다도 새로운 것을 습득하며 진행했기 때문에 더 탄탄해졌다고 생각합니다. styled components 를 사용해 props 값에 따른 스타일을 구현할 수 있던 점이 프로젝트에서 매우 편리하게 사용되었습니다. 회..
TIL no.36 - React Hooks useEffect 의존성 배열 ?! 의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수입니다. 의존성 배열의 내용이 변경되었을 경우 부수 효과 함수가 실행됩니다. 의존성 배열을 사용하지 않고 아래와 같은 함수를 실행한다면, useEffect(() => { fetch(API_BOOK) .then((res) => res.json()) .then((res) => setBooks(res.MESSAGE)); }); 페이지가 렌더링 될 때마다 데이터를 불러오기 때문에 매애애우 비효율적입니다. 저번에 의존성배열을 지워볼까? 하고 지워봤다가 백엔드분이 뭔가 잘못된거같다고 데이터를 자꾸 불러온다 그래서 얼른 의존성 배열을 다시 적어줬던 기억이 있습니다.. ㅎㅎ 그래서 부수 함수효과에서 API를 호출하는 경우, 의존성 배열에 넣어주면 배열안의 ..
TIL no.35 - 더보기 버튼 만들기 ellipsis 긴 글을 감추는 모양인 ...과 함께 나오게 하기 위해서 아래와 같은 코드를 사용하면 됩니다 ! p.close 에서는 숨겨져 있도록 하고 p에서는 원래의 글이 다 보이도록 height를 100% 주었습니다. overflow : 넘치는 부분은 hidden 으로 가리고 text-overflow: ellipsis 는 ...을 표현해줍니다. display: -webkit-box 로 하고 -webkit-line-clamp 은 나오게 하고 싶은 줄의 수만큼 표시합니다. 위와 같이 className 이 바뀌게 하기 위해서 onClick 이벤트를 주었습니다.
TIL no.34 - How to fetch api in React Hooks? useEffect 는 setState 에서 state를 업데이트 해왔듯이 useEffect로 특정한 변화에서만 업데이트 시키도록 하는 것입니다. useEffect(() => { fetch("/data/BookDetails/data.json") .then((res) => res.json()) .then((res) => setData(res.MESSAGE)); }, []); 이와 같은 코드로 class 형 component와 같은 결과를 보일 수 있습니다. useEffect 는 여러가지 라이프 사이클이 합쳐진 형태로 설명할 수 있습니다. componentDIdMount (의존형 배열 : []) shouldComponentUpdate (의존성 배열 내에 해당 사항 없을 경우) componentDidUpdate..

티스토리툴바