전체 글

개요 REST와 RESTful의 차이가 문득 궁금해져서 정확한 개념 정리를 하기 위해서 정리하게 된 글이다. 1. REST란? 정의 사전적 의미는 다음과 같다. 웹에 존재하는 모든 자원에 고유한 URI를 부여해 활용하는 것 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처의 한 형 즉, REST란 HTTP URI를 통하여 자원을 명시하고 HTTP Method를 통해 해당 자원에 대한 CRUD 연산을 적용하는 방법이다. * HTTP URI : 웹 사이트의 이미지, 텍스트, DB 내용 등의 모든 자원에 붙이는 고유한 ID * CRUD : Create(생성) / Read(조회) / Update(수정) / Delete(삭제) 특징 0. HTTP 프로토콜의 형식을 그대로 활용한다. 웹의 장점을 최대한 활용할 수..

개요 평소 스타일링 도구는 styled-components를 주로 사용했었으나 이번에 Next를 경험하게 되면서 가장 호환성이 좋은 tailwindCSS를 사용하게 되었다. 새로운 기술 투성이라 기록으로 남겨 기억하기 위해 작성하게 됐당 세팅 방법 1. 프로젝트 생성하기 $ npx create-next-app@latest my-project --typescript --eslint $ cd my-project 2. TailwindCSS 설치하기 $ npm install -D tailwindcss postcss autoprefixer $ npx tailwindcss init -p 설치 후 init 명령을 실행하면 tailwind.config.js와 postcss.config.js 파일이 자동 생성된다. 3...

개요 영화 웹 서비스 프로젝트를 진행하던 중 각 슬라이더를 구독하는 개별적인 atom이 필요했다. 동일한 속성의 atom을 하나하나 생성하는 것이 비효율적이라고 생각했고, 다른 방법을 찾아보던 중 recoil에서 제공하는 atomFamily API를 알게 되었다. AtomFamily : 동일한 형태의 atom을 생성하는 팩토리 함수 리턴 atomfamily를 활용하면 특정 파라미터에 따른 독립적인 atom state를 생성할 수 있다. 이때 사용되는 특정 파라미터를 key라고 하겠다. 예를 들어 Todo 리스트의 개별적인 todo의 상태를 구독하는 atom을 만들고 싶다고 해보자. atomFamily는 다음과 같이 작성된다. 여기서 key 값은 id가 된다. const todoItemState = ato..

개요 4주간의 짧은 프리온보딩 인턴십이 끝났다. 짧은 과정에 비해 배우고 느낀 점이 많은 것 같다. 기술적으로는 물론이고 다양한 사람들과 의견을 나누고 코드를 분석하며 많은 생각을 하게 되어 간략하게 정리하여 회고를 작성해보고자 한다. 첫 동료학습 인턴십 과정에서는 세 개의 과제가 있었는데 그 중 두개의 과제는 동료학습으로 이루어졌다. 원티드에서 설명한 동료학습이란 팀원 모두가 전체의 기능을 구현한 후 토론을 통하여 각 기능에 대한 best practice를 도출하고 각 best practice들을 모아서 최종적인 결과물을 만들어내는 것을 의미했다. 우리 팀은 6명으로 이루어져 있었는데 현업 경험이 있으시고 개발에 숙련된 분들이 한두명씩 포함되어 있던 다른 팀과는 달리 팀원 모두가 개발문화에 능숙한 편이..

웹 개발과 관련된 글을 읽다보면 웹 표준, 웹 접근성, 웹 호환성이라는 용어가 종종 등장한다. 용어가 내뿜는 뉘앙스로 대충은 알아 듣고 있었지만 정확한 의미와 이것을 지키기 위해서는 어떻게 해야할 지를 정리한 글이다. 결론부터 말하자면 다음과 같다. 웹 표준 : 사용자가 어떤 브라우저나 기기를 사용하더라도 동일한 화면을 볼 수 있도록 하는 것 웹 접근성 : 어떤 상황이든 , 어떤 사람이든 동일한 정보를 제공받게 하는 것 웹 호환성 : 모든 브라우저에서 동일하게 작동하는 것 🌍 웹 표준 (Web Standards) 사용자가 어떤 브라우저나 기기를 사용하더라도 동일한 화면을 볼 수 있도록 하는 기법 초창기 웹 브라우저는 구현 방식이 각각 달라 브라우저별로 사이트를 만들어야 하는 비효율성이 발생했다. 웹 사용..

