코로 넘어져도 헤딩만 하면 그만

이번 취뽀 면접 스터디에 좋은 기회로 함께하게 되었다. 사전에 개인적으로 공부하며 습득한 지식들은 있지만, 지식을 나만의 언어로 원활하게 전달하는 것이 쉽지 않았고, 또 언어로 표현할 때마다 스스로 듣기에 두서없이 느껴졌다. 이 때문에 면접 경험에 스스로를 노출시키는 것만이 발전할 길이라는 생각이 들어 선뜻 스터디에 지원하였다. 화요일마다 세명에서 네명의 소수 인원이 1:2 면접을 진행하는 방식이 될 것 같다🥰 지난 일주일 동안 혼자 외우고 공부한 지식을 바탕으로, 짧게 자기소개를 한 뒤 실제 회사에서 면접 보는 것처럼 디스코드에 모여 캠을 킨 상태로 진행하였다. 자기소개 이후 짧은 아이스브레이킹 시간이 있었고, 전반적인 인성면접을 본 뒤 기술 면접으로 들어갔다. 지난 주에는 JavaScript 기본 지..

일전에 포켓몬 Api를 활용한 사이트에서 next Page 버튼으로 데이터를 넘기는 방식에서 더 나아가 무한 스크롤로 데이터를 추가하는 리펙토링을 하려 했는데, 중간에 어디선가 로직이 꼬이며 데이터 요청이 마음처럼 안 되었다(...) 그래서 이참에 react Query를 통한 데이터 사용과 Intersective Observer을 다시 복습하기로 했다. 무료로 제공되는 Cat Api를 활용하여 고양이_무한제공_사이트를 간단하게 만들어보았다. 기존에 쓰던 poketmon api 보다 불러오는 방식과 불려온 데이터 구조가 간단하여 연습에 도움이 될 것으로 보인다. 🍬이번에 사용한... - React - TypeScript - react Query - styled component - intersective ..

🚩emotion과 label 장보기 todolist를 만들고 따로 emotion을 학습하면서 눈에 들어왔던 기능이 있다. 바로 label을 붙일 수 있다는 점이다. styled-component나 emotion은 기존 css를 쓰던 방식과 달리 스타일을 적용하기 위해 각 태그에 'class'명을 지정할 필요가 없어졌다. 즉 해시값으로 무작위로 겹치지 않는 클래스명을 만들어주기 때문에, 개별 스타일을 갖되 일일이 className은 지정해주지 않아도 되는 편리함이 있었다. 하지만 이렇게 class-name을 지정하지 않자 문제점도 발생한다. 에러를 해결하기 위해 개발자도구를 열어 살펴본다고 가정해보자. 기존에는 와 같이 구역을 전부 이름으로 구분해줬기 때문에 개발자 도구에서도 코드와 일치하는 태그를 찾기가..

🚩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..

🚩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로 쓰는 게 일..