-
Develop
2025년은 나에게 무엇을 주었는가 - 2025년 회고
서론2025년에서 나에게 가장 중요했던 키워드는 아무래도 취업이었다.광주소프트웨어마이스터고등학교를 다시면서 대부분의 선배들은 3학년 3분기~4분기 사이에 취업을 하시는 모습을 봐왔기 때문에나도 그쯤에는 취업을 해야겠다라는 생각을 자연스럽게 갖게 되었다.그래서 이번 2025년도 회고에서 취업전까지는 대부분의 내용이 취업에 관한 내용이다. 2025년 정리Q1이때는 방학과 학기초인데 이때에는 주로 2024년 말부터 조금씩 써놓았던 포트폴리오를 본격적으로 작성하기 시작했었다.포트폴리오를 작성하면서 생각했었던 것들은 다른 지원자들과 차별화된 포트폴리오를 작성하고 싶었는데(신입 포폴같지 않은 포트폴리오) 막상 작성할때가 되니 크게 기록을 해둔것이 없어서 왜 기록을 안했을까? 하면서 기억을 쥐어 짜내면서 나름 힘들게..
-
Develop
concurrently를 사용하여 CI/CD 속도 개선하기
서론최근에 Hello, GSM 프로젝트를 한번 둘러봤는데 내가 작성했었던 build 명령어를 실행했을때의 속도가 좀 많이 느리다는것을 체감하였다.// package.json"scripts": { "build": "pnpm client build && pnpm admin build && pnpm storybook build-storybook && pnpm api lint && pnpm shared lint && pnpm types lint"} build 명령어가 이렇게 작성되어있는 이유는 모노레포 프로젝트로 제작이 되어 있어 root에서 모든 package의 build, lint 검사를 하도록 하여 여려 명령어를 작성하는 번거러움을 줄이기 위해서였다. 문제는 속도였다 나의 개발 환경에서 pnpm buil..
-
Web
반응형, 적응형 웹에 대해 이야기를 해볼게요
서론최근 10년 동안 스마트폰 사용자는 꾸준한 증가세를 보여왔으며, 이러한 추세는 앞으로도 계속될 것으로 예상된다.스마트폰 보급이 확대되면서 인터넷에 접근할 수 있는 인구도 자연스럽게 늘어나, 웹 사용자 수 또한 스마트폰 사용자 증가와 비례하여 지속적으로 증가해 왔고 앞으로도 계속 증가할 것 같다. 원래 웹은 주로 PC 사용자를 위한 서비스로 설계되었지만, 스마트폰 보급률이 급격히 증가하면서 현재는 웹 접속 기기의 절반 이상이 모바일에서 이루어지고 있습니다. 이에 따라 스마트폰 환경에 최적화된 뷰를 제공하기 위한 반응형 웹(responsive web)과적응형 웹(adaptive web) 이 대중화되었습니다. 원래도 pc view의 사이즈가 각각 달랐기 때문에 반응형 웹과 적응형 웹이 있기는 했습니다.반응..
-
Next
이것도 해결해야하나요? ..... - hydration error
서론최근 프로젝트를 진행하면서 신기한? 황당한? 일을 겪게 되어 글을 남기게 되었다.작업 환경Operating System: Platform: macOS Arch: arm64 Version: 15.0.1 (24A348)Binaries: Node: 20.15.0 pnpm: 9.4.0Relevant Packages: next: 15.3.3 react: 18.2.0 react-dom: 18.2.0 typescript: ^5Error여느 때와 같이 개발을 진행하고 있던 중 console에 error log가 있어 확인해 보니 hydration error였다.hydration errornextjs에서는 기본적으로 SSR(server side rendering)을 지원한다.그래서 node.js se..
-
Develop
첫 취업 준비 후기
서론며칠 전, 처음으로 한 회사의 채용 프로세스를 모두 마무리하게 되어 그 과정을 되돌아보며 회고를 남겨보려 한다. 일단 현재 나의 상황은 19살 광주 소프트웨어 마이스터고등학교에 다니는 3학년 학생이다. 소프트웨어 마이스터고등학교 학생이 개발자로 취업하는 방법은 크게 2가지가 있다. 첫번째는 일반 취준생과 같이 채용 정보 사이트를 활용하여 지원하는 방법이 있고,두번째는 회사에서 학교로 채용 문의를 보내서 지원을 하는 방법이 있다. 나는 두번째 방법으로 회사에 지원하게 되었고, 지원을 하면서 포트폴리오도 같이 제출하였다.내 포트폴리오해당 회사를 지원한 이유일단은 회사 이름은 따로 언급을 하지 않고 말을 하자면 해당 회사는 압도적인 속도를 가지고 그에 맞는 결과를 증명해내고 있는것이 멋있다고 생각했고 회사..
-
JS, TS
RORO 패턴
서론개발을 하다 보면 이미 만들어진 함수나 라이브러리를 사용할 때, 일부 함수들이 매개변수를 객체 형태로 전달받는 경우를 종종 볼 수 있다. 처음에는 한두 군데에서만 그런 방식을 사용하길래 크게 신경 쓰지 않았지만, 생각보다 많은 곳에서 객체를 통한 매개변수 전달을 사용하는 것을 보고 그 이유가 궁금해져 관련 내용을 찾아보게 되었고, 이에 대해 글을 작성하게 되었다.RORO구글링을 해보니 객체를 통해 매개변수를 전달하는 방식을 RORO 패턴이라고 부른다.RORO는 Receive an object, Return an object의 약자로 객체를 통해 받고, 객체를 통해 반환한다라는 뜻이다.명명된 인수RORO 패턴은 명명된 인수 방식을 활용하는 패턴이다.명명된 인수 방식이란 함수를 사용할 때 인수에 이름을 ..
-
JS, TS
aws lambda를 사용해서 디스코드 정기 배포 알림 봇 만들기..!
서론내가 현재 참여하고 있는 프로젝트는 정기 배포를 도입하기로 결정하여 2주마다 develop 브랜치의 변경 사항을 main 브랜치로 병합하여 정기 배포를 진행하고 있다.근데 진행해보니 한 가지 문제가 있다 현재 우리는 학생이기 때문에 학업과 프로젝트를 병행해야 해서 배포 날짜가 돼도 자연스럽게 잊혀버린다. 그래서 문제를 해결하고자 생각을 해봤는데 이런 생각이 들었다. "2주마다 정기 배포 날이 되면 알려주는 알림봇을 만들어보자"여기에 더해서 그냥 자동으로 merge pr을 만들어주는 기능까지 추가할까? 라는 생각도 해봤는데 그때 상황마다 유연하게 가져가기 위해서 자동 merge pr 기능은 빼고 알림 기능만 만들기로 정했다.lambdalambda는 aws에서 제공하는 serverless 컴퓨팅 서비스이..
-
Network
이제는 보안도 챙깁시다. - https 알아보기
서론요즘 메타 인지를 통해 내가 알고 있다고 생각했던 지식들을 다시 점검하고, 부족한 부분을 하나씩 채워가고 있다.오늘은 부족한 지식 중 하나인 https에 대해 공부하려고 한다.HTTPSHTTPS는 'HTTP + Secure'의 약자로, 기존 HTTP에 보안 기능이 추가된 프로토콜이라고 이해하면 쉽다.HTTP 통신에서는 클라이언트와 서버가 데이터를 주고받을 때 평문(텍스트 형태)으로 전송된다.만약 이 과정에서 데이터가 탈취된다면, 전송되는 중요한 정보들이 그대로 노출될 위험이 있다. 이런 문제를 해결하기 위해서 HTTPS가 나오게 되었다.HTTPS는 데이터를 암호화하여 전달하여 중간에 탈취당해도 노출될 위험이 없다.SSL / TLSHTTPS는 SSL / TLS를 활용해 구현되었다.SSL은 Secure ..
-
Develop
Docker를 사용해서 개발 환경과 배포 환경을 일치시키기
서론최근에 Docker에 관한 글을 보았는데 많이 신기했고 또 개발 환경과 배포 환경이 일치하는 것이 개발을 하는데 안정감을 준다고 생각하여 Docker에 대해 알아보았다. DockerDocker는 OS에 따른 에러 문제를 해결하기 위해 나왔다. OS에 따른 문제가 여태까지는 없었는데?라고 할 수도 있다. 하지만 그건 여태까지이고 앞으로 OS가 달라도 에러가 생기지 않을 거라고 단정 짓고 보장할 수 있을까? 예시를 들어보자현재 내가 사용하고 있는 OS는 MacOS이고 Server의 OS는 Linux이다.내가 MacOS에서 개발을 하고 해당 파일을 Server에 올려 실행시켰지만 제대로 작동되지 않는다.해결을 하려고 알아보니 OS 차이에서 발생하는 문제이다. 그렇다면 우리는 어떻게 해결을 해야 할까?Mac..
-
JS, TS
const a ="객체가 아닌데 왜 되는거야?"; console.log(a.length);
서론여느 때처럼 Nextjs를 사용하여 프로젝트를 진행하고 있었다.그러던 와중 아래의 코드가 이해가 안됐다.const category = id.split('-')[0]; id는 string literal 값이다. 즉 object(객체)가 아니란 말인데왜 string literal을 객체에서만 사용할 수 있는 .접근법으로 split 메서드에 접근을 할 수 있을까? 개발을 처음 접할 때부터 너무나 당연하게 웹에서 배운 대로 위와 같이 사용을 했다가 이상하다는 것을 알아차렸다. 결론부터 말하자면 boxing과 prototype 때문이다. Boxingboxing은 js primitive type(string, number, boolean 등등)을 object 타입으로 변환하는 과정을 말한다. object 상태로..
-
Web
light house 사용해서 서비스 개선하기
서론내가 개발하고 있던 서비스인 hello, gsm(광주소프트웨어마이스터고등학교 입학 지원 서비스)가 운영기간이 끝나고 나서 서비스 개발 당시 시간문제, 외적인 문제 등등으로 하지 못했던 리펙토링, 최적화 작업을 하면서 요즘 시간을 보내고 있다. 그러던 어느 날 어떤 한 선배님께서 light house를 사용해서도 서비스를 개선해 보라고 하셨다. 다른 서비스를 개선할 때는 light house를 적절히 사용한 것 같았는데 hello, gsm 서비스를 개선할 때는 이상하게도 한 번도 사용하지 않은 것 같다. 그래서 hello, gsm에 light house를 사용한 경험기?를 작성해보려 한다. light house일단 light house를 사용하려면 당연하게도 light house가 뭔지 알아야 한다. ..
-
Develop
2024년 회고..
정리일단 회고를 진행하기전에 2024년도 각 달들에 중요했던 내용을 키워드로 정리해보았다.1월토익사관학교2월방학 공부3월개학, 2학년4월...?5월자기주도 체험학습6월앱잼 해커톤 참가7월학교 입학 지원 서비스 개발8월학교 입학 지원 서비스 개발9월학교 입학 지원 서비스 개발10월학교 입학 지원 서비스 운영, 4개교 연합 해커톤 참가11월교육 페스티벌 전시, 손목 인대 파열12월소프트웨이브 전시 간단하게 정리를 해봤는데 나름 알차게 산것 같기도 하다. Keep나는 무언가를 공부할때 필요하다고 느끼면 공부를 하는편인데 이유 없이 그냥 다른 사람들이 다 공부하네? 여서 공부하는 것보다는 필요에 의해 공부하는 방식이 배울 의지도 생기고 좋은것 같다.Problem계획(일정) 관리내가 너무 즉흥적이고 계획 관리를 ..
-
JS, TS
마우스 트래커 구현하기 with 수학
서론글을 쓰는 날로부터 약 3개월?전에 어떤 블로그를 봤었다. 그 블로그의 내용은 비밀번호 입력 input에 있는 비밀번호 확인 눈이 마우스를 움직일 때마다 그 방향을 바라보는 기능을 구현해보는 블로그였다. 최근에 시간적으로 여유가 생겨서 구현을 해보려고 블로그를 다시 찾아봤는데 지금은 그 블로그가 서버를 내려서 글을 확인 못하는 상태인것 같다..ㅜ 그래서 직접 생각해보고 구현을 해봤다. 생각해보기마우스 트래커의 가장 중요한 기능은 당연하게도 마우스 커서를 눈이 따라가는 것이다 해당 기능을 구현하기 위해서 2가지 정도의 방법을 생각했었다. 일단 생각을 해보자 우리가 생각해야할것은 마우스 커서 방향에 따른 눈동자의 위치이다.내가 구현한 영상이다. 내가 생각한 첫번째 방법으로는 마우스 커서 좌표, 눈 중심의..
-
Library
jest와 react testing library로 프로젝트에 단위 테스트 도입하기
작성일을 기준으로 약 1달 전 hello, GSM이라는 광주 소프트웨어 마이스터고등학교 입학 지원 서비스를 일주일 정도 운영을 하였다 운영하면서 생긴 이슈들이 많아 서비스의 신뢰성과 안정성을 떨어뜨린 것도 또 사전에 테스트를 확실하게 했다면 방지할 수 있었던 문제라고 생각하여 아주 아쉬웠다. 그러던 와중에 팀원들과 프로젝트 회고를 진행하면서 팀원이 "서비스를 제작할 때 jest나 react testing library를 도입했었으면 좋았을 거 같아요"라고 말해서 jest, react testing library에 대한 사용 방법과 또 실제 프로젝트에 도입한 경험을 써보려고 한다.테스트테스트의 종류는 여러가지가 있지만 내가 지금 설명할 테스트는 단위(unit) 테스트이다.여기서 말하는 단위는 하나의 함수나..
-
Web
공격하지 마세요! (CSRF, XSS)
시작하기에 앞서내가 웹 프론트엔드 개발을 시작한지 1년 8개월? 정도가 지났다지금까지는 웹 페이지 구현, 신기술 도입, 코드 최적화 이런 개발적인 부분에만 집중해 공부를 했었는데 결국 공격을 당하면 의미가 없다는 것을 깨달았다 그래서 웹 보안 부분도 공부를 해야겠다고 생각을어서 가장 흔하게 발생한다는 CSRF, XSS공격에 대한 글을 쓰게되었다 CSRFCSRF(Cross Site Request Forgery) 공격은 다른 사이트간 요청 위조라는 뜻으로사용자의 의지와 무관하게 사용자가 의도한 행위들(데이터 변경, 삭제 등등)을 특정 웹 사이트로 요청을 보내는 공격이다 CSRF 공격 과정 CSRF 공격이 성공하려면 사용자는 아래의 조건을 만족해야한다사용자는 웹 사이트로부터 로그인이 되어 있어야 한다로그인 인..
-
OS
프로세스... 스레드... 멀티 프로세스... 멀티 스레드...
프로그램(program)프로세스에 대해 바로 알아보기전에 이해들 높이기 위해 간단하게 프로그램부터 설명을 해보겠다프로그램은 뭘까? 이런 것들을 프로그램이다 해당 프로그램들 이름을 자세히 보면 맨뒤에 .exe가 붙어 있을것이다 ex. riot client.exe, power point.exe이렇게 실행되지 않은 프로그램들을 정적 프로그램이라고 부른다 프로그래밍 언어로 프로그램을 개발만 한다면 딱 코드 덩어리이지만 실행을 시키면 말이 달라진다 프로세스(process)프로세스는 위에서 말한 프로그램이 실행된 것을 말한다(실행 작업의 단위)실행이 되었다는 것은 운영체제로부터 메모리와 CPU를 할당 받았다는 것이다그리고 cpu는 한번에 한개의 프로세스만 작동시킬수 있다 context switching내가 방금 ..
-
Library
axios가 불러온 개발 편의성
요즘 웹 개발을 하는 사람이라면 api 요청을 보낼때 나를 포함해서 대부분 axios를 사용하여 api 요청을 보낸다.갑자기 사람들이 js에 내장되어 있는 fetch를 사용하지 않고 axios를 많이 사용하고 있는 이유가 궁금해져 이 블로그를 작성한다.본격적으로 시작하기전에 간단하게 axios를 설명해주자면 fetch와 같이 api 요청을 보낼수 있는 라이브러리이다.fetch 보다 좋은점fetch보다 좋은점은 당연하게도(?) 많다.명시적인 사용 방법해당 장점은 나의 주관적인 생각 들어간것 같긴하지만 적어보자면 말 그대로 axios의 사용방법이 fetch와 비교 했을때 더 명시적인것 같다.fetch를 사용해서 get 요청을 보낼때에는 init 객체에 method 명시가 선택사항이지만, get이 아닌 다른 ..
-
Library
kakao map 이거 못막습니다
현재 작성일(9월 25일)을 기준으로 어제 이번에 새롭게 진행하게된 프로젝트에서 사용하기 위해서 kakao map을 가지고 여러가지를 해봤다 사용하면서 어려웠던점 신기한점들을 공유하려고 이 글을 쓴다 참고로 사용 환경은 next (app router) + typescript 이다 사용전 세팅일단 사용을 하려면 api 키가 필요한데 kakao developers에 접속해서 애플리케이션을 등록해서 javascript 키를 가져온다 그 다음 next layout.tsx에 script 태그를 넣어준다 그냥 react의 경우에는 index.html에 넣어주면 될것이다import Script from "next/script";declare global { interface Window { kakao: any..
-
Develop
QA, TC....
최근 Hello, GSM(광주소프트웨어마이스터고등학교 입학 지원 서비스)를 제작하고 QA를 진행중인데 이번에 QA를 주도적으로 이끌어보니 내가 여태까지 생각했던것보다 다른 부분이 있어 글을 적어본다QAQA란 뭐고 뭘하는걸까?QA는 Quality Assurance의 약자로 품질 보증이라는 뜻을 가지고 있다소프트웨어 개발쪽에서는 QA는 소프트웨어의 품질을 보증하기 위하여 여러가지 기능들이 잘 작동되는지 테스트도하고 디자인과 같게 되었는지 확인도 한다추가로 내생각이지만 QA기간이 10일이라면 중요한 기능에 5일 이상을 할당해야 한다고 생각한다 왜냐면 팀원들끼리 생각을 많이해서 여러가지 상황을 테스트해서 이상하게 작동되는 것이 없다고 생각해도 실제로 서비스를 운영하게 된다면 팀원들보다 더많은 사람들이 사용하면서..
-
JS, TS
제발 프로미스나인 팬이라면 Promise 공부하세요🙏
서론promise에 대해 자세히 알기전에 간단하게 예시를 들어서 설명을 해보겠다당신은 딸기요거트스무디를 먹으러 메가커피에 가서 딸기요거트스무디를 주문했다 하지만 진동벨도 없고 점원이 나왔다고 말도 해주지 않는다 그래서 당신은 계속 언제 딸기요거트스무디가 나오냐고 점원한테 물어본다이렇게 된다면 점원은 딸기요거트스무디를 만드는데 방해가 되고 또 당신은 귀찮게 계속 물어봐야 한다하지만 진동벨이 있다면 진동벨이 울릴때까지 다른것들을 하다가 진동벨이 울리면 딸기요거트스무디를 찾아가면 되고 점원은 옆에서 계속 물어보지 않아서 빠르게 만들수 있다 여기서 나온 진동벨이 promise와 같다고 생각하면 된다이제 promise에 대해 자세히 알아보자~ promisepromise는 es6에 추가된 문법으로 js에서 비동기 ..
-
JS, TS
js는 단일 쓰레드잖아..!!!!!!
js는 단일 쓰레드(one thing at a time)이다그래서 한번에 한가지 코드 밖에 실행하지 못한다 하지만 우리는 js로 비동기 코드를 짜고 실행을 시킨다js는 한번에 한가지 코드 밖에 실행을 시키지 못하는데 어떻게 비동기 코드를 실행시키고 병렬적으로 작동을 하게 만드는것일까?js 동작과정을 살펴보면 알수 있다 한번 알아보자!v8 엔진자바스크립트를 실행시키는 v8엔진의 구조를 한번 봐보자Memory Heap(메모리 힙) - 메모리 할당이 일어나는 곳이다 (참조 타입)Call Stack(콜 스택) - 실행시키는 코드가 쌓이고 삭제되는 곳이다 call stack위에 말한 설명이 잘이해가 안될수 있으니 코드를 보면서 알아보자const multiply = (a, b) => a * b;const squar..
-
Develop
이젠 공식문서 읽읍시다..! feat. react-hook-form
모든 사람들이 개발을 처음 배울때는 유튜브나 인터넷에 돌아다니는 블로그들을 참고하여 개발할 것이다.물론 나의 경우도 처음 공부할 때 생활코딩 html, css 강의부터 해서 XXX 사용법, XXX 만드는 방법 이런식으로 인터넷에 검색하여 나오는 블로그들을 보면서 공부했었다. 왜 다들 이렇게 강의나 블로그들을 보면서 개발을 배우는것 일까?답은 간단하다 공식문서를 읽는것보다 찾아보는 시간도 줄고 더 쉽게 이해할 수 있기 때문이다.하지만 이렇게 찾아서 공부하는것은 언제까지나 간단한 기능을 구현할 때만 해당 된다. 만약 내가 A기능 사용법을 찾아봤는데 블로그나 강의에 안나와있다면 어떻게 할것인가?만약 내가 B기능 사용법을 찾아봤는데 블로그마다 강의마다 다르다면 어떻게 할것인가?만약 라이브러리를 사용하고 있는데 ..
-
JS, TS
chunk load error 해결하기..! - 트러블 슈팅
오늘은 최근에 프로젝트를 진행하면서 마주쳤던 chunk load error를 해결한 과정을 설명해보려고 한다chunkchunk란 코드 스플릿팅을 해서 나뉘어진 js 파일 조각? 이라고 생각하면 된다내가 진행하고 있는 프로젝트는 nextjs를 사용하고 있는데 nextjs는 기본적으로 코드 스플릿팅을 제공한다chunk load errorchunk load error는 말 그대로 chunk라는것을 load 하다가 생긴 error이다다양한 이유로 chunk를 load하다가 error가 발생하겠지만한개의 케이스만 말해보자면 코드 스플릿팅시 따로 설정을 안해주면 chunk 파일 이름은 계속 달라진다그리고 chunk를 불러올때 캐싱된 chunk 파일 이름으로 불러온다면 없거나 이상한 파일이 가져와져서 chunk lo..
-
Library
제발 디자인 못하면 mui 쓰세요! - mui 사용기
최근에 예전부터 들어봤었던 mui를 사용해보았다 사용하면서 느낀점을 적어보려고 한다일단 mui는 리액트 ui 프레임워크이다 손쉽게 ui를 가져다 쓸수 있도록 제공한다개발 편의성나의 경우에는 퍼블리싱을 하는데 소모하는 시간이 많은 편이다 하지만 mui를 사용한다면개발할때 퍼블리싱에 중점을 두지 않아도 되므로 로직적인 부분에만 집중을 할수도 있고 코드의 양도 줄어들것이다커스텀 가능기본적으로 제공하는 ui를 사용할수도 있지만 컬러나 다른 부분들이 마음에 들지 않는다면 커스텀하여 사용도 가능하다어차피 커스텀할거면 뭐하러 프레임워크를 사용하냐고 말할수도 있지만 커스텀을 하더라도 기초 틀이 잡혀있어서 훨씬 편하다커스텀하는 방법은 밑에서 사용법과 같이 설명하도록 하겠다styled-components(emotion) ..
-
React
NEXT에서는 이미지를 어떻게 사용할까? - NEXT Image 알아보기
웹화면에 이미지를 띄우려면 개발자들은 html img 태그를 사용하여 이미지를 띄운다 기본 html 이미지 태그를 사용하는것도 좋지만 next를 사용한다면 next Image 컴포넌트를 사용하여 이미지를 최적화 할 수 있다 Imagenext에서는 이미지를 최적화 하여 보여줄수 있도록 Image 컴포넌트를 제공한다장점크기 최적화(Size Optimization)시각적 안정(Visual Stability)빠른 페이지 로드(Faster Page Loads)보안적 이점크기 최적화next Image 컴포넌트를 사용하면 이미지의 크기를 줄이기 위해 webp 포맷으로 변환을 한다webp 포맷을 사용하면 기존의 png, jpg와 같은 품질을 유지하지만 파일의 크기는 더 줄어들어 효율적이다※ localhost에서 테스트..
-
JS, TS
tsconfig strict option
최근에 프로젝트를 진행하다 하나의 문제를 맞닥뜨렸다리액트 컴포넌트의 props를 interface로 지정을 해주고 있었는데 ?, optional로 지정해준 props가 원래였다면 기본 타입과 undefined 이렇게 타입이 될수 있다고 떠야 하는데 기본 타입만 뜨는 것이다 위의 사진을 참고하자면 ?, optional로 지정을 하면 왼쪽과 같이 지정해준 타입인 string[]과 undefined가 떠야 하는데내 프로젝트에서는 왼쪽처럼 undefined는 없고 string[] 만 있는것이였다 해결정상적으로 보이는 프로젝트와 내프로젝트를 비교해보니 문제는 tsconfig에 있었다 바로 tsconfig 설정파일 option 중의 하나인 strict option 때문이었다 strict option을 true로 설..
-
Develop
AI·SW 체험 축전 참가 회고
오늘은 기술적인 글이 아니라 최근에 AI·SW 체험 축전에 참가하게된 것에 대하여 풀어보려고 한다.참가하게된 이유현재 나는 개발자로 취업을 준비하고 있는 고등학생이다 하지만 곧 취업한다면 회사에서도 이런 전시회, 박람회에 참여해 회사의 기술을 소개할것이다 취업하기전에 먼저 경험해본다면 나중에 도움이 될거 같다고 생각했고 또 학교 동아리에서 축전에 나가자고 해서 축전에 출품을 하게 되었다.전시품 선정이번 축전 이름이 아무래도 AI·SW 체험 축전이다 보니 AI 와 체험 요소가 있어야 한다고 생각하고 있던 찰나에 동아리 선배님께서 예전에 만드신 명함 제작 서비스를 레퍼런스 삼아 AI 기능을 추가해서 AI 커스텀 명함 제작(직접 명함을 만들수 있고 또 사진을 AI로 변환해서 넣을수있는) 서비스를 만들게 되었다..
-
JS, TS
복사에도 깊이가 있어? - 얕은 복사, 깊은 복사 알아보기
js에는 얕은 복사, 깊은 복사 이렇게 두가지의 복사가 있다얕은 복사는 복사하려는 변수 대상의 메모리 주소를 복사하는 것이고깊은 복사는 복사하려는 변수 대상의 값을 복사하는 것이다 js에서는 원시 값(primitive)을 =(대입 연산자)로 복사하면 값만(깊은 복사) 복사가 되고참조(reference) 값을 복사하면 메모리 주소(얕은 복사)가 된다왜 참조값은 얕은 복사가 되는것일까?참조 타입 변수는 변수에 대입 할 때 원시 값과 다르게 값을 바로 할당 하지 않고 값이 저장된 메모리(heap) 주소를 변수에 저장 하기 때문에 복사하려는 변수에 주소가 복사가 되는것이다spread 연산자스프레드 연산자로 배열이나 객체를 깊은 복사를 할수 있다 하지만 n중 배열이거나, 객체일경우 그 배열이나 객체는 원본의 참조..
-
JS, TS
Intersection Observer로 element 관찰하기🧐
intersection observer는 어떠한 element를 지정하고 그 element가 viewport 즉 화면에 보이는지를 감시하도록 제공한다어떨때 사용할까?스크롤 애니메이션을 만들고 싶을때무한 스크롤 기능을 쉽게 구현할때기본 사용법 알아보기intersection observer는 javascript 내장 API 이기 때문에 따로 의존성을 설치해 줄 필요가 없다const observer = new IntersectionObserver(callback, options); callbackcallback 함수는 기본 인자로 entries와 observer를 받는다 entries는 등록된 element와 부가 정보의 객체의 배열이라고 생각하면 좋다중요하게 생각되는것만 알아보자면target - elemen..
-
Library
zod 쓸까? 말까? - zod를 알아보자
zod는 javascript, typescript에서 사용가능한 유효성 검사? 스키마 정의 라이브러리이다굳이 써야해?내가 처음 zod를 보고 든 생각은 javascript나 typescript에서는 굳이 라이브러리를 사용하지 않고도 유효성 검사를 할 수 있는데 굳이?라는 생각이 들었다 근데 사람들은 왜 zod를 많이 사용할까?라고 생각하니 사용하기 간편하고 또 라이브러리 용량이 적기 때문이라고 생각한다 직접 코드로 구현할 수 있으나 코드가 너무 많아지고 또 라이브러리를 사용할 때는 라이브러리에서 제공하는 기능을 다 사용 못한다면 비효율적이겠지만 zod는 라이브러리 용량도 적어서 그런 부분에 대한 걱정을 안 해도 된다고 생각한다 사용하기!설치하기npm install zodyarn add zodpnpm ad..
-
HTML
매력적인 모달 만들기 - 트러블 슈팅
트러블 슈팅 최근에 내가 유지보수하고 있는 every gsm이라는 프로젝트에서 다음과 같은 에러가 나타났다 무슨 문제였었냐면 position:fixed 속성이 제대로 작동하지 않는 문제였다 원래는 2번째 사진처럼 보여야 한다 딱히 코드를 수정한것도 없었기에 더욱 당황스러웠다 문제를 찾아보니 이유는 position:fixed 속성은 조상 tag 속성중에 transform, perspective, filter 속성이 하나라도 있다면 그 조상 tag를 기준으로 modal이 위치를 정하게 되는 특징 때문이었는데 나는 조상 요소에 transform 속성이 있어서 문제였던 것이다! 그래서 내가 생각해낸 방법은 2가지가 있었다 조상 요소에 transform 속성을 제거한다 조상 요소 밖으로 모달을 이동 시킨다 하지만..
-
Library
동화책 읽고 개발자 경험 향상시키기 - storybook에 대해 알아보자
storybook은 컴포넌트를 독립적으로 개발할 수 있도록 도와주는 컴포넌트 관리 도구이다storybook은 모든 개발자들이 필수적으로 사용하지는 않지만 사용한다면 확실히 개발자 경험을 향상시켜준다고 생각한다storybook이 나오기 전에 사람들은 어떻게 컴포넌트를 개발하고 테스트했을까?나와 내 친구들은 페이지에 컴포넌트를 띄워 직접 개발과 테스트를 했었다 하지만 이렇게 컴포넌트를 개발하고 테스트한다면 아래와 같은 단점들이 존재할 것이라고 생각한다개발과 테스트를 페이지에 띄워 테스트하고 페이지에 띄우는 데 사용한 코드를 다시 지워야 한다다른 사람이 테스트할 때도 따로 컴포넌트를 확인할 수 없어 위의 상황을 반복해야 한다만약 컴포넌트가 상태에 따라 다르게 나타나 컴포넌트를 비교할 일이 생긴다면 위의 상황을..
-
Develop
모노레포 구축해본썰 푼다ㅎㅎ - 모노레포 구축기
현재 bigbroCO. 이라는 실제 사용하게될 전국적인 프로젝트를 모노레포로 개발하기로 해서 모노레포를 구축하고 있다bigbroCO.-front repo - https://github.com/bigbroCO-team/bigbroCO.-Front(현재 개발중) GitHub - bigbroCO-team/bigbroCO.-FrontContribute to bigbroCO-team/bigbroCO.-Front development by creating an account on GitHub.github.com 현재 어떻게 구축하고 있는지를 작성해보려고 한다 pnpm workspace사실 이번 기회에 yarn berry를 사용해서 모노레포를 구축해 zero install 기능을 사용해보고 싶었지만 아직 yarn b..
-
Library
왜 js는 오류가 안뜨냐? - eslint에 대해 알아보자
자바스크립트는 실행하기 전까지는 오류가 뜨지 않는다왜냐하면 인터프리터 언어이기 때문인데인터프리터 언어는 컴파일 언어와 다르게 미리 컴파일 하는 단계가 없고 바로 한줄한줄 실행하기 때문에 오류를 띄울 수 없다 console.log(a) 이렇게 없는 변수를 console.log해도 실행시키기 전까지는 오류라고 빨간줄이 뜨지 않는다 이러한 문제는 실행시키기 전까지 에러를 발견할수 없다는 단점을 발생시킨다 그래서 사람들은 js로 개발을 할때 eslint를 사용한다eslint를 사용하면 js에서도 사전에 에러를 찾아주고, 코드의 형식도 원하는데로 검사해준다 사용하기사용하기 위해서 세팅하는 부분이 가장 어려웠던거 같다 내가 설명하는 방법은 next + typescript + prettier와 같이 사용하는 방법이다..
-
CSS
vanilla extract 한 방울로 server component 향기롭게 하기 - vanilla extract 사용기
vanilla-extract를 사용하기까지의 과정 next app router에서는 react 18 버전부터 추가된 server component를 사용 할 수 있다 서버 컴포넌트의 장점은 다양하다(ex) server side fetching) 아무튼 많은 장점이 있는지만 또한 가장 큰 단점도 있다 바로 많은 사람들이 사용하는 CSS in JS 인 styled-component(emotion)를 사용 할 수 없다는 것이다... 왜 사용 할 수 없을까? styled-component와 emotion은 runtime css in js 이기 때문이다 runtime css in js는 js가 실행되는 환경인 runtime(브라우저)에서 실행되기 때문에 서버에서 렌더링 하는 server component에서는 사..
-
React
두유노 RSC? - React Server Component 알아보기
이번에 노마드코더 강의를 들으며 server component를 사용해 보았다 사용해보면서 신세계를 경험해서 블로그를 작성해보려고 한다 React Server Component 기본적인 개념부터 알아보자 RSC는 서버에서 구동되는 컴포넌트로 서버에서 렌더링 된 후에 클라이언트로 전달된다 특징 리렌더링 X 브라우저 api나 react 훅 사용 X 서버 리소스 접근 가능 자바스크립트 번들에 포함되지 않는다 event 핸들링 X 사용하기 현재 vanilla react 만으로는 RSC를 사용하기 쉽지 않다 편하게 사용하기 위해서는 next 13버전 이상의 app router 환경에서 사용가능하다 next에서 사용하면 기본적으로 모든 컴포넌트가 RSC이고 혹시 client component를 사용하려고 한다면 "..
-
카테고리 없음
아니 우리 코드도 꾸밀 줄 안다고요! - prettier에 대해 알아보자
prettier prettier라는 것은 vscode를 사용한다면 모두가 알것이다 prettier는 줄바꿈, 띄어쓰기, 공백, 들여쓰기 이런것들을 관리한다 즉 코드의 가독성을 높이는데 기여하는 툴이다 사용 내가 쓰고있는 vscode에서만 prettier 적용 .prettierrc.json을 사용해 프로젝트 전용 prettier 적용 eslint와 같이 사용 이중에서 eslint와 같이 사용하는 방법을 빼고 알아볼 것이다(아직 lint에 대해 잘모르기 때문에 나중에 추가할것 입니다) vscode에 적용 vscode에서 사용하는 방법은 vscode에서 지원하는 extension을 설치하는 방법이다 extension을 설치만 하고 바로 적용이 되면 좋겠지만 몇가지 설정을 해주어야 한다 vscode 설정에서 사..
-
React
next redirect, rewrite 뭔데 다쓰는거야? - redirect와 rewrite를 알아보자
next redirect와 rewrite를 사람들이 많이 사용하는데 이 기능들은 무슨 기능들을 하는것일까? 두 기능 다 브라우저에서 접속이나 네트워크 요청을 보낼때 특정 path에 접근했을때 다른 path를 보여주게 하는 기능이다 하지만 두 기능은 약간씩 다르다 차이점 redirect는 특정 path에 접근한다면 다른 path로 바꿔치기 하고 rewrite는 특정 path에 접근하면 path는 그대로지만 다른 path의 내용을 보여주는 기능이다 말로 설명하니까 내가 봐도 이해가 안된다 직접 사용하면서 설명을 해주겠다 사용법 두 기능 다 next.config.js 라는 next 설정 파일에서 기능들을 추가해 사용 할 수 있다 redirect redirect는 react-router에 Navigate 컴포넌..
-
JS, TS
==, ===, ====??? - js 동등 연산자 알아보기
자바스크립트에서 값이 같은지를 알아보는 연산자는 2가지가 있다 혹시 ==과 === 차이를 모른다면 이 블로그를 끝까지 봐야 할것이다 일단 기본적으로 값이 같은지를 비교해서 같다면 true를 반환하고 다르다면 false를 반환한다 == ==은 타입과 상관 없이 단순하게 값이 같은지를 확인한다 console.log("1" == 1); //true console.log("" == false); //true 첫번째 콘솔을 보면 타입이 다르지만 값은 같기 때문에 true를 반환한다 두번쨰 콘솔은 다르다로 생각할수 있지만 빈 문자열은 false와 같기 때문에 true를 반환한다 하지만 참조형 변수를 비교할때는 값이 저장된 메모리 주소가 같은지를 비교한다 const a = [1, 2, 3, 4]; const b = ..
-
React
batching 모르면 react 개발하는거 아님 - batching 알아보기
최근에 학교 아는 선배님의 블로그를 보다가 batching을 처음봤다 여태까지 공부하면서 알지 못했던 부분이라 더 잘기억하기 위해 블로그를 쓰려고 한다 batching이란 렌더링을 최소화 하기위해 setState 작업을 하나로 묶어서 실행 시키는 것이다 코드로 확인해보자! import { useState } from "react"; function App() { const [count, setCount] = useState(0); console.log("렌더링 됨"); return ( { setCount((prev) => prev + 1); setCount((prev) => prev + 1); setCount((prev) => prev + 1); }} > +3 ); } export default App;..
-
Develop
아니 일단 들어봐! - package manager 알아보기
자바스크립트로 개발을 해보았다면 한번쯤은 npm, yarn, yarn berry, pnpm을 들어봤을 것이다이것들은 패키지 매니저(package manager)라고 부른다js를 사용하는 프로젝트에서 라이브러리, 모듈 그리고 플러그인을 설치하고 관리하는데 사용한다 패키지 설치프로젝트에 사용하는 패키지들을(라이브러리, 플러그인 등) 설치 할 수 있게 한다 의존성 관리설치하려는 패키지가 다른 패키지에 의존하고 있으면 의존하고 있는 패키지까지 알아서 설치해준다 버전 관리패키지의 다양한 버전을 관리한다 이로 인해 패키지의 다양한 버전을 설치해 사용할 수 있다ex. react-query V5, V4... 스크립트 실행프로젝트에서 미리 정의해둔 스크립트를 실행하는 기능을 제공한다js 패키지 매니저의 종류는 npm, ..
-
JS, TS
type이랑 interface 뭐가 다른거였어...? - type과 interface 차이 알아보기
지금까지 주위에서 typescript에서 type과 interface의 차이가 뭐냐고 하면 항상 제대로 대답을 하지 못했다 그래서 이번기회에 제대로 알아보려고 한다! type과 interface의 차이를 아려면 일단 당연하게도 type과 interface가 뭔지 알아야한다!🙂 type (alias)type은 변수에 type을 저장하여 사용하는 것이라고 말할 수 있다type Name = string;// 변수의 타입을 alias로 지정const myName: Name = "gaon";// 함수의 타입도 정의 할수도 있다type Str = () => string;const str: Str = function () { return "hi";}; interfaceinterface는 상호 간에 정의한 약속 ..
-
Develop
모노레포가 모노? - 모노레포 사용기
최근에 모노레포를 이용해 여러 상태관리 라이브러리 카운터를 만들어 보고 사용 경험과 느낀점을 이야기 해보려고 한다그전에 먼저 모노레포가 뭔지 간단하게 알아보겠다모노레포는 여러개의 프로젝트를 한개의 레포지토리에서 관리하는 방법이다기존의 방식은 monolith 방식으로 한개의 프로젝트를 하나의 레포지토리로 관리하는 것이다그에 반해 momorepo 방식은 여러개의 프로젝트를 하나의 레포지토리에서 관리한다monorepo의 장점코드 공유의존성 관리 이제부터 내가 모노레포를 구축하면서 어떤것들을 느꼈는지를 말해보겠다느낀점을 말하기 전에 원래 나는 yarn workspace를 사용해 모노레포를 구축했지만 패키지를 공유하는 기능을 구축하다가 에러가발생하였는데 관련 에러를 검색해도 국내에 모노레포 관련 글이 잘 없고 또..
-
Library
??? : 너 오늘 zustand 안좋아 보여 - zustand 사용기
zustand는 독일어로 상태라는 뜻을가진 상태 관리 라이브러리이다zustand의 특징으로는 작은 패키지 용량과, 쉬운 사용 방법 그리고 곰돌이가 귀엽다는 장점이 있다패키지 용량다른 상태 관리 라이브러리와 비교해 봤을때 상당이 작은 용량이다 - recoil > mobx > zustand 쉬운 사용 방법나는 zustand를 동아리 프로젝트에서 사용하는것을 보고 사용해 봤는데 사용해 봤는데 사용하기 너무 쉬웠다곰돌이말 그대로 귀엽다 :)이제 한번 사용 방법을 알아보자사실 너무 간단하다! store 생성하기import { create } from "zustand";export const useCountStore = create((set) => ({ count: 0, increase: () => set((..
-
JS, TS
??? : 아저씨 번들링이 뭐에요
번들링에 대해 알아보기 전에 모듈이 뭔지 알아보겠다모듈(module)JS에서의 모듈은 특정 기능을 하는 작은 코드를 각각의 파일로 만들어 다른 파일에서 재사용 가능하게 하는 것이라고 말 할 수 있겠다function sum(a, b) { return a + b;}export default sum;모듈을 사용하는 이유// a.jsvar num = 10;function getNum() { console.log(num);}// b.jsvar num = 20; 위의 경우 변수 이름이 겹쳐 마지막에 로드된 b.js의 20을 출력한다이런한 변수 유효 범위, 이름 겹침과 같은 문제들을 모듈을 사용해 해결 할 수 있다. 하지만 모듈을 사용하면 자바스크립트 파일이 많아지고 그로 인해 ..
-
Network
http, tcp/ip, 김주은 let's go
HTTP는 Hyper Text Transfer Protocol로 TCP/IP 위에서 데이터(html, 이미지, 영상, JSON, XML 등등)를 주고 받기 위한 규약이다특징클라이언트(client) - 서버(server) 구조무상태성(stateless)비연결성(connectionless)클라이언트(client) - 서버(server) 구조http는 클라이언트와 서버로 나누어져클라이언트는 서버로 request를 보내고 서버는 request를 받으면 그에 맞는 response를 보내는 구조이다무상태성(stateless)무상태성은 서버가 클라이언트의 상태를 보존하지 않는 것이고 반대로 상태 유지(stateful)은 서버가 클라이언트의 상태를 보존하는 것인데이해가 잘 안될 수도 있다 카페에서 내가 좋아하는 딸기 ..
-
JS, TS
history API
js history란 브라우저에서 페이지에 방문한 기록을 제공하고 조작할수 있는 api라고 말 할 수 있다 stack history는 stack 형태로 이루어져 있다 예를 들어 위와 같은 순서로 페이지를 방문 했다면 stack에 방문한 순서대로 push 되어 있는 것이다! forward(), back(), go() forward()와 back()은 앞으로 가기 뒤로가기 메서드이다 go()는 앞으로 뒤로 둘다 갈수 있는데 인자로 number를 받아 수의 값 만큼 이동하는 것이다 history.forward() // 앞으로 가기 history.back() // 뒤로가기 history.go(-2) // 뒤로 2번 가기 go(-2) === back() back() pushState(), replaceState(..
-
Next
아니 이렇게 하면 라우팅 된다니까ㅋㅋ - app router를 알아보자!
next 13부터 app router가 나왔다 그전에는 page router로 페이지를 라우팅 했었다app router를 알아보기 전에 pages router에 대해 간단히 알아보자pages routerpage router는 pages 디렉토리 안에서 js, jsx, ts, tsx 파일의 이름을 기준으로 라우팅을 하는 방식이다만약 index.tsx라는 파일을 만든다면 /경로에 페이지가 보여지고survey/main/index.tsx라는 파일을 만든다면 /servey/main경로에 페이지가 보여지게 되는 방식이다단점중첩된 경로가 많아진다면 파일 이름도 길어진다는 단점이 있는거 같고사실 나는 pages router를 사용해 보지 않아 다른 단점들은 더 찾아봐야 할거 같다+ 추가로 찾아본 결과 server co..
-
React
react-query 찍먹 let's go
react-query는 뭘까? react-query는 server state 자동으로 caching과 refetching을 해주는 비동기 상태 관리 라이브러리이다 여기서 말하는 server state는 서버로 부터 가져온 데이터의 상태를 말한다 react-query가 refetching 할 때 새 컴포넌트가 마운트 될 때 브라우저가 포커스 되었을 때 네트워크가 다시 연결 되었을 때 사용해보기 QueryClient QueryClientProvider useQuery useMutaion QueryClient QueryClient는 모든 query와 mutation에 대한 상태와 캐시를 가지고 있는 클래스이다 const queryClient = new QueryClient(); QueryClientProvid..
-
JS, TS
I am 호이스팅 에요.
호이스팅이란 js 코드가 실행되면 선언된 변수, 함수, 클래스, import가 최상단에서 선언되는 특성이다! 하지만 실제 코드의 함수나 변수가 올라가지는 않는다! 변수 var const, let var var은 호이스팅 되면 최상단에서 선언과 초기화가 된다 그리고 변수에 할당하는 코드를 만나면 값을 할당한다! 이게 무슨 소리냐? 코드로 확인해보자 console.log("선언 전", a); // 선언 전 undefined var a = "어 나 a"; console.log("선언 후", a); // 선언 후 어 나 a 코드를 실행하면 아래의 순서로 작동한다 호이스팅 되어 a를 선언하고 undefined로 초기화 한다 log를 남긴다 // 선언 전 undefined a에 "어 나 a" 값을 할당한다 log를..
-
JS, TS
js 개발자라는 사람이 스코프가 뭔지 몰라?
스코프는 직역하면 "범위" 라는 뜻으로 js 안에서 변수가 접근할수 있는 범위를 말한다! 스코프에는 두 종류가 있는데 global(전역) scope와 local(지역) scope가 있다 global scope는 전역 범위를 뜻하고 어디서든지 변수가 접근할수 있다 const global = "hello global"; console.log(global); function log() { console.log(global); } log(); 위의 코드를 보면 global은 전역 스코프 변수이다 그래서 전역 코드에서도 사용가능 하고 함수 안에서 또는 if, while, for문 안에서도 사용 가능하다 local scope는 특정 지역(if문, 함수, while문 등등)에서만 변수가 접근할수 있다 if (true..
-
React
Context가 뭐야?
context란 react에서 특정 값을 전역적(Global)으로 사용하고 싶을때 사용하는 기능이다. 언제 사용 될까? 전역적으로 사용 될때 - 한가지 값을 가지고 여러 군데에 사용되는 값 (ex. 다크 모드, 회원정보) Props drilling 방지 *Props drilling? Props drilling이란 Props를 계속 자식 컴포넌트에 전달해 사용하는것을 말한다 function App() { const [count, setCount] = useState(0); return ; } function First(props) { return ( ); } function Second(props) { return ( ); } function Third(props) { return ( ); } functi..
-
Web
Web Storage
Web Storage는 특정 데이터를 기존에는 서버에 전송해 저장했지만 클라이언트에서도 데이터를 저장할수 있도록 하는 기능이다!(HTML5에서 부터 지원하기 시작했다)Web Storage 종류Local StorageSession StorageWeb Storage의 종류는 두가지가 있는데Local Storage는 영구 저장소라고 생각하면 되는데 Local Storage에 값을 저장하고 새로고침 하거나 브라우저를 종료해도 Storage에 그대로 남아 있다Session Storage는 임시 저장소라고 생각하면 되는데 Local Storage처럼 새로고침을 해도 Storage에 남아있다는 공통점이 있지만 브라우저를 종료하면 Storage에 저장되어 있는 데이터들이 초기화 된다는 차이점이 있다사용해보기!// 데이..
-
Develop
트러블 슈우웃~
코드를 작성하다 보면 정말 많은 에러와 문제가 발생한다이런 문제가 생기면 왜 이 문제가 생기고 어떻게 해결하는지가 중요하다만약 생각 없이 그냥 에러를 복사해 chat gpt에게 해결해 달라고 하거나 검색해 바로 해결만 한다면다음에 같은 에러가 생겼을때 해결 하지 못할것이다 이럴때 할수 있는게 트러블 슈팅이다트러블 슈팅이란 문제 해결을 위해 문제의 원인을 논리적으로 찾아 해결하는 것이다나의 트러블 슈팅 경험을 말해 보겠다...! CORS ERROR내가 open api인 알라딘 책 정보 api를 사용해 개인 토이 프로젝트를 하고 있는 상황이었다그런데 내가 책 검색을 하는 api를 axios로 요청을 보냈는데 돌아오는 응답은 CORS ERROR였다CORS ERROR는 클라이언트에서 서버로 요청을 보낼때 같은 ..
-
Library
천재의 form 관리법
리액트에셔 form(input)을 관리하는 방법은 2가지가 있다제어 컴포넌트 사용비제어 컴포넌트 사용제어 컴포넌트(controlled component)제어 컴포넌트는 리액트에 의해 값이 관리되는 방식을 말한다쉽게 말하자면 리액트의 useState를 사용해 input을 관리하는것을 말한다!const ControlledComponent = () => { const [inputValue, setInputValue] = useState(""); return ( setInputValue(e.target.value)} /> );};위의 코드는 inputValue라는 state를 만들어 input을 제어하고있다비제어 컴포넌트(Uncontrolled component)비제어 컴포넌트는 리액트에 의해..
-
CSS
CSS!!!!
CSS(Cascading Style Sheets)로 HTML문서를 더욱 효과적으로 보여줄수 있게 꾸며주는 언어이다 *여기서 Style Sheets란 Style Sheets는 js에서 객체(object)를 작성할때 처럼 작성하는 형식을 말한다 // js object const h1 = { fontSize : 16; } /* css style sheets */ h1 { font-size : 16px; } Selector Selector는 자신이 스타일 해줄 tag(ex. h1, p, button)나 id 그리고 class를 지정해 줘 스타일 할 수 있게 해주는 것이다 type selector type selector는 html 태그를 지정해 스타일 해주는 것이다!!! h1 { font-weight: bold..
-
JS, TS
API in JS
Javascript에서는 API를 어떻게 가져오고 사용할까? 그전에 API가 뭔지 알아보자 API API는 우리가 식당에가서 밥을 주문하고 밥을 먹는거와 같다고 할 수 있다 자신이 원하는 식당에 가서 원하는 메뉴를 주문하고 그 메뉴를 받아 먹는다 API도 똑같다 자신이 원하는 서비스에서 원하는 기능이나 데이터를 요청하고 받은 응답을 받아 활용한다 본론으로 돌아와서 js에서는 어떻게 api를 가져오는지 알아보자 js에서는 다양한 방법으로 api를 가져오지만 요즘은 js 내장 함수인 fetch와 외부 라이브러리인 axios를 많이 사용한다 fetch fetch는 js의 내장 함수로 promise기반으로 promise를 사용하는 것과 비슷하다고 할수 있다 장점 js내장 함수여서 axios처럼 의존성 설치 및 ..
