전체 글253

• [React] multipart/form-data 전송 https://velog.io/@shin6403/React-Form-Data-%EC%A0%84%EC%86%A1 [React] Form Data 전송 회원가입을 할때, 또는 어떤 페이지에서 파일(이미지), 제목, 내용을 DB에 저장하는 페이지가 있다고 가정했을때, 파일을 http 통신으로 전송 하려면 formData 객체를 이용하여 보내야 한다.formData 객 velog.io https://ko.javascript.info/formdata#ref-3760 FormData 객체 ko.javascript.info https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api [JS] 📚 FormData 사용법 & 응용.. Programming/React 2022. 11. 1.

• [CORS] "No 'Access-Control-Allow-Origin' header is present on the requested resource." 에러 https://kimyhcj.tistory.com/263 해결 방법 - No 'Access-Control-Allow-Origin' header is present on the requested resource. JavaScript 엔진 표준 스펙에 있는 동일 출처 정책(Same-Origin Policy)이라는 보안규칙으로 인해 발생한다. (JavaScript 로 다른 웹페이지에 접근할 때는 같은 출처 - 프로토콜, 호스트명, 포트 - 의 페이지 kimyhcj.tistory.com Programming/ETC 2022. 11. 1.

• [CORS] OPTIONS 메소드 https://hanamon.kr/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-http-options-%EB%A9%94%EC%86%8C%EB%93%9C%EB%A5%BC-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0%EC%99%80-cors%EB%9E%80/ [네트워크/HTTP] OPTIONS 메소드를 쓰는 이유와 CORS란? - 하나몬 ⚡️ HTTP OPTIONS 메소드를 쓰는 이유와 CORS란? ❗️CORS란? 웹 브라우저에서 외부 도메인 서버와 통신하기 위한 방식을 표준화한 HTTP 헤더 기반 메커니즘이다. 클라이언트와 서버가 서로 다른 도메 hanamon.kr Programming/ETC 2022. 11. 1.

• 

  [React] 음성 녹음, 녹음 파일(.weba) 다운로드 구현하기 싼타클리닉 서비스에서 구현했던 음성 녹음 및 녹음 파일 전송 기능 기록이다. react로 음성 녹음 기능을 구현해보자 갑자기 왜? 친구들과 프로젝트를 하던 중, 음성녹음 기능을 필요로 하는 웹을 구현하게 되었습니다... velog.io TS가 적용되지 않은 예제이므로 따로 처리해야 한다. 또한 deprecated된 메서드를 사용하고 있어 업데이트가 필요하다. 그러나 작동 자체에는 문제가 없다. import React, { useCallback, useState } from 'react'; import axios from 'axios'; import { ReactMediaRecorder } from 'react-media-recorder'; // https://stackoverflow.com/questio.. Programming/React 2022. 11. 1.

• 

  50분 면접 회고 오늘 어떤 기업 1차 면접에서 50분동안 면접을 봤다! 흔치 않은 경험이기도 하고, 배울 점도 많아서 당일 회고를 써본다. 1. 자기소개서는 각 기업에 맞게 작성하자 원티드 지원 기업들은 보통 공통 이력서 하나로 모두 지원을 했었는데, 그러다보니 각 기업에 딱 맞는 이력서는 아니었다. 오늘 면접에서도 내가 강조하고자 하는 부분과 다른 부분들이 강조된 것 같아 진땀 뺐던 순간들이 조금 있었다. 앞으로는 기업별로 이력서를 다르게 작성하는 게 맞는 것 같다. 2. Javascript의 작동 원리, Web의 작동 원리를 깊이 공부하자 두 번의 면접에서 모두 JS와 Web 관련 CS 질문들이 나왔다. 이번 면접 시간이 길어서 더 깊이 있는 질문이 나오기도 했는데, 역시 JS와 Web 관련 기초가 부족하다고 느꼈다.. My/Careerlog 2022. 11. 1.

• 

  [SSAFYcial] (프론트엔드 직무 뽀개기 - 4편) Next.js...누구세요? Programming/SSAFY 2022. 11. 1.

• [Git merge] merging 상태에서 빠져나가기 https://nochoco-lee.tistory.com/83 8.3: 진행중이던 merge 작업 취소하기 GitNotes.8-3.md 본 문서는 Git Notes for Professionals (라이센스:CC-BY-SA) 를 한글로 번역한 문서입니다. 번역상 오류가 있을 수 있으므로 정확한 내용은 원본 문서를 참고하세요. Section 8.3: 진행중이던 me.. nochoco-lee.tistory.com Programming/Git 2022. 11. 1.

• JWT란? https://velog.io/@ye-ji/JWTJson-Web-Token%EC%97%90%EC%84%9C-%EC%A0%95%EB%B3%B4%EB%B9%BC%EA%B8%B0 JWT(Json Web Token)란 무엇인가!! 정리해보쟈~ 1. JWT(Json Web Token)란? [ JWT 개념 ] JWT(Jso velog.io Programming/ETC 2022. 11. 1.

