목록전체 글 (134)
코로 넘어져도 헤딩만 하면 그만
이번 취뽀 면접 스터디에 좋은 기회로 함께하게 되었다. 사전에 개인적으로 공부하며 습득한 지식들은 있지만, 지식을 나만의 언어로 원활하게 전달하는 것이 쉽지 않았고, 또 언어로 표현할 때마다 스스로 듣기에 두서없이 느껴졌다. 이 때문에 면접 경험에 스스로를 노출시키는 것만이 발전할 길이라는 생각이 들어 선뜻 스터디에 지원하였다. 화요일마다 세명에서 네명의 소수 인원이 1:2 면접을 진행하는 방식이 될 것 같다🥰 지난 일주일 동안 혼자 외우고 공부한 지식을 바탕으로, 짧게 자기소개를 한 뒤 실제 회사에서 면접 보는 것처럼 디스코드에 모여 캠을 킨 상태로 진행하였다. 자기소개 이후 짧은 아이스브레이킹 시간이 있었고, 전반적인 인성면접을 본 뒤 기술 면접으로 들어갔다. 지난 주에는 JavaScript 기본 지..
 Cat API으로 무한 스크롤 복습(feat. Intersective Observer)
			
			
				Cat API으로 무한 스크롤 복습(feat. Intersective Observer)
				일전에 포켓몬 Api를 활용한 사이트에서 next Page 버튼으로 데이터를 넘기는 방식에서 더 나아가 무한 스크롤로 데이터를 추가하는 리펙토링을 하려 했는데, 중간에 어디선가 로직이 꼬이며 데이터 요청이 마음처럼 안 되었다(...) 그래서 이참에 react Query를 통한 데이터 사용과 Intersective Observer을 다시 복습하기로 했다. 무료로 제공되는 Cat Api를 활용하여 고양이_무한제공_사이트를 간단하게 만들어보았다. 기존에 쓰던 poketmon api 보다 불러오는 방식과 불려온 데이터 구조가 간단하여 연습에 도움이 될 것으로 보인다. 🍬이번에 사용한... - React - TypeScript - react Query - styled component - intersective ..
 장보기 todoList 만들기 4 emotion의 label
			
			
				장보기 todoList 만들기 4 emotion의 label
				🚩emotion과 label 장보기 todolist를 만들고 따로 emotion을 학습하면서 눈에 들어왔던 기능이 있다. 바로 label을 붙일 수 있다는 점이다. styled-component나 emotion은 기존 css를 쓰던 방식과 달리 스타일을 적용하기 위해 각 태그에 'class'명을 지정할 필요가 없어졌다. 즉 해시값으로 무작위로 겹치지 않는 클래스명을 만들어주기 때문에, 개별 스타일을 갖되 일일이 className은 지정해주지 않아도 되는 편리함이 있었다. 하지만 이렇게 class-name을 지정하지 않자 문제점도 발생한다. 에러를 해결하기 위해 개발자도구를 열어 살펴본다고 가정해보자. 기존에는 와 같이 구역을 전부 이름으로 구분해줬기 때문에 개발자 도구에서도 코드와 일치하는 태그를 찾기가..
 장보기 todo-List 만들기3(emotion 학습)
			
			
				장보기 todo-List 만들기3(emotion 학습)
				🚩Emotion 1) 조금 더 깔끔하게 쓰기 위하여(≠styled-component 방식) import React from "react"; import { listState } from "./atoms/listState"; import { useRecoilState } from "recoil"; import { MdDelete } from "react-icons/md"; import { FaPenToSquare } from "react-icons/fa6"; /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; function TodoItem({item}) { const [todo, setTodo] = useRecoilSt..
 장보기 todo-List 만들기2(recoil 학습)
			
			
				장보기 todo-List 만들기2(recoil 학습)
				🚩Recoil 1) 검색 기능 추가하기 (Recoil) 지난번에 스터디원 분께 말씀드린 대로 야심차게 검색 기능을 추가 하였다. 처음엔 그저 평범한 todo-list라는 명목으로 시작했으나 만들다보니 '장 보기 목록(어쨌든 장보기도 todo 아닌가?)'느낌으로 진행되었기 때문에… 만약 장 보기 목록이 아주 길어진다면 한눈에 이 아이템을 적었는지 알기 어려울 것이다. 이런 곤란한 경우를 대비하여 검색 기능을 활용해보기로 하였다. 우선, 완성된 레이아웃은 아래와 같다. function Header() { const [searchValue, setSearchValue] = useRecoilState(searchState); const setFilteredTodo = useSetRecoilState(filter..
두 대 이상의 컴퓨터 프로그램이 서로 통신하는 방법이자, 컴퓨터 사이에 있는 중계 계층을 말한다. 우리는 상대가 가진 컴퓨터가 어떤 데이터 베이스나 서버를 갖고 있는지는지 전혀 모르지만, 이 중계 계층인 API를 통해 얼마든지 다른 컴퓨터 프로그램과 소통이 가능하게 된다. 🤚잠깐! 인터페이스? : 서로 다른 두 개의 시스템 사이에서 정보나 신호를 주고받는 경우 그 점점이나 경계면. 🚩API의 장점 - 정보의 제공자가 자기 서비스의 중요 부분을 드러내지 않고, 자신이 드러내고 싶은 부분만 선택적으로 보여줄 수 있다. - 정보를 사용하고자 하는 사용자도 해당 서비스의 복잡한 부분까지 알 필요없이 자신이 원하는 정보만 받을 수 있다. - 앱 개발 프로세스를 단순화시키고 비용을 감소 시킨다. - 서비스 내부 프..
XML이란 마크업 형태를 쓰는 데이터 교환 방식이다. 마크업 언어는 '태그 등을 이용하여, 문서나 데이터의 구조를 나타내는 언어의 한 방식'을 뜻하는데, 흔히 보는 html 코드도 대표적으로 마크업 형태를 띠고 있다. 여기가 구조입니다. 🚩XML의 구성 1) version, encoding을 나타내는 첫번째 줄 2) 단 하나의 루트 요소. 문서의 최상위 요소를 의미하며, 하나의 XML문서는 하나의 루트 요소만을 가진다. 3) 하위 요소들 Clasic 8track 🚩HTML과 XML의 차이는? 1) XML은 태그가 정해져 있지 않아 개인이 원하는 모양으로 커스텀하여 만들 수 있다. 반대로 HTML은 쓸 수 있는 태그들이 미리 지정되어 있다. //XML은 하위와 같이 원하는 대로 태그를 디자인 할 수 있다...
🚩JSON파일이란? 자바스크립트 객체 문법으로 구조화된 데이터 교환 형식으로, 여러 언어에서 데이터 교환 형식으로 쓰이며 객체문법 외에도 단순 배열, 문자열로도 표현 가능하다. JSON 파일을 자바스크립트에서 쓰고 싶다면 JSON.parse() 를 통해 자바 스크립트에서 사용할 수 있는 객체로 바꾸어 주어야 한다. 절대 그대로 가져다가 쓸 수가 없다. 이와 유사하게 파이썬에서는 JSON 파일을 가공하기 전에 딕셔너리로 바꿔주는 과정이 꼭 필요하다. JSON은 단순 문자열이나 배열로 표현할 수 있다. 흔히 보이는 {} 같은 형태가 아니라 [], ""여도 가능하다는 것. 그러나 보통은 {"키": "value"}형태로 쓰이고, 여러 개의 묶음인 JSON Array로 쓰이거나 JSON object로 쓰는 게 일..