발생 에러 git을 사용하다가 다음과 같은 에러가 발생하였다. the git repository at ~~ has too many active changes only a subset of git features will be enabled 발생 이유 git init을 여러 디렉토리에서 실행하여 여러개의 git 파일이 생성되어서 나타난 문제였다. 나의 경우에는 루트 디렉토리와 client 디렉토리에 git init을 하는 바람에 에러가 발생했다. 해결 방법 중복 생성된 git 파일을 삭제해주어 루트 디렉토리에만 git파일이 존재하도록 하면 간단히 해결된다. .git 파일을 확인한다. ls -a .git 파일이 있는 것을 확인했다면 파일을 삭제한다. rm -r -f .git

유튜브 댓글 분석 서비스의 이런저런 변화과정을 담은.. 후기! 일단 냅다 사이트 주소부터 올리고 시작합니다 💻 첫 프로젝트 컴퓨터공학과 졸업작품으로 진행하게 된 프로젝트였다. 당시 웹 개발은 처음 접했기에 정말 서투른 점이 많았다. 별도의 프론트 프레임워크없이 VanillaJS + Bootstrap로 개발하였는데.. 결과물은 허접 그 자체였다. 그래도 이 프로젝트는 나에게 웹 개발자라는 진로를 꿈꾸게 해준 나의 미래에 나름 의미있는 프로젝트였다.! ➰ 디벨롭 계기 계기는 간단했다. 첫 프로젝트의 짙은 아쉬움.. 그리고 글로만 읽어보았던 Next를 사용해보고 싶었다. Next에 대한 블로그 글을 읽었는데 SSR이라는 방식 자체가 생소했고, 어떤 원리로 이루어지는 것인지 직접 경험하면서 느끼고 싶었다. 그래..

타입스크립트를 사용해서 블록체인의 기술을 간단히 구현해 볼 것이다. 프로젝트 설정하기 create-react-app과 같은 도구 없이 처음부터 프로젝트 세팅을 직접 할 것이다. 우선 프로젝트 디렉토리를 생성한다. mkdir typechain npm은 node.js로 만들어진 모듈을 쉽게 설치하고 관리하게 해주는 패키지 매니저이다. node.js와 함께 설치된다. npm init 명령어를 실행하면 package.json파일이 생성되면서 패키지를 초기화시켜준다. npm init -y 타입스크립트를 설치한다. D 옵션을 통하여 dependencies에 추가할 수 있다. npm i -D typescript 타입스크립트를 사용한다는 것을 알리기 위해 tsconfig.json 파일을 만든다. 이것은 타입스크립트의 ..

클래스 추상 클래스는 다른 클래스가 상속 받을 수 잇는 클래스다. 인스턴스를 직접 만들 수는 없다. 상속받는 클래스의 타입을 알려주는 것이라고 생각하면 된다. 추상 메소드는 메소드를 클래스 안에서 구현하지 않는 것이다. 상속받는 클래스가 구현한다. 구분 선언한 클래스 내 상속받은 클래스 내 인스턴스 private ⭕ ❌ ❌ protected ⭕ ⭕ ❌ public ⭕ ⭕ ⭕ static 함수 별도의 인스턴스 생성 없이 바로 사용이 가능한 클래스 내부의 함수 인터페이스 인터페이스는 속성 타입을 특정할 수 있게 해준다. type과의 차이점 둘 다 추상클래스를 대체하여 상속 가능하다. 오브젝트의 모양을 알려준다. 인터페이스는 활용되는 범위가 type보다 작다. type은 객체 속성 타입을 특정하는 것뿐만 아니..

Call signiture Call signiture은 코드에 마우스를 올리면 나오는 타입 정보이다. type Add = (a: number, b: number) => number; const add: Add = (a, b) => a + b; 함수를 만들기 전 직접 call signiture를 만들어서 type를 미리 선언한 후 Overloading 하나의 함수가 여러개의 call signiture를 가지고 있을 때 발생한다. 동일한 이름의 함수에서 파라미터만 달라지고 비슷한 로직이 반복될 때 사용된다. 함수 내에서 파라미터의 타입에 맞게 각각 구현한다. 파라미터의 개수가 같을 때 type Add = { (a: number, b: number): number; (a: number, b: string): ..