본문 바로가기

전체 글197

eslint prettier 코드 포맷팅 통합 내용 eslint 와 prettier 는 문법 오류를 방지하고 코드 포매팅을 통해 일관적인 코딩 컨벤션(코딩 규약)을 유지하여 코드 작성 및 협업시에 도움이 된다. 다만 이 두 가지가 겹치는 부분이 존재하는데 eslint 와 prettier 모두 코드 포매팅 기능을 제공하기 때문에 겹치는 상황이 생겨 코드작성이 힘들어질 수 있다. 위 과정을 해결할 수 있는 라이브러리가 두 가지가 있다. 관련 라이브러리 eslint-config-prettier eslint입장에서 불필요하거나 Prettier 와 충돌할 수 있는 모든 규칙을 제외해버린다. 단지 규칙을 꺼버리는 것이기에 당연히 다른 규칙과 함께 사용하는 경우에 의미가 있다. eslint-plugin-prettier Prettier의 규칙이 ESLint에 통합.. 2023. 6. 8.
줄 바꿈 형식 CR? LF? CRLF? 내용 VSC 하단에 CRLF 혹은 CR, LF 로 적힌 부분이 보이고 커서를 올려보면 줄 시퀀스의 끝 선택 이라는 문장을 볼 수 있다. CR? LF? CRLF? CR, LF 는 타자기를 쓸 때 사용했던 단어이며 타자기로 문서를 작성할 때 한 줄에 글자를 다 입력하여 아래 줄로 이동 하는 것이 Line Feed(LF) 이고, 왼쪽 가장 앞으로 밀어 주는 것이 Carrige Return(CR) 이다. 현재에 와서는 텍스트 파일에서 줄 바꿈을 나타내는 의미로 주로 쓰인다 CRLF (Carriage Return + Line Feed) 는 두 과정을 합친 것을 의미하며 아래 줄로 줄바꿈 후 첫번쨰 열로 이동하는 의미이다. 운영체제의 관점에서 줄바꿈에 쓰이는 메모리, 용량을 줄이고자 CR, LF 를 쓰기도 하며 C.. 2023. 6. 8.
URI 인코딩 및 디코딩 관련 js 메서드 내용 웹 개발시 url 과 관련된 내용을 다루는 상황이 빈번하게 나오지만 url 관련해서 몰랐던 내용이 있어 정리하려 한다. 웹페이지 구현 시 페이지 이동 및 라우팅 관련된 기능을 사용한다면 url 주소를 부분적으로라도 입력해서 사용하는 경우가 일반적인데 만약 주소 일부분에 한글과 같은 인코딩이 필요한 문자가 들어간다면 문제가 될 수 있다. 자동으로 인코딩 및 디코딩 되는 경우 또는 애초에 인코딩 및 디코딩 필요치 않은 문자를 사용한다면 상관없겠지만 문제를 예방하는 차원에서 명확히 처리해주는 js 메서드가 존재했다. 기본 개념 인코딩 : 인코딩은 정보를 다른 형식이나 표현으로 변환하는 과정(웹에서는 주로 문자를 특정 형식의 코드로 변경하는 것을 의미) 디코딩 : 디코딩은 인코딩된 정보를 다시 원래의 형태.. 2023. 6. 7.
[ 개발 이슈 ] maxlen 적용 이슈 eslint 는 prettier 를 사용해서 공통된 형식을 적용하기 위해서 여러 코드 규칙을 적용해둔 상황에서 tsx 파일에서 보이던 maxlen 룰이 ts 파일에서는 적용되지 않았고 100줄이 넘어가는 내용을 prettier 는 설정에 따라 줄을 넘겼고 그 내용은 화살표 함수가 있던 코드였기 때문에 eslint 의 arrow-body-style, implicit-arrow-linebreak 규칙에 따라 함수형식이 올바르지 않아 오류가 발생했다. 상황 정리 : ts 파일에서 maxlen 규칙이 적용되지 않음 화살표 함수가 포함된 코드가 100줄이 넘어가 prettier 함수의 리턴 내용을 줄바꿈함 arrow-body-style, implicit-arrow-linebreak 규칙에 따라 올바르지 못한 함수.. 2023. 5. 3.
커스텀 crousel (nextjs + ts + styled-components) 저장해두면 언젠가 쓸까해서 저장해두는 나의 커스텀 crousel 만들때는 참 오래걸렷는데 버리는 것도 한순간이군 사용 방법 ReactElement[] | ReactElement 형식의 children 을 받아 배열의 경우 매핑하여 슬라이드 배치 추가로 필요한 banner 가 있다면 받아서 배치 (딱히 필요없음) props 로 styleOption:{ height:CssValue } 받아 crousel 높이 설정 (width 는 자동으로 100% 상위 태그로 감싸서 넓이 조정하여 사용하는 방식) CssValue 는 따로 css 를 props 를 입력받을때 타입을 자세히 설정해두려고 만든 class 형식의 type 이며 간단하게 string 으로 조금 고쳐서 사용해도 상관없다. 보완점 css 입력 받는 부분.. 2023. 4. 20.
SVG 의 이해 및 배치 관련 내용 SVG 이해 SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 표현하기 위한 XML 기반의 마크업 언어로, 웹에서 그래픽을 표현하는 데 사용되는 형식입니다. SVG는 XML 형식을 사용하여 그래픽 요소들을 정의하고 조작할 수 있는 벡터 그래픽 포맷으로, 화면 크기에 독립적이며 고해상도 그래픽을 지원하며, 확대/축소가 가능하고 품질 손실 없이 크기를 조절할 수 있습니다. svg 에 많은 내용이 있지만 디자인에 관련된 내용도 있고 모두 알필요 없이 핵심적인 내용만 알아도 개발하는 입장에서 충분할 것 같다. SVG의 주요 특징 벡터 그래픽: 화면 크기에 독립적인 벡터 기반 그래픽을 사용하여 고해상도 디스플레이에 적합하며, 확대/축소에도 품질 손실이 없다. XML 기반: XML .. 2023. 4. 18.
Next.js 에 <Link /> 는 무엇인가 next/link Next.js 에서 제공하는 Routing 기능을 가진 태그 ※ Next.js 의 특별한 Routing 에 관한 내용을 참고하자 속성 href 필수 요소 탐색할 경로 또는 URL 객체 형태로 사용 할 수 있습니다. as 브라우저에서 클릭 시 이동할 링크를 미리 지정할 수 있는 기능을 제공,서버사이드 렌더링(Server-Side Rendering)과 같이 서버에서 렌더링하는 경우에 유용하게 사용하며 as prop은 href prop과 함께 사용하는 것이 일반적이다. 공식문서로는 이해가 힘들어 chatGPT 에게 많이 물어본 결과 href 의 값은 가변적일 수 있는데 SSR 상황에서 as 를 활용하면 미리 링크에대한 정보를 가지고 있는 셈이 된다. 추가적으로 성능상의 이점이 어는 정도 되는.. 2023. 4. 6.
Next.js getServerSideProps 에서 페이지 이동 방법 문제 상황 회원가입시 약관동의 이후 회원 정보 입력 페이지 이동하는 상황에서 약관동의 없이는 회원정보 입력페이지에 접속시 약관동의 페이지로 이동시키려 했다. getServerSideProps 는 페이지가 구성되기전 서버쪽에서 작업을 해주는 함수이므로 기존 클라이언트에서 사용되는 DOM 관련 메서드 나 routing 할 수 있는 메서드 등등 활용 할 수 없다. 만약 페이지 요청시에 들어온 쿼리정보를 토대로 적절여부를 따진 후에 지정된 페이지로 이동시키는 로직을 만들고자 할 때 getServerSideProps 페이지 이동은 제한적이다. (만약 페이지가 로드되고 쿼리정보를 확인해서 넘긴다면 어렵지 않겠지만 비효율적인 방법으로 보인다.) 구글링해서 답을 찾지 못하여 혹시나 해서 chatGPT 에게 답을 구해보.. 2023. 3. 31.
7. HTTP 헤더 - 2 인증 Authorization: 클라이언트 인증 정보를 서버에 전달 WWW-Authenticate: 리소스 접근시 필요한 인증 방법 정의 Authorization 클라이언트 인증 정보를 서버에 전달 Authorization: Basic xxxxxxxxxxxxxxxx WWW-Authenticate 리소스 접근시 필요한 인증 방법 정의 리소스 접근시 필요한 인증 방법 정의 일종의 가이드라인 401 Unauthorized 응답과 함께 사용 WWW-Authenticate: Newauth realm="apps", type=1, title="Login to \"apps\"", Basic realm="simple" 쿠키 Set-Cookie: 서버에서 클라이언트로 쿠키 전달(응답) Cookie: 클라이언트가 서버에서 .. 2023. 3. 23.
6. HTTP 헤더 - 1 HTTP 헤더 header-field = field-name ":" OWS field-value OWS (OWS:띄어쓰기 허용) HTTP 전송에 필요한 모든 부가정보 예) 메시지 바디의 내용, 메시지 바디의 크기, 압축, 인증, 요청 클라이언트, 서버 정보, 캐시 관리 정보... 표준 헤더가 많다 필요시 임의의 헤더 추가 가능 HTTP 헤더 RFC2616(과거) 헤더 General 헤더: 메시지 전체에 적용되는 정보, 예) Connection: close Request 헤더: 요청 정보, 예) User-Agent: Mozilla/5.0 (Macintosh; ..) Response 헤더: 응답 정보, 예) Server: Apache Entity 헤더: 엔티티 바디 정보, 예) Content-Type: te.. 2023. 3. 23.
5. HTTP 상태코드 HTTP 상태코드 상태 코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (Informational): 요청이 수신되어 처리중 2xx (Successful): 요청 정상 처리 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함 클라이언트가 인식할 수 없는 상태코드를 서버가 반환하면 상위 상태코드로 해석해서 처리함으로써 미래에 새로운 상태 코드가 추가되어도 클라이언트를 변경하지 않아도 되는 장점이 있다. 1xx (Informational) 요청이 수신되어 처리중 ※ 거의 사용하지 않음.. 2023. 3. 22.
4. HTTP 메서드 좋은 URI 설계 가장 중요한 것은 리소스 식별 리소스와 해당 리소스를 대상으로 하는 행위을 분리 리소스: 회원 행위: 조회, 등록, 삭제, 변경 HTTP 메서드 종류 주요메서드 GET: 리소스 조회 POST: 요청 데이터 처리, 주로 등록에 사용 PUT: 리소스를 대체, 해당 리소스가 없으면 생성 PATCH: 리소스 부분 변경 DELETE: 리소스 삭제 기타메서드 HEAD: GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환 OPTIONS: 대상 리소스에 대한 통신 가능 옵션(메서드)을 설명(주로 CORS에서 사용) CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정 TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행 GET 리소스 조회 서버에 전달하고.. 2023. 3. 22.

티스토리툴바