Front-End97 [React] 현재 스크롤 위치 얻기 오늘은 React에서 현재 스크롤의 위치를 얻는 방법에 대해 알아보자. 필자는 작업 중이던 애플리케이션에서 숫자가 1에서 350으로 점차 증가하는 애니메이션을 추가했는데 문제는 해당 컴포넌트가 페이지의 맨 아래에 위치했기 때문에 유저가 스크롤을 다 내렸을 때에는 이미 애니메이션이 모두 끝난 이후였다. 따라서 현재 스크롤의 위치를 파악하여 특정 위치에 도달하면 애니메이션을 시행하는 로직이 필요했다. 코딩 초보에게 스크롤의 위치파악이란 다소 어렵게 느껴질 수 있다. 하지만 겁먹지 말자. 웹 어플을 만드신 천상계 개발자 분들이 이미 window 객체 안에 관련 데이터를 얻을 수 있도록 여러 가지 객체를 담아놓았다. (감사합니다 ㅠㅠ) 아래 코드는 현재 Y축 스크롤 위치를 알려주는 착한 프로퍼티인데, windo.. 2022. 3. 5. [React] 데이터 로딩과 렌더링 작업속도차이 문제 오늘 아래와 같은 상세페이지 작업을 하던 와중에 변수들이 대거 undefined 오류 문제를 발생시켰다. 음.. 왜 그럴까? 문제는 데이터 로딩 속도와 렌더링 작업 속도의 차이 때문이었다. 작업 속도라기보다는 비동기 문제가 더 정확한 워딩인 듯하다. 즉, 상세페이지를 위한 이미지와 정보를 불러오는 와중에 자바스크립트 엔진은 html을 렌더링 해버리기 때문에 아직 데이터가 넘어오지 않아 변수 선언 및 할당에 문제가 발생하는 것이다. 나는 아래와 같이 삼항 연산자를 이용해 넘겨주는 데이터가 정의되었을 경우에만 props를 내려주는 방식으로 해결했다. {accommodationDetail ? : null} {accommodationDetail ? : null} 2022. 1. 23. [React] https 통신문제 리엑트로 클라이언트 부분을 룰루랄라 다 만들고 서버와 데이터를 주고받으려는데 이게 뭐지? CORS 에러가 발생했다. 분명 서버에 CORS 설정도 다 끝냈는데 왜 그럴까? 문제는 https통신에 있었다. 서버 측에서 데이터를 주고받기 위해 https 통신을 사용하도록 되어 있는데 react에서는 default 값으로 http 통신을 사용하는 듯하다. 이에 대한 해결방법은 react를 시작할 때 https 통신을 사용할 것임을 알려 주는 것이다. package.json에서 npm start 설정을 아래처럼 수정하니 정상적으로 서버와의 통신이 이루어졌다. HTTPS=true SSL_CRT_FILE=cert.crt SSL_KEY_FILE=cert.key npm start 관련해서 공식문서에도 잘 설명되어 있으니.. 2022. 1. 23. [CSS] Position absolute 정리 오늘은 CSS의 Position 설정에 대해 알아보자. Position에는 아래와 같은 설정들이 있다. position: static; position: relative; position: absolute; position: fixed; position: sticky; Position: static static 설정은 위 사진과 같이 위처럼 박스가 배치된다. 기본 설정으로 따로 position 설정을 하지 않으면 기본적으로 static 값이 적용된다. 위에서 아래대로 흐름대로 배치가 되며 top, right, bottom, left, 그리고 z-index 등과 같은 설정값이 전혀 효과가 없는 게 특징! Position: relative relative 설정은 static + top, right, bott.. 2022. 1. 7. [React] 다른 OS에서 React 작업 시 유의할 점 집에서 작업할 때는 보통 Window 운영체제를 사용한다. (카카오톡 때문에...) 하지만 노트북의 경우 Linux 운영체제를 사용하기 때문에 오늘 사람 구경도 좀 할 겸 카페에 나가서 노트북으로 git clone을 해서 react 프로젝트 리파지토리를 복사를 했다. 그리고 여느 때와 마찬가지로 npm run start를 누르는 순간 에러가 발생하기 시작했다. 정확한 에러 코드는 기억이 나지 않지만, 대충 chlid-compiler is not a function 위와 같은 에러코드 였던 것 같다. 아무리 생각해도 운영체제와 관련된 문제인 듯하여 구글링을 해보니 아니나 다를까 운영체제가 다름으로서 나타나는 문제였다. 필자는 이 현상을 아래와 같은 방식으로 해결했다. node_modules를 삭제한다. n.. 2021. 12. 25. [React] Presentational vs Container Component React를 조금 더 심도 있게 들어가거나, 조금 큰 규모의 component를 작성하다 보면 Presentational Component와 Container Componenet에 대해 접하게 된다. 막상 들으면 "뭐지?" 하고 와닿지는 않는데, 알고 보면 아주 쉬운 개념이다. 아래 블로그에 자세히 설명이 되어 있어 번역해 옮겨본다. 출처: https://flaviocopes.com/react-presentational-vs-container-components/ React: Presentational vs Container Components The difference between Presentational and Container Components in React flaviocopes.com Th.. 2021. 12. 10. [React] State값을 직접변경하면 안되는 이유 React에서 state값을 변경할 때 항상 강조하는 부분은 State를 직접 변경하면 안 된다는 점이다. React를 처음 배울 때는 시간이 없어서 '그냥 그런갑다~'하고 넘겼지만, 오늘은 조금 깊게 왜 그런지 원리를 알아보고자 한다. 위의 이유를 알기 위해서 우선은 'Shallow Equality Check'에 대한 개념부터 이해해야 한다. Shallow Equality Check Shallow Equality Check 개념은 이전 포스팅에서 다루었던, Shallow copy vs Deep copy와 비슷하다. Shallow compare works by checking if two values are equal in case of primitive types like string, numbers .. 2021. 12. 10. [Redux] Redux의 세 가지 원칙 상태 관리 라이브러리 Redux는 세 가지 원칙이 있다. 이는 리덕스 공식 페이지에서도 한 섹션을 차지할 정도로 근본적인 리덕스의 작동 원칙을 설명하는 것들인데, 오늘은 공식문서에 설명하고 있는 Redux의 세 가지 원칙에 대해 알아보자. Single source of truth '어플리케이션의 글로벌 state는 하나의 store 안 객체 트리에 저장된다.' 이 원칙은 서버의 state를 별다른 코딩 작업 없이 serialize 하고 데이터를 공급하는 전체적인 애플리케이션 제작이 쉽도록 해준다. 또한 하나의 state 트리는 디버깅에 유리하고 빠른 개발 사이클 속에서 애플리케이션의 state 유지에 도움을 준다. 예를 들어, 이전에는 구현하기 어려웠던 undo/redo와 같은 기능들이 하나의 트리에 s.. 2021. 12. 6. [React] React에서 this는 무엇인가? 코딩 초급자 입장에서 this란 개념은 아무리 공부해도 새로운 느낌이다... 역시나 React에서도 this는 어김없이 등장하는데, 오늘은 다시 한번 this에 대해 이해하는 시간을 가져보려고 한다. 사실 이건 javascript 카테고리 안에 작성해야 하는 글이나, React를 공부하는 도중 학습한 내용이므로 React 카테고리에 글을 올린다. 마찬가지로 관련해서 자세한 설명이 있는 글이 있어 번역하여 옮겨본다: 출처: https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480 What is ‘this’ in React? And why do we use it all the time? medium.com What is ‘this’ in R.. 2021. 12. 5. [React] React의 세가지 특성 React를 이용한 프론트엔드 웹 어플리케이션 제작 학습을 마치고, 배포까지 살짝쿵 건드려본 지금 시점에서, 서두르지 않고 다시 초심으로 React의 기초를 한번 다져보려고 한다. React의 세가지 특징 React는 세가지 특징이 있다. 한국어로는 범용성 / 컴포넌트 기반 / 선언형 이렇게 세 가지로 구분을 하는데, 관련 내용은 React 공식 문서 페이지의 랜딩 페이지에서 맨 처음 언급하고 있다. 관련 내용을 번역해서 옮겨본다. 출처: https://reactjs.org/ React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org Declarati.. 2021. 12. 5. Redux Basics with Code Examples (Redux 예제) 이전 포스팅에서 Redux에 대한 기본적인 개념과 탄생 배경에 대해 알아보았다. 이번 포스팅에서는 예제코드를 통해 어떻게 코드를 짜는지 살펴보자. 이와 관련해 상세히 정리해놓은 글이 있어 번역하여 올려본다. 출처: https://www.freecodecamp.org/news/redux-for-beginners/ Redux for Beginners – Learn Redux Basics with Code Examples Redux can be confusing for beginner React developers to understand. There are a lot of concepts you need to know to use it properly, like reducers, actions, store,.. 2021. 12. 3. Redux WHAT IS REDUX? 오늘은 리덕스의 기본 개념에 대해 알아보도록 하자. 리덕스와 관련되어 자세하게 설명된 글이 있어, 아래와 같이 번역하여 옮겨본다. 출저: https://www.robinwieruch.de/react-redux-tutorial/ React Redux Tutorial for Beginners [2019] A complete React Redux tutorial for beginners: Learn how to build React Redux applications from scratch by following this step by step implementation of an example application ... www.robinwieruch.de WHAT IS REDUX? 리덕스는 어플리케이션에서 .. 2021. 12. 2. 이전 1 ··· 4 5 6 7 8 9 다음
