Foresitory 🌳 Foresitory 🌳

JavaScript

• 화면 너비를 초과하지 않는 툴팁 만들기 w.React

  TECH 2024. 4. 28. 21:08

  툴팁은 클릭하거나 또는 마우스를 특정 구성 요소에 가져갔을 때(hover 했을 때) 상황에 맞는 도움말이나 정보를 표시합니다. 툴팁을 직접 만들어서 사용하던 중, hover 요소가 화면 상 오른쪽 끝에 위치할 때 툴팁의 컨테이너가 화면 너비를 넘어가는 현상을 발견했습니다.    다음과 같은 현상은 사용자가 예상한 대로 인터페이스가 동작하지 않고, 툴팁의 내용을 확인하기 위해 화면을 스크롤해야 하기 때문에 사용자 경험을 저해합니다. 따라서 위와 같은 경우를 개선하여 툴팁의 컨테이너가 화면의 가로 길이를 넘어가지 않도록 툴팁의 위치를 조정해 보도록 하겠습니다.    우선 수정 전 툴팁 코드는 다음과 같습니다.import styles from './tooltip.module.css';import IconQna..

  Read More
• useState, 클로저를 활용하여 동작한다고?

  TECH 2024. 1. 27. 21:48

  이번 포스팅에서는 클로저에 대해서 간단히 알아보고, 클로저가 활용되는 예시 중 하나인 useState의 내부 동작 방식을 자세히 알아보도록 하겠습니다. ✔️ 클로저란? 함수형 프로그래밍 언어에서 사용되는 중요한 특성 중 하나로, 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다. 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어이기 때문에 발생하는 현상입니다. W3C School에서는 클로저를 함수가 private한 변수를 사용할 수 있도록 한다고 설명합니다. 이 설명이 클로저의 기능을 쉽게 이해하는 데 도움이 되었습니다. 여기서 렉시컬 스코프란? 자바스크립트 엔진은 함수가 호출되는 위치가 아닌 함수를 어디에 정의했는지에 따라 함수의 상위 스코프를 결정합니다. 상위 스코프에 대한 참조는 함수 정의가..

  Read More
• [JavaScript] 더 나은 비동기 통신

  TECH 2022. 3. 27. 15:02

  프리온보딩 팀원들과 함께 면접 스터디를 시작했다! 이번 주 주제 중 하나인 Promise, callback hell, async/await, fetch 등에 대해 자세히 알아보는 시간을 가졌다. API를 통해 데이터를 가져올 때 async/await나 fetch를 사용하면서도 내부적으로 어떻게 동작하는지는 잘 모르고 있었는데 이번 기회에 내부 동작이 어떻게 이루어지는지 공부해 볼 수 있었다. 그럼 바로 시작~ ✔️ 콜백 함수 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 한다. 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수는 고차 함수(Higher-Order Function, HOF)라고 한다. 특정 작업을 n 번 반복시키는 함수가..

  Read More
• [React] Checkbox (1) — Context API로 Checkbox 상태 관리하기

  TECH 2022. 2. 19. 20:00

  프로젝트를 하면서 카테고리를 체크박스로 선택하고 버튼으로 해제하는 기능을 구현해야 했는데 버튼으로 체크박스를 해제하는 방식에서 고민을 많이 해, 포스팅으로 남겨 두려고 합니다. 임의의 배열 데이터로 체크박스를 만들고 Context API로 상태 관리하기 아래와 같은 데이터로 체크박스를 만들었습니다~ 더보기 // utils/sampleData.js export const data = [ "가을", "가람", "기쁨", "구름", "나리", "너울", "누리", "노을", "눈꽃", "다솜", "마음", "마루", "미르", "무늬", "맑음", "믿음", "뭇별", "바다", "방울", "보름", "봄꽃", "별빛", "별밤", "별숲", "사랑", "솔잎", "새벽", "새싹", "샛별", "아침", "..

  Read More
• 원티드 프리온보딩 프론트엔드 코스 1주차 회고 (2)

  ETC 2022. 2. 19. 15:46

  첫 번째 과제는 간단한 환율 계산기를 구현하는 과제였다. 우리 팀은 네 명으로 구성되어 있고 이번 과제는 두 명씩 나뉘어 하나의 계산기를 구현하는 과제였다. 내가 맡은 부분은 수취 국가를 선택하고 송금액을 입력하면 버튼 하단에 수취금액이 수취국가에 맞는 환율로 변환되어 출력되는 계산기였다. 지금 코드를 보면 참 엉성하다. 같이 프리온보딩 코스를 참여하는 사람들을 보면 이런저런 라이브러리, 프레임워크를 다룰 줄 아는 분들이 많이 계신데 나는 어떻게 합격을 해서 배우고 있나 싶을 정도다. 내가 문 닫고 들어온 게 아닌가 싶다. 1. API 호출 환율 정보를 받아 오기 위해 API를 호출해야 한다. 구현해야 하는 계산기가 두 가지인데, 같은 환율 API 정보를 쓰기 때문에 redux toolkit을 사용해 환..

  Read More