JSON(JavaScript Object Notation)은 데이터를 저장하거나 교환하기 위해사용하는 가볍고 읽기 쉬운 형식이다.특히 웹 개발에서 API 데이터 송수신에 자주 쓰인다.어찌 보면 쉽고, 간단하지만 놓칠 수 있는 부분까지 작성해보려 한다!       1. JSON이란 뭘까?  JSON은 사람이 읽기 쉽고, 컴퓨터도 해석하기 쉬운 텍스트 기반 데이터 형식이다.자바스크립트에서 객체를 작성하는 방식과 거의 똑같아서 배우기도 쉽고 작성도 간단하다.특히 XML보다 간결하고, 읽기 쉽다는 장점 때문에 최근 더욱 인기가 높아졌다.    2. JSON의 기본 문법  JSON 파일을 작성할 때는 몇 가지 규칙만 알면 된다. 데이터는 키(key)와 값(value)이 한 쌍으로 구성된다.키는 항상 따옴표(" "..

웹개발을 하다 보면 상태관리가 필요할 때가 있다.즐겨찾기 갯수의 증가, 인스타그램 좋아요 버튼 등등..   이때 Redux의 사용은 상태 관리를 보다 효율적으로 도와주는 도구다.이번 글에서는 Redux의 개념과 상태의 정의에 대해 자세히 알아보려고 한다.   상태(State)의 정의  상태는 애플리케이션의 특정 시점에서의 데이터나 정보를 나타낸다.사용자 인터페이스(UI)의 현재 상태를 반영하며, 사용자의 입력,서버로부터의 응답, 애플리케이션의 로직 등에 따라 변할 수 있다.예를 들어, 로그인 여부, 장바구니에 담긴 상품, 사용자의 설정등이 상태에 포함된다.상태는 보통 다음과 같은 특성을 가진다   변경 가능성: 사용자의 행동이나 애플리케이션의 이벤트에 따라 상태는 변할 수 있다. 중앙 집중식 관리: 상태..

오늘도 개발을 하던 중 측면에 넣어둔 카카오톡 상담하기 및nav bar 상단으로 이동하는메뉴바를 특정 스크롤까지 내렸을 때,고정되어 따라 내려오는 기능을 하고 싶었다.(원래는 특정 스크롤까지 내려오면 출력되게 해 놨음)    Goo글링을 하고 열심히 했지만, 정확한 설명이 안돼서 찾지 못하다가Sticky라는 기능을 찾았다!그것에 대해 정리해보려고 한다!(짧으니 쓰윽보면편하다!)          1. position: sticky란?position: sticky는 특정 요소가 스크롤 중에 지정된 위치에 도달하면 그 자리에서 고정되는 CSS 속성이다.일반적인 상대적 위치와 고정된 위치의 혼합형으로, 스크롤하다가 고정될 자리를 정할 수 있는 것이 특징이다.      (나는 Styled-in-component를..

웹개발 중 우리가 제공하는 파일을 다운로드할 수 있게 하는 기능을 구현하던 중.....선택에 기로에 놓이고 만다 니는 정적파일로 제공할래? 동적파일로 제공할래?  그게 뭔데? 대충 감은 오지만 정확한 상이 머리에 맺히지는 않더라그래서 정리의 시간을 가져봤다!       1. 정적 파일 제공 (Static File Serving)  정적 파일 제공은 미리 서버에 저장된 파일을 사용자의 요청에 맞춰 그대로 전달하는 방식이다.파일의 내용은 요청 시점에 변하지 않으며, 주로 HTML, CSS, 이미지, JavaScript 같은 파일들이 이에 속한다.   특징:미리 준비된 파일: 서버에 미리 저장된 파일로, 요청 시 변경되지 않고 동일한 파일이 제공된다.빠른 응답: 서버는 파일을 따로 처리할 필요가 없어서 요청에..

오늘은 어떠한 문법이나 라이브러리가 아닌 안 풀리던 문제가갑자기 팟!!! 하고 풀리는 개발스토리(부제: 로직설계) 간단하게 풀어보려고한다! 1. 기(起)  나는 현재 진행 중인 프로젝트에서대부분의 개발자들이 그렇겠지만 막 다른 길에 갇혀버린 생각이들 때가 있다.근데 나는 개인프로젝트라 자문을 구할 사람도 없어서, 할 수 있는 건 레퍼런스와 채찍피티선생님에게 찾아갈 뿐이다.그런데도 해결이 안 될 때가 있다. 특정 문법이나, 구문이 문제가 아니면각자 개발하고 구현하는 게 다 다르고오류가 발생하는 것이 아닌 로직을 설계하는 단계부터 막혀버리면참고할 레퍼런스도 없다.    근데 여태까지 그렇게 막힐 때마다 경험하는 것은1~2일, 길게는 일주일 동안 매달려서 머리를 꽁꽁 싸매도 해결이 안 되던 것이잠깐 딴짓하거나..

웹개발을 하던 중 우연히 알게 된 overflow (때는 바야흐로 웹을 구현하던중 공백 또는 여백이 발생해 구글링을 하며 알게 되었다..)    그때는 대충 공백을 없애주는 속성으로만 알고 있었는데 CSS를 입힐수록많은 overflow를 접하게 되어 정리해보려고 한다!   1. Overflow란 무엇인가?overflow는 요소의 크기보다 내부 콘텐츠가 더 많을 때 어떻게 처리할지를 결정하는 CSS 속성이다. 콘텐츠가 박스 밖으로 넘치는 경우 이를 어떻게 표시할지 설정할 수 있다. 주로 레이아웃을 짤 때,텍스트나 이미지 같은 요소들이 부모 요소를 벗어나는 상황을 제어하는 데 사용된다.     2. Overflow의 기본 값들overflow 속성에는 몇 가지 중요한 값들이 있다. 각각 어떻게 동작하는지 살펴..