• [Javascript] Optional Chaining 연산자: '?.~' https://wizii.tistory.com/37 [javascript] ?. 옵셔널 체이닝 연산자 자바스크립트에서의 물음표 점 자바스크립트 코드를 보다가 ?. 혹은 ?? 과 같은 문법을 본 적이 있나요? ES11에서 신규 도입된 연산자 입니다! ?. => 옵셔널 체이닝 연산자 개발하다가 object의 proper wizii.tistory.com Programming/Javascript, Typescript 2022. 10. 30.

• 

  [React + TS] "Dispatch<SetStateAction<boolean>>; }' is not assignable to type 'IntrinsicAttributes'" Dispatch; }' is not assignable to type 'IntrinsicAttributes' 에러 해결 과정을 담은 글이다. 부모 컴포넌트(calendarPage.tsx) import React from 'react'; import { CalendarPageContainer } from './styles'; import { CalendarPageTitle } from './styles'; import { AdventCalendarBox } from './styles'; import { CalendarDetail } from '../calendarDetail'; export function CalendarPage() { // 모달창 노출 여부 const [calendarOpen, setCa.. Programming/React 2022. 10. 27.

• [CSS] Flexbox 심화 - 반응형 웹 https://forgottenknowledge.tistory.com/m/entry/CSS-%ED%94%8C%EB%A0%89%EC%8A%A4-Flexbox-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EC%9D%84-%EC%9C%84%ED%95%B4 [CSS] 플렉스 Flexbox, 반응형 웹을 위해 반응형웹을 위한 플렉스(Flex) 플렉스(flex)는 크기가 다른 스크린에서도 왠만하면 정돈되서 보여준다. 반응형 웹을 만들기위해 기본이 되는 요소인것 같다. 사용법 display: flex; flex-direction 정렬 방 forgottenknowledge.tistory.com Programming/HTML, CSS 2022. 10. 27.

• 20221021(금) 개발일지 1. 하루 종일 발표 준비하기. 기획안 중간 발표를 맡게 되었는데 이럴 때 확실히 인턴 때의 하드 트레이닝이 도움이 된다고 느끼는 게 있다. 내가 말하고 싶은 것, 내가 생각하는 가치는 별로 고려 대상이 아니다. 그보다는 내 말을 독자들이 어떻게 받아들이는가, 독자들이 내가 전달하는 가치로부터 얻을 수 있는 효용이 무엇인가가 글이나 아이디어의 성패를 판가름 짓는다. Programming/SSAFY 2022. 10. 22.

• 20221020(목) 개발일지 1. 마지막 (자율) 프로젝트 기획이 한 번 변경을 거쳐 마무리되었다. 아마 디자인을 굉장히 많이 하는 프로젝트가 되지 않을까 싶은데 (+ 자연어 처리), 처음으로 디자인 에셋을 구매해준다고 하니 도전적인 프로젝트가 될 듯하다!(디자인은 항상 내가 해오기도 했고..? ㅋㅋㅋㅋㅋ) 2. 코테 스터디를 진행하고 있는데, 확실히 어른들과 하니까 동기 부여가 많이 된다. 12월 19일까지 열심히 해서 실력 업! 시켜보는 걸로! 3. 써야 할 서류가 진짜 진짜 많다. 아마 10월까지는 이런 템포로 계속 갈 듯 한데 그래도 최대한 놓치지 않고 써보는 중이다. 써보면서 인생도 돌아보고, 메말랐던 글쓰기 실력도 다시 좀 찾아오고 겸사겸사 좋은 것 같다 ㅋㅋ Programming/SSAFY 2022. 10. 20.

• 

  [SSAFYcial] 생생한 일 이야기 가득한 기업 기술 블로그 회사들도 기술 블로그를 한다구요? 생생한 일 이야기 가득한 기업 기술 블로그 SSAFY 7기 김혜린 기자 Programming/SSAFY 2022. 10. 18.

• 

  Base64 인코딩이란 무엇이고, 왜 필요한가? 특화 프로젝트에서 나를 가장 고생시킨 Base64인코딩, Google Cloud Vision API에 이미지 URI를 보내줘도 읽지 못하는데 공식 문서와 똑같이 코드를 작성해도 마찬가지였다. 해답은 base64 encoding을 true로 바꿔주는 것. 하지만 정확히 어떤 형태의 코드로 적용해야 하는 지 알 수 없어 StackOverFlow, GitHub, 이름 모를 영어, 중국어 사이트들을 주말 이틀 동안 헤멘 후에야 Google Cloud Vision API의 OCR 인식 기술을 사용할 수 있었다. 그런데 Base64 인코딩이 뭐길래? 궁금해서 조사해 봤다. 소스코드(.jsx) import * as ImagePicker from 'expo-image-picker'; import { Camera } f.. Programming/ETC 2022. 10. 17.